feat: use remoteLoadingData directly

Author: 2heal1

packages/enhanced/src/lib/container/RemoteRuntimeModule.ts

@@ -8,7 +8,7 @@ import RemoteModule from './RemoteModule';
 import { getFederationGlobalScope } from './runtime/utils';
 import type ExternalModule from 'webpack/lib/ExternalModule';
 import type FallbackModule from './FallbackModule';
-import type { RemotesOptions } from '@module-federation/webpack-bundler-runtime';
+import type { ModuleIdToRemoteDataMapping } from '@module-federation/webpack-bundler-runtime';
 
 const extractUrlAndGlobal = require(
   normalizeWebpackPath('webpack/lib/util/extractUrlAndGlobal'),
@@ -30,19 +30,7 @@ class RemoteRuntimeModule extends RuntimeModule {
     const { compilation, chunkGraph } = this;
     const { runtimeTemplate, moduleGraph } = compilation as Compilation;
     const chunkToRemotesMapping: Record<string, any> = {};
-    const idToExternalAndNameMapping: Record<string | number, any> = {};
-    const idToRemoteMap: RemotesOptions['idToRemoteMap'] = {};
-    // let chunkReferences: Set<Chunk> = new Set();
-
-    // if (this.chunk && chunkGraph) {
-    //   const requirements = chunkGraph.getTreeRuntimeRequirements(this.chunk);
-    //   if (requirements.has('federation-entry-startup')) {
-    //     chunkReferences = this.chunk.getAllReferencedChunks();
-    //   } else {
-    //     // remote entry doesnt need federation startup, can have async chunk map only
-    //     chunkReferences = this.chunk.getAllAsyncChunks();
-    //   }
-    // }
+    const moduleIdToRemoteDataMapping: ModuleIdToRemoteDataMapping = {};
 
     const allChunks = [
       ...Array.from(this.chunk?.getAllReferencedChunks() || []),
@@ -78,7 +66,12 @@ class RemoteRuntimeModule extends RuntimeModule {
           //@ts-ignore
           remotes.push(id);
 
-          idToExternalAndNameMapping[id] = [shareScope, name, externalModuleId];
+          moduleIdToRemoteDataMapping[id] = {
+            shareScope: shareScope as string,
+            name,
+            externalModuleId: externalModuleId as string,
+            remoteName: '',
+          };
           const remoteModules: ExternalModule[] = [];
           // FallbackModule has requests
           if ('requests' in externalModule && externalModule.requests) {
@@ -93,7 +86,6 @@ class RemoteRuntimeModule extends RuntimeModule {
             remoteModules.push(externalModule as ExternalModule);
           }
 
-          idToRemoteMap[id] = [];
           remoteModules.forEach((remoteModule) => {
             let remoteName = '';
             try {
@@ -104,17 +96,6 @@ class RemoteRuntimeModule extends RuntimeModule {
             } catch (err) {
               //noop
             }
-            const externalModuleId =
-              chunkGraph &&
-              remoteModule &&
-              // @ts-ignore
-              chunkGraph.getModuleId(remoteModule);
-
-            idToRemoteMap[id].push({
-              externalType: remoteModule.externalType,
-              name: remoteModule.externalType === 'script' ? remoteName : '',
-              externalModuleId,
-            });
           });
         }
       }
@@ -124,22 +105,20 @@ class RemoteRuntimeModule extends RuntimeModule {
     );
 
     return Template.asString([
-      `var chunkMapping = ${JSON.stringify(
+      `${RuntimeGlobals.require}.remotesLoadingData.chunkMapping = ${JSON.stringify(
         chunkToRemotesMapping,
         null,
         '\t',
       )};`,
-      `var idToExternalAndNameMapping = ${JSON.stringify(
-        idToExternalAndNameMapping,
+      `${RuntimeGlobals.require}.remotesLoadingData.moduleIdToRemoteDataMapping = ${JSON.stringify(
+        moduleIdToRemoteDataMapping,
         null,
         '\t',
       )};`,
-      `var idToRemoteMap = ${JSON.stringify(idToRemoteMap, null, '\t')};`,
-      `${federationGlobal}.bundlerRuntimeOptions.remotes = {idToRemoteMap,chunkMapping, idToExternalAndNameMapping, webpackRequire:${RuntimeGlobals.require}};`,
       `${
         RuntimeGlobals.ensureChunkHandlers
       }.remotes = ${runtimeTemplate.basicFunction('chunkId, promises', [
-        `${federationGlobal}.bundlerRuntime.remotes({idToRemoteMap,chunkMapping, idToExternalAndNameMapping, chunkId, promises, webpackRequire:${RuntimeGlobals.require}});`,
+        `${federationGlobal}.bundlerRuntime.remotes({ chunkId, promises, webpackRequire:${RuntimeGlobals.require}});`,
       ])}`,
     ]);
   }

packages/enhanced/src/lib/container/runtime/getFederationGlobal.ts

@@ -2,6 +2,7 @@ import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-p
 import { getFederationGlobalScope } from './utils';
 import type RuntimeGlobals from 'webpack/lib/RuntimeGlobals';
 import { NormalizedRuntimeInitOptionsWithOutShared } from '../../../types/runtime';
+import type { RemoteInfos } from '@module-federation/webpack-bundler-runtime';
 
 const { Template } = require(
   normalizeWebpackPath('webpack'),
@@ -15,7 +16,29 @@ function getFederationGlobal(
   initOptionsWithoutShared: NormalizedRuntimeInitOptionsWithOutShared,
 ): string {
   const federationGlobal = getFederationGlobalScope(runtimeGlobals);
-  const initOptionsStrWithoutShared = JSON.stringify(initOptionsWithoutShared);
+  const initOptionsStrWithoutShared = JSON.stringify({
+    ...initOptionsWithoutShared,
+    remotes: initOptionsWithoutShared.remotes.filter(
+      (remote) => remote.externalType === 'script',
+    ),
+  });
+  const remoteInfos = JSON.stringify(
+    initOptionsWithoutShared.remotes.reduce((acc, remote) => {
+      const item: RemoteInfos[string][0] = {
+        alias: remote.alias || '',
+        name: remote.name,
+        // @ts-ignore
+        entry: remote.entry || '',
+        // @ts-ignore
+        shareScope: remote.shareScope,
+        externalType: remote.externalType,
+      };
+      const key = remote.name || remote.alias || '';
+      acc[key] ||= [];
+      acc[key].push(item);
+      return acc;
+    }, {} as RemoteInfos),
+  );
 
   return template.asString([
     `if(!${federationGlobal}){`,
@@ -25,11 +48,12 @@ function getFederationGlobal(
         `initOptions: ${initOptionsStrWithoutShared},`,
         `chunkMatcher: function(chunkId) {return ${matcher}},`,
         `rootOutputDir: ${JSON.stringify(rootOutputDir || '')},`,
-        'bundlerRuntimeOptions: {}',
+        `bundlerRuntimeOptions: { remotes: { remoteInfos: ${remoteInfos}, webpackRequire: ${runtimeGlobals.require} } }`,
       ]),
       '};',
     ]),
     `${runtimeGlobals.require}.consumesLoadingData = {}`,
+    `${runtimeGlobals.require}.remotesLoadingData = {}`,
     '}',
   ]);
 }

packages/enhanced/src/lib/container/runtime/utils.ts

@@ -7,7 +7,6 @@ import upath from 'upath';
 import path from 'path';
 import crypto from 'crypto';
 import { parseOptions } from '../options';
-import type { init } from '@module-federation/runtime-tools';
 import type webpack from 'webpack';
 import type RuntimeGlobals from 'webpack/lib/RuntimeGlobals';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
@@ -21,8 +20,6 @@ type EntryStaticNormalized = Awaited<
   ReturnType<Extract<webpack.WebpackOptionsNormalized['entry'], () => any>>
 >;
 
-type Remotes = Parameters<typeof init>[0]['remotes'];
-
 interface ModifyEntryOptions {
   compiler: webpack.Compiler;
   prependEntry?: (entry: EntryStaticNormalized) => void;
@@ -49,27 +46,47 @@ export function normalizeRuntimeInitOptionsWithOutShared(
       shareScope: item.shareScope || options.shareScope || 'default',
     }),
   );
-  const remoteOptions: Remotes = [];
+  const remoteOptions: NormalizedRuntimeInitOptionsWithOutShared['remotes'] =
+    [];
   parsedOptions.forEach((parsedOption) => {
     const [alias, remoteInfos] = parsedOption;
     const { external, shareScope } = remoteInfos;
-    try {
-      // only fit for remoteType: 'script'
-      const entry = external[0];
-      if (/\s/.test(entry)) {
+    external.forEach((externalItem) => {
+      try {
+        const entry = externalItem;
+        if (/\s/.test(entry)) {
+          return;
+        }
+        const [url, globalName] = extractUrlAndGlobal(externalItem);
+        remoteOptions.push({
+          alias,
+          name: globalName,
+          entry: url,
+          shareScope: shareScope,
+          externalType: 'script',
+        });
+      } catch (err) {
+        const getExternalTypeFromExternal = (external: string) => {
+          if (/^[a-z0-9-]+ /.test(external)) {
+            const idx = external.indexOf(' ');
+            return [
+              external.slice(0, idx) as moduleFederationPlugin.ExternalsType,
+              external.slice(idx + 1),
+            ] as const;
+          }
+          return null;
+        };
+        remoteOptions.push({
+          alias,
+          name: '',
+          entry: '',
+          shareScope: shareScope,
+          // @ts-ignore
+          externalType: getExternalTypeFromExternal(externalItem) || 'unknown',
+        });
         return;
       }
-      const [url, globalName] = extractUrlAndGlobal(external[0]);
-      remoteOptions.push({
-        alias,
-        name: globalName,
-        entry: url,
-        shareScope: shareScope,
-        // externalType
-      });
-    } catch (err) {
-      return;
-    }
+    });
   });
 
   const initOptionsWithoutShared = {

packages/enhanced/src/types/runtime.ts

@@ -1,8 +1,11 @@
 import type { init } from '@module-federation/runtime-tools';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
 
 type Remotes = Parameters<typeof init>[0]['remotes'];
 
 export interface NormalizedRuntimeInitOptionsWithOutShared {
   name: string;
-  remotes: Remotes;
+  remotes: Array<
+    Remotes[0] & { externalType: moduleFederationPlugin.ExternalsType }
+  >;
 }