@openmrs/webpack-config 3.4.1-pre.98 → 4.0.1-pre.204

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
-@openmrs/webpack-config:build: cache hit, replaying output 77699dafde73d6fd
-@openmrs/webpack-config:build: $ tsc
+@openmrs/webpack-config:build: cache hit, replaying output fcf9d813b6f0974b
+@openmrs/webpack-config:build: $ tsc

package/dist/index.js

@@ -4,6 +4,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assetRuleConfig = exports.scssRuleConfig = exports.cssRuleConfig = exports.scriptRuleConfig = exports.additionalConfig = exports.overrides = void 0;
+/**
+ * This is the base webpack config for all OpenMRS 3.x modules.
+ *
+ * ## Usage
+ *
+ * You can use it as simply as
+ *
+ * ```ts
+ * module.exports = require('openmrs/default-webpack-config');
+ * ```
+ *
+ * or you can customize the configuration using merges and overrides
+ * like
+ *
+ * ```ts
+ * const config = require('openmrs/default-webpack-config');
+ * config.cssRuleConfig.rules = [myCustomRule];
+ * module.exports = config;
+ * ```
+ *
+ * ## Development
+ *
+ * Advice for working on this file:
+ *
+ * Don't use `yarn link` or symlinks to work on it.
+ *
+ * After you `yarn build --watch`, do something like
+ * `watch "cp -R dist /path/to/packages/esm-patient-chart-app/webpack"`
+ * and then change the webpack line from
+ * `module.exports = require('openmrs/default-webpack-config');`
+ * to
+ * `module.exports = require('./webpack');`
+ *
+ * This is because Webpack has unpredictable behavior when working with
+ * symlinked files, **even when using absolute paths**. You read that right.
+ * Telling Webpack to use `/a/b/c`? If the Webpack config is symlinked
+ * from `/d/e/`, then it *might* in *some cases* try to import `/d/e/c`.
+ */
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 const path_1 = require("path");
 const clean_webpack_plugin_1 = require("clean-webpack-plugin");
@@ -13,6 +51,7 @@ const webpack_stats_plugin_1 = require("webpack-stats-plugin");
 // eslint-disable-next-line no-restricted-imports
 const lodash_1 = require("lodash");
 const optimize_1 = require("./optimize");
+const semver_1 = require("semver");
 const production = "production";
 const { ModuleFederationPlugin } = webpack_1.container;
 function getFrameworkVersion() {
@@ -21,7 +60,7 @@ function getFrameworkVersion() {
         return `^${version}`;
     }
     catch (_a) {
-        return "3.x";
+        return "4.x";
     }
 }
 function makeIdent(name) {
@@ -38,6 +77,9 @@ function mergeFunction(objValue, srcValue) {
         return objValue.concat(srcValue);
     }
 }
+function slugify(name) {
+    return name.replace(/[\/\-@]/g, "_");
+}
 /**
  * This object will be merged into the webpack config.
  * Array values will be concatenated with the existing array.
@@ -76,7 +118,7 @@ exports.scssRuleConfig = {};
 exports.assetRuleConfig = {};
 exports.default = (env, argv = {}) => {
     const root = process.cwd();
-    const { name, peerDependencies, browser, main, types } = require((0, path_1.resolve)(root, "package.json"));
+    const { name, version, peerDependencies, browser, main, types, } = require((0, path_1.resolve)(root, "package.json"));
     const mode = argv.mode || process.env.NODE_ENV || "development";
     const filename = (0, path_1.basename)(browser || main);
     const outDir = (0, path_1.dirname)(browser || main);
@@ -91,11 +133,14 @@ exports.default = (env, argv = {}) => {
             },
         },
     };
-    const baseConfig = Object.assign({ entry: {
-            [name]: "systemjs-webpack-interop/auto-public-path",
-        }, output: {
-            libraryTarget: "system",
-            publicPath: "",
+    const baseConfig = Object.assign({ 
+        // The only `entry` in the application is the app shell. Everything else is
+        // a Webpack Module Federation "remote." This ensures that there is always
+        // only one container context--i.e., if we had an entry point per module,
+        // WMF could get confused and not resolve shared dependencies correctly.
+        output: {
+            // Use default `libraryTarget`, which is jsonp
+            publicPath: "auto",
             path: (0, path_1.resolve)(root, outDir),
         }, target: "web", module: {
             rules: [
@@ -133,6 +178,7 @@ exports.default = (env, argv = {}) => {
             devMiddleware: {
                 writeToDisk: true,
             },
+            static: [(0, path_1.resolve)(root, outDir)],
         }, performance: {
             hints: mode === production && "warning",
         }, plugins: [
@@ -142,14 +188,19 @@ exports.default = (env, argv = {}) => {
                 analyzerMode: env && env.analyze ? "server" : "disabled",
             }),
             new webpack_1.DefinePlugin({
+                __VERSION__: mode === production
+                    ? JSON.stringify(version)
+                    : JSON.stringify((0, semver_1.inc)(version, "prerelease", "local")),
                 "process.env.FRAMEWORK_VERSION": JSON.stringify(frameworkVersion),
             }),
             new ModuleFederationPlugin({
+                // See `esm-app-shell/src/system.ts` for an explanation of how modules
+                // get loaded into the application.
                 name,
-                library: { type: "system", name },
+                library: { type: "var", name: slugify(name) },
                 filename,
                 exposes: {
-                    app: srcFile,
+                    "./start": srcFile,
                 },
                 shared: [
                     ...Object.keys(peerDependencies),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/webpack-config",
-  "version": "3.4.1-pre.98",
+  "version": "4.0.1-pre.204",
   "license": "MPL-2.0",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -53,5 +53,5 @@
     "typescript": "~4.5.2",
     "webpack": "^5.64.0"
   },
-  "gitHead": "7cea45f5f1a9b9c6c3a9f6a151022f7d6e0da315"
+  "gitHead": "4ba2589b61d90c81eef0a21b87332b9f799f8dac"
 }

package/src/index.ts

@@ -1,3 +1,41 @@
+/**
+ * This is the base webpack config for all OpenMRS 3.x modules.
+ *
+ * ## Usage
+ *
+ * You can use it as simply as
+ *
+ * ```ts
+ * module.exports = require('openmrs/default-webpack-config');
+ * ```
+ *
+ * or you can customize the configuration using merges and overrides
+ * like
+ *
+ * ```ts
+ * const config = require('openmrs/default-webpack-config');
+ * config.cssRuleConfig.rules = [myCustomRule];
+ * module.exports = config;
+ * ```
+ *
+ * ## Development
+ *
+ * Advice for working on this file:
+ *
+ * Don't use `yarn link` or symlinks to work on it.
+ *
+ * After you `yarn build --watch`, do something like
+ * `watch "cp -R dist /path/to/packages/esm-patient-chart-app/webpack"`
+ * and then change the webpack line from
+ * `module.exports = require('openmrs/default-webpack-config');`
+ * to
+ * `module.exports = require('./webpack');`
+ *
+ * This is because Webpack has unpredictable behavior when working with
+ * symlinked files, **even when using absolute paths**. You read that right.
+ * Telling Webpack to use `/a/b/c`? If the Webpack config is symlinked
+ * from `/d/e/`, then it *might* in *some cases* try to import `/d/e/c`.
+ */
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import { resolve, dirname, basename } from "path";
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
@@ -7,6 +45,7 @@ import { StatsWriterPlugin } from "webpack-stats-plugin";
 // eslint-disable-next-line no-restricted-imports
 import { merge, mergeWith, isArray } from "lodash";
 import { postProcessFile } from "./optimize";
+import { inc } from "semver";
 
 const production = "production";
 const { ModuleFederationPlugin } = container;
@@ -16,7 +55,7 @@ function getFrameworkVersion() {
     const { version } = require("@openmrs/esm-framework/package.json");
     return `^${version}`;
   } catch {
-    return "3.x";
+    return "4.x";
   }
 }
 
@@ -38,6 +77,10 @@ function mergeFunction(objValue: any, srcValue: any) {
   }
 }
 
+function slugify(name) {
+  return name.replace(/[\/\-@]/g, "_");
+}
+
 /**
  * This object will be merged into the webpack config.
  * Array values will be concatenated with the existing array.
@@ -85,10 +128,14 @@ export default (
   argv: Record<string, string> = {}
 ) => {
   const root = process.cwd();
-  const { name, peerDependencies, browser, main, types } = require(resolve(
-    root,
-    "package.json"
-  ));
+  const {
+    name,
+    version,
+    peerDependencies,
+    browser,
+    main,
+    types,
+  } = require(resolve(root, "package.json"));
   const mode = argv.mode || process.env.NODE_ENV || "development";
   const filename = basename(browser || main);
   const outDir = dirname(browser || main);
@@ -106,12 +153,13 @@ export default (
   };
 
   const baseConfig = {
-    entry: {
-      [name]: "systemjs-webpack-interop/auto-public-path",
-    },
+    // The only `entry` in the application is the app shell. Everything else is
+    // a Webpack Module Federation "remote." This ensures that there is always
+    // only one container context--i.e., if we had an entry point per module,
+    // WMF could get confused and not resolve shared dependencies correctly.
     output: {
-      libraryTarget: "system",
-      publicPath: "",
+      // Use default `libraryTarget`, which is jsonp
+      publicPath: "auto",
       path: resolve(root, outDir),
     },
     target: "web",
@@ -166,6 +214,7 @@ export default (
       devMiddleware: {
         writeToDisk: true,
       },
+      static: [resolve(root, outDir)],
     },
     performance: {
       hints: mode === production && "warning",
@@ -177,14 +226,20 @@ export default (
         analyzerMode: env && env.analyze ? "server" : "disabled",
       }),
       new DefinePlugin({
+        __VERSION__:
+          mode === production
+            ? JSON.stringify(version)
+            : JSON.stringify(inc(version, "prerelease", "local")),
         "process.env.FRAMEWORK_VERSION": JSON.stringify(frameworkVersion),
       }),
       new ModuleFederationPlugin({
+        // See `esm-app-shell/src/system.ts` for an explanation of how modules
+        // get loaded into the application.
         name,
-        library: { type: "system", name },
+        library: { type: "var", name: slugify(name) },
         filename,
         exposes: {
-          app: srcFile,
+          "./start": srcFile,
         },
         shared: [
           ...Object.keys(peerDependencies),