feat(Build): Dynamic Module Federation. Add config files and helpers.

With module federation you can share dependencies over multiple bundles without
loading them multiple times.

The dynamic part here allows the host to not know anything about it's remotes.
This concept can be used for add-ons to a base bundle.
Thanks @manfredsteyer for the help getting this to work!

Use the webpack/webpack.mf.js to extend your own webpack configuration with
dynamic module federation support.
In your main bundle (the "host") use webpack/dynamic_mf.js to configure the
entry point.

For more information see: docs/developer/module-federation.md.
For the general concept see: https://webpack.js.org/concepts/module-federation/

Co-authored-by: Johannes Raggam <thetetet@gmail.com>
Co-authored-by: Manfred Steyer <manfred.steyer@gmx.net>

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``.
+

src/index.js

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

webpack/module_federation.js

@@ -0,0 +1,41 @@
+/**
+ * Initialize dynamic module federation.
+ */
+import get_container from "./module_federation--dynamic-federation";
+
+// Patternslib Module Federation bundle prefix.
+// This is used to filter for module federation enabled bundles.
+// NOTE: This is also defined in ``webpack.mf.js``.
+export const MF_NAME_PREFIX = "__patternslib_mf__";
+
+export async function initialize_remote({ remote_name, exposed_module = "./main" }) {
+    const container = await get_container(remote_name);
+    const factory = await container.get(exposed_module);
+    const module = factory();
+    return module;
+}
+
+function document_ready(fn) {
+    // see if DOM is already available
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+        // call on next available tick
+        setTimeout(fn, 1);
+    } else {
+        document.addEventListener("DOMContentLoaded", fn);
+    }
+}
+
+document_ready(function () {
+    // Automatically initialize all Module Federation enabled Patternslib based
+    // bundles by filtering for the prefix ``__patternslib_mf__``.
+    // Do this on document ready, as this is the time where all MF bundles have
+    // been registered in the global namespace.
+    const bundles = Object.keys(window).filter((it) => it.indexOf(MF_NAME_PREFIX) === 0);
+    for (const bundle_name of bundles) {
+        // Now load + initialize each bundle.
+        initialize_remote({ remote_name: bundle_name });
+        console.debug(
+            `Patternslib Module Federation: Loaded and initialized bundle "${bundle_name}".`
+        );
+    }
+});

webpack/webpack.config.js

@@ -25,7 +25,7 @@ module.exports = (env, argv, config, babel_include = []) => {
 
     const base_config = {
         entry: {
-            "bundle.min": path.resolve(__dirname, "../src/patterns.js"),
+            "bundle.min": path.resolve(__dirname, "../src/index.js"),
             "bundle-polyfills.min": path.resolve(__dirname, "../src/polyfills.js"),
         },
         externals: [

webpack/webpack.mf.js

@@ -0,0 +1,60 @@
+const { ModuleFederationPlugin } = require("webpack").container;
+const local_package_json = require("../package.json");
+
+// Patternslib Module Federation bundle prefix.
+// This is used to filter for module federation enabled bundles.
+// NOTE: This is also defined in ``module_federation.js``.
+const MF_NAME_PREFIX = "__patternslib_mf__";
+
+function shared_from_dependencies(...dependencies) {
+    const shared = {};
+    for (const deps of dependencies) {
+        if (!deps) {
+            continue;
+        }
+        for (const [name, version] of Object.entries(deps)) {
+            shared[name] = {
+                singleton: true,
+                requiredVersion: version,
+            };
+            if (name === "underscore") {
+                // Underscore, for some reason, needs to have the version set explicitly
+                shared[name].requiredVersion = "1.13.2";
+            }
+        }
+    }
+    return shared;
+}
+
+function config({ name, filename = "remote.min.js", package_json, remote_entry }) {
+    // If no name is given, use the package name.
+    name = name || package_json?.name || local_package_json.name;
+
+    // Create a JS-variable compatible name and add a prefix.
+    const normalized_bundle_name =
+        MF_NAME_PREFIX + name.match(/([_$A-Za-z0-9])/g).join("");
+
+    return new ModuleFederationPlugin({
+        name: normalized_bundle_name,
+        ...(remote_entry && {
+            filename: filename,
+            exposes: {
+                "./main": remote_entry,
+            },
+        }),
+        shared: {
+            ...shared_from_dependencies(
+                local_package_json.dependencies,
+                package_json?.dependencies
+            ),
+        },
+    });
+}
+
+// Default export
+const module_exports = (module.exports = config);
+
+// Named exports
+module_exports.config = config;
+module_exports.MF_NAME_PREFIX = MF_NAME_PREFIX;
+module_exports.shared_from_dependencies = shared_from_dependencies;