@module-federation/bridge-react 0.0.0-next-20250708033956 → 0.0.0-next-20250708104625

package/dist/router-v5.d.ts

@@ -7,3 +7,12 @@ export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.Br
 export * from "react-router-dom/";
 
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/dist/router-v6.d.ts

@@ -9,3 +9,12 @@ export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.R
 export * from "react-router-dom/";
 
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/dist/router.d.ts

@@ -9,3 +9,12 @@ export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.R
 export * from "react-router-dom/";
 
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/dist/{utils-Bk8hGjjF.mjs → utils-BTYYwZcb.mjs}

@@ -1975,42 +1975,42 @@ function getLoadedRemoteInfos(id, instance) {
   };
 }
 export {
-  generateKey as A,
-  cache as B,
+  DOWNGRADE_KEY as A,
+  getDowngradeTag as B,
   CacheSize as C,
-  DATA_FETCH_CLIENT_SUFFIX as D,
+  DATA_FETCH_QUERY as D,
   ERROR_TYPE as E,
   FS_HREF as F,
-  revalidateTag as G,
-  clearStore as H,
+  callAllDowngrade as G,
+  callDowngrade as H,
   getDataFetchCache as I,
   flushDataFetch as J,
   LOAD_REMOTE_ERROR_PREFIX as L,
-  MF_DATA_FETCH_TYPE as M,
-  getDataFetchMapKey as a,
-  getDataFetchItem as b,
-  isServerEnv as c,
-  isCSROnly as d,
-  loadDataFetchModule as e,
-  MF_DATA_FETCH_STATUS as f,
-  getDataFetchInfo as g,
-  getDataFetchMap as h,
-  isDataLoaderExpose as i,
-  initDataFetchMap as j,
-  DATA_FETCH_QUERY as k,
+  MF_DATA_FETCH_STATUS as M,
+  loadDataFetchModule as a,
+  CacheTime as b,
+  configureCache as c,
+  generateKey as d,
+  cache as e,
+  fetchData as f,
+  getDataFetchMap as g,
+  clearStore as h,
+  initDataFetchMap as i,
+  isDataLoaderExpose as j,
+  getDataFetchInfo as k,
   logger as l,
-  fetchData as m,
-  DATA_FETCH_FUNCTION as n,
-  DOWNGRADE_KEY as o,
-  getDowngradeTag as p,
-  callAllDowngrade as q,
-  callDowngrade as r,
-  getDataFetchIdWithErrorMsgs as s,
-  DATA_FETCH_ERROR_PREFIX as t,
-  getLoadedRemoteInfos as u,
-  setDataFetchItemLoadedStatus as v,
-  wrapDataFetchId as w,
-  setSSREnv as x,
-  CacheTime as y,
-  configureCache as z
+  getDataFetchMapKey as m,
+  getDataFetchItem as n,
+  DATA_FETCH_CLIENT_SUFFIX as o,
+  MF_DATA_FETCH_TYPE as p,
+  isServerEnv as q,
+  revalidateTag as r,
+  setSSREnv as s,
+  isCSROnly as t,
+  DATA_FETCH_FUNCTION as u,
+  getDataFetchIdWithErrorMsgs as v,
+  DATA_FETCH_ERROR_PREFIX as w,
+  wrapDataFetchId as x,
+  getLoadedRemoteInfos as y,
+  setDataFetchItemLoadedStatus as z
 };

package/dist/v18.d.ts

@@ -103,3 +103,12 @@ declare interface Root_2 {
 export declare type RootType = HTMLElement | Root_2;
 
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/dist/v19.d.ts

@@ -104,3 +104,12 @@ declare interface Root_2 {
 export declare type RootType = HTMLElement | Root_2;
 
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250708033956",
+  "version": "0.0.0-next-20250708104625",
   "publishConfig": {
     "access": "public"
   },
@@ -50,11 +50,6 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
-    "./data-fetch-runtime-plugin": {
-      "types": "./dist/data-fetch-runtime-plugin.d.ts",
-      "import": "./dist/data-fetch-runtime-plugin.es.js",
-      "require": "./dist/data-fetch-runtime-plugin.cjs.js"
-    },
     "./lazy-utils": {
       "types": "./dist/lazy-utils.d.ts",
       "import": "./dist/lazy-utils.es.js",
@@ -70,6 +65,11 @@
       "import": "./dist/data-fetch-server-middleware.es.js",
       "require": "./dist/data-fetch-server-middleware.cjs.js"
     },
+    "./lazy-load-component-plugin": {
+      "types": "./dist/lazy-load-component-plugin.d.ts",
+      "import": "./dist/lazy-load-component-plugin.es.js",
+      "require": "./dist/lazy-load-component-plugin.cjs.js"
+    },
     "./*": "./*"
   },
   "typesVersions": {
@@ -77,8 +77,8 @@
       ".": [
         "./dist/types/index.d.ts"
       ],
-      "data-fetch-runtime-plugin": [
-        "./dist/lazy-utils.d.ts"
+      "lazy-load-component-plugin": [
+        "./dist/lazy-load-component-plugin.d.ts"
       ],
       "lazy-utils": [
         "./dist/lazy-utils.d.ts"
@@ -94,8 +94,8 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/bridge-shared": "0.0.0-next-20250708033956",
-    "@module-federation/sdk": "0.0.0-next-20250708033956"
+    "@module-federation/bridge-shared": "0.0.0-next-20250708104625",
+    "@module-federation/sdk": "0.0.0-next-20250708104625"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -117,7 +117,7 @@
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
     "hono": "3.12.12",
-    "@module-federation/runtime": "0.0.0-next-20250708033956"
+    "@module-federation/runtime": "0.0.0-next-20250708104625"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -11,7 +11,7 @@ export {
   ERROR_TYPE,
   createLazyComponent,
   collectSSRAssets,
-  wrapNoSSR,
+  // wrapNoSSR,
   callDataFetch,
   setSSREnv,
   autoFetchDataPlugin,
@@ -25,6 +25,8 @@ export {
   prefetch,
 } from './lazy';
 
+export { lazyLoadComponentPlugin } from './plugins/lazy-load-component-plugin';
+
 export type { CreateRootOptions, Root } from './provider/versions/legacy';
 export type {
   ProviderParams,

package/src/lazy/createLazyComponent.tsx

@@ -1,4 +1,9 @@
+import type { FederationHost, getInstance } from '@module-federation/runtime';
+import type { BasicProviderModuleInfo } from '@module-federation/sdk';
 import React, { ReactNode, useState, useEffect } from 'react';
+import type { ErrorInfo } from './AwaitDataFetch';
+import type { DataFetchParams, NoSSRRemoteInfo } from './types';
+
 import logger from './logger';
 import {
   AwaitDataFetch,
@@ -13,7 +18,6 @@ import {
   getLoadedRemoteInfos,
   setDataFetchItemLoadedStatus,
   wrapDataFetchId,
-  isServerEnv,
 } from './utils';
 import {
   DATA_FETCH_ERROR_PREFIX,
@@ -23,10 +27,6 @@ import {
   MF_DATA_FETCH_TYPE,
 } from './constant';
 
-import type { ErrorInfo } from './AwaitDataFetch';
-import type { DataFetchParams, NoSSRRemoteInfo } from './types';
-import type { FederationHost, getInstance } from '@module-federation/runtime';
-
 export type IProps = {
   id: string;
   instance: ReturnType<typeof getInstance>;
@@ -42,13 +42,22 @@ export type CreateLazyComponentOptions<T, E extends keyof T> = {
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   export?: E;
   dataFetchParams?: DataFetchParams;
-  noSSR?: boolean;
+  // noSSR?: boolean;
   cacheData?: boolean;
 };
 
 type ReactKey = { key?: React.Key | null };
 
-function getTargetModuleInfo(id: string, instance?: FederationHost) {
+function getTargetModuleInfo(
+  id: string,
+  instance?: FederationHost,
+):
+  | {
+      module: BasicProviderModuleInfo['modules'][0];
+      publicPath: string;
+      remoteEntry: string;
+    }
+  | undefined {
   if (!instance) {
     return;
   }
@@ -56,11 +65,11 @@ function getTargetModuleInfo(id: string, instance?: FederationHost) {
   if (!loadedRemoteInfo) {
     return;
   }
-  const snapshot = loadedRemoteInfo.snapshot;
+  const { snapshot } = loadedRemoteInfo;
   if (!snapshot) {
     return;
   }
-  const publicPath =
+  const publicPath: string =
     'publicPath' in snapshot
       ? snapshot.publicPath
       : 'getPublicPath' in snapshot
@@ -148,11 +157,12 @@ export function collectSSRAssets(options: IProps) {
 function getServerNeedRemoteInfo(
   loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>,
   id: string,
-  noSSR?: boolean,
+  // noSSR?: boolean,
 ): NoSSRRemoteInfo | undefined {
   if (
-    noSSR ||
-    (typeof window !== 'undefined' && window.location.href !== window[FS_HREF])
+    // noSSR ||
+    typeof window !== 'undefined' &&
+    window.location.href !== window[FS_HREF]
   ) {
     if (!loadedRemoteInfo?.version) {
       throw new Error(`${loadedRemoteInfo?.name} version is empty`);
@@ -223,7 +233,8 @@ export function createLazyComponent<T, E extends keyof T>(
     return m;
   };
 
-  const getData = async (noSSR?: boolean) => {
+  // const getData = async (noSSR?: boolean) => {
+  const getData = async () => {
     let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
     let moduleId: string;
     try {
@@ -262,7 +273,8 @@ export function createLazyComponent<T, E extends keyof T>(
           ...options.dataFetchParams,
           isDowngrade: false,
         },
-        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR),
+        // getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR),
+        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey),
       );
       setDataFetchItemLoadedStatus(dataFetchMapKey);
       logger.debug('get data res: \n', data);
@@ -335,70 +347,72 @@ export function createLazyComponent<T, E extends keyof T>(
       // @ts-expect-error ignore
       return <LazyComponent {...args} mfData={dataCache} />;
     }
-    if (!options.noSSR) {
-      return (
-        <AwaitDataFetch
-          resolve={getData(options.noSSR)}
-          loading={options.loading}
-          delayLoading={options.delayLoading}
-          errorElement={options.fallback}
-        >
-          {/* @ts-expect-error ignore */}
-          {(data) => <LazyComponent {...args} mfData={data} />}
-        </AwaitDataFetch>
-      );
-    } else {
-      // Client-side rendering logic
-      const [data, setData] = useState<unknown>(null);
-      const [loading, setLoading] = useState<boolean>(true);
-      const [error, setError] = useState<ErrorInfo | null>(null);
+    return (
+      <AwaitDataFetch
+        // resolve={getData(options.noSSR)}
+        resolve={getData()}
+        loading={options.loading}
+        delayLoading={options.delayLoading}
+        errorElement={options.fallback}
+      >
+        {/* @ts-expect-error ignore */}
+        {(data) => <LazyComponent {...args} mfData={data} />}
+      </AwaitDataFetch>
+    );
+    // if (!options.noSSR) {
 
-      useEffect(() => {
-        let isMounted = true;
-        const fetchDataAsync = async () => {
-          try {
-            setLoading(true);
-            const result = await getData(options.noSSR);
-            if (isMounted) {
-              setData(result);
-            }
-          } catch (e) {
-            if (isMounted) {
-              setError(transformError(e as Error));
-            }
-          } finally {
-            if (isMounted) {
-              setLoading(false);
-            }
-          }
-        };
+    // } else {
+    //   // Client-side rendering logic
+    //   const [data, setData] = useState<unknown>(null);
+    //   const [loading, setLoading] = useState<boolean>(true);
+    //   const [error, setError] = useState<ErrorInfo | null>(null);
 
-        fetchDataAsync();
+    //   useEffect(() => {
+    //     let isMounted = true;
+    //     const fetchDataAsync = async () => {
+    //       try {
+    //         setLoading(true);
+    //         const result = await getData(options.noSSR);
+    //         if (isMounted) {
+    //           setData(result);
+    //         }
+    //       } catch (e) {
+    //         if (isMounted) {
+    //           setError(transformError(e as Error));
+    //         }
+    //       } finally {
+    //         if (isMounted) {
+    //           setLoading(false);
+    //         }
+    //       }
+    //     };
 
-        return () => {
-          isMounted = false;
-        };
-      }, []);
+    //     fetchDataAsync();
 
-      if (loading) {
-        return (
-          <DelayedLoading delayLoading={options.delayLoading}>
-            {options.loading}
-          </DelayedLoading>
-        );
-      }
+    //     return () => {
+    //       isMounted = false;
+    //     };
+    //   }, []);
 
-      if (error) {
-        return (
-          <>
-            {typeof options.fallback === 'function'
-              ? options.fallback(error)
-              : options.fallback}
-          </>
-        );
-      }
-      // @ts-expect-error ignore
-      return <LazyComponent {...args} mfData={data} />;
-    }
+    //   if (loading) {
+    //     return (
+    //       <DelayedLoading delayLoading={options.delayLoading}>
+    //         {options.loading}
+    //       </DelayedLoading>
+    //     );
+    //   }
+
+    //   if (error) {
+    //     return (
+    //       <>
+    //         {typeof options.fallback === 'function'
+    //           ? options.fallback(error)
+    //           : options.fallback}
+    //       </>
+    //     );
+    //   }
+    //   // @ts-expect-error ignore
+    //   return <LazyComponent {...args} mfData={data} />;
+    // }
   };
 }

package/src/lazy/data-fetch/index.ts

@@ -12,4 +12,5 @@ export {
 
 export type { CacheStatus, CacheStatsInfo } from './cache';
 
+export type { PrefetchOptions } from './prefetch';
 export { prefetch } from './prefetch';

package/src/lazy/data-fetch/prefetch.ts

@@ -7,7 +7,7 @@ import {
 import helpers from '@module-federation/runtime/helpers';
 import { DataFetchParams } from '../types';
 
-type PrefetchOptions = {
+export type PrefetchOptions = {
   id: string;
   instance: ReturnType<typeof getInstance>;
   dataFetchParams?: DataFetchParams;

package/src/lazy/data-fetch/runtime-plugin.ts

@@ -20,97 +20,96 @@ import {
 import type { MF_DATA_FETCH_MAP_VALUE } from '../types';
 import type { FederationRuntimePlugin } from '@module-federation/runtime';
 
-const autoFetchData: () => FederationRuntimePlugin = () => ({
-  name: 'auto-fetch-data-plugin',
-  beforeInit(args) {
-    initDataFetchMap();
-    injectDataFetch();
-    return args;
-  },
-  afterLoadSnapshot(args) {
-    const { id, moduleInfo, remoteSnapshot, host } = args;
-    if (typeof id === 'string' && isDataLoaderExpose(id)) {
-      return args;
-    }
-    if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
-      return args;
-    }
+const autoFetchData: () => FederationRuntimePlugin = () => {
+  initDataFetchMap();
+  injectDataFetch();
+  return {
+    name: 'auto-fetch-data-plugin',
+    afterLoadSnapshot(args) {
+      const { id, moduleInfo, remoteSnapshot, host } = args;
+      if (typeof id === 'string' && isDataLoaderExpose(id)) {
+        return args;
+      }
+      if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
+        return args;
+      }
 
-    const { name, alias } = moduleInfo;
-    const dataFetchInfo = getDataFetchInfo({
-      name,
-      alias,
-      id,
-      remoteSnapshot,
-    });
-    if (!dataFetchInfo) {
-      return args;
-    }
-    const { dataFetchId, dataFetchName } = dataFetchInfo;
+      const { name, alias } = moduleInfo;
+      const dataFetchInfo = getDataFetchInfo({
+        name,
+        alias,
+        id,
+        remoteSnapshot,
+      });
+      if (!dataFetchInfo) {
+        return args;
+      }
+      const { dataFetchId, dataFetchName } = dataFetchInfo;
 
-    const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
-      name: host.name,
-      version: host.options.version,
-    });
-    logger.debug(
-      '======= auto fetch plugin dataFetchMapKey: ',
-      dataFetchMapKey,
-    );
+      const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
+        name: host.name,
+        version: host.options.version,
+      });
+      logger.debug(
+        '======= auto fetch plugin dataFetchMapKey: ',
+        dataFetchMapKey,
+      );
 
-    if (!dataFetchMapKey) {
-      return args;
-    }
+      if (!dataFetchMapKey) {
+        return args;
+      }
 
-    const dataFetchItem = getDataFetchItem(dataFetchMapKey);
-    if (dataFetchItem) {
-      return args;
-    }
+      const dataFetchItem = getDataFetchItem(dataFetchMapKey);
+      if (dataFetchItem) {
+        return args;
+      }
 
-    const dataFetchMap = getDataFetchMap();
-    const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
-    const hasDataFetchClient = Boolean(
-      remoteSnapshot.modules.find(
-        (module) =>
-          module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
-      ),
-    );
-    const downgradeType = hasDataFetchClient
-      ? MF_DATA_FETCH_TYPE.FETCH_CLIENT
-      : hasSSRAsset
-        ? MF_DATA_FETCH_TYPE.FETCH_SERVER
-        : MF_DATA_FETCH_TYPE.FETCH_CLIENT;
-    let finalDataFetchId = dataFetchId;
+      const dataFetchMap = getDataFetchMap();
+      const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
+      const hasDataFetchClient = Boolean(
+        remoteSnapshot.modules.find(
+          (module) =>
+            module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
+        ),
+      );
+      const downgradeType = hasDataFetchClient
+        ? MF_DATA_FETCH_TYPE.FETCH_CLIENT
+        : hasSSRAsset
+          ? MF_DATA_FETCH_TYPE.FETCH_SERVER
+          : MF_DATA_FETCH_TYPE.FETCH_CLIENT;
+      let finalDataFetchId = dataFetchId;
 
-    if (!isServerEnv()) {
-      finalDataFetchId =
-        downgradeType === MF_DATA_FETCH_TYPE.FETCH_CLIENT
-          ? hasDataFetchClient
-            ? `${dataFetchId}${DATA_FETCH_CLIENT_SUFFIX}`
-            : dataFetchId
-          : dataFetchId;
-    }
+      if (!isServerEnv()) {
+        finalDataFetchId =
+          downgradeType === MF_DATA_FETCH_TYPE.FETCH_CLIENT
+            ? hasDataFetchClient
+              ? `${dataFetchId}${DATA_FETCH_CLIENT_SUFFIX}`
+              : dataFetchId
+            : dataFetchId;
+      }
 
-    const getDataFetchGetter = () =>
-      loadDataFetchModule(host, finalDataFetchId);
+      const getDataFetchGetter = () =>
+        loadDataFetchModule(host, finalDataFetchId);
 
-    const dataFetchFnItem: MF_DATA_FETCH_MAP_VALUE[0] = [
-      getDataFetchGetter,
-      downgradeType,
-    ];
+      const dataFetchFnItem: MF_DATA_FETCH_MAP_VALUE[0] = [
+        getDataFetchGetter,
+        downgradeType,
+      ];
 
-    // server client must execute
-    if (typeof window === 'undefined' || isCSROnly()) {
-      dataFetchFnItem.push(getDataFetchGetter());
-    }
+      // server client must execute
+      if (typeof window === 'undefined' || isCSROnly()) {
+        dataFetchFnItem.push(getDataFetchGetter());
+      }
 
-    dataFetchMap[dataFetchMapKey] = [
-      dataFetchFnItem,
-      undefined,
-      MF_DATA_FETCH_STATUS.AWAIT,
-    ];
+      dataFetchMap[dataFetchMapKey] = [
+        dataFetchFnItem,
+        undefined,
+        MF_DATA_FETCH_STATUS.AWAIT,
+      ];
 
-    return args;
-  },
-});
+      return args;
+    },
+  };
+};
 
 export default autoFetchData;