feat: major improvements to local UIKit workflow

packages/development-edition-engine-handlebars/build-tools.js

@@ -0,0 +1,114 @@
+// const serve = require('/Users/ghows/sites/pl-node/packages/cli/bin/serve.js');
+// const config = require('/Users/ghows/sites/pl-node/packages/development-edition-engine-handlebars/patternlab-config.json');
+
+// // console.log(config);
+// serve(config);
+
+const path = require('path');
+const fs = require('fs-extra');
+
+fs.mkdirp('./node_modules/@pattern-lab/');
+
+fs.ensureSymlink(__dirname, './node_modules/@pattern-lab/uikit-workshop')
+  .then(() => {
+    console.log('success!');
+  })
+  .catch(err => {
+    console.error(err);
+  });
+
+// // With a callback:
+// fs.ensureSymlink(
+//   __dirname,
+//   './node_modules/@pattern-lab/uikit-workshop',
+//   // err => {
+//   //   fs.symlinkSync(__dirname, './node_modules/@pattern-lab/uikit-workshop');
+//   //   // symlink has now been created, including the directory it is to be placed in
+//   // }
+// );
+
+// '/Users/ghows/sites/pl-node/packages/uikit-workshop/node_modules/@pattern-lab/uikit-workshop/views/partials/general-header.mustache
+
+const configKeysEndingWithASlash = [
+  'root',
+  'patterns',
+  'data',
+  'meta',
+  'annotations',
+];
+
+// const config = require('../development-edition-engine-handlebars/patternlab-config.json');
+
+const config = require('./patternlab-config.json');
+
+// 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.resolve(
+//       __dirname,
+//       '../development-edition-engine-handlebars/',
+//       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] = path.relative(
+//       __dirname,
+//       path.resolve(
+//         __dirname,
+//         '../development-edition-engine-handlebars/',
+//         value
+//       )
+//     );
+//   }
+
+//   if (configKeysEndingWithASlash.includes(key)) {
+//     config.paths.public[key] = config.paths.public[key] + '/';
+//   }
+
+//   if (key === 'styleguide') {
+//     config.paths.public[key] = config.paths.public[key] + '/';
+//   }
+// });
+
+// Object.keys(config.paths.public).forEach(key => {
+//   const value = config.paths.public[key];
+//   if (typeof value === 'string' && value.includes('public')) {
+//     config.paths.source[key] = path.relative(
+//       __dirname,
+//       path.resolve(
+//         __dirname,
+//         // 'public',
+//         value
+//       )
+//     );
+//   }
+// });
+// config.paths.public.root = path.relative(__dirname, 'public');
+
+console.log(config);
+
+const patternlab = require('@pattern-lab/core')(config);
+
+// build, optionally watching or choosing incremental builds
+// patternlab.build({
+//   cleanPublic: true,
+//   watch: true,
+// });
+
+// console.log(patternlab);
+
+// or build, watch, and then self-host
+patternlab.build({
+  watch: true,
+  cleanPublic: true,
+});

packages/uikit-workshop/.gitignore

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

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,57 @@
+const webpackServer = require('./build/webpack-server.js');
+const path = require('path');
+const fs = require('fs-extra');
+
+fs.mkdirp('./node_modules/@pattern-lab/');
+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] + '/';
+  }
+});
+
+console.log(config);
+
+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;