@module-federation/nextjs-mf 5.3.0 → 5.3.2

package/lib/include-defaults.js

@@ -1,6 +1,4 @@
-// if(process.browser && (typeof __webpack_share_scopes__ === "undefined" || !__webpack_share_scopes__.default)) {
-//   __webpack_init_sharing__('default');
-// }
+// this is needed to ensure webpack does not attempt to tree shake unused modules. Since these should always come from host
 require('react');
 require('react-dom');
 require('next/link');

package/lib/internal.js

@@ -0,0 +1,241 @@
+import { parseOptions } from 'webpack/lib/container/options';
+import { isRequiredVersion } from 'webpack/lib/sharing/utils';
+import path from '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 = {
+  react: {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react/jsx-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react-dom': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'next/dynamic': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'styled-jsx': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/link': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/router': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/script': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/head': {
+    requiredVersion: false,
+    singleton: true,
+  },
+};
+// put host infront of any shared module key, so "hostreact"
+export const reKeyHostShared = (options) => {
+  return Object.entries({
+    ...(options || {}),
+    ...DEFAULT_SHARE_SCOPE,
+  }).reduce((acc, item) => {
+    const [itemKey, shareOptions] = item;
+
+    const shareKey = 'host' + (item.shareKey || itemKey);
+    acc[shareKey] = shareOptions;
+    if (!shareOptions.import) {
+      acc[shareKey].import = itemKey;
+    }
+    if (!shareOptions.shareKey) {
+      acc[shareKey].shareKey = itemKey;
+    }
+
+    if (DEFAULT_SHARE_SCOPE[itemKey]) {
+      acc[shareKey].packageName = itemKey;
+    }
+    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) {
+    var __webpack_error__ = new Error();
+    if (typeof ${global} !== 'undefined') return resolve();
+    __webpack_require__.l(
+      ${JSON.stringify(url)},
+      function (event) {
+        if (typeof ${global} !== 'undefined') return resolve();
+        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__);
+      },
+      ${JSON.stringify(global)},
+    );
+  }).then(function () {
+    const proxy = {
+      get: ${global}.get,
+      init: function(shareScope) {
+        const handler = {
+          get(target, prop) {
+            if (target[prop]) {
+              Object.values(target[prop]).forEach(function(o) {
+                if(o.from === '_N_E') {
+                  o.loaded = 1
+                }
+              })
+            }
+            return target[prop]
+          },
+          set(target, property, value, receiver) {
+            if (target[property]) {
+              return target[property]
+            }
+            target[property] = value
+            return true
+          }
+        }
+        try {
+          ${global}.init(new Proxy(shareScope, handler))
+        } catch (e) {
+
+        }
+        ${global}.__initialized = true
+      }
+    }
+    if (!${global}.__initialized) {
+      proxy.init()
+    }
+    return proxy
+  })`;
+}
+
+const parseShareOptions = (options) => {
+  const sharedOptions = parseOptions(
+    options.shared,
+    (item, key) => {
+      if (typeof item !== 'string')
+        throw new Error('Unexpected array in shared');
+      /** @type {SharedConfig} */
+      const config =
+        item === key || !isRequiredVersion(item)
+          ? {
+              import: item,
+            }
+          : {
+              import: key,
+              requiredVersion: item,
+            };
+      return config;
+    },
+    (item) => item
+  );
+  return sharedOptions.reduce((acc, [key, options]) => {
+    acc[key] = {
+      import: options.import,
+      shareKey: options.shareKey || key,
+      shareScope: options.shareScope,
+      requiredVersion: options.requiredVersion,
+      strictVersion: options.strictVersion,
+      singleton: options.singleton,
+      packageName: options.packageName,
+      eager: options.eager,
+    };
+    return acc;
+  }, {});
+};
+
+// shared packages must be compiled into webpack bundle, not require() pass through
+export const internalizeSharedPackages = (options, compiler) => {
+  //TODO: should use this util for other areas where we read MF options from userland
+  if (!options.shared) {
+    return;
+  }
+  const sharedOptions = parseShareOptions(options);
+  // get share keys from user, filter out ones that need to be external
+  const internalizableKeys = Object.keys(sharedOptions).filter((key) => {
+    if (!DEFAULT_SHARE_SCOPE[key]) {
+      return true;
+    }
+    if (!DEFAULT_SHARE_SCOPE[sharedOptions[key].import]) {
+      return true;
+    }
+  });
+  // take original externals regex
+  const backupExternals = compiler.options.externals[0];
+  // if externals is a function (like when you're not running in serverless mode or creating a single build)
+  if (typeof backupExternals === 'function') {
+    // replace externals function with short-circuit, or fall back to original algo
+    compiler.options.externals[0] = (mod, callback) => {
+      if (!internalizableKeys.some((v) => mod.request.includes(v))) {
+        return backupExternals(mod, callback);
+      }
+      // bundle it
+      return Promise.resolve();
+    };
+  }
+};
+
+export const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
+  (acc, item) => {
+    const [key, value] = item;
+    acc[key] = { ...value, import: false };
+    if (key === 'react/jsx-runtime') {
+      delete acc[key].import;
+    }
+    return acc;
+  },
+  {}
+);
+
+// determine output base path, derives .next folder location
+export const getOutputPath = (compiler) => {
+  const isServer = compiler.options.target !== 'client';
+  let outputPath = compiler.options.output.path.split(path.sep);
+  const foundIndex = outputPath.findIndex((i) => {
+    return i === (isServer ? 'server' : 'static');
+  });
+  outputPath = outputPath
+    .slice(0, foundIndex > 0 ? foundIndex : outputPath.length)
+    .join(path.sep);
+
+  return outputPath;
+};
+
+export const removePlugins = [
+  'NextJsRequireCacheHotReloader',
+  'BuildManifestPlugin',
+  'WellKnownErrorsPlugin',
+  'WebpackBuildEventsPlugin',
+  'HotModuleReplacementPlugin',
+  'NextMiniCssExtractPlugin',
+  'NextFederationPlugin',
+  'CopyFilePlugin',
+  'ProfilingPlugin',
+  'DropClientPage',
+  'ReactFreshWebpackPlugin',
+];

package/lib/loaders/UrlNode.js

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

package/lib/loaders/helpers.js

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

package/lib/loaders/nextPageMapLoader.js

@@ -1,21 +1,9 @@
-'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"];
+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 = UrlNode$1.UrlNode;
+const UrlNode = require('./UrlNode').UrlNode;
 
 /**
  * Webpack loader which prepares MF map for NextJS pages
@@ -187,7 +175,5 @@ function preparePageMapV2(pages) {
   return result;
 }
 
-nextPageMapLoader$1.nextPageMapLoader.exports = nextPageMapLoader;
-nextPageMapLoader$1.nextPageMapLoader.exports.exposeNextjsPages = exposeNextjsPages;
-
-module.exports = nextPageMapLoader$1.nextPageMapLoader.exports;
+module.exports = nextPageMapLoader;
+module.exports.exposeNextjsPages = exposeNextjsPages;

package/lib/plugins/DevHmrFixInvalidPongPlugin.js

@@ -1,12 +1,9 @@
-'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
@@ -60,6 +57,4 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
-var DevHmrFixInvalidPongPlugin_1 = DevHmrFixInvalidPongPlugin;
-
-module.exports = DevHmrFixInvalidPongPlugin_1;
+module.exports = DevHmrFixInvalidPongPlugin;

package/lib/utils.js

@@ -7,11 +7,18 @@ 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') {
+    // if its an object with a thennable (eagerly executing function)
     acc[key] = { asyncContainer: value };
+  } else if (typeof value === 'function') {
+    // if its a function that must be called (lazily executing function)
+    acc[key] = { asyncContainer: value() };
   } else if (typeof value === 'string') {
+    // if its just a string (global@url)
     const [global, url] = value.split('@');
     acc[key] = { global, url };
   } else {
+    // we dont know or currently support this type
+    console.log('remotes process', process.env.REMOTES);
     throw new Error(`[mf] Invalid value received for runtime_remote "${key}"`);
   }
   return acc;

package/node-plugin/README.md

@@ -0,0 +1,27 @@
+# node
+
+Software streaming to enable node.js support for browser-like chunk loading
+
+```js
+const StreamingRuntime = require('../node/streaming');
+const NodeFederation = require('../node/streaming/NodeRuntime');
+
+plugins: [
+  new StreamingRuntime({
+    name: 'website2',
+    library: { type: 'commonjs' },
+    filename: 'remoteEntry.js',
+    exposes: {
+      './SharedComponent': './remoteServer/SharedComponent',
+    },
+  }),
+  new NodeFederation({
+    name: 'website2',
+    library: { type: 'commonjs' },
+    filename: 'remoteEntry.js',
+    exposes: {
+      './SharedComponent': './remoteServer/SharedComponent',
+    },
+  }),
+];
+```

package/node-plugin/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@module-federation/node",
+  "version": "1.0.0"
+}

package/node-plugin/streaming/CommonJsChunkLoadingPlugin.js

@@ -0,0 +1,89 @@
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+const StartupChunkDependenciesPlugin = require('webpack/lib/runtime/StartupChunkDependenciesPlugin');
+import ChunkLoadingRuntimeModule from './LoadFileChunkLoadingRuntimeModule';
+// 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) => {
+        // Always enabled
+        const isEnabledForChunk = () => true;
+        const onceForChunkSet = new WeakSet();
+        const handler = (chunk, set) => {
+          if (onceForChunkSet.has(chunk)) return;
+          onceForChunkSet.add(chunk);
+          if (!isEnabledForChunk(chunk)) return;
+          set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+          set.add(RuntimeGlobals.hasOwnProperty);
+          compilation.addRuntimeModule(
+            chunk,
+            new ChunkLoadingRuntimeModule(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) => {
+            if (!isEnabledForChunk(chunk)) return;
+            set.add(RuntimeGlobals.getChunkScriptFilename);
+          });
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            if (!isEnabledForChunk(chunk)) return;
+            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) => {
+            if (!isEnabledForChunk(chunk)) return;
+            set.add(RuntimeGlobals.getUpdateManifestFilename);
+          });
+      }
+    );
+  }
+}
+
+export default CommonJsChunkLoadingPlugin;