Simplify UIKit Development Experience / Workflow

.nvmrc

@@ -1 +1 @@
-12.9.0
+12.12.0

package.json

@@ -39,7 +39,7 @@
     "clean": "git clean -dfx",
     "publish": "npx lerna publish -m \"[skip travis] chore(release): publish %s\"",
     "postpublish": "auto release",
-    "preview:hbs": "cd packages/development-edition-engine-handlebars && npx patternlab add --starterkits '@pattern-lab/starterkit-handlebars-vanilla' && npm run pl:build"
+    "preview:hbs": "cd packages/development-edition-engine-handlebars && npx patternlab add --starterkits @pattern-lab/starterkit-handlebars-vanilla && npm run pl:build"
   },
   "nyc": {
     "exclude": [

packages/core/src/index.js

@@ -77,6 +77,30 @@ const patternlab_module = function(config) {
       return patternlab.getVersion();
     },
 
+    /**
+     * Returns the current pattern lab configuration being used
+     *
+     * @memberof patternlab
+     * @name getConfig
+     * @instance
+     * @returns {object} the current patternlab-node config (defaults + customizations)
+     */
+    getConfig() {
+      return config;
+    },
+
+    /**
+     * Returns if Pattern Lab is busy compiling or not
+     *
+     * @memberof patternlab
+     * @name isBusy
+     * @instance
+     * @returns {boolean} if pattern lab is currently busy compiling
+     */
+    isBusy: function() {
+      return patternlab.isBusy;
+    },
+
     /**
      * Builds patterns, copies assets, and constructs user interface
      *

packages/core/src/lib/patternlab.js

@@ -47,6 +47,7 @@ module.exports = class PatternLab {
     // Load up engines please
     this.engines = patternEngines;
     this.engines.loadAllEngines(config);
+    this.isBusy = false;
 
     //
     // INITIALIZE EMPTY GLOBAL DATA STRUCTURES

packages/core/src/lib/watchPatternLabFiles.js

@@ -21,11 +21,11 @@ const watchPatternLabFiles = (
     assetDirectories.source.meta,
   ];
   const globalPaths = globalSources.map(globalSource =>
-    path.join(basePath, globalSource, '*')
+    path.join(path.resolve(basePath, globalSource), '*')
   );
 
   _.each(globalPaths, globalPath => {
-    logger.debug(`Pattern Lab is watching ${globalPath} for changes`);
+    logger.debug(`Pattern Lab is watching ${globalPath} for changes!`);
 
     if (patternlab.watchers[globalPath]) {
       patternlab.watchers[globalPath].close();
@@ -80,13 +80,14 @@ const watchPatternLabFiles = (
     .concat(patternlab.engines.getSupportedFileExtensions())
     .map(dotExtension =>
       path.join(
-        basePath,
-        assetDirectories.source.patterns,
+        path.resolve(basePath, assetDirectories.source.patterns),
         `/**/*${dotExtension}`
       )
     );
   _.each(patternWatches, patternWatchPath => {
-    logger.debug(`Pattern Lab is watching ${patternWatchPath} for changes`);
+    logger.debug(
+      `Pattern Lab is watching ${patternWatchPath} for changes - local!`
+    );
 
     if (patternlab.watchers[patternWatchPath]) {
       patternlab.watchers[patternWatchPath].close();

packages/development-edition-engine-handlebars/.nvmrc

@@ -1 +1 @@
-10.0.0
+12.12.0

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",
@@ -24,7 +25,7 @@
     "url": "git://github.com/pattern-lab/patternlab-node.git"
   },
   "engines": {
-    "node": ">=10.0"
+    "node": ">=12.12.0"
   },
   "dependencies": {
     "@pattern-lab/cli": "^5.3.0",

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/.gitignore

@@ -4,3 +4,6 @@ src/bower_components/*
 .DS_Store
 /.eslintignore
 dist
+public
+www
+dependencyGraph.json

packages/uikit-workshop/.nvmrc

@@ -1 +1 @@
-10.0.0
+12.12.0

packages/uikit-workshop/README.md

@@ -27,3 +27,24 @@ In order to modify these assets you need to install the following:
 ## Development Set-up
 
 Read the [contribution guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/uikit-workshop/.github/CONTRIBUTING.md)
+
+
+## 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 the default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.
+
+### Step 3
+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/development-edition-engine-handlebars
+yarn dev
+```

packages/uikit-workshop/build-tools.js

@@ -0,0 +1,16 @@
+const webpackServer = require('@pattern-lab/uikit-workshop/build/webpack-server.js');
+const path = require('path');
+const configFilePath = path.join(process.cwd(), './patternlab-config.json');
+const config = require(configFilePath);
+const patternlab = require('@pattern-lab/core')(config);
+
+// build + start watch mode
+patternlab.build({
+  watch: true,
+  cleanPublic: true,
+});
+
+webpackServer.serve(
+  patternlab,
+  path.resolve(process.cwd(), config.paths.public.root)
+);

packages/uikit-workshop/build/webpack-dev-server-waitpage/index.js

@@ -0,0 +1,88 @@
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+const webpack = require('webpack');
+
+const data = {
+  webpackVersion: webpack.version,
+  webpackDevServerVersion: '2.4.1',
+  progress: [[0]],
+};
+
+/**
+ * @typedef {object} WebpackDevServerWaitpageOptions
+ * @property title {string}
+ * @property theme {string}
+ * @property template {string}
+ * @property disableWhenValid {boolean}
+ */
+
+/** @type {WebpackDevServerWaitpageOptions} */
+const defaultOptions = {
+  title: 'Development Server',
+  theme: 'pl-loading',
+  disableWhenValid: true,
+};
+
+/**
+ * webpack-dev-server-waitpage middleware factory
+ * @param server {Server} The server argument passed to webpack-dev-server's 'before' function
+ * @param [options] {WebpackDevServerWaitpageOptions} An optional object of options (see Readme for more information)
+ * @returns {Function} Koa compatible middleware
+ */
+const webpackDevServerWaitpage = (server, options) => {
+  if (!server)
+    throw new Error(
+      `webpack-dev-server's compilers argument must be supplied as first parameter.`
+    );
+
+  /** @type {WebpackDevServerWaitpageOptions} */
+  options = Object.assign({}, defaultOptions, options);
+
+  const compilers = server.compilers;
+  //  || [server.middleware.context.compiler];
+  for (let i = 0; i < compilers.length; i++) {
+    new webpack.ProgressPlugin(function() {
+      data.progress[i] = arguments;
+    }).apply(compilers[i]);
+  }
+
+  let template = options.template;
+  if (!template) {
+    if (
+      fs
+        .readdirSync(__dirname)
+        .filter(x => x.endsWith('.ejs'))
+        .map(x => x.slice(0, -4))
+        .indexOf(options.theme) < 0
+    )
+      throw new Error(`Unknown theme provided: ${options.theme}`);
+    template = fs.readFileSync(
+      path.resolve(__dirname, options.theme + '.ejs'),
+      'utf8'
+    );
+  }
+
+  // eslint-disable-next-line no-return-assign
+  Object.keys(options).forEach(key => (data[key] = options[key])); // expend data with options
+
+  let wasValid = false;
+
+  return async (req, res, next) => {
+    const valid = data.progress.every(p => p[0] === 1);
+    wasValid = wasValid || valid;
+
+    if (
+      valid || // already valid
+      (options.disableWhenValid && wasValid) || // if after valid state should be disabled
+      req.method !== 'GET'
+    ) {
+      return await next();
+    } else {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(ejs.render(template, data));
+    }
+  };
+};
+
+module.exports = webpackDevServerWaitpage;