extract webpack config to its own module (#1569)

* extract webpack config to its own module * update to use @xarc/webpack * ensure karma will install deps sinon/mocha/chai/enzyme * update tests for webpack config
electrode-io · Mar 19, 2020 · 41d81fa · 41d81fa
1 parent fa237c6
commit 41d81fa
Show file tree

Hide file tree

Showing 89 changed files with 267 additions and 150 deletions.
diff --git a/packages/electrode-archetype-opt-karma/README.md b/packages/electrode-archetype-opt-karma/README.md
@@ -1,6 +1,6 @@
 # Electrode Archetype Option Karma
 
-This is a feature package that instructs [Electrode](https://github.com/electrode-io/electrode) to install Karma.
+This is a feature package for [Electrode](https://github.com/electrode-io/electrode) to enable testing with Karma, chai, enzyme, mocha, and sinon.
 
 ## Interactive Install
 
@@ -27,7 +27,7 @@ If the features task detects that you are still using legacy features, it will g
 This feature can also be installed directly using npm:
 
 ```sh
-npm install electrode-archetype-opt-karma
+npm install --save-dev electrode-archetype-opt-karma
 ```
 
 ## License

diff --git a/packages/electrode-archetype-opt-karma/package.json b/packages/electrode-archetype-opt-karma/package.json
@@ -25,25 +25,30 @@
     "Joel Chen <[email protected]>"
   ],
   "dependencies": {
+    "@types/mocha": "5.2.7",
     "babel-plugin-istanbul": "^5.1.0",
-    "chai": "^4.0.0",
     "chai-as-promised": "^7.1.1",
     "chai-shallowly": "^1.0.0",
-    "enzyme": "^3.0.0",
+    "chai": "^4.0.0",
+    "core-js": "^3",
     "enzyme-adapter-react-16": "^1.1.0",
-    "karma": "^3.1.1",
+    "enzyme": "^3.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^2.0.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-ie-launcher": "^1.0.0",
     "karma-intl-shim": "^1.0.3",
-    "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.2",
+    "karma-mocha": "^1.3.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-sonarqube-unit-reporter": "0.0.21",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "4.0.0-rc.3"
+    "karma-webpack": "4.0.0-rc.3",
+    "karma": "^3.1.1",
+    "mocha": "^4.0.0",
+    "sinon-chai": "^2.14.0",
+    "sinon": "^4.0.0"
   },
   "devDependencies": {
     "opt-archetype-check": "../opt-archetype-check",

diff --git a/packages/xarc-app-dev/config/karma/entry.js b/packages/xarc-app-dev/config/karma/entry.js
@@ -2,6 +2,13 @@
 
 /* eslint-disable no-var */
 
+/**
+ * All requires in this file will be processed by webpack, which is unforgiving
+ * about missing dependencies and will generate hard module not found errors,
+ * and try/catch doesn't work.  Further, these module not found issues could
+ * cause very weird and unexpected errors from webpack.
+ */
+
 require("core-js");
 require("regenerator-runtime/runtime");
 
@@ -18,50 +25,30 @@ require("regenerator-runtime/runtime");
  * Install enzyme along with an Adapter corresponding to React 16
  * Configure enzyme to use the adapter using the top level configure(...) API
  */
-try {
-  var enzyme = require("enzyme");
-  var Adapter = require("enzyme-adapter-react-16");
-  enzyme.configure({ adapter: new Adapter() });
-} catch (err) {
-  //
-}
+var enzyme = require("enzyme");
+var Adapter = require("enzyme-adapter-react-16");
+enzyme.configure({ adapter: new Adapter() });
+
 /*
  * We need a global sinon to maintain compatibility
  * with existing test suites. However, this will be
  * removed in the future.
  */
-try {
-  var sinon = require("sinon");
-  window.sinon = sinon;
-} catch (err) {
-  //
-}
+var sinon = require("sinon");
+window.sinon = sinon;
 
 // --------------------------------------------------------------------------
 // Chai / Sinon / Mocha configuration.
 // --------------------------------------------------------------------------
 // Exports
+var chai = require("chai");
+window.expect = chai.expect;
 
-try {
-  var chai = require("chai");
-  window.expect = chai.expect;
+var sinonChai = require("sinon-chai");
+chai.use(sinonChai);
 
-  try {
-    var sinonChai = require("sinon-chai");
-    chai.use(sinonChai);
-  } catch (err) {
-    //
-  }
-
-  try {
-    var chaiShallowly = require("chai-shallowly");
-    chai.use(chaiShallowly);
-  } catch (err) {
-    //
-  }
-} catch (err) {
-  //
-}
+var chaiShallowly = require("chai-shallowly");
+chai.use(chaiShallowly);
 
 // Mocha (part of static include).
 window.mocha.setup({

diff --git a/packages/xarc-app-dev/config/karma/karma.conf.coverage.js b/packages/xarc-app-dev/config/karma/karma.conf.coverage.js
@@ -10,7 +10,7 @@ process.env.KARMA_RUN_TYPE = "coverage";
 const karmaConf = require("./karma.conf");
 const loadUserConfig = require("./util/load-user-config");
 const Path = require("path");
-const customCheck = require("../webpack/util/custom-check");
+const customCheck = require("@xarc/webpack/lib/util/custom-check");
 const webpackCovCfg = require(customCheck.getWebpackStartConfig(
   "../webpack/webpack.config.coverage"
 ));

diff --git a/packages/xarc-app-dev/config/karma/karma.conf.js b/packages/xarc-app-dev/config/karma/karma.conf.js
@@ -1,12 +1,21 @@
 "use strict";
 
 const Path = require("path");
-const customCheck = require("../webpack/util/custom-check");
+const customCheck = require("@xarc/webpack/lib/util/custom-check");
 const loadUserConfig = require("./util/load-user-config");
 const browserSettings = require("./browser-settings");
 const loadElectrodeDll = require("./util/load-electrode-dll");
 
-const MAIN_PATH = require.resolve("./entry.js");
+let MAIN_PATH;
+
+try {
+  MAIN_PATH = require.resolve(Path.resolve("test/karma-entry"));
+} catch (err) {
+  MAIN_PATH = require.resolve("./entry.js");
+}
+
+console.log(`KARMA will use entry file ${MAIN_PATH}`);
+
 const PREPROCESSORS = {};
 
 PREPROCESSORS[MAIN_PATH] = ["webpack", "sourcemap"];
@@ -16,7 +25,7 @@ const DLL_PATHS = loadElectrodeDll().map(x => require.resolve(x));
 function loadWebpackConfig() {
   if (!process.env.KARMA_RUN_TYPE) {
     process.env.KARMA_RUN_TYPE = "base";
-    return require(customCheck.getWebpackStartConfig("../webpack/webpack.config.test"));
+    return require(customCheck.getWebpackStartConfig("@xarc/webpack/lib/webpack.config.test"));
   }
 
   return {};

diff --git a/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js b/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const dllUtil = require("../../webpack/util/dll-util");
+const dllUtil = require("@xarc/webpack/lib/util/dll-util");
 
 module.exports = () => {
   const tag = process.env.NODE_ENV === "production" ? "" : ".dev";

diff --git a/packages/xarc-app-dev/config/webpack/index.js b/packages/xarc-app-dev/config/webpack/index.js
@@ -1,22 +1 @@
-"use strict";
-
-const { initWebpackConfigComposer, generateConfig } = require("./util/generate-config");
-
-//
-// When clap execute a build task that involves invoking webpack it
-// will check if user wants webpack to start with their webpack.config.js
-// If yes, then the task will set env ELECTRODE_WEBPACK_PROFILE to
-// the desired profile, so when webpack runs, it's passed to the
-// archetype, where we can check and load the correct internal
-// webpack config accordingly.
-//
-const profile = process.env.ELECTRODE_WEBPACK_PROFILE || "production";
-const options = require(`./options/${profile}`);
-
-module.exports = {
-  initWebpackConfigComposer,
-  compose: generateConfig,
-  env: profile,
-  options,
-  partials: require("./partials")
-};
+module.exports = require("@xarc/webpack");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js b/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("browsercoverage");
+module.exports = require("@xarc/webpack/lib/webpack.config.browsercoverage");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js b/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("coverage");
+module.exports = require("@xarc/webpack/lib/webpack.config.coverage");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dev.js b/packages/xarc-app-dev/config/webpack/webpack.config.dev.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("development");
+module.exports = require("@xarc/webpack/lib/webpack.config.dev");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js b/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("static");
+module.exports = require("@xarc/webpack/lib/webpack.config.dev.static");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dll.js b/packages/xarc-app-dev/config/webpack/webpack.config.dll.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("dll");
+module.exports = require("@xarc/webpack/lib/webpack.config.dll");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.js b/packages/xarc-app-dev/config/webpack/webpack.config.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("production");
+module.exports = require("@xarc/webpack/lib/webpack.config");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.test.js b/packages/xarc-app-dev/config/webpack/webpack.config.test.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("test");
+module.exports = require("@xarc/webpack/lib/webpack.config.test");
diff --git a/packages/xarc-app-dev/lib/dev-admin/admin-server.js b/packages/xarc-app-dev/lib/dev-admin/admin-server.js
@@ -14,7 +14,6 @@ const { parse } = require("./log-parser");
 const { displayLogs } = require("./log-reader");
 const { fork } = require("child_process");
 const ConsoleIO = require("./console-io");
-const makeDefer = require("@xarc/defer");
 const logger = require("@xarc/app/lib/logger");
 const xaa = require("xaa");
 
@@ -111,7 +110,7 @@ class AdminServer {
     }
     const child = info._child;
     if (child) {
-      const defer = makeDefer();
+      const defer = xaa.defer();
       child.once("close", () => defer.resolve());
       child.kill(sig);
       await xaa.try(() => xaa.runTimeout(defer.promise, 5000));
@@ -200,7 +199,7 @@ class AdminServer {
       await this.kill(name, "SIGINT");
     }
 
-    info._startDefer = makeDefer();
+    info._startDefer = xaa.defer();
     info._starting = true;
 
     //
@@ -399,7 +398,7 @@ class AdminServer {
   async waitForAppServerStart(info) {
     let startTimeout;
     let started = false;
-    const defer = makeDefer();
+    const defer = xaa.defer();
 
     const pendingMessages = [];
 

diff --git a/packages/xarc-app-dev/lib/dev-admin/middleware.js b/packages/xarc-app-dev/lib/dev-admin/middleware.js
@@ -8,7 +8,7 @@ const Fs = require("fs");
 const webpack = require("webpack");
 const hotHelpers = require("webpack-hot-middleware/helpers");
 const Url = require("url");
-const { getWebpackStartConfig } = require("../../config/webpack/util/custom-check");
+const { getWebpackStartConfig } = require("@xarc/webpack/lib/util/custom-check");
 const { getLogs, getLogEventAsHtml } = require("./log-reader");
 
 hotHelpers.pathMatch = (url, path) => {

diff --git a/packages/xarc-app-dev/lib/utils.js b/packages/xarc-app-dev/lib/utils.js
@@ -1,19 +1,7 @@
 "use strict";
 
-const Path = require("path");
-const requireAt = require("require-at");
-const optionalRequire = require("optional-require")(require);
-
-const invalidRequire = () => false;
-invalidRequire.resolve = () => false;
-invalidRequire.invalid = true;
+const getOptRequire = require("@xarc/webpack/lib/util/get-opt-require");
 
 module.exports = {
-  getOptArchetypeRequire(name) {
-    const optPkg = optionalRequire.resolve(`${name}/package.json`);
-    if (optPkg) {
-      return requireAt(Path.dirname(optPkg));
-    }
-    return invalidRequire;
-  }
+  getOptArchetypeRequire: getOptRequire
 };
diff --git a/packages/xarc-app-dev/package.json b/packages/xarc-app-dev/package.json
@@ -29,7 +29,7 @@
     "Joel Chen <[email protected]>"
   ],
   "peerDependencies": {
-    "@xarc/app": "^7.0.4"
+    "@xarc/app": "^8.0.3"
   },
   "dependencies": {
     "@babel/cli": "^7.1.5",
@@ -46,63 +46,41 @@
     "@babel/register": "^7.0.0",
     "@jchip/redbird": "^1.0.0",
     "@loadable/babel-plugin": "^5.10.0",
-    "@loadable/webpack-plugin": "^5.7.1",
-    "@xarc/defer": "^1.0.0",
-    "acorn": "^6.0.5",
+    "@xarc/webpack": "../xarc-webpack",
     "ansi-to-html": "^0.6.8",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.4",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
     "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
-    "batch": "^0.6.1",
     "boxen": "^2.1.0",
     "chalker": "^1.1.1",
     "chokidar": "^2.0.4",
-    "convert-source-map": "^1.5.0",
-    "core-js": "^2 || ^3",
-    "css-loader": "^1.0.0",
-    "electrode-cdn-file-loader": "^1.0.0",
+    "core-js": "^3",
     "electrode-hapi-compat": "^1.2.0",
     "electrode-node-resolver": "^2.0.0",
     "fastify-plugin": "^1.6.0",
-    "file-loader": "^2.0.0",
     "filter-scan-dir": "^1.0.9",
-    "finalhandler": "^1.1.1",
     "fs-extra": "^0.26.5",
     "identity-obj-proxy": "^3.0.0",
     "isomorphic-loader": "^3.0.0",
-    "jsonfile": "^2.2.2",
-    "loader-utils": "^1.1.0",
     "lodash": "^4.13.1",
     "mime": "^1.0.0",
-    "mini-css-extract-plugin": "^0.7.0",
     "mkdirp": "^0.5.1",
     "nix-clap": "^1.3.7",
     "nyc": "^14.1.1",
-    "offline-plugin": "^4.6.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "optional-require": "^1.0.0",
     "prompts": "^2.2.1",
-    "raw-loader": "^0.5.1",
     "regenerator-runtime": "^0.13.2",
     "request": "^2.88.0",
     "require-at": "^1.0.2",
-    "rimraf": "^2.4.0",
     "serve-index-fs": "^1.10.1",
     "style-loader": "^0.20.1",
     "subapp-util": "^1.0.3",
     "sudo-prompt": "^8.2.5",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
-    "webpack-config-composer": "^1.1.3",
     "webpack-dev-middleware": "^3.4.0",
-    "webpack-disk-plugin": "0.0.2",
     "webpack-hot-middleware": "^2.22.2",
-    "webpack-stats-plugin": "^0.2.1",
     "winston": "^2.3.1",
     "xaa": "^1.2.2",
     "xclap": "^0.2.38",
@@ -127,8 +105,7 @@
   "fyn": {
     "dependencies": {
       "electrode-node-resolver": "../electrode-node-resolver",
-      "subapp-util": "../subapp-util",
-      "webpack-config-composer": "../webpack-config-composer"
+      "subapp-util": "../subapp-util"
     },
     "devDependencies": {
       "@xarc/app": "../xarc-app",

diff --git a/packages/xarc-app-dev/test/spec/extract.style.spec.js b/packages/xarc-app-dev/test/spec/extract.style.spec.js
@@ -1,6 +1,6 @@
 const expect = require("chai").expect;
 const archetype = require("@xarc/app/config/archetype");
-const moduleName = "../../config/webpack/partials/extract-style";
+const moduleName = "@xarc/webpack/lib/partials/extract-style";
 
 describe("@xarc/app-dev extract-styles", function() {
   this.timeout(10000);