chore(react): export createRemoteComponent and related react utils

Author: 2heal1

.changeset/config.json

@@ -27,7 +27,8 @@
       "@module-federation/inject-external-runtime-core-plugin",
       "@module-federation/runtime-core",
       "create-module-federation",
-      "@module-federation/cli"
+      "@module-federation/cli",
+      "@module-federation/react"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/spicy-parents-greet.md

@@ -1,6 +1,6 @@
 ---
-'@module-federation/bridge-react': patch
+'@module-federation/react': patch
 '@module-federation/modern-js': patch
 ---
 
-chore(bridge-react): export createRemoteComponent and related utils
+chore(react): export createRemoteComponent and related react utils

apps/modern-component-data-fetch/provider-csr/module-federation.config.ts

@@ -1,4 +1,4 @@
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
 
 export default createModuleFederationConfig({
   name: 'provider_csr',

packages/bridge/bridge-react/package.json

@@ -11,7 +11,6 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/bridge-react"
   },
-  "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -61,10 +60,10 @@
       "import": "./dist/data-fetch-utils.es.js",
       "require": "./dist/data-fetch-utils.cjs.js"
     },
-    "./data-fetch-constant": {
-      "types": "./dist/module/constant.d.ts",
-      "import": "./dist/data-fetch-constant.es.js",
-      "require": "./dist/data-fetch-constant.cjs.js"
+    "./data-fetch-server-middleware": {
+      "types": "./dist/module/data-fetch/data-fetch-server-middleware.d.ts",
+      "import": "./dist/data-fetch-server-middleware.es.js",
+      "require": "./dist/data-fetch-server-middleware.cjs.js"
     },
     "./*": "./*"
   },
@@ -97,8 +96,8 @@
       "data-fetch-utils": [
         "./dist/module/utils.d.ts"
       ],
-      "data-fetch-constant": [
-        "./dist/module/constant.d.ts"
+      "data-fetch-server-middleware": [
+        "./dist/module/data-fetch/data-fetch-server-middleware.d.ts"
       ]
     }
   },
@@ -115,13 +114,7 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": "^4 || ^5 || ^6 || ^7",
-    "@module-federation/runtime": ">=0.15.0"
-  },
-  "peerDependenciesMeta": {
-    "@module-federation/runtime": {
-      "optional": true
-    }
+    "react-router-dom": "^4 || ^5 || ^6 || ^7"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -137,6 +130,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.5.4",
-    "@module-federation/runtime": "workspace:*"
+    "@module-federation/runtime": "workspace:*",
+    "hono": "3.12.12"
   }
 }

packages/bridge/bridge-react/src/index.ts

@@ -14,4 +14,9 @@ export type {
 } from './types';
 
 export { kit, ERROR_TYPE, autoFetchDataPlugin } from './module';
-export type { DataFetchParams, NoSSRRemoteInfo } from './module';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateRemoteComponentOptions,
+} from './module';

packages/bridge/bridge-react/src/module/createRemoteComponent.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode, useEffect, useState } from 'react';
 import logger from './logger';
-import { getInstance } from '@module-federation/runtime';
 import { AwaitDataFetch, transformError } from './AwaitDataFetch';
 import {
   fetchData,
@@ -21,11 +20,13 @@ import {
 
 import type { ErrorInfo } from './AwaitDataFetch';
 import type { DataFetchParams, NoSSRRemoteInfo } from './types';
+import type { FederationHost } from '@module-federation/runtime';
 
-type IProps = {
+export type IProps = {
   id: string;
   injectScript?: boolean;
   injectLink?: boolean;
+  runtime: typeof import('@module-federation/runtime');
 };
 
 export type CreateRemoteComponentOptions<T, E extends keyof T> = {
@@ -35,12 +36,12 @@ export type CreateRemoteComponentOptions<T, E extends keyof T> = {
   export?: E;
   dataFetchParams?: DataFetchParams;
   noSSR?: boolean;
+  runtime: typeof import('@module-federation/runtime');
 };
 
 type ReactKey = { key?: React.Key | null };
 
-function getTargetModuleInfo(id: string) {
-  const instance = getInstance();
+function getTargetModuleInfo(id: string, instance?: FederationHost) {
   if (!instance) {
     return;
   }
@@ -88,12 +89,12 @@ export function collectSSRAssets(options: IProps) {
   } = typeof options === 'string' ? { id: options } : options;
   const links: React.ReactNode[] = [];
   const scripts: React.ReactNode[] = [];
-  const instance = getInstance();
+  const instance = options.runtime.getInstance();
   if (!instance || (!injectLink && !injectScript)) {
     return [...scripts, ...links];
   }
 
-  const moduleAndPublicPath = getTargetModuleInfo(id);
+  const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
     return [...scripts, ...links];
   }
@@ -191,6 +192,12 @@ function getServerNeedRemoteInfo(
 export function createRemoteComponent<T, E extends keyof T>(
   options: CreateRemoteComponentOptions<T, E>,
 ) {
+  const { runtime } = options;
+  if (!runtime?.getInstance) {
+    throw new Error(
+      'runtime is required if used in "@module-federation/bridge-react"!',
+    );
+  }
   type ComponentType = T[E] extends (...args: any) => any
     ? Parameters<T[E]>[0] extends undefined
       ? ReactKey
@@ -212,7 +219,7 @@ export function createRemoteComponent<T, E extends keyof T>(
   const getData = async (noSSR?: boolean) => {
     let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
     let moduleId: string;
-    const instance = getInstance();
+    const instance = runtime.getInstance();
     try {
       const m = await callLoader();
       moduleId = m && m[Symbol.for('mf_module_id')];
@@ -264,7 +271,7 @@ export function createRemoteComponent<T, E extends keyof T>(
   const LazyComponent = React.lazy(async () => {
     const m = await callLoader();
     const moduleId = m && m[Symbol.for('mf_module_id')];
-    const instance = getInstance()!;
+    const instance = runtime.getInstance()!;
     const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
     loadedRemoteInfo?.snapshot;
     const dataFetchMapKey = loadedRemoteInfo
@@ -282,6 +289,7 @@ export function createRemoteComponent<T, E extends keyof T>(
 
     const assets = collectSSRAssets({
       id: moduleId,
+      runtime,
     });
 
     const Com = m[exportName] as React.FC<ComponentType>;

packages/bridge/bridge-react/src/module/data-fetch/data-fetch-server-middleware.ts

@@ -0,0 +1,191 @@
+import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from '../constant';
+import {
+  getDataFetchMap,
+  fetchData,
+  initDataFetchMap,
+  loadDataFetchModule,
+} from '../utils';
+import { SEPARATOR, MANIFEST_EXT } from '@module-federation/sdk';
+import logger from '../logger';
+
+import type { NoSSRRemoteInfo } from '../types';
+import type { MiddlewareHandler } from 'hono';
+
+function wrapSetTimeout(
+  targetPromise: Promise<unknown>,
+  delay = 20000,
+  id: string,
+) {
+  if (targetPromise && typeof targetPromise.then === 'function') {
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
+        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
+      }, delay);
+
+      targetPromise
+        .then((value: any) => {
+          clearTimeout(timeoutId);
+          resolve(value);
+        })
+        .catch((err: any) => {
+          clearTimeout(timeoutId);
+          reject(err);
+        });
+    });
+  }
+}
+
+function addProtocol(url: string) {
+  if (url.startsWith('//')) {
+    return 'https:' + url;
+  }
+  return url;
+}
+
+const getDecodeQuery = (url: URL, name: string) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+
+const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
+  let url: URL;
+  let dataFetchId: string | null;
+  let params: Record<string, unknown>;
+  let remoteInfo: NoSSRRemoteInfo;
+  try {
+    url = new URL(ctx.req.url);
+    dataFetchId = getDecodeQuery(url, DATA_FETCH_QUERY);
+    params = JSON.parse(getDecodeQuery(url, 'params') || '{}');
+    const remoteInfoQuery = getDecodeQuery(url, 'remoteInfo');
+    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+  } catch (e) {
+    logger.error('fetch data from server, error: ', e);
+    return next();
+  }
+
+  if (!dataFetchId) {
+    return next();
+  }
+  logger.log('fetch data from server, dataFetchId: ', dataFetchId);
+  logger.debug(
+    'fetch data from server, moduleInfo: ',
+    globalThis.__FEDERATION__?.moduleInfo,
+  );
+  try {
+    const dataFetchMap = getDataFetchMap();
+    if (!dataFetchMap) {
+      initDataFetchMap();
+    }
+    const fetchDataPromise = dataFetchMap[dataFetchId]?.[1];
+    logger.debug(
+      'fetch data from server, fetchDataPromise: ',
+      fetchDataPromise,
+    );
+    if (
+      fetchDataPromise &&
+      dataFetchMap[dataFetchId]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
+    ) {
+      const targetPromise = fetchDataPromise[0];
+      // Ensure targetPromise is thenable
+      const wrappedPromise = wrapSetTimeout(targetPromise, 20000, dataFetchId);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log('fetch data from server, fetchDataPromise res: ', res);
+        return ctx.json(res);
+      }
+      logger.error(
+        `Expected a Promise from fetchDataPromise[0] for dataFetchId ${dataFetchId}, but received:`,
+        targetPromise,
+        'Will try call new dataFetch again...',
+      );
+    }
+
+    if (remoteInfo) {
+      try {
+        const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance) {
+          throw new Error('host instance not found!');
+        }
+        const remote = hostInstance.options.remotes.find(
+          (remote) => remote.name === remoteInfo.name,
+        );
+        logger.debug('find remote: ', JSON.stringify(remote));
+        if (!remote) {
+          hostInstance.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName,
+            },
+          ]);
+        } else if (
+          !('entry' in remote) ||
+          !remote.entry.includes(MANIFEST_EXT)
+        ) {
+          const { hostGlobalSnapshot, remoteSnapshot } =
+            hostInstance.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          logger.debug(
+            'find hostGlobalSnapshot: ',
+            JSON.stringify(hostGlobalSnapshot),
+          );
+          logger.debug('find remoteSnapshot: ', JSON.stringify(remoteSnapshot));
+
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ('version' in remote) {
+              // @ts-ignore
+              delete remote.version;
+            }
+            // @ts-ignore
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(
+          `failed to fetch ${remoteInfo.name} data, error:\n ${e}`,
+        );
+      }
+    }
+
+    const dataFetchItem = dataFetchMap[dataFetchId];
+    logger.debug('fetch data from server, dataFetchItem: ', dataFetchItem);
+    if (dataFetchItem) {
+      const callFetchDataPromise = fetchData(dataFetchId, {
+        ...params,
+        isDowngrade: !remoteInfo,
+      });
+      const wrappedPromise = wrapSetTimeout(
+        callFetchDataPromise,
+        20000,
+        dataFetchId,
+      );
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log('fetch data from server, dataFetchItem res: ', res);
+        return ctx.json(res);
+      }
+    }
+
+    const remoteId = dataFetchId.split(SEPARATOR)[0];
+    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+    if (!hostInstance) {
+      throw new Error('host instance not found!');
+    }
+    const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
+    const data = await dataFetchFn({ ...params, isDowngrade: !remoteInfo });
+    logger.log('fetch data from server, loadDataFetchModule res: ', data);
+    return ctx.json(data);
+  } catch (e) {
+    logger.error('server plugin data fetch error: ', e);
+    ctx.status(500);
+    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:\n ${e}`);
+  }
+};
+
+export default dataFetchServerMiddleware;

packages/bridge/bridge-react/src/module/index.ts

@@ -2,6 +2,10 @@ import autoFetchDataPlugin from './data-fetch/runtime-plugin';
 
 export type { DataFetchParams, NoSSRRemoteInfo } from './types';
 export { ERROR_TYPE } from './constant';
+export type {
+  CreateRemoteComponentOptions,
+  IProps as CollectSSRAssetsOptions,
+} from './createRemoteComponent';
 
 // avoid import react directly https://github.com/web-infra-dev/modern.js/issues/7096
 export const kit = {

packages/bridge/bridge-react/vite.config.ts

@@ -31,9 +31,9 @@ export default defineConfig({
           'src/module/data-fetch/runtime-plugin.ts',
         ),
         'data-fetch-utils': path.resolve(__dirname, 'src/module/utils.ts'),
-        'data-fetch-constant': path.resolve(
+        'data-fetch-server-middleware': path.resolve(
           __dirname,
-          'src/module/constant.ts',
+          'src/module/data-fetch/data-fetch-server-middleware.ts',
         ),
       },
       formats: ['cjs', 'es'],