@module-federation/nextjs-mf 5.2.2 → 5.3.0

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;

package/package.json

@@ -1,33 +1,50 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "Module Federation helper for NextJS",
   "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>",
+  "contributors": [
+    "Pavel Chertorogov, nodkz <pavel.chertorogov@gmail.com> (www.ps.kz)"
+  ],
   "license": "MIT",
   "scripts": {
-    "demo": "yarn build && cd demo && yarn install && yarn dev",
+    "demo": "sleep 3 && cd demo && yarn install && yarn dev",
+    "dev": "rm -rf lib && concurrently \"yarn sync-files --watch\" \"yarn compile --watch\" \"yarn demo\"",
     "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\"",
-    "build": "rm -rf lib && cp -r ./src/ lib/ && rollup -c",
+    "sync-files": "cpx \"src/**/*.js\" lib/",
+    "compile": "rollup -c",
+    "build": "rm -rf lib && yarn sync-files && yarn compile",
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
     "chalk": "^4.0.0",
+    "eventemitter3": "^4.0.7",
     "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",
+    "@types/react": "^18.0.19",
+    "concurrently": "^7.3.0",
+    "cpx": "^1.5.0",
+    "next": "12.2.2",
     "prettier": "2.3.2",
+    "react": "^18.2.0",
     "rollup": "^2.78.1",
     "rollup-obfuscator": "^3.0.1",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-typescript2": "^0.33.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.2",
     "webpack": "5.45.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
   }
 }

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "declaration": true,
+    "declarationMap": true,
+    "module": "ES2020",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "allowJs": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "importHelpers": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "noEmitOnError": false,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "lib": ["dom", "ESNext"],
+    "jsx": "react",
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/client/**/*"]
+}