chore: wip

Author: 2heal1

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

@@ -0,0 +1,19 @@
+import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+const autoFetchData: () => FederationRuntimePlugin = () => ({
+  name: 'auto-fetch-data-plugin',
+  loadSnapshot(args) {
+    const { id, moduleInfo, remoteSnapshot } = args;
+
+    if (!('modules' in moduleInfo) || !id) {
+      return args;
+    }
+
+    if (hasData(remoteSnapshot)) {
+      mfModule.data = fetchData();
+    }
+
+    return args;
+  },
+});
+export default autoFetchData;

packages/modernjs/src/runtime/createRemoteSSRComponent.tsx

@@ -16,6 +16,26 @@ type IProps = {
 
 type ReactKey = { key?: React.Key | null };
 
+async function fetchData(id: string) {
+  const instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  const { name } = instance.remoteHandler.idToRemoteMap[id] || {};
+  if (!name) {
+    return;
+  }
+  const module = instance.moduleCache.get(name);
+  if (!module) {
+    return;
+  }
+  const dataFetch = module.dataFetchMap[id];
+  if (!dataFetch) {
+    return;
+  }
+  return dataFetch;
+}
+
 function getLoadedRemoteInfos(instance: FederationHost, id: string) {
   const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
   if (!name) {
@@ -140,9 +160,9 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
 }) {
   type ComponentType = T[E] extends (...args: any) => any
     ? Parameters<T[E]>[0] extends undefined
-      ? ReactKey
-      : Parameters<T[E]>[0] & ReactKey
-    : ReactKey;
+      ? ReactKey & { _mf_data?: any }
+      : Parameters<T[E]>[0] & ReactKey & { _mfData?: any }
+    : ReactKey & { _mfData?: any };
   const exportName = info?.export || 'default';
 
   const LazyComponent = React.lazy(async () => {
@@ -154,17 +174,19 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
       }
       const moduleId = m && m[Symbol.for('mf_module_id')];
 
+      const data = await fetchData(moduleId);
+
       const assets = collectSSRAssets({
         id: moduleId,
       });
 
-      const Com = m[exportName] as React.FC;
+      const Com = m[exportName] as React.FC<ComponentType>;
       if (exportName in m && typeof Com === 'function') {
         return {
           default: (props: Omit<ComponentType, 'key'>) => (
             <>
               {assets}
-              <Com {...props} />
+              <Com {...props} _mfData={data} />
             </>
           ),
         };

packages/runtime-core/src/global.ts

@@ -24,6 +24,7 @@ export interface Federation {
   __SHARE__: GlobalShareScopeMap;
   __MANIFEST_LOADING__: Record<string, Promise<ModuleInfo>>;
   __PRELOADED_MAP__: Map<string, boolean>;
+  __DATA_FETCH_MAP__: Map<string, Promise<unknown>>;
 }
 export const CurrentGlobal =
   typeof globalThis === 'object' ? globalThis : window;
@@ -91,6 +92,7 @@ function setGlobalDefaultVal(target: typeof CurrentGlobal) {
       __SHARE__: {},
       __MANIFEST_LOADING__: {},
       __PRELOADED_MAP__: new Map(),
+      __DATA_FETCH_MAP__: new Map(),
     });
 
     definePropertyGlobalVal(target, '__VMOK__', target.__FEDERATION__);
@@ -102,6 +104,7 @@ function setGlobalDefaultVal(target: typeof CurrentGlobal) {
   target.__FEDERATION__.__SHARE__ ??= {};
   target.__FEDERATION__.__MANIFEST_LOADING__ ??= {};
   target.__FEDERATION__.__PRELOADED_MAP__ ??= new Map();
+  target.__FEDERATION__.__DATA_FETCH_MAP__ ??= new Map();
 }
 
 setGlobalDefaultVal(CurrentGlobal);

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

@@ -82,6 +82,8 @@ export class SnapshotHandler {
       void
     >('beforeLoadRemoteSnapshot'),
     loadSnapshot: new AsyncWaterfallHook<{
+      id?: string;
+      expose?: string;
       options: Options;
       moduleInfo: Remote;
       hostGlobalSnapshot: GlobalModuleInfo[string] | undefined;
@@ -111,32 +113,16 @@ export class SnapshotHandler {
     this.loaderHook = HostInstance.loaderHook;
   }
 
-  async loadSnapshot(moduleInfo: Remote): Promise<{
-    remoteSnapshot: GlobalModuleInfo[string] | undefined;
-    globalSnapshot: ReturnType<typeof getGlobalSnapshot>;
-  }> {
-    const { options } = this.HostInstance;
-    const { hostGlobalSnapshot, remoteSnapshot, globalSnapshot } =
-      this.getGlobalRemoteInfo(moduleInfo);
-
-    const {
-      remoteSnapshot: globalRemoteSnapshot,
-      globalSnapshot: globalSnapshotRes,
-    } = await this.hooks.lifecycle.loadSnapshot.emit({
-      options,
-      moduleInfo,
-      hostGlobalSnapshot,
-      remoteSnapshot,
-      globalSnapshot,
-    });
-    return {
-      remoteSnapshot: globalRemoteSnapshot,
-      globalSnapshot: globalSnapshotRes,
-    };
-  }
-
   // eslint-disable-next-line max-lines-per-function
-  async loadRemoteSnapshotInfo(moduleInfo: Remote):
+  async loadRemoteSnapshotInfo({
+    moduleInfo,
+    id,
+    expose,
+  }: {
+    moduleInfo: Remote;
+    id?: string;
+    expose?: string;
+  }):
     | Promise<{
         remoteSnapshot: ModuleInfo;
         globalSnapshot: GlobalModuleInfo;
@@ -189,6 +175,8 @@ export class SnapshotHandler {
       remoteSnapshot: globalRemoteSnapshot,
       globalSnapshot: globalSnapshotRes,
     } = await this.hooks.lifecycle.loadSnapshot.emit({
+      id,
+      expose,
       options,
       moduleInfo,
       hostGlobalSnapshot,

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

@@ -41,11 +41,15 @@ export function snapshotPlugin(): FederationRuntimePlugin {
   return {
     name: 'snapshot-plugin',
     async afterResolve(args) {
-      const { remote, pkgNameOrAlias, expose, origin, remoteInfo } = args;
+      const { remote, pkgNameOrAlias, expose, origin, remoteInfo, id } = args;
 
       if (!isRemoteInfoWithEntry(remote) || !isPureRemoteEntry(remote)) {
         const { remoteSnapshot, globalSnapshot } =
-          await origin.snapshotHandler.loadRemoteSnapshotInfo(remote);
+          await origin.snapshotHandler.loadRemoteSnapshotInfo({
+            moduleInfo: remote,
+            id,
+            expose,
+          });
 
         assignRemoteInfo(remoteInfo, remoteSnapshot);
         // preloading assets

packages/runtime-core/src/remote/index.ts

@@ -287,7 +287,9 @@ export class RemoteHandler {
         const { remote } = ops;
         const remoteInfo = getRemoteInfo(remote);
         const { globalSnapshot, remoteSnapshot } =
-          await host.snapshotHandler.loadRemoteSnapshotInfo(remote);
+          await host.snapshotHandler.loadRemoteSnapshotInfo({
+            moduleInfo: remote,
+          });
 
         const assets = await this.hooks.lifecycle.generatePreloadAssets.emit({
           origin: host,