default to enable loading app webpack config

packages/xarc-app-dev/package.json

@@ -52,6 +52,7 @@
     "@babel/preset-typescript": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@jchip/redbird": "^1.2.2",
+    "@xarc/dev-base": "^0.0.1",
     "@xarc/run": "^1.0.4",
     "@xarc/subapp": "^0.2.1",
     "@xarc/webpack": "^11.0.2",
@@ -121,7 +122,7 @@
     "mocha": "^8.2.1",
     "mock-require": "^3.0.3",
     "nyc": "^15.1.0",
-    "prettier": "^1.14.2",
+    "prettier": "^2.2.1",
     "run-verify": "^1.2.5",
     "shx": "^0.3.2",
     "sinon": "^9.2.2",
@@ -140,7 +141,8 @@
       "@xarc/subapp": "../xarc-subapp",
       "@xarc/webpack": "../xarc-webpack",
       "electrode-node-resolver": "../electrode-node-resolver",
-      "subapp-util": "../subapp-util"
+      "subapp-util": "../subapp-util",
+      "@xarc/dev-base": "../xarc-dev-base"
     },
     "devDependencies": {
       "@xarc/app": "../xarc-app",

packages/xarc-app-dev/src/config/opt2/webpack-options.ts

@@ -156,4 +156,13 @@ export type WebpackOptions = {
    * - Useful if you want to build production without minifying for debugging
    */
   minify?: boolean;
+
+  /**
+   * For customizing xarc's webpack config, you can create your own `webpack.config.ts` in your
+   * app's root dir and xarc will load it if it exist.
+   *
+   * If you want to turn off this behavior, set this flag to `false`.
+   *
+   */
+  useAppWebpackConfig?: boolean;
 };

packages/xarc-app-dev/src/lib/dev-admin/middleware.ts

@@ -99,7 +99,11 @@ export class Middleware {
   setup() {
     const options = this._options;
 
-    const config = require(getWebpackStartConfig("webpack.config.dev.js", false)); // eslint-disable-line
+    let config = require(getWebpackStartConfig("webpack.config.dev.js", false)); // eslint-disable-line
+
+    if (config.__esModule) {
+      config = config.default;
+    }
 
     this._hmrPath = controlPaths.hmr;
 

packages/xarc-app-dev/src/lib/index.ts

@@ -58,3 +58,12 @@ export const babelConfigFile = require.resolve("../config/babel/babelrc");
  * .
  */
 export const babelPresetFile = require.resolve("../config/babel/preset");
+
+/**
+ * Contains the webpack utilities and configuration.
+ *
+ * If you want to customize your own webpack config, then you can use this
+ * to get xarc's internal webpack configs and modify them to your need.
+ *
+ */
+export * as xarcWebpack from "@xarc/webpack";

packages/xarc-app-dev/src/lib/logger.ts

@@ -1,4 +1 @@
-import winston from "winston";
-import { makeWinstonLogger } from "./winston-logger";
-
-export const logger = makeWinstonLogger(winston);
+export { logger } from "@xarc/dev-base";

packages/xarc-app-dev/src/lib/utils.ts

@@ -168,6 +168,8 @@ Please run "clap setup-dev" once to initialize the file
 <cyan>.etmp/xarc-options.json</> before doing your thing that loads
 xarc's development code.
 `);
+
+      console.error(err.stack); // eslint-disable-line
     }
 
     return (cachedXarcOptions = {

packages/xarc-app-dev/test/spec/webpack-dev-hapi.spec.ts

@@ -8,7 +8,7 @@ import { expect } from "chai";
 import { before, beforeEach, describe, it, after, afterEach } from "mocha";
 const electrodeServer = require("e1");
 
-describe("dev-hapi 16", function() {
+describe("dev-hapi 16", function () {
   this.timeout(10000);
 
   before(() => {
@@ -54,9 +54,7 @@ describe("dev-hapi 16", function() {
       },
       resp => {
         expect(resp.statusCode).to.equal(200);
-        expect(data.request.app)
-          .to.have.key("webpackDev")
-          .that.is.an("object");
+        expect(data.request.app).to.have.key("webpackDev").that.is.an("object");
       },
       runFinally(() => server.stop())
     );

packages/xarc-app-dev/test/spec/webpack-dev-hapi17.spec.ts

@@ -9,7 +9,7 @@ import electrodeServer from "electrode-server";
 
 const moduleName = "../../src/lib/index";
 
-describe("dev-hapi 17", function() {
+describe("dev-hapi 17", function () {
   this.timeout(10000);
 
   before(() => {
@@ -53,9 +53,7 @@ describe("dev-hapi 17", function() {
       },
       resp => {
         expect(resp.statusCode).to.equal(200);
-        expect(data.request.app)
-          .to.have.key("webpackDev")
-          .that.is.an("object");
+        expect(data.request.app).to.have.key("webpackDev").that.is.an("object");
       },
       runFinally(() => server.stop())
     );

packages/xarc-dev-base/.eslintrc.js

@@ -0,0 +1,3 @@
+
+const { eslintRcTestTypeScript } = require("@xarc/module-dev");
+module.exports = { extends: eslintRcTestTypeScript };

packages/xarc-dev-base/.gitignore

@@ -0,0 +1,8 @@
+.nyc_output
+coverage
+dist
+node_modules
+# recommend avoid committing package-lock.* file because a module's CI
+# should use latest dep, as an app that consumes a module would have its
+# own lockfile, but remove this if you want to commit the package lock file.
+*-lock*

packages/xarc-dev-base/README.md

@@ -0,0 +1,3 @@
+# `@xarc/dev-base`
+
+https://www.electrode.io/

packages/xarc-dev-base/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@xarc/dev-base",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/index.js",
+  "homepage": "http://www.electrode.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "bugs": {
+    "url": "https://github.com/electrode-io/electrode/issues"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "xrun xarc/test-only",
+    "prepublishOnly": "xrun [[build, docs], xarc/check]",
+    "docs": "xrun xarc/docs",
+    "coverage": "xrun xarc/test-cov"
+  },
+  "keywords": [],
+  "author": "Electrode (http://www.electrode.io/)",
+  "contributors": [
+    "Joel Chen <[email protected]>"
+  ],
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@istanbuljs/nyc-config-typescript": "^1.0.1",
+    "@types/node": "^14.14.16",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
+    "@xarc/module-dev": "^4.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.16.0",
+    "eslint-config-walmart": "^2.2.1",
+    "eslint-plugin-filenames": "^1.1.0",
+    "eslint-plugin-jsdoc": "^30.7.9",
+    "eslint-plugin-tsdoc": "^0.2.11",
+    "prettier": "^2.2.1",
+    "source-map-support": "^0.5.19",
+    "ts-node": "^9.1.1",
+    "typedoc": "^0.20.13",
+    "typescript": "^4.1.3"
+  },
+  "dependencies": {
+    "tslib": "^2.1.0",
+    "winston": "^2.4.4"
+  },
+  "files": [
+    "dist"
+  ],
+  "prettier": {
+    "printWidth": 100
+  },
+  "@xarc/module-dev": {
+    "features": [
+      "eslint",
+      "eslintTS",
+      "prettier",
+      "typedoc",
+      "typescript"
+    ]
+  }
+}

packages/xarc-dev-base/src/index.ts

@@ -0,0 +1 @@
+export * from "./logger";

packages/xarc-dev-base/src/logger.ts

@@ -0,0 +1,4 @@
+import winston from "winston";
+import { makeWinstonLogger } from "./winston-logger";
+
+export const logger = makeWinstonLogger(winston);

packages/xarc-dev-base/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["es2018"],
+    "module": "CommonJS",
+    "esModuleInterop": true,
+    "target": "ES2018",
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "declaration": true,
+    "types": ["node"],
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "alwaysStrict": true,
+    "strictFunctionTypes": true,
+    "allowJs": true,
+    "importHelpers": true
+  },
+  "include": ["src"]
+}

packages/xarc-dev-base/xrun-tasks.ts

@@ -0,0 +1,2 @@
+import { loadTasks } from "@xarc/module-dev";
+loadTasks();

packages/xarc-webpack/package.json

@@ -34,6 +34,7 @@
     "Joel Chen <[email protected]>"
   ],
   "dependencies": {
+    "@xarc/dev-base": "^0.0.1",
     "autoprefixer": "^9.6.0",
     "babel-loader": "^8.1.0",
     "chalk": "^4.1.0",
@@ -146,7 +147,8 @@
     "dependencies": {
       "electrode-cdn-file-loader": "../electrode-cdn-file-loader",
       "electrode-node-resolver": "../electrode-node-resolver",
-      "webpack-config-composer": "../webpack-config-composer"
+      "webpack-config-composer": "../webpack-config-composer",
+      "@xarc/dev-base": "../xarc-dev-base"
     },
     "devDependencies": {
       "@xarc/app": "../xarc-app",

packages/xarc-webpack/src/index.ts

@@ -2,19 +2,38 @@
 
 export { initWebpackConfigComposer, generateConfig as compose } from "./util/generate-config";
 
-export { JsonpScriptSrcPlugin } from "./plugins/jsonp-script-src-plugin";
-export { SubAppWebpackPlugin } from "./plugins/subapp-plugin";
+export { SubAppWebpackPlugin } from "./plugins/subapp-plugin-webpack5";
 
-//
-// When xrun 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.
-//
-export const env = process.env.ELECTRODE_WEBPACK_PROFILE || "production";
-export const options = require(`./options/${env}`);
+/**
+ * Return the env profile for compiling the app.
+ *
+ * Values could be:
+ *
+ * - `development` - for development
+ * - `production` - building app for production
+ * - `test` - running Karma test
+ * - `coverage` - running Karma test with coverage
+ *
+ * `@xarc/app-dev` will set this up depending on the action user is taking.
+ *
+ */
+export const getEnvProfile = (): string => {
+  return process.env.ELECTRODE_WEBPACK_PROFILE || "production";
+};
+
+/**
+ *
+ * The options that will be used to compose the final webpack config
+ *
+ * @param envProfile - the env profile such as `development` or `production`, will call `getEnvProfile`
+ *   to get it if not passed
+ *
+ * @returns compose options for the given env profile
+ */
+export const getComposeOptions = (envProfile?: string): any => {
+  const env = envProfile || getEnvProfile();
+  return require(`./options/${env}`);
+};
 
 /**
  * The copy of webpack module that's installed for @xarc/webpack's use with its configs.
@@ -29,7 +48,12 @@ const genPartials = require("./partials");
 const ConfigPartial = require("webpack-config-composer/lib/partial");
 
 /**
- * The webpack config partials this module provides for building a webapp
+ * The webpack config partials xarc uses to compose the final webpack config for building
+ * your application.
+ *
+ * If you want to customize the webpack config, you can create your own `webpack.config.ts`
+ * and use these partials to compose your own final webpack config.
+ *
  */
 export const partials = {
   /**

packages/xarc-webpack/src/partials/dll-output.ts

@@ -2,13 +2,15 @@
 import * as Path from "path";
 import { loadXarcOptions } from "../util/load-xarc-options";
 
-const xarcOptions = loadXarcOptions();
-const xarcCwd = xarcOptions.cwd;
+module.exports = () => {
+  const xarcOptions = loadXarcOptions();
+  const xarcCwd = xarcOptions.cwd;
 
-module.exports = () => ({
-  output: {
-    path: Path.resolve(xarcCwd, "dll/js"),
-    filename: "[name].bundle.[hash].js",
-    library: "[name]_[hash]"
-  }
-});
+  return {
+    output: {
+      path: Path.resolve(xarcCwd, "dll/js"),
+      filename: "[name].bundle.[hash].js",
+      library: "[name]_[hash]"
+    }
+  };
+};

packages/xarc-webpack/src/partials/dll-reference.ts

@@ -12,7 +12,7 @@ import * as Path from "path";
 import * as webpack from "webpack";
 const filterScanDir = require("filter-scan-dir");
 import { loadXarcOptions } from "../util/load-xarc-options";
-const { logger } = require("@xarc/app-dev/lib/logger");
+import { logger } from "@xarc/dev-base";
 
 module.exports = function(options) {
   const xarcOptions = loadXarcOptions();

packages/xarc-webpack/src/partials/dll.ts

@@ -4,10 +4,10 @@ import * as Path from "path";
 const webpack = require("webpack");
 import { loadXarcOptions } from "../util/load-xarc-options";
 
-const xarcOptions = loadXarcOptions();
-const xarcCwd = xarcOptions.cwd;
-
 module.exports = function() {
+  const xarcOptions = loadXarcOptions();
+  const xarcCwd = xarcOptions.cwd;
+
   return {
     plugins: [
       new webpack.DllPlugin({

packages/xarc-webpack/src/partials/entry.ts

@@ -7,7 +7,7 @@ import * as Path from "path";
 import * as _ from "lodash";
 const optionalRequire = require("optional-require")(require);
 const chalk = require("chalk");
-const { logger } = require("@xarc/app-dev/lib/logger");
+import { logger } from "@xarc/dev-base";
 const mkdirp = require("mkdirp");
 import { loadXarcOptions } from "../util/load-xarc-options";
 import { injectEntry } from "../util/inject-entry";

packages/xarc-webpack/src/partials/images.ts

@@ -6,7 +6,7 @@ import { xAppRequire } from "@xarc/app";
 
 const isomorphicLoader = xAppRequire.resolve("isomorphic-loader");
 const optionalRequire = require("optional-require")(require);
-const { logger } = require("@xarc/app-dev/lib/logger");
+import { logger } from "@xarc/dev-base";
 
 function getCdnLoader(optLoader) {
   if (optLoader) {

packages/xarc-webpack/src/partials/pwa.ts

@@ -10,7 +10,7 @@ const optionalRequire = require("optional-require")(require);
 
 const swConfigPath = Path.resolve("config", "sw-config.js");
 const mkdirp = require("mkdirp");
-const { logger } = require("@xarc/app-dev/lib/logger");
+import { logger } from "@xarc/dev-base";
 
 /**
  * Takes a file path and returns a webpack-compatible