@module-federation/nextjs-mf 5.2.1 → 5.3.0

package/lib/client/useMFRemote.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../_virtual/_tslib.js');
+var React = require('react');
+var RemoteContainer = require('./RemoteContainer.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var isBrowser = typeof window !== 'undefined';
+/**
+ * React hook which provides an access to RemoteContainer in Module Federation
+ *
+ * @param global - can be a global variable name OR connection string "global@url"
+ */
+function useMFRemote(global) {
+    var remote;
+    if (isBrowser) {
+        // on client (we get instances from global variable because webpack breaks Singletons)
+        var MFClient_1 = window.mf_client;
+        remote = MFClient_1.remotes[global] || MFClient_1.registerRemote(global);
+    }
+    else {
+        // on server side
+        remote = RemoteContainer.RemoteContainer.createSingleton(global);
+    }
+    var _a = _tslib.__read(React__namespace.useState(remote.isLoaded()), 2), loaded = _a[0], setLoaded = _a[1];
+    var _b = _tslib.__read(React__namespace.useState(remote.error), 2), error = _b[0], setError = _b[1];
+    React__namespace.useEffect(function () {
+        var handleLoadComplete = function () {
+            setLoaded(true);
+        };
+        var handleLoadError = function (e) {
+            setError(e);
+        };
+        if (!loaded && remote.isLoaded()) {
+            handleLoadComplete();
+        }
+        remote.events.on('loadComplete', handleLoadComplete);
+        remote.events.on('loadError', handleLoadError);
+        return function () {
+            remote.events.off('loadComplete', handleLoadComplete);
+            remote.events.off('loadError', handleLoadError);
+        };
+    }, [remote]);
+    return {
+        remote: remote,
+        loaded: loaded,
+        error: error,
+    };
+}
+
+exports.useMFRemote = useMFRemote;

package/lib/loaders/UrlNode.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 🛑🛑🛑 Attention! 🛑🛑🛑
+ * Do not add type definitions to this file!!
+ * It already exists in src/client folder.
+ * So remove this file and import ts version from src/client/UrlNode.
+ *
+ * This file was add just for proper compilation of JS files without any rollup warnings:
+ * "(!) Unresolved dependencies"
+ * "nextjs-mf/src/client/UrlNode (imported by nextjs-mf/src/client/UrlNode?commonjs-external)"
+ */
+
+/**
+ * This class provides a logic of sorting dynamic routes in NextJS.
+ *
+ * It was copied from
+ * @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
+ */
+class UrlNode {
+  placeholder = true;
+  children = new Map();
+  slugName = null;
+  restSlugName = null;
+  optionalRestSlugName = null;
+
+  insert(urlPath) {
+    this._insert(urlPath.split('/').filter(Boolean), [], false);
+  }
+
+  smoosh() {
+    return this._smoosh();
+  }
+
+  _smoosh(prefix = '/') {
+    const childrenPaths = [...this.children.keys()].sort();
+    if (this.slugName !== null) {
+      childrenPaths.splice(childrenPaths.indexOf('[]'), 1);
+    }
+    if (this.restSlugName !== null) {
+      childrenPaths.splice(childrenPaths.indexOf('[...]'), 1);
+    }
+    if (this.optionalRestSlugName !== null) {
+      childrenPaths.splice(childrenPaths.indexOf('[[...]]'), 1);
+    }
+
+    const routes = childrenPaths
+      .map((c) => this.children.get(c)._smoosh(`${prefix}${c}/`))
+      .reduce((prev, curr) => [...prev, ...curr], []);
+
+    if (this.slugName !== null) {
+      routes.push(
+        ...this.children.get('[]')._smoosh(`${prefix}[${this.slugName}]/`)
+      );
+    }
+
+    if (!this.placeholder) {
+      const r = prefix === '/' ? '/' : prefix.slice(0, -1);
+      if (this.optionalRestSlugName != null) {
+        throw new Error(
+          `You cannot define a route with the same specificity as a optional catch-all route ("${r}" and "${r}[[...${this.optionalRestSlugName}]]").`
+        );
+      }
+
+      routes.unshift(r);
+    }
+
+    if (this.restSlugName !== null) {
+      routes.push(
+        ...this.children
+          .get('[...]')
+          ._smoosh(`${prefix}[...${this.restSlugName}]/`)
+      );
+    }
+
+    if (this.optionalRestSlugName !== null) {
+      routes.push(
+        ...this.children
+          .get('[[...]]')
+          ._smoosh(`${prefix}[[...${this.optionalRestSlugName}]]/`)
+      );
+    }
+
+    return routes;
+  }
+
+  _insert(urlPaths, slugNames, isCatchAll) {
+    if (urlPaths.length === 0) {
+      this.placeholder = false;
+      return;
+    }
+
+    if (isCatchAll) {
+      throw new Error(`Catch-all must be the last part of the URL.`);
+    }
+
+    // The next segment in the urlPaths list
+    let nextSegment = urlPaths[0];
+
+    // Check if the segment matches `[something]`
+    if (nextSegment.startsWith('[') && nextSegment.endsWith(']')) {
+      // Strip `[` and `]`, leaving only `something`
+      let segmentName = nextSegment.slice(1, -1);
+
+      let isOptional = false;
+      if (segmentName.startsWith('[') && segmentName.endsWith(']')) {
+        // Strip optional `[` and `]`, leaving only `something`
+        segmentName = segmentName.slice(1, -1);
+        isOptional = true;
+      }
+
+      if (segmentName.startsWith('...')) {
+        // Strip `...`, leaving only `something`
+        segmentName = segmentName.substring(3);
+        isCatchAll = true;
+      }
+
+      if (segmentName.startsWith('[') || segmentName.endsWith(']')) {
+        throw new Error(
+          `Segment names may not start or end with extra brackets ('${segmentName}').`
+        );
+      }
+
+      if (segmentName.startsWith('.')) {
+        throw new Error(
+          `Segment names may not start with erroneous periods ('${segmentName}').`
+        );
+      }
+
+      const handleSlug = function handleSlug(previousSlug, nextSlug) {
+        if (previousSlug !== null) {
+          // If the specific segment already has a slug but the slug is not `something`
+          // This prevents collisions like:
+          // pages/[post]/index.js
+          // pages/[id]/index.js
+          // Because currently multiple dynamic params on the same segment level are not supported
+          if (previousSlug !== nextSlug) {
+            // TODO: This error seems to be confusing for users, needs an error link, the description can be based on above comment.
+            throw new Error(
+              `You cannot use different slug names for the same dynamic path ('${previousSlug}' !== '${nextSlug}').`
+            );
+          }
+        }
+
+        slugNames.forEach((slug) => {
+          if (slug === nextSlug) {
+            throw new Error(
+              `You cannot have the same slug name "${nextSlug}" repeat within a single dynamic path`
+            );
+          }
+
+          if (slug.replace(/\W/g, '') === nextSegment.replace(/\W/g, '')) {
+            throw new Error(
+              `You cannot have the slug names "${slug}" and "${nextSlug}" differ only by non-word symbols within a single dynamic path`
+            );
+          }
+        });
+
+        slugNames.push(nextSlug);
+      };
+
+      if (isCatchAll) {
+        if (isOptional) {
+          if (this.restSlugName != null) {
+            throw new Error(
+              `You cannot use both an required and optional catch-all route at the same level ("[...${this.restSlugName}]" and "${urlPaths[0]}" ).`
+            );
+          }
+
+          handleSlug(this.optionalRestSlugName, segmentName);
+          // slugName is kept as it can only be one particular slugName
+          this.optionalRestSlugName = segmentName;
+          // nextSegment is overwritten to [[...]] so that it can later be sorted specifically
+          nextSegment = '[[...]]';
+        } else {
+          if (this.optionalRestSlugName != null) {
+            throw new Error(
+              `You cannot use both an optional and required catch-all route at the same level ("[[...${this.optionalRestSlugName}]]" and "${urlPaths[0]}").`
+            );
+          }
+
+          handleSlug(this.restSlugName, segmentName);
+          // slugName is kept as it can only be one particular slugName
+          this.restSlugName = segmentName;
+          // nextSegment is overwritten to [...] so that it can later be sorted specifically
+          nextSegment = '[...]';
+        }
+      } else {
+        if (isOptional) {
+          throw new Error(
+            `Optional route parameters are not yet supported ("${urlPaths[0]}").`
+          );
+        }
+        handleSlug(this.slugName, segmentName);
+        // slugName is kept as it can only be one particular slugName
+        this.slugName = segmentName;
+        // nextSegment is overwritten to [] so that it can later be sorted specifically
+        nextSegment = '[]';
+      }
+    }
+
+    // If this UrlNode doesn't have the nextSegment yet we create a new child UrlNode
+    if (!this.children.has(nextSegment)) {
+      this.children.set(nextSegment, new UrlNode());
+    }
+
+    this.children
+      .get(nextSegment)
+      ._insert(urlPaths.slice(1), slugNames, isCatchAll);
+  }
+}
+
+exports.UrlNode = UrlNode;

package/lib/loaders/fixImageLoader.js

@@ -1,3 +1,7 @@
+const path = require('path');
+const Template = require('webpack/lib/Template');
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+
 /**
  * This loader was specially created for tunning next-image-loader result
  *   see https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/loaders/next-image-loader.js
@@ -12,14 +16,44 @@
  *
  * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
  */
-function fixImageLoader(content) {
-  // replace(/(.+\:\/\/[^\/]+){0,1}\/.*/i, '$1')
-  //    this regexp will extract the hostname from publicPath
-  //    http://localhost:3000/_next/... -> http://localhost:3000
-  const currentHostnameCode =
-    "__webpack_require__.p.replace(/(.+\\:\\/\\/[^\\/]+){0,1}\\/.*/i, '$1')";
+async function fixImageLoader(remaining) {
+  this.cacheable(true);
+  const isServer = this._compiler.options.name !== 'client';
+  const result = await this.importModule(
+    `${this.resourcePath}.webpack[javascript/auto]` + `!=!${remaining}`
+  );
+  const content = result.default || result;
+
+  const computedAssetPrefix = isServer
+    ? ` \'\'`
+    : `(${RuntimeGlobals.publicPath} && ${RuntimeGlobals.publicPath}.indexOf('://') > 0 ? new URL(${RuntimeGlobals.publicPath}).origin : \'\')`;
 
-  return content.replace('"src":', `"src":${currentHostnameCode}+`);
+  const constructedObject = Object.entries(content).reduce(
+    (acc, [key, value]) => {
+      if (key === 'src') {
+        if (value && value.indexOf('://') < 0) {
+          value = path.join(value);
+        }
+        acc.push(
+          `${key}: computedAssetsPrefixReference + ${JSON.stringify(value)}`
+        );
+        return acc;
+      }
+      acc.push(`${key}: ${JSON.stringify(value)}`);
+      return acc;
+    },
+    []
+  );
+  const updated = Template.asString([
+    "let computedAssetsPrefixReference = '';",
+    'try {',
+    Template.indent(`computedAssetsPrefixReference = ${computedAssetPrefix};`),
+    '} catch (e) {}',
+    'export default {',
+    Template.indent(constructedObject.join(',\n')),
+    '}',
+  ]);
+  return updated;
 }
 
-module.exports = fixImageLoader;
+module.exports.pitch = fixImageLoader;

package/lib/loaders/helpers.js

@@ -1,8 +1,13 @@
+'use strict';
+
+var helpers = require('../_virtual/helpers.js');
+
 /**
  * Inject a loader into the current module rule.
  * This function mutates `rule` argument!
  */
-module.exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
+
+helpers.__exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
   if (rule.loader) {
     rule.use = [loader, { loader: rule.loader, options: rule.options }];
     delete rule.loader;
@@ -15,7 +20,7 @@ module.exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
 /**
  * Check that current module rule has a loader with the provided name.
  */
-module.exports.hasLoader = function hasLoader(rule, loaderName) {
+helpers.__exports.hasLoader = function hasLoader(rule, loaderName) {
   if (rule.loader === loaderName) {
     return true;
   } else if (rule.use) {
@@ -33,3 +38,17 @@ module.exports.hasLoader = function hasLoader(rule, loaderName) {
   }
   return false;
 };
+
+helpers.__exports.toDisplayErrors = function toDisplayErrors(err) {
+  return err
+    .map((error) => {
+      let message = error.message;
+      if (error.stack) {
+        message += '\n' + error.stack;
+      }
+      return message;
+    })
+    .join('\n');
+};
+
+module.exports = helpers.__exports;

package/lib/loaders/nextPageMapLoader.js

@@ -1,5 +1,21 @@
-const fg = require('fast-glob');
-const fs = require('fs');
+'use strict';
+
+var nextPageMapLoader$1 = require('../_virtual/nextPageMapLoader.js');
+var require$$0 = require('fast-glob');
+var require$$1 = require('fs');
+var UrlNode$1 = require('../_virtual/UrlNode.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
+var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
+
+const fg = require$$0__default["default"];
+const fs = require$$1__default["default"];
+
+// TODO: import UrlNode from ./client folder when whole project migrates on TypeScript (but right now using JS copy of this class)
+// const UrlNode = require('../client/UrlNode').UrlNode;
+const UrlNode = UrlNode$1.UrlNode;
 
 /**
  * Webpack loader which prepares MF map for NextJS pages
@@ -7,17 +23,22 @@ const fs = require('fs');
  * @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 opts = this.getOptions();
+  const pages = getNextPages(this.rootContext);
 
-  const result = `module.exports = { 
-    default: ${JSON.stringify(pageMap)},
-  };`;
+  let result = '';
+  if (Object.hasOwnProperty.call(opts, 'v2')) {
+    result = preparePageMapV2(pages);
+  } else {
+    result = preparePageMap(pages);
+  }
 
-  this.callback(null, result);
+  this.callback(
+    null,
+    `module.exports = { default: ${JSON.stringify(result)} };`
+  );
 }
 
 /**
@@ -38,6 +59,7 @@ function exposeNextjsPages(cwd) {
 
   const exposesWithPageMap = {
     './pages-map': `${__filename}!${__filename}`,
+    './pages-map-v2': `${__filename}?v2!${__filename}`,
     ...pageModulesMap,
   };
 
@@ -113,17 +135,59 @@ function sanitizePagePath(item) {
 function preparePageMap(pages) {
   const result = {};
 
-  pages.forEach((pagePath) => {
-    const page = sanitizePagePath(pagePath);
-    let key =
-      '/' +
-      page.replace(/\[\.\.\.[^\]]+\]/gi, '*').replace(/\[([^\]]+)\]/gi, ':$1');
+  const clearedPages = pages.map((p) => `/${sanitizePagePath(p)}`);
+
+  // getSortedRoutes @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
+  const root = new UrlNode();
+  clearedPages.forEach((pagePath) => root.insert(pagePath));
+  // Smoosh will then sort those sublevels up to the point where you get the correct route definition priority
+  const sortedPages = root.smoosh();
+
+  sortedPages.forEach((page) => {
+    let key = page
+      .replace(/\[\.\.\.[^\]]+\]/gi, '*')
+      .replace(/\[([^\]]+)\]/gi, ':$1');
     key = key.replace(/^\/pages\//, '/').replace(/\/index$/, '') || '/';
-    result[key] = `./${page}`;
+    result[key] = `.${page}`;
   });
 
   return result;
 }
 
-module.exports = nextPageMapLoader;
-module.exports.exposeNextjsPages = exposeNextjsPages;
+/**
+ * Create MF 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/index'
+ *     '/storage/[...slug]': './pages/storage/[...slug]',
+ *   }
+ *
+ * @type {(pages: string[]) => {[key: string]: string}}
+ */
+function preparePageMapV2(pages) {
+  const result = {};
+
+  const clearedPages = pages.map((p) => `/${sanitizePagePath(p)}`);
+
+  // getSortedRoutes @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
+  const root = new UrlNode();
+  clearedPages.forEach((pagePath) => root.insert(pagePath));
+  // Smoosh will then sort those sublevels up to the point where you get the correct route definition priority
+  const sortedPages = root.smoosh();
+
+  sortedPages.forEach((page) => {
+    let key = page.replace(/^\/pages\//, '/').replace(/\/index$/, '') || '/';
+    result[key] = `.${page}`;
+  });
+
+  return result;
+}
+
+nextPageMapLoader$1.nextPageMapLoader.exports = nextPageMapLoader;
+nextPageMapLoader$1.nextPageMapLoader.exports.exposeNextjsPages = exposeNextjsPages;
+
+module.exports = nextPageMapLoader$1.nextPageMapLoader.exports;

package/lib/loaders/patchNextClientPageLoader.js

@@ -0,0 +1,53 @@
+const path = require('path');
+
+/**
+ * This webpack loader patches next/dist/client/page-loader.js file.
+ * Also it requires `include-defaults.js` with required shared libs
+ *
+ * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
+ */
+function patchNextClientPageLoader(content) {
+  if (content.includes('MFClient')) {
+    // If MFClient already applied then skip patch
+    return content;
+  }
+
+  // avoid absolute paths as they break hashing when the root for the project is moved
+  // @see https://webpack.js.org/contribute/writing-a-loader/#absolute-paths
+  const pathIncludeDefaults = path.relative(
+    this.context,
+    path.resolve(__dirname, '../include-defaults.js')
+  );
+  const pathMFClient = path.relative(
+    this.context,
+    path.resolve(__dirname, '../client/MFClient.js')
+  );
+
+  patchedContent = content.replace(
+    'exports.default = PageLoader;',
+    `
+      require(${JSON.stringify(pathIncludeDefaults)});
+      const MFClient = require(${JSON.stringify(pathMFClient)}).MFClient;
+
+      class PageLoaderExtended extends PageLoader {
+        constructor(buildId, assetPrefix) {
+          super(buildId, assetPrefix);
+          global.mf_client = new MFClient(this);
+        }
+
+        _getPageListOriginal() {
+          return super.getPageList();
+        }
+
+        getPageList() {
+          return global.mf_client.getPageList();
+        }
+      }
+      exports.default = PageLoaderExtended;
+    `
+  );
+
+  return patchedContent;
+}
+
+module.exports = patchNextClientPageLoader;

package/lib/plugins/DevHmrFixInvalidPongPlugin.js

@@ -0,0 +1,65 @@
+'use strict';
+
+/**
+ * If HMR through websocket received {"invalid":true, "event":"pong"} event
+ *   then pages reloads. But for federated page this is unwanted behavior.
+ *
+ * So this plugin in DEV mode disables page.reload() in HMR for federated pages.
+ */
+
+class DevHmrFixInvalidPongPlugin {
+  /**
+   * Apply the plugin
+   * @param {import("webpack").Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const webpack = compiler.webpack;
+
+    compiler.hooks.thisCompilation.tap(
+      'DevHmrFixInvalidPongPlugin',
+      (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'DevHmrFixInvalidPongPlugin',
+            state: compilation.constructor.PROCESS_ASSETS_STAGE_PRE_PROCESS,
+          },
+          (assets) => {
+            Object.keys(assets).forEach((filename) => {
+              if (filename.endsWith('/main.js')) {
+                const asset = compilation.getAsset(filename);
+                const newSource = asset.source.source().replace(
+                  new RegExp(
+                    escapeRegExp(
+                      'if (payload.event === \\"pong\\" && payload.invalid && !self.__NEXT_DATA__.err) {'
+                    ),
+                    'g'
+                  ),
+                  `if (payload.event === \\"pong\\" && payload.invalid && !self.__NEXT_DATA__.err) {
+                    if (window.mf_client &&  window.mf_client.isFederatedPathname(window.location.pathname)) return;
+                  `.replaceAll('\n', '\\n')
+                );
+
+                const updatedAsset = new webpack.sources.RawSource(newSource);
+
+                if (asset) {
+                  compilation.updateAsset(filename, updatedAsset);
+                } else {
+                  compilation.emitAsset(filename, updatedAsset);
+                }
+              }
+            });
+          }
+        );
+      }
+    );
+  }
+}
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+var DevHmrFixInvalidPongPlugin_1 = DevHmrFixInvalidPongPlugin;
+
+module.exports = DevHmrFixInvalidPongPlugin_1;

package/lib/utils.js

@@ -1,3 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
 const remoteVars = process.env.REMOTES || {};
 
 const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
@@ -13,8 +17,6 @@ const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
   return acc;
 }, {});
 
-module.exports.remotes = runtimeRemotes;
-
 /**
  * Return initialized remote container by remote's key or its runtime remote item data.
  *
@@ -94,4 +96,6 @@ function injectScript(keyOrRuntimeRemoteItem) {
     });
 }
 
-module.exports.injectScript = injectScript;
+var injectScript_1 = injectScript;
+
+exports.injectScript = injectScript_1;