@module-federation/nextjs-mf 5.3.2 → 5.4.0

package/lib/node-plugin/streaming/NodeRuntime.js

@@ -0,0 +1,247 @@
+'use strict';
+
+'use strict';
+// possible remote evaluators
+// this depends on the chunk format selected.
+// commonjs2 - it think, is lazily evaluated - beware
+// const remote = eval(scriptContent + '\n  try{' + moduleName + '}catch(e) { null; };');
+// commonjs - fine to use but exports marker doesnt exist
+// const remote = eval('let exports = {};' + scriptContent + 'exports');
+// commonjs-module, ideal since it returns a commonjs module format
+// const remote = eval(scriptContent + 'module.exports')
+
+// Note on ESM.
+// Its possible to use ESM import, but its impossible to invalidate the module cache
+// So once something is imported, its stuck. This is problematic with at-runtime since we want to hot reload node
+// if ESM were used, youd be forced to restart the process to re-import modules or use a worker pool
+// Workaround is possible with query string on end of request, but this leaks memory badly
+// with commonjs, we can at least reset the require cache to "reboot" webpack runtime
+// It *can* leak memory, but ive not been able to replicate this to an extent that would be concerning.
+// ESM WILL leak memory, big difference.
+// Im talking with TC39 about a proposal around "virtual module trees" which would solve many problems.
+// VMT is like Realms but better - easiest analogy would be like forking the main thread, without going off main thread
+// VMT allows for scope isolation, but still allows reflection and non-primitive memory pointers to be shared - perfect for MFP
+
+//TODO: should use extractUrlAndGlobal from internal.js
+//TODO: should use Template system like LoadFileChunk runtime does.
+//TODO: should use vm.runInThisContext instead of eval
+//TODO: global.webpackChunkLoad could use a better convention? I have to use a special http client to get out of my infra firewall
+const executeLoadTemplate = `
+    function executeLoad(remoteUrl) {
+    console.log('remoteUrl',remoteUrl)
+        const scriptUrl = remoteUrl.split("@")[1];
+        const moduleName = remoteUrl.split("@")[0];
+        console.log("executing remote load", scriptUrl);
+        return new Promise(function (resolve, reject) {
+   
+         (global.webpackChunkLoad || fetch)(scriptUrl).then(function(res){
+            return res.text();
+          }).then(function(scriptContent){
+            try {
+              const remote = eval(scriptContent + 'module.exports');
+              /* TODO: need something like a chunk loading queue, this can lead to async issues
+               if two containers load the same remote, they can overwrite global scope
+               should check someone is already loading remote and await that */
+              global.__remote_scope__[moduleName] = remote[moduleName] || remote
+              resolve(global.__remote_scope__[moduleName])
+            } catch(e) {
+              console.error('problem executing remote module', moduleName);
+              reject(e);
+            }
+          }).catch((e)=>{
+            console.error('failed to fetch remote', moduleName, scriptUrl);
+            console.error(e);
+            reject(null)
+          })
+        }).catch((e)=>{
+        console.error('error',e);
+          console.warn(moduleName,'is offline, returning fake remote')
+          return {
+            fake: true,
+            get:(arg)=>{
+              console.log('faking', arg,'module on', moduleName);
+
+              return ()=> Promise.resolve();
+            },
+            init:()=>{}
+          }
+        })
+    }
+`;
+
+function buildRemotes(mfConf, webpack) {
+  return Object.entries(mfConf.remotes || {}).reduce(
+    (acc, [name, config]) => {
+// if its already been converted into promise, dont do it again
+      if(config.startsWith('promise ') || config.startsWith('external ')){
+        acc.buildTime[name] = config;
+        return acc;
+      }
+      /*
+  TODO: global remote scope object should go into webpack runtime as a runtime requirement
+   this can be done by referencing my LoadFile, CommonJs plugins in this directory.
+  */
+      const [global, url] = config.split('@');
+      const loadTemplate = `promise new Promise((resolve)=>{
+    if(!global.__remote_scope__) {
+      // create a global scope for container, similar to how remotes are set on window in the browser
+      global.__remote_scope__ = {
+        _config: {},
+      }
+    }
+    
+    global.__remote_scope__._config[${JSON.stringify(global)}] = ${JSON.stringify(url)};
+ 
+    ${executeLoadTemplate}
+    resolve(executeLoad(${JSON.stringify(config)}))
+    }).then(remote=>{
+      console.log(remote);
+      
+      return {
+      get: remote.get,
+      init: (args)=> {
+        console.log(args)
+        return remote.init(args)
+      }
+    }
+  });
+  `;
+      acc.buildTime[name] = loadTemplate;
+      return acc;
+    },
+    { runtime: {}, buildTime: {}, hot: {} }
+  );
+  //old design
+  return Object.entries(mfConf.remotes || {}).reduce(
+    (acc, [name, config]) => {
+      const hasMiddleware = config.startsWith('middleware ');
+      let middleware;
+      if (hasMiddleware) {
+        middleware = config.split('middleware ')[1];
+      } else {
+        middleware = `Promise.resolve(${JSON.stringify(config)})`;
+      }
+
+      const templateStart = `
+              var ${webpack.RuntimeGlobals.require} = ${
+        webpack.RuntimeGlobals.require
+      } ? ${
+        webpack.RuntimeGlobals.require
+      } : typeof arguments !== 'undefined' ? arguments[2] : false;
+               ${executeLoadTemplate}
+        global.loadedRemotes = global.loadedRemotes || {};
+        if (global.loadedRemotes[${JSON.stringify(name)}]) {
+          return global.loadedRemotes[${JSON.stringify(name)}]
+        }
+        // if using modern output, then there are no arguments on the parent function scope, thus we need to get it via a window global.
+
+      var shareScope = (${webpack.RuntimeGlobals.require} && ${
+        webpack.RuntimeGlobals.shareScopeMap
+      }) ? ${
+        webpack.RuntimeGlobals.shareScopeMap
+      } : global.__webpack_share_scopes__
+      var name = ${JSON.stringify(name)}
+      `;
+      const template = `(remotesConfig) => new Promise((res) => {
+      console.log('in template promise',JSON.stringify(remotesConfig))
+        executeLoad(remotesConfig).then((remote) => {
+
+          return Promise.resolve(remote.init(shareScope.default)).then(() => {
+            return remote
+          })
+        })
+          .then(function (remote) {
+            const proxy = {
+              get: remote.get,
+              chunkMap: remote.chunkMap,
+              path: remotesConfig.toString(),
+              init: (arg) => {
+                try {
+                  return remote.init(shareScope.default)
+                } catch (e) {
+                  console.log('remote container already initialized')
+                }
+              }
+            }
+            if (remote.fake) {
+              res(proxy);
+              return null
+            }
+
+            Object.assign(global.loadedRemotes, {
+              [name]: proxy
+            });
+
+            res(global.loadedRemotes[name])
+          })
+
+
+      })`;
+
+      acc.runtime[name] = `()=> ${middleware}.then((remoteConfig)=>{
+    console.log('remoteConfig runtime',remoteConfig);
+    if(!global.REMOTE_CONFIG) {
+        global.REMOTE_CONFIG = {};
+    }
+    global.REMOTE_CONFIG[${JSON.stringify(name)}] = remoteConfig;
+    ${templateStart}
+    const loadTemplate = ${template};
+    return loadTemplate(remoteConfig)
+    })`;
+
+      acc.buildTime[name] = `promise ${middleware}.then((remoteConfig)=>{
+            if(!global.REMOTE_CONFIG) {
+        global.REMOTE_CONFIG = {};
+    }
+    console.log('remoteConfig buildtime',remoteConfig);
+    global.REMOTE_CONFIG[${JSON.stringify(name)}] = remoteConfig;
+    ${templateStart};
+    const loadTemplate = ${template};
+    return loadTemplate(remoteConfig)
+    })`;
+
+      acc.hot[name] = `()=> ${middleware}`;
+
+      return acc;
+    },
+    { runtime: {}, buildTime: {}, hot: {} }
+  );
+}
+
+class StreamingFederation {
+  constructor({ experiments, ...options }, context) {
+    this.options = options || {};
+    this.context = context || {};
+    this.experiments = experiments || {};
+  }
+
+  apply(compiler) {
+    // When used with Next.js, context is needed to use Next.js webpack
+    const { webpack } = compiler;
+
+    const { buildTime, runtime, hot } = buildRemotes(
+      this.options,
+      webpack || require('webpack')
+    );
+    const defs = {
+      'process.env.REMOTES': runtime,
+      'process.env.REMOTE_CONFIG': hot,
+    };
+
+    // new ((webpack && webpack.DefinePlugin) || require("webpack").DefinePlugin)(
+    //     defs
+    // ).apply(compiler);
+
+    const pluginOptions = {
+      ...this.options,
+      remotes: buildTime,
+    };
+
+    new (this.context.ModuleFederationPlugin || (webpack && webpack.container.ModuleFederationPlugin) ||
+      require('webpack/lib/container/ModuleFederationPlugin'))(
+      pluginOptions
+    ).apply(compiler);
+  }
+}
+
+module.exports = StreamingFederation;

package/lib/node-plugin/streaming/index.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var CommonJsChunkLoadingPlugin = require('./CommonJsChunkLoadingPlugin.js');
+
+class NodeSoftwareStreamRuntime {
+  constructor(options, context) {
+    this.options = options || {};
+    this.context = context || {};
+  }
+
+  apply(compiler) {
+    if (compiler.options.target) {
+      console.warn(
+        `target should be set to false while using NodeSoftwareStreamRuntime plugin, actual target: ${compiler.options.target}`
+      );
+    }
+
+    // When used with Next.js, context is needed to use Next.js webpack
+    const { webpack } = compiler;
+
+    // This will enable CommonJsChunkFormatPlugin
+    compiler.options.output.chunkFormat = 'commonjs';
+    // This will force async chunk loading
+    compiler.options.output.chunkLoading = 'async-node';
+    // Disable default config
+    compiler.options.output.enabledChunkLoadingTypes = false;
+
+    new ((webpack && webpack.node && webpack.node.NodeEnvironmentPlugin) ||
+      require('webpack/lib/node/NodeEnvironmentPlugin'))({
+      infrastructureLogging: compiler.options.infrastructureLogging,
+    }).apply(compiler);
+    new ((webpack && webpack.node && webpack.node.NodeTargetPlugin) ||
+      require('webpack/lib/node/NodeTargetPlugin'))().apply(compiler);
+    new CommonJsChunkLoadingPlugin({
+      asyncChunkLoading: true,
+      name: this.options.name,
+      remotes: this.options.remotes,
+      baseURI: compiler.options.output.publicPath,
+      promiseBaseURI: this.options.promiseBaseURI,
+    }).apply(compiler);
+  }
+}
+
+module.exports = NodeSoftwareStreamRuntime;

package/lib/node-plugin/streaming/loadScript.js

@@ -0,0 +1,57 @@
+'use strict';
+
+require('../../_virtual/_commonjsHelpers.js');
+
+/**
+ * loadScript(baseURI, fileName, cb)
+ * loadScript(scriptUrl, cb)
+ */
+
+var loadScript = `
+    function loadScript(url,cb,chunkID) {
+        var url;
+        var cb = arguments[arguments.length - 1];
+        if (typeof cb !== "function") {
+            throw new Error("last argument should be a function");
+        }
+        if (arguments.length === 2) {
+            url = arguments[0];
+        } else if (arguments.length === 3) {
+            url = new URL(arguments[1], arguments[0]).toString();
+        } else {
+            throw new Error("invalid number of arguments");
+        }
+      if(global.webpackChunkLoad){
+        global.webpackChunkLoad(url).then(function(resp){
+          return resp.text();
+        }).then(function(rawData){
+          cb(null, rawData);
+        }).catch(function(err){
+          console.error('Federated Chunk load failed', error);
+          return cb(error)
+        });
+      } else {
+        //TODO https support
+        let request = (url.startsWith('https') ? require('https') : require('http')).get(url, function (resp) {
+          if (resp.statusCode === 200) {
+            let rawData = '';
+            resp.setEncoding('utf8');
+            resp.on('data', chunk => {
+              rawData += chunk;
+            });
+            resp.on('end', () => {
+              cb(null, rawData);
+            });
+          } else {
+            cb(resp);
+          }
+        });
+        request.on('error', error => {
+          console.error('Federated Chunk load failed', error);
+          return cb(error)
+        });
+      }
+    }
+`;
+
+module.exports = loadScript;

package/lib/plugins/DevHmrFixInvalidPongPlugin.js

@@ -1,3 +1,17 @@
+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.

package/lib/utils.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var internal = require('./internal.js');
+
 const remoteVars = process.env.REMOTES || {};
 
 const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
@@ -14,7 +16,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] = internal.extractUrlAndGlobal(value);
     acc[key] = { global, url };
   } else {
     // we dont know or currently support this type
@@ -24,6 +26,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 +36,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 +65,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 +111,7 @@ function injectScript(keyOrRuntimeRemoteItem) {
       }
       return container;
     });
-}
-
-var injectScript_1 = injectScript;
+};
 
-exports.injectScript = injectScript_1;
+exports.injectScript = injectScript;
+exports.remotes = remotes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Module Federation helper for NextJS",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -32,14 +32,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"