feat: initRawContainer method (#2011)

Author: ScriptedAlchemy

.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

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:*"
   }
 }

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 } = remote;
+          if (alias) {
+            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;
+    },
+  };
+}

apps/node-host/webpack.config.js

@@ -14,10 +14,14 @@ module.exports = composePlugins(withNx(), async (config) => {
     new UniversalFederationPlugin({
       isServer: true,
       name: 'node_host',
+      runtimePlugins: [require.resolve('./runtimePlugin.ts')],
       remotes: {
         node_local_remote:
           'commonjs ../../node-local-remote/dist/remoteEntry.js',
-        node_remote: 'node_remote@http://localhost:3002/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',
       },
     }),
   );

packages/node/src/plugins/webpackChunkUtilities.ts

@@ -273,19 +273,30 @@ 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);
             }
-            return ${RuntimeGlobals.require}.federation.runtime.loadScriptNode(url, {attrs: {}}).then(function(res){
-            globalThis[name] = res[name] || res;
-            callback(globalThis[name]);
-            }).catch(callback)
+            if (name.startsWith('__webpack_require__')) {
+              const regex = /__webpack_require__\\.federation\\.instance\\.moduleCache\\.get\\(([^)]+)\\)/;
+              const match = name.match(regex);
+              if (match) {
+                name = match[1].replace(/["']/g, '');
+              }
+            }
+            try {
+              const federation = ${RuntimeGlobals.require}.federation;
+              const res = await ${RuntimeGlobals.require}.federation.runtime.loadScriptNode(url, { attrs: {} });
+              const enhancedRemote = await federation.instance.initRawContainer(name, url, res);
+              callback(enhancedRemote);
+            } catch (error) {
+              callback(error);
+            }
           }`,
-          `executeLoad(url,callback,chunkId)`,
+          `executeLoad(url, callback, chunkId);`,
         ]),
       ],
     )}`,

packages/runtime/src/core.ts

@@ -482,6 +482,20 @@ export class FederationHost {
     );
   }
 
+  initRawContainer(
+    name: string,
+    url: string,
+    container: RemoteEntryExports,
+  ): Module {
+    const remoteInfo = getRemoteInfo({ name, entry: url });
+    const module = new Module({ host: this, remoteInfo });
+
+    module.remoteEntryExports = container;
+    this.moduleCache.set(name, module);
+
+    return module;
+  }
+
   private async _getRemoteModuleAndOptions(id: string): Promise<{
     module: Module;
     moduleOptions: ModuleOptions;