feat(node): use runtime script loader in node federation (#1978)

ScriptedAlchemy · 2heal1 · web-flow · commit a050645eadc8 · 2024-02-27T11:51:51.000-08:00
Co-authored-by: Zhang Hang &lt;TwoHeal@163.com&gt;
Co-authored-by: ScriptedAlchemy &lt;zackaryjackson@bytedance.com&gt;
diff --git a/.changeset/brown-monkeys-shave.md b/.changeset/brown-monkeys-shave.md
@@ -0,0 +1,6 @@
+---
+'@module-federation/runtime': patch
+'@module-federation/node': patch
+---
+
+Expose node script loaders to bundler runtime. Replace require.loadScript from federation/node to use federation.runtime.loadScriptNode
diff --git a/.changeset/loud-taxis-fix.md b/.changeset/loud-taxis-fix.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/nextjs-mf': patch
+---
+
+remove tech debt leftover from before federation enhanced apis
diff --git a/.changeset/tame-monkeys-approve.md b/.changeset/tame-monkeys-approve.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/utilities': patch
+---
+
+Remove delegate module code from utils
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -48,10 +48,10 @@ jobs:
         run: npx nx affected -t test --parallel=3 --exclude='*,!tag:package'
 
       - name: E2E Test for 3000-home
-        run: pnpm run app:next:dev & echo "done" && sleep 15 && npx nx run-many --target=test:e2e --projects=3000-home && lsof -ti tcp:3000,3001,3002 | xargs kill
+        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3000-home && lsof -ti tcp:3000,3001,3002 | xargs kill
 
       - name: E2E Test for 3001-shop
-        run: pnpm run app:next:dev & echo "done" && sleep 15 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill
+        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill
 
       #      - name: E2E Test for 3002-checkout
       #        run: pnpm run app:next:dev & echo "done" && sleep 15 && npx nx run-many --target=test:e2e --projects=3002-checkout && lsof -ti tcp:3000,3001,3002 | xargs kill
@@ -67,3 +67,6 @@ jobs:
 
       - name: Build Next.js Apps in Production Mode
         run: pnpm app:next:build
+
+      - name: E2E Node Federation
+        run: npx nx run node-host-e2e:e2e
diff --git a/apps/3000-home/pages/dynamic-remote.js b/apps/3000-home/pages/dynamic-remote.js
diff --git a/apps/3002-checkout/package.json b/apps/3002-checkout/package.json
@@ -31,6 +31,7 @@
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",
     "@module-federation/sdk": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
     "@module-federation/utilities": "workspace:*"
   },
   "scripts": {
diff --git a/apps/3002-checkout/pages/_app.tsx b/apps/3002-checkout/pages/_app.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, lazy, useState } from 'react';
 import App from 'next/app';
-import dynamic from 'next/dynamic';
 import { Layout, version } from 'antd';
 import Router, { useRouter } from 'next/router';
 
diff --git a/apps/3002-checkout/pages/checkout/exposed-pages.tsx b/apps/3002-checkout/pages/checkout/exposed-pages.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { loadRemote } from '@module-federation/runtime';
 
 import { injectScript } from '@module-federation/nextjs-mf/utils';
 
@@ -7,17 +8,15 @@ export default function ExposedPages() {
   const [pageMapV2, setPageMapV2] = useState('');
 
   useEffect(() => {
-    injectScript('checkout')
-      .then((container) => container.get('./pages-map'))
-      .then((data) => {
-        setPageMap(data);
-      });
+    loadRemote('checkout/pages-map').then((data) => {
+      //@ts-ignore
+      setPageMap(data);
+    });
 
-    injectScript('checkout')
-      .then((container) => container.get('./pages-map-v2'))
-      .then((data) => {
-        setPageMapV2(data);
-      });
+    loadRemote('checkout/pages-map-v2').then((data) => {
+      //@ts-ignore
+      setPageMapV2(data);
+    });
   }, []);
 
   return (
diff --git a/apps/node-host-e2e/project.json b/apps/node-host-e2e/project.json
@@ -11,6 +11,30 @@
         "passWithNoTests": true
       }
     },
+    "test:e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": true,
+        "commands": [
+          {
+            "command": "nx run node-remote:serve",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "nx run node-local-remote:serve",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "nx run node-host:serve",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "sleep 10 && nx run node-host-e2e:e2e",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
diff --git a/apps/node-host-e2e/src/node-host/node-host.spec.ts b/apps/node-host-e2e/src/node-host/node-host.spec.ts
@@ -2,9 +2,15 @@ import axios from 'axios';
 
 describe('GET /', () => {
   it('should return a message', async () => {
-    const res = await axios.get(`/`);
+    const res = await axios.get(`/api`);
 
     expect(res.status).toBe(200);
-    expect(res.data).toEqual({ message: 'Hello API' });
+    expect(res.data).toEqual({
+      message: 'Welcome to node-host!',
+      remotes: {
+        node_remote: 'module from node-remote',
+        node_local_remote: 'module from node-local-remote',
+      },
+    });
   });
 });
diff --git a/apps/node-host-e2e/src/support/test-setup.ts b/apps/node-host-e2e/src/support/test-setup.ts
@@ -5,6 +5,6 @@ import axios from 'axios';
 module.exports = async function () {
   // Configure axios for tests to use.
   const host = process.env.HOST ?? 'localhost';
-  const port = process.env.PORT ?? '3000';
+  const port = process.env.PORT ?? '3333';
   axios.defaults.baseURL = `http://${host}:${port}`;
 };
diff --git a/apps/node-host/package.json b/apps/node-host/package.json
@@ -2,6 +2,7 @@
   "name": "node-host",
   "private": true,
   "dependencies": {
-    "@module-federation/node": "workspace:*"
+    "@module-federation/node": "workspace:*",
+    "@module-federation/runtime": "workspace:*"
   }
 }
diff --git a/apps/node-host/runtimePlugin.ts b/apps/node-host/runtimePlugin.ts
@@ -0,0 +1,35 @@
+import { FederationRuntimePlugin } from '@module-federation/runtime/types';
+
+export default function () {
+  return {
+    name: 'node-internal-plugin',
+    beforeInit(args) {
+      const { userOptions } = args;
+      if (userOptions.remotes) {
+        userOptions.remotes.forEach((remote) => {
+          const { alias, name } = remote;
+          if (alias && name.startsWith('__webpack_require__')) {
+            remote.name = remote.alias;
+          }
+        });
+      }
+      return args;
+    },
+    init(args) {
+      return args;
+    },
+    beforeRequest(args) {
+      if (args.id.startsWith('__webpack_require__')) {
+        const regex =
+          /__webpack_require__\.federation\.instance\.moduleCache\.get\(([^)]+)\)/;
+        const match = args.id.match(regex);
+        if (match !== null) {
+          const req = args.id.replace(match[0], '');
+          const remoteID = match[1].replace(/["']/g, '');
+          args.id = [remoteID, req].join('');
+        }
+      }
+      return args;
+    },
+  };
+}
diff --git a/apps/node-host/src/bootstrap.js b/apps/node-host/src/bootstrap.js
@@ -8,19 +8,24 @@ import * as path from 'path';
 
 import node_local_remote from 'node_local_remote/test';
 
-import('node_remote/test').then((m) => {
+const remoteMsg = import('node_remote/test').then((m) => {
   console.log('\x1b[32m%s\x1b[0m', m.default || m);
-  //eslint-disable-next-line
-  console.log(__webpack_require__.federation);
+  return m.default || m;
 });
 console.log('\x1b[32m%s\x1b[0m', node_local_remote);
 
 const app = express();
 
 app.use('/assets', express.static(path.join(__dirname, 'assets')));
 
-app.get('/api', (req, res) => {
-  res.send({ message: 'Welcome to node-host!' });
+app.get('/api', async (req, res) => {
+  res.send({
+    message: 'Welcome to node-host!',
+    remotes: {
+      node_remote: await remoteMsg,
+      node_local_remote,
+    },
+  });
 });
 
 const port = process.env.PORT || 3333;
diff --git a/apps/node-host/webpack.config.js b/apps/node-host/webpack.config.js
@@ -2,21 +2,25 @@ const { composePlugins, withNx } = require('@nx/webpack');
 const { UniversalFederationPlugin } = require('@module-federation/node');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(withNx(), (config) => {
+module.exports = composePlugins(withNx(), async (config) => {
   // Update the webpack config as needed here.
   // e.g. `config.plugins.push(new MyPlugin())`
   config.cache = false;
   config.devtool = false;
   config.output.publicPath = '/testing';
-
+  await new Promise((r) => setTimeout(r, 400));
   config.module.rules.pop();
   config.plugins.push(
     new UniversalFederationPlugin({
       isServer: true,
       name: 'node_host',
+      runtimePlugins: [require.resolve('./runtimePlugin.ts')],
       remotes: {
         node_local_remote:
           'commonjs ../../node-local-remote/dist/remoteEntry.js',
+        // node_local_remote: '__webpack_require__.federation.instance.moduleCache.get("node_local_remote")',
+        // node_remote:
+        //   '__webpack_require__.federation.instance.moduleCache.get("node_remote")@http://localhost:3002/remoteEntry.js',
         node_remote: 'node_remote@http://localhost:3002/remoteEntry.js',
       },
     }),
diff --git a/packages/nextjs-mf/src/internal.ts b/packages/nextjs-mf/src/internal.ts
@@ -35,12 +35,6 @@ export const DEFAULT_SHARE_SCOPE: SharedObject = {
     singleton: true,
     import: undefined,
   },
-  '@module-federation/utilities': {
-    eager: true,
-    version: require('@module-federation/utilities/package.json').version,
-    requiredVersion: require('@module-federation/utilities/package.json')
-      .version,
-  },
   'next/image': {
     requiredVersion: undefined,
     singleton: true,
@@ -74,12 +68,10 @@ export const DEFAULT_SHARE_SCOPE: SharedObject = {
   'react/jsx-dev-runtime': {
     singleton: true,
     requiredVersion: undefined,
-    import: undefined,
   },
   'react/jsx-runtime': {
     singleton: true,
     requiredVersion: undefined,
-    // import: false,
   },
   'styled-jsx': {
     singleton: true,
diff --git a/packages/nextjs-mf/src/plugins/NextFederationPlugin/apply-server-plugins.ts b/packages/nextjs-mf/src/plugins/NextFederationPlugin/apply-server-plugins.ts
@@ -130,7 +130,6 @@ export function handleServerExternals(
       if (
         ctx.request &&
         (ctx.request.includes('@module-federation/utilities') ||
-          ctx.request.includes('internal-delegate-hoist') ||
           Object.keys(options.shared || {}).some((key) => {
             return (
               //@ts-ignore
diff --git a/packages/node/src/plugins/webpackChunkUtilities.ts b/packages/node/src/plugins/webpackChunkUtilities.ts
@@ -273,51 +273,35 @@ export function generateLoadScript(runtimeTemplate: any): string {
   return Template.asString([
     '// load script equivalent for server side',
     `${RuntimeGlobals.loadScript} = ${runtimeTemplate.basicFunction(
-      'url,callback,chunkId',
+      'url, callback, chunkId',
       [
         Template.indent([
           `async function executeLoad(url, callback, name) {
             if (!name) {
               throw new Error('__webpack_require__.l name is required for ' + url);
             }
-            var remoteName = name;
-            if(name.includes('__remote_scope__')) {
-              remoteName = name.split('__remote_scope__.')[1]
+            const usesInternalRef = name.startsWith('__webpack_require__')
+            if (usesInternalRef) {
+              const regex = /__webpack_require__\\.federation\\.instance\\.moduleCache\\.get\\(([^)]+)\\)/;
+              const match = name.match(regex);
+              if (match) {
+                name = match[1].replace(/["']/g, '');
+              }
             }
-            if (typeof globalThis.__remote_scope__[remoteName] !== 'undefined') return callback(globalThis.__remote_scope__[remoteName]);
-            globalThis.__remote_scope__._config[remoteName] = url;
             try {
-              const scriptContent = await (globalThis.webpackChunkLoad || globalThis.fetch || require("node-fetch"))(url).then(res => res.text());
-              let remote;
-              if (typeof process !== 'undefined') {
-                const vm = require('vm');
-                const m = require('module');
-                const remoteCapsule = vm.runInThisContext(m.wrap(scriptContent), 'node-federation-loader-' + name + '.vm')
-                const exp = {};
-                remote = {exports:{}};
-                remoteCapsule(exp,require,remote,'node-federation-loader-' + name + '.vm',__dirname);
-                remote = remote.exports || remote;
-              } else {
-                remote = eval('let module = {};' + scriptContent + '\\nmodule.exports')
-              }
-              globalThis.__remote_scope__[remoteName] = remote[remoteName] || remote;
-              globalThis.__remote_scope__._config[remoteName] = url;
-              callback(globalThis.__remote_scope__[remoteName])
-            } catch (e) {
-              e.target = {src: url};
-              globalThis.__remote_scope__[remoteName] = {
-                get: function() {
-                  return function() {
-                    return ()=>null
-                  }
-                },
-                init: function() {},
-                fake: true
+              const federation = ${RuntimeGlobals.require}.federation;
+              const res = await ${RuntimeGlobals.require}.federation.runtime.loadScriptNode(url, { attrs: {} });
+              const enhancedRemote = federation.instance.initRawContainer(name, url, res);
+              // use normal global assignment
+              if(!usesInternalRef && !globalThis[name]) {
+                globalThis[name] = enhancedRemote
               }
-              callback(e);
+              callback(enhancedRemote);
+            } catch (error) {
+              callback(error);
             }
           }`,
-          `executeLoad(url,callback,chunkId)`,
+          `executeLoad(url, callback, chunkId);`,
         ]),
       ],
     )}`,
diff --git a/packages/runtime/src/core.ts b/packages/runtime/src/core.ts
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
diff --git a/packages/runtime/src/utils/load.ts b/packages/runtime/src/utils/load.ts
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
diff --git a/packages/utilities/src/plugins/DelegateModulesPlugin.test.ts b/packages/utilities/src/plugins/DelegateModulesPlugin.test.ts
diff --git a/packages/utilities/src/utils/common.ts b/packages/utilities/src/utils/common.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@module-federation/nextjs-mf': patch
 +---
++
 +remove tech debt leftover from before federation enhanced apis