@module-federation/nextjs-mf 2.3.1 → 5.1.2

package/lib/loaders/nextPageMapLoader.js

@@ -0,0 +1,129 @@
+const fg = require('fast-glob');
+const fs = require('fs');
+
+/**
+ * Webpack loader which prepares MF map for NextJS pages
+ *
+ * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
+ */
+function nextPageMapLoader() {
+  const pages = getNextPages(this.rootContext);
+  const pageMap = preparePageMap(pages);
+
+  // const [pagesRoot] = getNextPagesRoot(this.rootContext);
+  // this.addContextDependency(pagesRoot);
+
+  const result = `module.exports = { 
+    default: ${JSON.stringify(pageMap)},
+  };`;
+
+  this.callback(null, result);
+}
+
+/**
+ * Webpack config generator for `exposes` option.
+ *   - automatically create `./pages-map` module
+ *   - automatically add all page modules
+ */
+function exposeNextjsPages(cwd) {
+  const pages = getNextPages(cwd);
+
+  const pageModulesMap = {};
+  pages.forEach((page) => {
+    // Creating a map of pages to modules
+    //   './pages/storage/index': './pages/storage/index.tsx',
+    //   './pages/storage/[...slug]': './pages/storage/[...slug].tsx',
+    pageModulesMap['./' + sanitizePagePath(page)] = `./${page}`;
+  });
+
+  const exposesWithPageMap = {
+    './pages-map': `${__filename}!${__filename}`,
+    ...pageModulesMap,
+  };
+
+  return exposesWithPageMap;
+}
+
+function getNextPagesRoot(appRoot) {
+  let pagesDir = 'src/pages/';
+  let absPageDir = `${appRoot}/${pagesDir}`;
+  if (!fs.existsSync(absPageDir)) {
+    pagesDir = 'pages/';
+    absPageDir = `${appRoot}/${pagesDir}`;
+  }
+
+  return [absPageDir, pagesDir];
+}
+
+/**
+ * From provided ROOT_DIR `scan` pages directory
+ * and return list of user defined pages
+ * (except special ones, like _app, _document, _error)
+ *
+ * @type {(rootDir: string) => string[]}
+ */
+function getNextPages(rootDir) {
+  const [cwd, pagesDir] = getNextPagesRoot(rootDir);
+
+  // scan all files in pages folder except pages/api
+  let pageList = fg.sync('**/*.{ts,tsx,js,jsx}', {
+    cwd,
+    onlyFiles: true,
+    ignore: ['api/**'],
+  });
+
+  // remove specific nextjs pages
+  const exclude = [
+    /^_app\..*/, // _app.tsx
+    /^_document\..*/, // _document.tsx
+    /^_error\..*/, // _error.tsx
+    /^404\..*/, // 404.tsx
+    /^500\..*/, // 500.tsx
+    /^\[\.\.\..*\]\..*/, // /[...federationPage].tsx
+  ];
+  pageList = pageList.filter((page) => {
+    return !exclude.some((r) => r.test(page));
+  });
+
+  pageList = pageList.map((page) => `${pagesDir}${page}`);
+
+  return pageList;
+}
+
+function sanitizePagePath(item) {
+  return item
+    .replace(/^src\/pages\//i, 'pages/')
+    .replace(/\.(ts|tsx|js|jsx)$/, '');
+}
+
+/**
+ * Create MF map from list of NextJS pages
+ *
+ * From
+ *   ['pages/index.tsx', 'pages/storage/[...slug].tsx', 'pages/storage/index.tsx']
+ * Getting the following map
+ *   {
+ *     '/': './pages/index',
+ *     '/storage/*': './pages/storage/[...slug]',
+ *     '/storage': './pages/storage/index'
+ *   }
+ *
+ * @type {(pages: string[]) => {[key: string]: string}}
+ */
+function preparePageMap(pages) {
+  const result = {};
+
+  pages.forEach((pagePath) => {
+    const page = sanitizePagePath(pagePath);
+    let key =
+      '/' +
+      page.replace(/\[\.\.\.[^\]]+\]/gi, '*').replace(/\[([^\]]+)\]/gi, ':$1');
+    key = key.replace(/^\/pages\//, '/').replace(/\/index$/, '') || '/';
+    result[key] = `./${page}`;
+  });
+
+  return result;
+}
+
+module.exports = nextPageMapLoader;
+module.exports.exposeNextjsPages = exposeNextjsPages;

package/lib/utils.js

@@ -0,0 +1,97 @@
+const remoteVars = process.env.REMOTES || {};
+
+const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
+  const [key, value] = item;
+  if (typeof value === 'object' && typeof value.then === 'function') {
+    acc[key] = { asyncContainer: value };
+  } else if (typeof value === 'string') {
+    const [global, url] = value.split('@');
+    acc[key] = { global, url };
+  } else {
+    throw new Error(`[mf] Invalid value received for runtime_remote "${key}"`);
+  }
+  return acc;
+}, {});
+
+module.exports.remotes = runtimeRemotes;
+
+/**
+ * Return initialized remote container by remote's key or its runtime remote item data.
+ *
+ * `runtimeRemoteItem` might be
+ *    { global, url } - values obtained from webpack remotes option `global@url`
+ * or
+ *    { asyncContainer } - async container is a promise that resolves to the remote container
+ */
+function injectScript(keyOrRuntimeRemoteItem) {
+  let reference = keyOrRuntimeRemoteItem;
+  if (typeof keyOrRuntimeRemoteItem === 'string') {
+    reference = runtimeRemotes[keyOrRuntimeRemoteItem];
+  }
+
+  // 1) Load remote container if needed
+  let asyncContainer;
+  if (reference.asyncContainer) {
+    asyncContainer = reference.asyncContainer;
+  } else {
+    const remoteGlobal = reference.global;
+    const __webpack_error__ = new Error();
+    asyncContainer = new Promise(function (resolve, reject) {
+      if (typeof window[remoteGlobal] !== 'undefined') {
+        return resolve(window[remoteGlobal]);
+      }
+
+      __webpack_require__.l(
+        reference.url,
+        function (event) {
+          if (typeof window[remoteGlobal] !== 'undefined') {
+            return resolve(window[remoteGlobal]);
+          }
+
+          var errorType =
+            event && (event.type === 'load' ? 'missing' : event.type);
+          var realSrc = event && event.target && event.target.src;
+          __webpack_error__.message =
+            'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
+          __webpack_error__.name = 'ScriptExternalLoadError';
+          __webpack_error__.type = errorType;
+          __webpack_error__.request = realSrc;
+          reject(__webpack_error__);
+        },
+        remoteGlobal
+      );
+    });
+  }
+
+  // 2) Initialize remote container
+  return asyncContainer
+    .then(function (container) {
+      if (!__webpack_share_scopes__.default) {
+        // not always a promise, so we wrap it in a resolve
+        return Promise.resolve(__webpack_init_sharing__('default')).then(
+          function () {
+            return container;
+          }
+        );
+      } else {
+        return container;
+      }
+    })
+    .then(function (container) {
+      try {
+        // WARNING: here might be a potential BUG.
+        //   `container.init` does not return a Promise, and here we do not call `then` on it.
+        // But according to [docs](https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers)
+        //   it must be async.
+        // The problem may be in Proxy in NextFederationPlugin.js.
+        //   or maybe a bug in the webpack itself - instead of returning rejected promise it just throws an error.
+        // But now everything works properly and we keep this code as is.
+        container.init(__webpack_share_scopes__.default);
+      } catch (e) {
+        // maybe container already initialized so nothing to throw
+      }
+      return container;
+    });
+}
+
+module.exports.injectScript = injectScript;

package/package.json

@@ -1,22 +1,32 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "2.3.1",
+  "version": "5.1.2",
   "description": "Module Federation helper for NextJS",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "repository": "https://github.com/module-federation/nextjs-mf",
   "author": "Zack Jackson <zackary.l.jackson@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\""
+    "demo": "yarn build && cd demo && yarn install && yarn dev",
+    "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\"",
+    "build": "rm -rf lib && cp -r ./src/ lib/ && rollup -c"
   },
   "dependencies": {
-    "webpack-federated-stats-plugin": "2.0.5"
+    "chalk": "^4.0.0",
+    "fast-glob": "^3.2.11"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-multi-entry": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "next": "11.0.1",
     "prettier": "2.3.2",
-    "webpack": "5.40.0"
+    "rollup": "^2.78.1",
+    "rollup-obfuscator": "^3.0.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "webpack": "5.45.1"
   }
 }

package/index.d.ts

@@ -1,2 +0,0 @@
-export type { WithFederatedSidecarOptions } from "./lib/with-federated-sidecar";
-export { withFederatedSidecar } from "./lib/with-federated-sidecar";

package/index.js

@@ -1,5 +0,0 @@
-const withFederatedSidecar = require("./lib/with-federated-sidecar");
-
-module.exports = {
-  withFederatedSidecar
-};

package/lib/federation-loader.js

@@ -1,27 +0,0 @@
-const shareNextInternals = `if (process.browser) {
-  Object.assign(__webpack_share_scopes__.default, {
-    "next/link": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/link")),
-      },
-    },
-    "next/head": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/head")),
-      },
-    },
-    "next/dynamic": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/dynamic")),
-      },
-    },
-  });
-}
-`
-
-module.exports = function (source) {
-  return shareNextInternals + source
-};

package/lib/with-federated-sidecar.d.ts

@@ -1,11 +0,0 @@
-import type { ModuleFederationPluginOptions } from "webpack/lib/container/ModuleFederationPlugin";
-
-export type WithFederatedSidecarOptions = {
-  removePlugins?: string[];
-  stats?: string;
-};
-
-export function withFederatedSidecar(
-  federationPluginOptions: ModuleFederationPluginOptions,
-  withModuleFederationOptions?: WithFederatedSidecarOptions
-): (nextConfig?: any) => any;

package/lib/with-federated-sidecar.js

@@ -1,120 +0,0 @@
-const path = require("path");
-
-const FederatedStatsPlugin = require("webpack-federated-stats-plugin");
-
-const withModuleFederation =
-  (
-    federationPluginOptions,
-    {
-      removePlugins = [
-        "BuildManifestPlugin",
-        "ReactLoadablePlugin",
-        "DropClientPage",
-        "WellKnownErrorsPlugin",
-      ],
-      stats,
-    } = {}
-  ) =>
-  (nextConfig = {}) =>
-    Object.assign({}, nextConfig, {
-      /**
-       * @param {import("webpack").Configuration} config
-       * @param {*} options
-       * @returns {import("webpack").Configuration}
-       */
-      webpack(config, options) {
-        const { webpack } = options;
-
-        if (!options.isServer) {
-          /**
-           * @type {{ webpack: import("webpack") }}
-           */
-          config.plugins.push({
-            __NextFederation__: true,
-            /**
-             * @param {import("webpack").Compiler} compiler
-             */
-            apply(compiler) {
-              compiler.hooks.afterCompile.tapAsync(
-                "NextFederation",
-                (compilation, done) => {
-                  const toDrop = new Set(removePlugins || []);
-
-                  const filteredPlugins = compilation.options.plugins.filter(
-                    (plugin) => {
-                      if (
-                        (plugin.constructor &&
-                          toDrop.has(plugin.constructor.name)) ||
-                        plugin.__NextFederation__
-                      ) {
-                        return false;
-                      }
-
-                      return true;
-                    }
-                  );
-                  // attach defaults that always need to be shared
-                  Object.assign(federationPluginOptions.shared, {
-                    "next/dynamic": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                    "next/link": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                    "next/head": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                  });
-                  /** @type {import("webpack").WebpackOptionsNormalized} */
-                  const webpackOptions = {
-                    cache: false,
-                    ...compilation.options,
-                    output: {
-                      ...compilation.options.output,
-                      chunkLoadingGlobal: undefined,
-                      devtoolNamespace: undefined,
-                      uniqueName: federationPluginOptions.name,
-                    },
-                    entry: {
-                      noop: { import: [path.resolve(__dirname, "noop.js")] },
-                    },
-                    plugins: [
-                      ...filteredPlugins,
-                      new webpack.container.ModuleFederationPlugin(
-                        federationPluginOptions
-                      ),
-                    ],
-                    optimization: {
-                      ...compilation.options.optimization,
-                      runtimeChunk: false,
-                      splitChunks: undefined,
-                    },
-                  };
-
-                  if (stats) {
-                    webpackOptions.plugins.push(
-                      new FederatedStatsPlugin({ filename: stats })
-                    );
-                  }
-
-                  webpack(webpackOptions, (err) => {
-                    done(err);
-                  });
-                }
-              );
-            },
-          });
-        }
-
-        if (typeof nextConfig.webpack === "function") {
-          return nextConfig.webpack(config, options);
-        }
-
-        return config;
-      },
-    });
-
-module.exports = withModuleFederation;