feat(infrastructure): Add build command for static demo assets (#1589)

New command: `npm run build:demo`.

Outputs static `.css`, `.js`, and `.html` demo files to the `build/` directory. These files can be uploaded to a static file hosting service like [Firebase Hosting](https://firebase.google.com/docs/hosting/) to create a publicly-visible demo.

Note that this command emits `.css` files, _not_ `.css.js` files. As such, it also rewrites the HTML to include `.css` instead of `.css.js`.

package.json

@@ -4,9 +4,10 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "mkdirp build && webpack --progress --colors",
+    "build:demo": "cross-env MDC_ENV=development MDC_BUILD_STATIC_DEMO_ASSETS=true MDC_WRAP_CSS_IN_JS=false npm run build",
     "build:min": "mkdirp build && cross-env MDC_ENV=production webpack -p --progress --colors",
     "changelog": "standard-changelog -i CHANGELOG.md -k packages/material-components-web/package.json -w",
-    "clean": "del-cli build/**",
+    "clean": "del-cli build/** build",
     "commitmsg": "validate-commit-msg",
     "dist": "npm run clean && npm run build && npm run build:min",
     "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0",
@@ -51,6 +52,7 @@
     "eslint-config-google": "^0.8.1",
     "eslint-plugin-mocha": "^4.8.0",
     "extract-text-webpack-plugin": "^3.0.0",
+    "fs-extra": "^4.0.2",
     "glob": "^7.1.1",
     "google-closure-compiler": "^20170521.0.0",
     "husky": "^0.14.0",

webpack.config.js

@@ -16,23 +16,28 @@
 
 'use strict';
 
+const os = require('os');
 const path = require('path');
+
+const fsx = require('fs-extra');
 const glob = require('glob');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-const OUT_PATH = path.resolve('./build');
-// Used with webpack-dev-server
-const PUBLIC_PATH = '/assets/';
+const OUT_DIR_ABS = path.resolve('./build');
+const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server and MDC_BUILD_STATIC_DEMO_ASSETS
+
 const IS_DEV = process.env.MDC_ENV === 'development';
 const IS_PROD = process.env.MDC_ENV === 'production';
+
 const WRAP_CSS_IN_JS = process.env.MDC_WRAP_CSS_IN_JS !== 'false' && IS_DEV;
 // Source maps break extract-text-webpack-plugin, so they need to be disabled when WRAP_CSS_IN_JS is set to false.
 const GENERATE_SOURCE_MAPS =
     process.env.MDC_GENERATE_SOURCE_MAPS === 'true' ||
     (process.env.MDC_GENERATE_SOURCE_MAPS !== 'false' && IS_DEV && WRAP_CSS_IN_JS);
 const DEVTOOL = GENERATE_SOURCE_MAPS ? 'source-map' : false;
 const GENERATE_DEMO_THEMES = process.env.MDC_GENERATE_DEMO_THEMES === 'true' && IS_DEV;
+const BUILD_STATIC_DEMO_ASSETS = process.env.MDC_BUILD_STATIC_DEMO_ASSETS === 'true';
 
 const banner = [
   '/*!',
@@ -92,12 +97,60 @@ const createCssLoaderConfig = () =>
 
 const createCssExtractTextPlugin = () => new ExtractTextPlugin(CSS_FILENAME_OUTPUT_PATTERN);
 
+class PostCompilePlugin {
+  constructor(fn) {
+    this.fn = fn;
+  }
+
+  apply(compiler) {
+    compiler.plugin('done', (stats) => this.fn(stats));
+  }
+}
+
+const createStaticDemoPlugin = () => {
+  return new PostCompilePlugin(() => {
+    if (!BUILD_STATIC_DEMO_ASSETS || !fsx.existsSync(OUT_DIR_ABS)) {
+      return;
+    }
+
+    const demosDirAbs = path.resolve('./demos');
+    const tmpDirAbs = fsx.mkdtempSync(path.join(os.tmpdir(), 'mdc-web-demo-output-'));
+
+    const copyOptions = {
+      filter: (src) => {
+        return !/\.(scss|css.js)$/.test(src);
+      },
+    };
+
+    fsx.copySync(demosDirAbs, tmpDirAbs, copyOptions);
+    fsx.copySync(OUT_DIR_ABS, path.join(tmpDirAbs, DEMO_ASSET_DIR_REL), copyOptions);
+
+    if (!WRAP_CSS_IN_JS) {
+      glob.sync(path.join(tmpDirAbs, '**/*.html'))
+        .forEach((absPath) => {
+          const oldHtml = fsx.readFileSync(absPath, {encoding: 'utf8'});
+          const newHtml = oldHtml.replace(
+            /<script src="([^"]+\.css)\.js"><\/script>/ig,
+            '<link rel="stylesheet" href="$1">');
+          fsx.writeFileSync(absPath, newHtml, {encoding: 'utf8'});
+        });
+    }
+
+    // The `npm run build` command emits JS/CSS files directly to the $REPO/build/ directory (for distribution via npm).
+    // The `npm run build:demo` command, however, outputs _all_ static demo files (including HTML and images).
+    // Because the demo site expects JS/CSS files to be in /assets/, we need to reorganize the output folders to combine
+    // $REPO/demos/ and $REPO/build/ such that the demo site's import paths don't need to change.
+    fsx.removeSync(OUT_DIR_ABS);
+    fsx.moveSync(tmpDirAbs, OUT_DIR_ABS);
+  });
+};
+
 module.exports = [{
   name: 'js-all',
   entry: path.resolve('./packages/material-components-web/index.js'),
   output: {
-    path: OUT_PATH,
-    publicPath: PUBLIC_PATH,
+    path: OUT_DIR_ABS,
+    publicPath: DEMO_ASSET_DIR_REL,
     filename: 'material-components-web.' + (IS_PROD ? 'min.' : '') + 'js',
     libraryTarget: 'umd',
     library: 'mdc',
@@ -150,8 +203,8 @@ if (!IS_DEV) {
       toolbar: [path.resolve('./packages/mdc-toolbar/index.js')],
     },
     output: {
-      path: OUT_PATH,
-      publicPath: PUBLIC_PATH,
+      path: OUT_DIR_ABS,
+      publicPath: DEMO_ASSET_DIR_REL,
       filename: 'mdc.[name].' + (IS_PROD ? 'min.' : '') + 'js',
       libraryTarget: 'umd',
       library: ['mdc', '[name]'],
@@ -202,8 +255,8 @@ if (!IS_DEV) {
       'mdc.typography': path.resolve('./packages/mdc-typography/mdc-typography.scss'),
     },
     output: {
-      path: OUT_PATH,
-      publicPath: PUBLIC_PATH,
+      path: OUT_DIR_ABS,
+      publicPath: DEMO_ASSET_DIR_REL,
       filename: CSS_JS_FILENAME_OUTPUT_PATTERN,
     },
     devtool: DEVTOOL,
@@ -236,8 +289,8 @@ if (IS_DEV) {
     name: 'demo-css',
     entry: demoStyleEntry,
     output: {
-      path: OUT_PATH,
-      publicPath: PUBLIC_PATH,
+      path: OUT_DIR_ABS,
+      publicPath: DEMO_ASSET_DIR_REL,
       filename: CSS_JS_FILENAME_OUTPUT_PATTERN,
     },
     devtool: DEVTOOL,
@@ -250,6 +303,7 @@ if (IS_DEV) {
     plugins: [
       createCssExtractTextPlugin(),
       createBannerPlugin(),
+      createStaticDemoPlugin(),
     ],
   });
 }