Initialize Webpack assets without Amphora. (#195)

* Remove default entrypoints.

* Always generate asset manifest.

* Use Webpack to initialize the client.

* Fix import paths.

* Factor async/await into Promises.

* Update ESLint to support import functions.

* Remove unused glob function, polish config.

* Export component mounting function.

* Remove entrypoint globs.

* Reduce "clay pack" to a single command.

* Enable hot module reloading.

* Expose getWebpackConfig.

* Fix watch params.

* Don't build Node modules.

* Build assets into "js" path.

* Delint.

* Remove redundant CLI args.

* Enable prod build based on environment variable.

* Fix docs.

Author: phyllisstein

.eslintrc

@@ -1,6 +1,14 @@
 {
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 2019
+    "ecmaVersion": 2015,
+    "requireConfigFile": false,
+    "sourceType": "script",
+    "babelOptions": {
+      "plugins": [
+        "@babel/plugin-syntax-dynamic-import"
+      ]
+    }
   },
   "env": {
     "browser": false,

cli/pack.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const { getWebpackConfig } = require('../lib/cmd/pack');
+const log = require('./log').setup({ file: __filename });
+const webpack = require('webpack');
+
+function builder(yargs) {
+  return yargs
+    .usage('Usage: $0')
+    .example('$0', 'Compile the entrypoints configured in Webpack.');
+}
+
+/**
+ * Run a one-off Webpack build.
+ *
+ * @param {webpack.Compiler} webpackCompiler - A configured Webpack compiler
+ *    instance.
+ * @returns {Promise} - A Promise that resolves when the compilation is
+ *    complete.
+ */
+function handleAssetBuild(webpackCompiler) {
+  return new Promise((resolve, reject) => {
+    webpackCompiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+
+      if (stats.hasErrors()) {
+        const msg = stats.toJson('errors-only');
+
+        return reject(msg);
+      }
+
+      resolve(webpackCompiler);
+    });
+  }).then(compiler => {
+    compiler.close(error => {
+      if (error) {
+        throw error;
+      }
+    });
+  }).catch(error => {
+    log('error', 'Webpack compilation failed', {
+      error
+    });
+  });
+}
+
+/**
+ * Run a Webpack build.
+ *
+ * @param {webpack.Compiler} webpackCompiler - A configured Webpack compiler
+ *    instance.
+ * @returns {Promise} - A Promise that resolves when the live compilation is
+ *    terminated.
+ */
+function handleAssetWatch(webpackCompiler) {
+  return new Promise((resolve, reject) => {
+    const watchingInstance = webpackCompiler.watch(
+      {
+        ignored: /node_modules/
+      },
+      (err, stats) => {
+        if (err) {
+          return reject(err);
+        }
+
+        if (stats.hasErrors()) {
+          const msg = stats.toJson('errors-only');
+
+          return reject(msg);
+        }
+      }
+    );
+
+    resolve(watchingInstance);
+  }).then(watching => {
+    process.on('exit', () => {
+      watching.close(error => {
+        if (error) {
+          throw error;
+        }
+      });
+    });
+  }).catch(error => {
+    log('error', 'Webpack compilation failed', {
+      message: error.message,
+      stack: error.stack
+    });
+  });
+}
+
+function handler(argv) {
+  const config = getWebpackConfig(argv).toConfig();
+  const compiler = webpack(config);
+  const builder = argv.watch ? handleAssetWatch.bind(null, compiler) : handleAssetBuild.bind(null, compiler);
+
+  return builder();
+}
+
+exports.aliases = ['p'];
+exports.builder = builder;
+exports.command = 'pack';
+exports.describe = 'Compile Webpack assets';
+exports.handler = handler;

cli/pack/cli.js

@@ -8,3 +8,5 @@ module.exports.import = require('./lib/cmd/import');
 module.exports.export = require('./lib/cmd/export');
 module.exports.compile = require('./lib/cmd/compile');
 module.exports.gulp = require('gulp'); // A reference to the Gulp instance so that external tasks can reference a common package
+module.exports.mountComponentModules = require('./lib/cmd/pack/mount-component-modules');
+module.exports.getWebpackConfig = require('./lib/cmd/pack/get-webpack-config');

cli/pack/index.js

@@ -164,6 +164,7 @@ function getModuleId(file, legacyFiles) {
 **/
 function idGenerator({ cachedIds, legacyFiles }) {
   const generatedIds = _.assign({}, cachedIds);
+
   // set to the highest number in the generateIds, or 1
   let i = _.max(_.values(generatedIds).filter(_.isFinite)) + 1 || 1;