Merge pull request #923 from Patternslib/webpack5-module-federation

Webpack5 module federation

Author: thet

docs/developer/module-federation.md

@@ -0,0 +1,61 @@
+# Patternslib Module Federation
+
+## Introduction
+
+For a general introduction see: https://webpack.js.org/concepts/module-federation/
+
+Module Federation allows to share dependencies between bundles. 
+Each bundle includes the whole set of dependencies.
+However, if multiple bundles have the same dependencies they are only loaded once.
+
+For example, if bundle A and B both depend on jQuery and bundle A has already loaded it, bundle B can just reuse the already loaded jQuery file.
+But if only bundle B is loaded, it uses its own bundled version of the jQuery library.
+
+There is a host bundle - in the fictional example above our bundle "A".
+Other bundles are "remotes" which are initialized for module federation by the host bundle "A"
+
+
+## How to use it
+
+- Create a new entry point ``index.js`` which only imports the normal entry point.
+  If your bundle is the host bundle, also import the ``module_federation`` module - importing is enough.
+
+```
+import "@patternslib/patternslib/webpack/module_federation";
+import("./patterns");
+```
+
+- Add the module federation plugin in webpack. There is a configuration factory which you can use for that like so:
+
+```
+const package_json = require("./package.json");
+const path = require("path");
+const patternslib_config = require("@patternslib/patternslib/webpack/webpack.config");
+const mf_config = require("@patternslib/patternslib/webpack/webpack.mf");
+
+module.exports = (env, argv) => {
+    let config = {
+        entry: {
+            "bundle.min": path.resolve(__dirname, "src/index.js"),
+        },
+    };
+
+    config = patternslib_config(env, argv, config, ["mockup"]);
+
+    // ...
+
+    config.plugins.push(
+        mf_config({
+            package_json: package_json,
+            remote_entry: config.entry["bundle.min"],
+        })
+    );
+
+    return config;
+};
+```
+
+That's basically it.
+
+For more information look at the source code at ``@patternslib/webpack/module_federation`` and ``@patternslib/webpack/webpack.mf.js``.
+

package.json

@@ -52,7 +52,6 @@
         "css-loader": "^6.7.1",
         "eslint": "^8.15.0",
         "eslint-config-prettier": "^8.5.0",
-        "expose-loader": "^3.0.0",
         "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",
         "imports-loader": "^3.1.0",

src/core/dom.js

@@ -230,6 +230,26 @@ const set_data = (el, name, value) => {
     el[`${DATA_PREFIX}${name}`] = value;
 };
 
+/**
+ * Simple template engine, based on JS template literal
+ *
+ * Please note: You cannot pass a template literal as template_string.
+ * JavaScript itself would try to expand it and would fail.
+ *
+ * See: https://stackoverflow.com/a/37217166/1337474
+ *
+ * @param {String} template_string - The template string as a JavaScript template literal.
+ *                                   For each variable in the template you have to use ``this``.
+ *                                   E.g. if you pass ``{message: "ok"}`` as template_variables, you can use it like so:
+ *                                   `<h1>${this.message}</h1>`
+ * @param {Object} template_variables - Object literal with all the variables which should be used in the template.
+ *
+ * @returns {String} - Returns the a string as template expanded with the template_variables.
+ */
+const template = (template_string, template_variables = {}) => {
+    return new Function("return `" + template_string + "`;").call(template_variables);
+};
+
 const dom = {
     toNodeArray: toNodeArray,
     querySelectorAllAndMe: querySelectorAllAndMe,
@@ -246,6 +266,7 @@ const dom = {
     find_scroll_container: find_scroll_container,
     get_data: get_data,
     set_data: set_data,
+    template: template,
     add_event_listener: events.add_event_listener, // BBB export. TODO: Remove in an upcoming version.
     remove_event_listener: events.remove_event_listener, // BBB export. TODO: Remove in an upcoming version.
 };

src/core/dom.test.js

@@ -704,4 +704,17 @@ describe("core.dom tests", () => {
             expect(dom.get_data(el, "test_data")).toBe(undefined);
         });
     });
+
+    describe("template", () => {
+        it("Expands a template with template variables.", (done) => {
+            const res = dom.template("<h1>${this.message}</h1>", { message: "ok" });
+            expect(res).toBe("<h1>ok</h1>");
+            done();
+        });
+        it("Returns the string when no template variables are given.", (done) => {
+            const res = dom.template(`<h1>hello</h1>`);
+            expect(res).toBe(`<h1>hello</h1>`);
+            done();
+        });
+    });
 });

src/core/registry.js

@@ -38,8 +38,21 @@ while ((match = dont_catch_re.exec(window.location.search)) !== null) {
     log.info("I will not catch init exceptions");
 }
 
+/**
+ * Global pattern registry.
+ *
+ * This is a singleton and shared among any instance of the Patternslib
+ * registry since Patternslib version 8.
+ *
+ * You normally don't need this as the registry handles it for you.
+ */
+if (typeof window.__patternslib_registry === "undefined") {
+    window.__patternslib_registry = {};
+}
+export const PATTERN_REGISTRY = window.__patternslib_registry;
+
 const registry = {
-    patterns: {},
+    patterns: PATTERN_REGISTRY, // reference to global patterns registry
     // as long as the registry is not initialized, pattern
     // registration just registers a pattern. Once init is called,
     // the DOM is scanned. After that registering a new pattern
@@ -57,7 +70,9 @@ const registry = {
     clear() {
         // Removes all patterns from the registry. Currently only being
         // used in tests.
-        this.patterns = {};
+        for (const name in registry.patterns) {
+            delete registry.patterns[name];
+        }
     },
 
     transformPattern(name, content) {
@@ -176,7 +191,7 @@ const registry = {
             return false;
         }
         if (registry.patterns[name]) {
-            log.error("Already have a pattern called: " + name);
+            log.info("Already have a pattern called: " + name);
             return false;
         }
 

src/globals.js

@@ -0,0 +1,4 @@
+import jquery from "jquery";
+// Register jQuery globally
+window.jQuery = jquery;
+window.$ = jquery;

src/index.js

@@ -0,0 +1,2 @@
+// Webpack entry point for module federation.
+import("./patterns");

src/pat/validation/validation.js

@@ -320,10 +320,7 @@ export default Base.extend({
 
         // Create the validation error DOM node from the template
         const validation_message = input.validationMessage || input[KEY_ERROR_MSG];
-        // See: https://stackoverflow.com/a/37217166/1337474
-        const error_template = new Function(
-            "return `" + options.errorTemplate + "`;"
-        ).call({
+        const error_template = dom.template(options.errorTemplate, {
             message: validation_message,
         });
         const error_node = dom.create_from_string(error_template).firstChild;

src/patterns.js

@@ -4,8 +4,8 @@
 
 // Import base
 import "./public_path"; // first import
+import "./globals";
 import registry from "./core/registry";
-import jquery from "jquery";
 import "modernizr";
 
 // Import all used patterns for the bundle to be generated
@@ -67,5 +67,4 @@ import "./pat/minimalpattern/minimalpattern";
 // Set to ``true`` to include core styles via JavaScript
 window.__patternslib_import_styles = false;
 
-window.jQuery = jquery;
 registry.init();

webpack/module_federation--dynamic-federation.js

@@ -0,0 +1,40 @@
+// Author: Manfred Steyer <manfred.steyer@gmx.net>
+// Author: Johannes Raggam <thetetet@gmail.com>
+
+// From:
+//   https://github.com/manfredsteyer/plugin-demo.git
+//   https://github.com/thet/module-federation-minimaltest.git
+
+/**
+ * Load remote module / bundle.
+ *
+ * Wrapper around webpack runtime API
+ *
+ * Usage: get_container("bundle-name-xyz")
+ *
+ * @param {string} remote - the remote global name
+ * @returns {Promise<object>} - Federated Module Container
+ */
+const container_map = {};
+let is_default_scope_initialized = false;
+
+export default async function get_container(remote) {
+    const container = window[remote];
+
+    // Do we still need to initialize the remote?
+    if (container_map[remote]) {
+        return container;
+    }
+
+    // Do we still need to initialize the shared scope?
+    if (!is_default_scope_initialized) {
+        await __webpack_init_sharing__("default"); // eslint-disable-line no-undef
+        is_default_scope_initialized = true;
+    }
+
+    await container.init(__webpack_share_scopes__.default); // eslint-disable-line no-undef
+
+    // Remember that the container has been initialized.
+    container_map[remote] = true;
+    return container;
+}