refactor: update UIKit build to work in whatever PL folder the build script is called!

Author: sghoweri

packages/development-edition-engine-handlebars/README.md

@@ -10,3 +10,19 @@ This Development Edition is a variant of [Edition Node](https://github.com/patte
 * Build and test against Handlebars pattern tree
 
 > Development Editions of Pattern Lab provide the ability to work on and commit changes to select packages within the overall Pattern Lab [ecosystem](http://patternlab.io/docs/advanced-ecosystem-overview.html). This Edition is NOT stable.
+
+
+## Working on Pattern Lab's UI Locally
+
+### Step 1: Install Dependencies
+Run the following in the root of the Pattern Lab repo:
+
+```
+yarn run setup
+```
+
+### Step 2 (Optional)
+If you want to build using a fuller set of examples than what comes with this default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.
+
+### Step 3
+Finally, go back into this folder, `cd packages/development-edition-engine-handlebars`, and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`

packages/development-edition-engine-handlebars/package.json

@@ -8,7 +8,8 @@
     "pl:help": "patternlab --help",
     "pl:install": "patternlab install --config ./patternlab-config.json",
     "pl:serve": "patternlab serve --config ./patternlab-config.json",
-    "pl:version": "patternlab --version"
+    "pl:version": "patternlab --version",
+    "dev": "node ./node_modules/@pattern-lab/uikit-workshop/build-tools.js"
   },
   "keywords": [
     "Pattern Lab",

packages/edition-twig/README.md

@@ -0,0 +1,11 @@
+## Working on Pattern Lab's UI Locally
+
+### Step 1: Install Dependencies
+Run the following in the root of the Pattern Lab repo:
+
+```
+yarn run setup
+```
+
+### Step 2
+Finally, go back into this folder, `cd packages/edition-twig`, and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`

packages/edition-twig/package.json

@@ -19,7 +19,8 @@
     "install": "patternlab install --config ./patternlab-config.json",
     "serve": "patternlab serve --config ./patternlab-config.json",
     "start": "npm run serve",
-    "version": "patternlab --version"
+    "version": "patternlab --version",
+    "dev": "node ./node_modules/@pattern-lab/uikit-workshop/build-tools.js"
   },
   "dependencies": {
     "@pattern-lab/cli": "^5.3.0",

packages/uikit-workshop/README.md

@@ -42,9 +42,9 @@ yarn run setup
 If you want to build using a fuller set of examples than what comes with the default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.
 
 ### Step 3
-Finally go into the UIKit folder and start up the local dev server which watches UIKit and the Handlebars demo for changes, live reloads, etc.
+Finally, go into the `packages/development-edition-engine-handlebars` or `packages/edition-twig` folder and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`
 
 ```
-cd packages/uikit-workshop
-yarn start
+cd packages/development-edition-engine-handlebars
+yarn dev
 ```

packages/uikit-workshop/build-tools.js

@@ -1,53 +1,7 @@
-const webpackServer = require('./build/webpack-server.js');
+const webpackServer = require('@pattern-lab/uikit-workshop/build/webpack-server.js');
 const path = require('path');
-const fs = require('fs-extra');
-
-fs.mkdirp('./node_modules/@pattern-lab/');
-// clear any previously generated dependency graph files if present
-if (fs.existsSync('./dependencyGraph.json')) {
-  fs.unlinkSync('./dependencyGraph.json');
-}
-fs.ensureSymlink(__dirname, './node_modules/@pattern-lab/uikit-workshop');
-
-const configKeysEndingWithASlash = [
-  'root',
-  'patterns',
-  'data',
-  'meta',
-  'annotations',
-];
-
-const configFilePath =
-  '../development-edition-engine-handlebars/patternlab-config.json';
+const configFilePath = path.join(process.cwd(), './patternlab-config.json');
 const config = require(configFilePath);
-
-// adjust the config to output to a temp `www` folder locally for testing
-Object.keys(config.paths.source).forEach(key => {
-  const value = config.paths.source[key];
-
-  if (typeof value === 'string' && value.includes('source')) {
-    config.paths.source[key] = path.relative(
-      __dirname,
-      path.resolve(__dirname, path.dirname(configFilePath), value)
-    );
-  }
-
-  if (configKeysEndingWithASlash.includes(key)) {
-    config.paths.source[key] = config.paths.source[key] + '/';
-  }
-});
-
-Object.keys(config.paths.public).forEach(key => {
-  const value = config.paths.public[key];
-
-  if (typeof value === 'string' && value.includes('public')) {
-    config.paths.public[key] = config.paths.public[key].replace(
-      'public',
-      'www'
-    );
-  }
-});
-
 const patternlab = require('@pattern-lab/core')(config);
 
 // build + start watch mode
@@ -56,4 +10,7 @@ patternlab.build({
   cleanPublic: true,
 });
 
-webpackServer.serve(patternlab);
+webpackServer.serve(
+  patternlab,
+  path.resolve(process.cwd(), config.paths.public.root)
+);

packages/uikit-workshop/build/webpack-server.js

@@ -12,17 +12,17 @@ const portfinder = require('portfinder');
 
 const fileHashes = {};
 
-// @todo: move these configs + make customizable?
-const buildDir = 'www';
-const root = path.resolve(__dirname, `../${buildDir}`);
-const preferredPort = 3000;
-portfinder.basePort = preferredPort;
+async function serve(patternlab, buildDir = 'public') {
+  // @todo: move these configs + make customizable?
+  const root = path.resolve(__dirname, `${buildDir}`);
+  const preferredPort = 3000;
+  portfinder.basePort = preferredPort;
 
-async function serve(patternlab) {
   const webpackConfigs = await webpackConfig({
     watch: false,
     prod: false,
-    buildDir: path.resolve(__dirname, `../${buildDir}`),
+    buildDir: root,
+    rootDir: process.cwd(),
   });
 
   const port = await portfinder
@@ -47,7 +47,10 @@ async function serve(patternlab) {
     },
     // only reload the Webpack-generated HTML files when the contents have changed
     {
-      match: [`${root}/*.html`, `${root}/styleguide/html/*.html`],
+      match: [
+        path.join(process.cwd(), `${root}/*.html`),
+        path.join(process.cwd(), `${root}/styleguide/html/*.html`),
+      ],
       fn: async function(event, filePath) {
         let updatedHash = false;
 
@@ -100,9 +103,9 @@ async function serve(patternlab) {
       app.use(
         webpackDevMiddleware(compiler, {
           quiet: true,
-          stats: 'none',
+          stats: 'errors-warnings',
           writeToDisk: true,
-          logLevel: 'silent',
+          logLevel: 'error',
         })
       );
 

packages/uikit-workshop/package.json

@@ -35,16 +35,16 @@
     "@pattern-lab/core": "^5.3.0",
     "@pattern-lab/engine-handlebars": "^5.0.0",
     "@pattern-lab/engine-mustache": "^5.0.0",
-    "browser-sync": "^2.26.7",
     "better-opn": "^1.0.0",
+    "browser-sync": "^2.26.7",
     "ejs": "^2.7.2",
     "express": "^4.17.1",
-    "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^8.1.0",
     "hasha": "^5.1.0",
     "portfinder": "^1.0.25",
     "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0"
+    "webpack-hot-middleware": "^2.25.0",
+    "webpackbar": "^4.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.6.4",

packages/uikit-workshop/webpack.config.js

@@ -13,13 +13,14 @@ const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const argv = require('yargs').argv;
 const merge = require('webpack-merge');
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const WebpackBar = require('webpackbar');
 
 const cosmiconfig = require('cosmiconfig');
 const explorer = cosmiconfig('patternlab');
 
 // @todo: wire these two ocnfigs up to use cosmicconfig!
 const defaultConfig = {
+  rootDir: process.cwd(),
   buildDir: './dist',
   prod: argv.watch ? false : true, // or false for local dev
   sourceMaps: true,
@@ -129,9 +130,7 @@ module.exports = function(apiConfig) {
     ];
 
     const webpackConfig = {
-      stats: {
-        logging: 'none',
-      },
+      stats: 'errors-warnings',
       performance: {
         hints: false,
       },
@@ -143,7 +142,7 @@ module.exports = function(apiConfig) {
         },
       },
       output: {
-        path: path.resolve(process.cwd(), `${config.buildDir}/styleguide`),
+        path: path.resolve(config.rootDir, `${config.buildDir}/styleguide`),
         publicPath: `${config.publicPath}`,
         filename: '[name].js',
         chunkFilename: `js/[name]-chunk-[chunkhash].js`,
@@ -254,7 +253,7 @@ module.exports = function(apiConfig) {
           : [],
       },
       plugins: [
-        new FriendlyErrorsWebpackPlugin(),
+        new WebpackBar(),
         new CopyPlugin(config.copy),
         new NoEmitPlugin(['css/pattern-lab.js']),
       ],
@@ -279,9 +278,15 @@ module.exports = function(apiConfig) {
 
     const legacyConfig = merge(webpackConfig, {
       entry: {
-        'js/patternlab-pattern': './src/scripts/patternlab-pattern.js',
-        'js/patternlab-viewer': './src/scripts/patternlab-viewer.js',
-        'css/pattern-lab': './src/sass/pattern-lab.scss',
+        'js/patternlab-pattern': path.join(
+          __dirname,
+          './src/scripts/patternlab-pattern.js'
+        ),
+        'js/patternlab-viewer': path.join(
+          __dirname,
+          './src/scripts/patternlab-viewer.js'
+        ),
+        'css/pattern-lab': path.join(__dirname, './src/sass/pattern-lab.scss'),
       },
       module: {
         rules: [
@@ -309,9 +314,15 @@ module.exports = function(apiConfig) {
         mainFields: ['esnext', 'jsnext:main', 'browser', 'module', 'main'],
       },
       entry: {
-        'js/patternlab-pattern': './src/scripts/patternlab-pattern.modern.js',
-        'js/patternlab-viewer': './src/scripts/patternlab-viewer.modern.js',
-        'css/pattern-lab': './src/sass/pattern-lab.scss',
+        'js/patternlab-pattern': path.join(
+          __dirname,
+          './src/scripts/patternlab-pattern.modern.js'
+        ),
+        'js/patternlab-viewer': path.join(
+          __dirname,
+          './src/scripts/patternlab-viewer.modern.js'
+        ),
+        'css/pattern-lab': path.join(__dirname, './src/sass/pattern-lab.scss'),
       },
       output: {
         path: path.resolve(process.cwd(), `${config.buildDir}/styleguide`),
@@ -351,7 +362,7 @@ module.exports = function(apiConfig) {
         ),
         new HtmlWebpackPlugin({
           filename: '../index.html',
-          template: 'src/html/index.html',
+          template: path.resolve(__dirname, 'src/html/index.html'),
           inject: false,
         }),
         new MiniCssExtractPlugin({