Merge e4897fb into 4954b28

.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/package.json

@@ -24,7 +24,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/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 UIKit folder and start up the local dev server which watches UIKit and the Handlebars demo for changes, live reloads, etc.
+
+```
+cd packages/uikit-workshop
+yarn start
+```

packages/uikit-workshop/build-tools.js

@@ -0,0 +1,59 @@
+const webpackServer = require('./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 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
+patternlab.build({
+  watch: true,
+  cleanPublic: true,
+});
+
+webpackServer.serve(patternlab);

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;