@module-federation/nextjs-mf 5.2.2 → 5.3.1

package/lib/loaders/UrlNode.js

@@ -0,0 +1,209 @@
+/**
+ * 🛑🛑🛑 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
+ */
+export 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);
+  }
+}

package/lib/loaders/nextPageMapLoader.js

@@ -1,23 +1,32 @@
 const fg = require('fast-glob');
 const fs = require('fs');
 
+// 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 = require('./UrlNode').UrlNode;
+
 /**
  * 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 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 +47,7 @@ function exposeNextjsPages(cwd) {
 
   const exposesWithPageMap = {
     './pages-map': `${__filename}!${__filename}`,
+    './pages-map-v2': `${__filename}?v2!${__filename}`,
     ...pageModulesMap,
   };
 
@@ -113,13 +123,53 @@ 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;
+}
+
+/**
+ * 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;

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/node-plugin/streaming/CommonJsChunkLoadingPlugin.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var LoadFileChunkLoadingRuntimeModule = require('./LoadFileChunkLoadingRuntimeModule.js');
+
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+const StartupChunkDependenciesPlugin = require('webpack/lib/runtime/StartupChunkDependenciesPlugin');
+// const ChunkLoadingRuntimeModule = require('webpack/lib/node/ReadFileChunkLoadingRuntimeModule')
+class CommonJsChunkLoadingPlugin {
+  constructor(options) {
+    this.options = options || {};
+    this._asyncChunkLoading = this.options.asyncChunkLoading;
+  }
+
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const chunkLoadingValue = this._asyncChunkLoading
+      ? 'async-node'
+      : 'require';
+    new StartupChunkDependenciesPlugin({
+      chunkLoading: chunkLoadingValue,
+      asyncChunkLoading: this._asyncChunkLoading,
+    }).apply(compiler);
+    compiler.hooks.thisCompilation.tap(
+      'CommonJsChunkLoadingPlugin',
+      (compilation) => {
+        const onceForChunkSet = new WeakSet();
+        const handler = (chunk, set) => {
+          if (onceForChunkSet.has(chunk)) return;
+          onceForChunkSet.add(chunk);
+          set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+          set.add(RuntimeGlobals.hasOwnProperty);
+          compilation.addRuntimeModule(
+            chunk,
+            new LoadFileChunkLoadingRuntimeModule(set, this.options, {
+              webpack: compiler.webpack,
+            })
+          );
+        };
+
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.ensureChunkHandlers)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadManifest)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.baseURI)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.externalInstallChunk)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.onChunksLoaded)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.ensureChunkHandlers)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getChunkScriptFilename);
+          });
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getChunkUpdateScriptFilename);
+            set.add(RuntimeGlobals.moduleCache);
+            set.add(RuntimeGlobals.hmrModuleData);
+            set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+          });
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadManifest)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getUpdateManifestFilename);
+          });
+      }
+    );
+  }
+}
+
+module.exports = CommonJsChunkLoadingPlugin;