chore: add runtime plugin

Author: 2heal1

packages/modernjs/package.json

@@ -51,6 +51,11 @@
       "import": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js",
       "require": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js"
     },
+    "./auto-fetch-data": {
+      "types": "./dist/types/cli/mfRuntimePlugins/auto-fetch-data.d.ts",
+      "import": "./dist/esm/cli/mfRuntimePlugins/auto-fetch-data.js",
+      "require": "./dist/esm/cli/mfRuntimePlugins/auto-fetch-data.js"
+    },
     "./inject-node-fetch": {
       "types": "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts",
       "import": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
@@ -77,6 +82,9 @@
       "resolve-entry-ipv4": [
         "./dist/types/cli/mfRuntimePlugins/resolve-entry-ipv4.d.ts"
       ],
+      "auto-fetch-data": [
+        "./dist/types/cli/mfRuntimePlugins/auto-fetch-data.d.ts"
+      ],
       "inject-node-fetch": [
         "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
       ]
@@ -91,6 +99,7 @@
     "@module-federation/rsbuild-plugin": "workspace:*",
     "@modern-js/utils": "2.65.1",
     "@module-federation/enhanced": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
     "@module-federation/node": "workspace:*",
     "@module-federation/sdk": "workspace:*",
     "@swc/helpers": "0.5.13",

packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts

@@ -1,18 +1,51 @@
 import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+import helpers from '@module-federation/runtime/helpers';
+import { getDataFetchInfo } from '../../runtime/utils';
 
 const autoFetchData: () => FederationRuntimePlugin = () => ({
   name: 'auto-fetch-data-plugin',
-  loadSnapshot(args) {
-    const { id, moduleInfo, remoteSnapshot } = args;
+  afterLoadSnapshot(args) {
+    const { id, moduleInfo, remoteSnapshot, host } = args;
 
-    if (!('modules' in moduleInfo) || !id) {
+    if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
       return args;
     }
 
-    if (hasData(remoteSnapshot)) {
-      mfModule.data = fetchData();
+    const { name, alias } = moduleInfo;
+    const dataFetchInfo = getDataFetchInfo({
+      name,
+      alias,
+      id,
+    });
+    if (!dataFetchInfo) {
+      return args;
+    }
+    const { dataFetchId, dataFetchName } = dataFetchInfo;
+
+    const { modules, version } = remoteSnapshot;
+
+    const key = `${name}@${version}@${dataFetchName}`;
+    if (helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key]) {
+      return args;
     }
 
+    if (modules.find((module) => module.moduleName === dataFetchName)) {
+      return args;
+    }
+
+    helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key] = host
+      .loadRemote(dataFetchId)
+      .then((m) => {
+        if (
+          m &&
+          typeof m === 'object' &&
+          'prefetch' in m &&
+          typeof m.prefetch === 'function'
+        ) {
+          return m.prefetch();
+        }
+      });
+
     return args;
   },
 });

packages/modernjs/src/cli/utils.ts

@@ -152,6 +152,11 @@ export const patchMFConfig = (
     runtimePlugins,
   );
 
+  injectRuntimePlugins(
+    require.resolve('@module-federation/modern-js/auto-fetch-data'),
+    runtimePlugins,
+  );
+
   if (isDev) {
     injectRuntimePlugins(
       require.resolve('@module-federation/modern-js/resolve-entry-ipv4'),

packages/modernjs/src/runtime/createRemoteSSRComponent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import helpers from '@module-federation/runtime/helpers';
 import {
   getInstance,
   type FederationHost,
@@ -7,6 +8,7 @@ import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
+import { getDataFetchInfo } from './utils';
 
 type IProps = {
   id: string;
@@ -16,7 +18,7 @@ type IProps = {
 
 type ReactKey = { key?: React.Key | null };
 
-async function fetchData(id: string) {
+async function fetchData(id: string): Promise<unknown | undefined> {
   const instance = getInstance();
   if (!instance) {
     return;
@@ -29,11 +31,16 @@ async function fetchData(id: string) {
   if (!module) {
     return;
   }
-  const dataFetch = module.dataFetchMap[id];
-  if (!dataFetch) {
+  const dataFetchInfo = getDataFetchInfo({
+    id,
+    name,
+    alias: module.remoteInfo.alias,
+  });
+  if (!dataFetchInfo) {
     return;
   }
-  return dataFetch;
+  const key = `${name}@${module.remoteInfo.version}@${dataFetchInfo.dataFetchName}`;
+  return helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key];
 }
 
 function getLoadedRemoteInfos(instance: FederationHost, id: string) {

packages/modernjs/src/runtime/utils.ts

@@ -0,0 +1,35 @@
+export const getDataFetchInfo = ({
+  name,
+  alias,
+  id,
+}: {
+  id: string;
+  name: string;
+  alias?: string;
+}) => {
+  const regex = new RegExp(`^${name}(/[^/].*|)$`);
+  const nameOrAlias = regex.test(id) ? name : alias || name;
+  const DATA_FETCH = 'mf-data';
+
+  const expose = id.replace(nameOrAlias, '');
+  let dataFetchName = '';
+  let dataFetchId = '';
+  if (expose.startsWith('/')) {
+    dataFetchName = `${expose.slice(1)}.${DATA_FETCH}`;
+    dataFetchId = `${id}.${DATA_FETCH}`;
+  } else if (expose === '') {
+    dataFetchName = DATA_FETCH;
+    dataFetchId = `${id}/${DATA_FETCH}`;
+  } else {
+    return;
+  }
+
+  if (!dataFetchName || !dataFetchId) {
+    return;
+  }
+
+  return {
+    dataFetchName,
+    dataFetchId,
+  };
+};

packages/runtime-core/src/plugins/snapshot/SnapshotHandler.ts

@@ -82,8 +82,6 @@ export class SnapshotHandler {
       void
     >('beforeLoadRemoteSnapshot'),
     loadSnapshot: new AsyncWaterfallHook<{
-      id?: string;
-      expose?: string;
       options: Options;
       moduleInfo: Remote;
       hostGlobalSnapshot: GlobalModuleInfo[string] | undefined;
@@ -99,6 +97,8 @@ export class SnapshotHandler {
       from: 'global' | 'manifest';
     }>('loadRemoteSnapshot'),
     afterLoadSnapshot: new AsyncWaterfallHook<{
+      id?: string;
+      host: FederationHost;
       options: Options;
       moduleInfo: Remote;
       remoteSnapshot: ModuleInfo;
@@ -175,8 +175,6 @@ export class SnapshotHandler {
       remoteSnapshot: globalRemoteSnapshot,
       globalSnapshot: globalSnapshotRes,
     } = await this.hooks.lifecycle.loadSnapshot.emit({
-      id,
-      expose,
       options,
       moduleInfo,
       hostGlobalSnapshot,
@@ -257,6 +255,8 @@ export class SnapshotHandler {
     }
 
     await this.hooks.lifecycle.afterLoadSnapshot.emit({
+      id,
+      host: this.HostInstance,
       options,
       moduleInfo,
       remoteSnapshot: mSnapshot,

packages/runtime-core/src/plugins/snapshot/index.ts

@@ -48,7 +48,6 @@ export function snapshotPlugin(): FederationRuntimePlugin {
           await origin.snapshotHandler.loadRemoteSnapshotInfo({
             moduleInfo: remote,
             id,
-            expose,
           });
 
         assignRemoteInfo(remoteInfo, remoteSnapshot);

packages/runtime-core/src/type/config.ts

@@ -31,6 +31,7 @@ export type LoadShareExtraOptions = {
 };
 
 export interface RemoteInfo {
+  alias?: string;
   name: string;
   version?: string;
   buildVersion?: string;

packages/sdk/src/generateSnapshotFromManifest.ts

@@ -7,7 +7,6 @@ import {
   ManifestProvider,
 } from './types';
 import { MANIFEST_EXT } from './constant';
-import { isBrowserEnv } from './env';
 
 interface IOptions {
   remotes?: Record<string, string>;