@module-federation/nextjs-mf 5.2.2 → 5.3.1

package/node-plugin/streaming/NodeRuntime.js

@@ -0,0 +1,245 @@
+'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);
+  }
+}
+
+export default StreamingFederation;

package/node-plugin/streaming/index.js

@@ -0,0 +1,42 @@
+import CommonJsChunkLoadingPlugin from './CommonJsChunkLoadingPlugin';
+
+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);
+  }
+}
+
+export default NodeSoftwareStreamRuntime;

package/node-plugin/streaming/loadScript.js

@@ -0,0 +1,51 @@
+/**
+ * loadScript(baseURI, fileName, cb)
+ * loadScript(scriptUrl, cb)
+ */
+
+module.exports = `
+    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)
+        });
+      }
+    }
+`;

package/package.json

@@ -1,33 +1,50 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.2.2",
+  "version": "5.3.1",
   "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.3.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",
-    "webpack": "5.45.1"
+    "rollup-plugin-typescript2": "^0.33.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.2",
+    "webpack": "5.64.4"
+  },
+  "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/**/*"]
+}