@module-federation/nextjs-mf 5.3.3 → 5.4.1-1

package/lib/internal.js

@@ -1,11 +1,20 @@
-import { parseOptions } from 'webpack/lib/container/options';
-import { isRequiredVersion } from 'webpack/lib/sharing/utils';
-import path from 'path';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var options = require('./dependencies/webpack/lib/container/options.js');
+var utils = require('./dependencies/webpack/lib/sharing/utils.js');
+var utils$1 = require('./utils.js');
+var path = require('path');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
 // the share scope we attach by default
 // in hosts we re-key them to prevent webpack moving the modules into their own chunks (cause eager error)
 // in remote these are marked as import:false as we always expect the host to prove them
-export const DEFAULT_SHARE_SCOPE = {
+const DEFAULT_SHARE_SCOPE = {
   react: {
     singleton: true,
     requiredVersion: false,
@@ -44,7 +53,7 @@ export const DEFAULT_SHARE_SCOPE = {
   },
 };
 // put host infront of any shared module key, so "hostreact"
-export const reKeyHostShared = (options) => {
+const reKeyHostShared = (options) => {
   return Object.entries({
     ...(options || {}),
     ...DEFAULT_SHARE_SCOPE,
@@ -66,19 +75,9 @@ export const reKeyHostShared = (options) => {
     return acc;
   }, {});
 };
-
-// split the @ syntax into url and global
-export const extractUrlAndGlobal = (urlAndGlobal) => {
-  const index = urlAndGlobal.indexOf('@');
-  if (index <= 0 || index === urlAndGlobal.length - 1) {
-    throw new Error(`Invalid request "${urlAndGlobal}"`);
-  }
-  return [urlAndGlobal.substring(index + 1), urlAndGlobal.substring(0, index)];
-};
-
 // browser template to convert remote into promise new promise and use require.loadChunk to load the chunk
-export const generateRemoteTemplate = (url, global) => {
-  return `promise new Promise(function (resolve, reject) {
+const generateRemoteTemplate = (url, global) => {
+  return `new Promise(function (resolve, reject) {
     var __webpack_error__ = new Error();
     if (typeof ${global} !== 'undefined') return resolve();
     __webpack_require__.l(
@@ -132,17 +131,17 @@ export const generateRemoteTemplate = (url, global) => {
     }
     return proxy
   })`;
-}
+};
 
-const parseShareOptions = (options) => {
-  const sharedOptions = parseOptions(
-    options.shared,
+const parseShareOptions = (options$1) => {
+  const sharedOptions = options.parseOptions(
+    options$1.shared,
     (item, key) => {
       if (typeof item !== 'string')
         throw new Error('Unexpected array in shared');
       /** @type {SharedConfig} */
       const config =
-        item === key || !isRequiredVersion(item)
+        item === key || !utils.isRequiredVersion(item)
           ? {
               import: item,
             }
@@ -170,7 +169,7 @@ const parseShareOptions = (options) => {
 };
 
 // shared packages must be compiled into webpack bundle, not require() pass through
-export const internalizeSharedPackages = (options, compiler) => {
+const internalizeSharedPackages = (options, compiler) => {
   //TODO: should use this util for other areas where we read MF options from userland
   if (!options.shared) {
     return;
@@ -200,7 +199,7 @@ export const internalizeSharedPackages = (options, compiler) => {
   }
 };
 
-export const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
+const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
   (acc, item) => {
     const [key, value] = item;
     acc[key] = { ...value, import: false };
@@ -213,20 +212,20 @@ export const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
 );
 
 // determine output base path, derives .next folder location
-export const getOutputPath = (compiler) => {
+const getOutputPath = (compiler) => {
   const isServer = compiler.options.target !== 'client';
-  let outputPath = compiler.options.output.path.split(path.sep);
+  let outputPath = compiler.options.output.path.split(path__default["default"].sep);
   const foundIndex = outputPath.findIndex((i) => {
     return i === (isServer ? 'server' : 'static');
   });
   outputPath = outputPath
     .slice(0, foundIndex > 0 ? foundIndex : outputPath.length)
-    .join(path.sep);
+    .join(path__default["default"].sep);
 
   return outputPath;
 };
 
-export const removePlugins = [
+const removePlugins = [
   'NextJsRequireCacheHotReloader',
   'BuildManifestPlugin',
   'WellKnownErrorsPlugin',
@@ -239,3 +238,34 @@ export const removePlugins = [
   'DropClientPage',
   'ReactFreshWebpackPlugin',
 ];
+
+const parseRemoteSyntax = (remote) => {
+  if (typeof remote === 'string' && remote.includes('@')) {
+    const [url, global] = utils$1.extractUrlAndGlobal(remote);
+    return generateRemoteTemplate(url, global);
+  }
+  return remote
+};
+const parseRemotes = (remotes) =>{
+  return Object.entries(remotes).reduce(
+    (acc, remote) => {
+      if (!remote[1].startsWith('promise ') && remote[1].includes('@')) {
+        acc[remote[0]] = 'promise ' + parseRemoteSyntax(remote[1]);
+        return acc;
+      }
+      acc[remote[0]] = remote[1];
+      return acc;
+    },
+    {}
+  );
+};
+
+exports.DEFAULT_SHARE_SCOPE = DEFAULT_SHARE_SCOPE;
+exports.externalizedShares = externalizedShares;
+exports.generateRemoteTemplate = generateRemoteTemplate;
+exports.getOutputPath = getOutputPath;
+exports.internalizeSharedPackages = internalizeSharedPackages;
+exports.parseRemoteSyntax = parseRemoteSyntax;
+exports.parseRemotes = parseRemotes;
+exports.reKeyHostShared = reKeyHostShared;
+exports.removePlugins = removePlugins;

package/lib/loaders/UrlNode.js

@@ -1,3 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../_virtual/_commonjsHelpers.js');
+
 /**
  * 🛑🛑🛑 Attention! 🛑🛑🛑
  * Do not add type definitions to this file!!
@@ -15,7 +21,7 @@
  * It was copied from
  * @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
  */
-module.exports = class UrlNode {
+class UrlNode {
   placeholder = true;
   children = new Map();
   slugName = null;
@@ -207,3 +213,7 @@ module.exports = class UrlNode {
       ._insert(urlPaths.slice(1), slugNames, isCatchAll);
   }
 }
+
+var UrlNode_1 = { UrlNode };
+
+exports["default"] = UrlNode_1;

package/lib/loaders/fixImageLoader.js

@@ -1,6 +1,11 @@
-const path = require('path');
-const Template = require('webpack/lib/Template');
-const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+'use strict';
+
+var Template = require('./../dependencies/webpack/lib/Template.js');
+var path = require('path');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
 /**
  * This loader was specially created for tunning next-image-loader result
@@ -18,6 +23,7 @@ const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
  */
 async function fixImageLoader(remaining) {
   this.cacheable(true);
+  const publicPath = this._compiler.webpack.RuntimeGlobals.publicPath;
   const isServer = this._compiler.options.name !== 'client';
   const result = await this.importModule(
     `${this.resourcePath}.webpack[javascript/auto]` + `!=!${remaining}`
@@ -26,13 +32,13 @@ async function fixImageLoader(remaining) {
 
   const computedAssetPrefix = isServer
     ? ` \'\'`
-    : `(${RuntimeGlobals.publicPath} && ${RuntimeGlobals.publicPath}.indexOf('://') > 0 ? new URL(${RuntimeGlobals.publicPath}).origin : \'\')`;
+    : `(${publicPath} && ${publicPath}.indexOf('://') > 0 ? new URL(${publicPath}).origin : \'\')`;
 
   const constructedObject = Object.entries(content).reduce(
     (acc, [key, value]) => {
       if (key === 'src') {
         if (value && value.indexOf('://') < 0) {
-          value = path.join(value);
+          value = path__default["default"].join(value);
         }
         acc.push(
           `${key}: computedAssetsPrefixReference + ${JSON.stringify(value)}`
@@ -44,13 +50,13 @@ async function fixImageLoader(remaining) {
     },
     []
   );
-  const updated = Template.asString([
+  const updated = Template["default"].asString([
     "let computedAssetsPrefixReference = '';",
     'try {',
-    Template.indent(`computedAssetsPrefixReference = ${computedAssetPrefix};`),
+    Template["default"].indent(`computedAssetsPrefixReference = ${computedAssetPrefix};`),
     '} catch (e) {}',
     'export default {',
-    Template.indent(constructedObject.join(',\n')),
+    Template["default"].indent(constructedObject.join(',\n')),
     '}',
   ]);
   return updated;

package/lib/loaders/helpers.js

@@ -1,8 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../_virtual/_commonjsHelpers.js');
+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) {
+
+var injectRuleLoader = helpers.__exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
   if (rule.loader) {
     rule.use = [loader, { loader: rule.loader, options: rule.options }];
     delete rule.loader;
@@ -15,7 +23,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) {
+var hasLoader = helpers.__exports.hasLoader = function hasLoader(rule, loaderName) {
   if (rule.loader === loaderName) {
     return true;
   } else if (rule.use) {
@@ -34,7 +42,7 @@ module.exports.hasLoader = function hasLoader(rule, loaderName) {
   return false;
 };
 
-module.exports.toDisplayErrors = function toDisplayErrors(err) {
+var toDisplayErrors = helpers.__exports.toDisplayErrors = function toDisplayErrors(err) {
   return err
     .map((error) => {
       let message = error.message;
@@ -45,3 +53,8 @@ module.exports.toDisplayErrors = function toDisplayErrors(err) {
     })
     .join('\n');
 };
+
+exports["default"] = helpers.__exports;
+exports.hasLoader = hasLoader;
+exports.injectRuleLoader = injectRuleLoader;
+exports.toDisplayErrors = toDisplayErrors;

package/lib/loaders/nextPageMapLoader.js

@@ -1,9 +1,27 @@
-const fg = require('fast-glob');
-const fs = require('fs');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../_virtual/_commonjsHelpers.js');
+var nextPageMapLoader$1 = require('../_virtual/nextPageMapLoader.js');
+require('../_virtual/_fast-glob.js');
+require('../_virtual/_fs.js');
+require('../_virtual/UrlNode.js');
+var require$$0 = require('fast-glob');
+var require$$1 = require('fs');
+var UrlNode$1 = require('./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 = require('./UrlNode').UrlNode;
+const UrlNode = UrlNode$1["default"].UrlNode;
 
 /**
  * Webpack loader which prepares MF map for NextJS pages
@@ -175,5 +193,8 @@ function preparePageMapV2(pages) {
   return result;
 }
 
-module.exports = nextPageMapLoader;
-module.exports.exposeNextjsPages = exposeNextjsPages;
+nextPageMapLoader$1.nextPageMapLoader.exports = nextPageMapLoader;
+var exposeNextjsPages_1 = nextPageMapLoader$1.nextPageMapLoader.exports.exposeNextjsPages = exposeNextjsPages;
+
+exports["default"] = nextPageMapLoader$1.nextPageMapLoader.exports;
+exports.exposeNextjsPages = exposeNextjsPages_1;

package/lib/loaders/patchNextClientPageLoader.js

@@ -32,7 +32,7 @@ function patchNextClientPageLoader(content) {
       class PageLoaderExtended extends PageLoader {
         constructor(buildId, assetPrefix) {
           super(buildId, assetPrefix);
-          global.mf_client = new MFClient(this);
+          global.mf_client = new MFClient(this, { mode: process.env.NODE_ENV });
         }
 
         _getPageListOriginal() {

package/lib/plugins/DevHmrFixInvalidPongPlugin.js

@@ -1,3 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../_virtual/_commonjsHelpers.js');
+
+if (!String.prototype.replaceAll) {
+  String.prototype.replaceAll = function (str, newStr) {
+    // If a regex pattern
+    if (
+      Object.prototype.toString.call(str).toLowerCase() === '[object regexp]'
+    ) {
+      return this.replace(str, newStr);
+    }
+
+    // If a string
+    return this.replace(new RegExp(str, 'g'), newStr);
+  };
+}
+
 /**
  * If HMR through websocket received {"invalid":true, "event":"pong"} event
  *   then pages reloads. But for federated page this is unwanted behavior.
@@ -57,4 +77,6 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
-module.exports = DevHmrFixInvalidPongPlugin;
+var DevHmrFixInvalidPongPlugin_1 = DevHmrFixInvalidPongPlugin;
+
+exports["default"] = DevHmrFixInvalidPongPlugin_1;

package/lib/utils.js

@@ -2,6 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+// split the @ syntax into url and global
+const extractUrlAndGlobal = (urlAndGlobal) => {
+  const index = urlAndGlobal.indexOf('@');
+  if (index <= 0 || index === urlAndGlobal.length - 1) {
+    throw new Error(`Invalid request "${urlAndGlobal}"`);
+  }
+  return [urlAndGlobal.substring(index + 1), urlAndGlobal.substring(0, index)];
+};
+
 const remoteVars = process.env.REMOTES || {};
 
 const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
@@ -14,7 +23,7 @@ const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
     acc[key] = { asyncContainer: value() };
   } else if (typeof value === 'string') {
     // if its just a string (global@url)
-    const [global, url] = value.split('@');
+    const [url, global] = extractUrlAndGlobal(value);
     acc[key] = { global, url };
   } else {
     // we dont know or currently support this type
@@ -24,6 +33,8 @@ const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
   return acc;
 }, {});
 
+const remotes = runtimeRemotes;
+
 /**
  * Return initialized remote container by remote's key or its runtime remote item data.
  *
@@ -32,7 +43,7 @@ const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
  * or
  *    { asyncContainer } - async container is a promise that resolves to the remote container
  */
-function injectScript(keyOrRuntimeRemoteItem) {
+const injectScript = (keyOrRuntimeRemoteItem) => {
   let reference = keyOrRuntimeRemoteItem;
   if (typeof keyOrRuntimeRemoteItem === 'string') {
     reference = runtimeRemotes[keyOrRuntimeRemoteItem];
@@ -61,7 +72,13 @@ function injectScript(keyOrRuntimeRemoteItem) {
             event && (event.type === 'load' ? 'missing' : event.type);
           var realSrc = event && event.target && event.target.src;
           __webpack_error__.message =
-            'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
+            'Loading script failed.\n(' +
+            errorType +
+            ': ' +
+            realSrc +
+            ' or global var ' +
+            remoteGlobal +
+            ')';
           __webpack_error__.name = 'ScriptExternalLoadError';
           __webpack_error__.type = errorType;
           __webpack_error__.request = realSrc;
@@ -101,8 +118,8 @@ function injectScript(keyOrRuntimeRemoteItem) {
       }
       return container;
     });
-}
-
-var injectScript_1 = injectScript;
+};
 
-exports.injectScript = injectScript_1;
+exports.extractUrlAndGlobal = extractUrlAndGlobal;
+exports.injectScript = injectScript;
+exports.remotes = remotes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.3.3",
+  "version": "5.4.1-1",
   "description": "Module Federation helper for NextJS",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -21,9 +21,11 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
+    "@swc/core": "^1.3.2",
     "chalk": "^4.0.0",
     "eventemitter3": "^4.0.7",
-    "fast-glob": "^3.2.11"
+    "fast-glob": "^3.2.11",
+    "webpack-sources": "^3.2.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",
@@ -32,14 +34,15 @@
     "@types/react": "^18.0.19",
     "concurrently": "^7.3.0",
     "cpx": "^1.5.0",
-    "next": "12.3.2",
+    "next": "12.3.0",
     "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",
+    "rollup-plugin-rename-node-modules": "^1.3.1",
+    "rollup-plugin-typescript2": "0.34.0",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
     "webpack": "5.64.4"