@openmrs/webpack-config 3.3.2-pre.9 → 4.0.0-pre.0

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
-@openmrs/webpack-config:build: cache hit, replaying output 20eb19c24ef1d605
-@openmrs/webpack-config:build: $ tsc
+@openmrs/webpack-config:build: cache hit, replaying output c1cdecd2e269d1cd
+@openmrs/webpack-config:build: $ tsc

package/.turbo/turbo-lint.log

@@ -0,0 +1,2 @@
+@openmrs/webpack-config:lint: cache hit, replaying output b2f6553392b8a2ab
+@openmrs/webpack-config:lint: $ eslint src --ext ts,tsx

package/.turbo/turbo-test.log

@@ -0,0 +1,3 @@
+@openmrs/webpack-config:test: cache hit, replaying output 46ec090317337055
+@openmrs/webpack-config:test: $ jest --passWithNoTests
+@openmrs/webpack-config:test: No tests found, exiting with code 0

package/dist/dynamic-register.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postProcessFile = exports.transformFile = void 0;
+const types = __importStar(require("@babel/types"));
+const core_1 = require("@babel/core");
+const fs_1 = require("fs");
+const path_1 = require("path");
+function isUnique(current, index, arr) {
+    return arr.indexOf(current) === index;
+}
+function getFiles(manifest) {
+    const files = [];
+    manifest.chunks.forEach((chunk) => {
+        files.push(...chunk.files);
+    });
+    return files.filter(isUnique);
+}
+function transformFile(filename) {
+    var _a;
+    const root = (0, path_1.dirname)(filename);
+    const manifest = require(`${filename}.buildmanifest.json`);
+    const files = getFiles(manifest);
+    const code = (0, fs_1.readFileSync)(filename, "utf8");
+    const result = (0, core_1.transformSync)(code, {
+        filename,
+        sourceType: "script",
+        presets: ["minify"],
+        plugins: [
+            () => ({
+                visitor: {
+                    Property(path) { },
+                    CallExpression(path) {
+                        const node = path.node;
+                        if (types.isMemberExpression(node.callee) &&
+                            types.isIdentifier(node.callee.object, { name: "System" }) &&
+                            types.isIdentifier(node.callee.property, {
+                                name: "register",
+                            }) &&
+                            node.arguments.length === 3 &&
+                            types.isFunctionExpression(node.arguments[2])) {
+                            path
+                                .get("arguments.2.body")
+                                .unshiftContainer("body", types.variableDeclaration("var", [
+                                types.variableDeclarator(types.identifier("undefined")),
+                            ]));
+                        }
+                    },
+                },
+            }),
+        ],
+    });
+    return [(_a = result === null || result === void 0 ? void 0 : result.code) === null || _a === void 0 ? void 0 : _a.split('"use strict";').join(""), code];
+}
+exports.transformFile = transformFile;
+function postProcessFile(fn) {
+    const [result, original] = transformFile(fn);
+    if (result && original) {
+        (0, fs_1.writeFileSync)(fn.replace(".js", ".old"), original, "utf8");
+        (0, fs_1.writeFileSync)(fn.replace(".js", ".js"), result, "utf8");
+    }
+}
+exports.postProcessFile = postProcessFile;

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");
@@ -21,7 +59,7 @@ function getFrameworkVersion() {
         return `^${version}`;
     }
     catch (_a) {
-        return "3.x";
+        return "4.x";
     }
 }
 function makeIdent(name) {
@@ -38,6 +76,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.
@@ -91,11 +132,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 deafult `libraryTarget`, which is jsonp
+            publicPath: "auto",
             path: (0, path_1.resolve)(root, outDir),
         }, target: "web", module: {
             rules: [
@@ -133,6 +177,7 @@ exports.default = (env, argv = {}) => {
             devMiddleware: {
                 writeToDisk: true,
             },
+            static: [(0, path_1.resolve)(root, outDir)],
         }, performance: {
             hints: mode === production && "warning",
         }, plugins: [
@@ -145,11 +190,13 @@ exports.default = (env, argv = {}) => {
                 "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.3.2-pre.9",
+  "version": "4.0.0-pre.0",
   "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": "cf39a8f13110271a58afce56819d93eb8b759dc5"
+  "gitHead": "254a7226212aac82df4434639b2584e24ac240e4"
 }

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";
@@ -16,7 +54,7 @@ function getFrameworkVersion() {
     const { version } = require("@openmrs/esm-framework/package.json");
     return `^${version}`;
   } catch {
-    return "3.x";
+    return "4.x";
   }
 }
 
@@ -38,6 +76,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.
@@ -106,12 +148,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 deafult `libraryTarget`, which is jsonp
+      publicPath: "auto",
       path: resolve(root, outDir),
     },
     target: "web",
@@ -166,6 +209,7 @@ export default (
       devMiddleware: {
         writeToDisk: true,
       },
+      static: [resolve(root, outDir)],
     },
     performance: {
       hints: mode === production && "warning",
@@ -180,11 +224,13 @@ export default (
         "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),