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

@@ -0,0 +1,6 @@
+---
+'@module-federation/react': patch
+'@module-federation/modern-js': patch
+---
+
+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",
@@ -32,27 +31,76 @@
       "require": "./dist/v19.cjs.js"
     },
     "./router": {
-      "types": "./dist/router.d.ts",
+      "types": "./dist/router/default.d.ts",
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
     "./plugin": {
-      "types": "./dist/plugin.d.ts",
+      "types": "./dist/provider/plugin.d.ts",
       "import": "./dist/plugin.es.js",
       "require": "./dist/plugin.es.js"
     },
     "./router-v5": {
-      "types": "./dist/router-v5.d.ts",
+      "types": "./dist/router/v5.d.ts",
       "import": "./dist/router-v5.es.js",
       "require": "./dist/router-v5.cjs.js"
     },
     "./router-v6": {
-      "types": "./dist/router-v6.d.ts",
+      "types": "./dist/router/v6.d.ts",
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
+    "./data-fetch-runtime-plugin": {
+      "types": "./dist/module/data-fetch/runtime-plugin.d.ts",
+      "import": "./dist/data-fetch-runtime-plugin.es.js",
+      "require": "./dist/data-fetch-runtime-plugin.cjs.js"
+    },
+    "./data-fetch-utils": {
+      "types": "./dist/module/utils.d.ts",
+      "import": "./dist/data-fetch-utils.es.js",
+      "require": "./dist/data-fetch-utils.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"
+    },
     "./*": "./*"
   },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ],
+      "v18": [
+        "./dist/v18.d.ts"
+      ],
+      "v19": [
+        "./dist/v19.d.ts"
+      ],
+      "router": [
+        "./dist/router/default.d.ts"
+      ],
+      "plugin": [
+        "./dist/provider/plugin.d.ts"
+      ],
+      "router-v5": [
+        "./dist/router/v5.d.ts"
+      ],
+      "router-v6": [
+        "./dist/router/v6.d.ts"
+      ],
+      "data-fetch-runtime-plugin": [
+        "./dist/module/data-fetch/runtime-plugin.d.ts"
+      ],
+      "data-fetch-utils": [
+        "./dist/module/utils.d.ts"
+      ],
+      "data-fetch-server-middleware": [
+        "./dist/module/data-fetch/data-fetch-server-middleware.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -81,7 +129,8 @@
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.4.18",
-    "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "workspace:*"
+    "vite-plugin-dts": "^4.5.4",
+    "@module-federation/runtime": "workspace:*",
+    "hono": "3.12.12"
   }
 }

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

@@ -12,3 +12,11 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
+
+export { kit, ERROR_TYPE, autoFetchDataPlugin } from './module';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateRemoteComponentOptions,
+} from './module';

packages/modernjs/src/runtime/AwaitDataFetch.tsx renamed to packages/bridge/bridge-react/src/module/AwaitDataFetch.tsx

@@ -1,14 +1,14 @@
 import React, { MutableRefObject, ReactNode, Suspense, useRef } from 'react';
-import logger from '../logger';
+import logger from './logger';
 import {
   DATA_FETCH_ERROR_PREFIX,
   LOAD_REMOTE_ERROR_PREFIX,
   ERROR_TYPE,
-  DOWNGRADE_KEY,
   DATA_FETCH_FUNCTION,
-} from '../constant';
-import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from '../utils';
-import type { DataFetchParams } from '../interfaces/global';
+} from './constant';
+
+import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from './utils';
+import type { DataFetchParams } from './types';
 
 function isPromise<T>(obj: any): obj is PromiseLike<T> {
   return (

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

@@ -0,0 +1,30 @@
+export const PLUGIN_IDENTIFIER = '[ Module Federation React ]';
+export const DOWNGRADE_KEY = '_mfSSRDowngrade';
+export const DATA_FETCH_MAP_KEY = '__MF_DATA_FETCH_MAP__';
+export const DATA_FETCH_FUNCTION = '_mfDataFetch';
+export const FS_HREF = '_mfFSHref';
+export const ERROR_TYPE = {
+  DATA_FETCH: 1,
+  LOAD_REMOTE: 2,
+  UNKNOWN: 3,
+};
+export const WRAP_DATA_FETCH_ID_IDENTIFIER = 'wrap_dfip_identifier';
+export const enum MF_DATA_FETCH_TYPE {
+  FETCH_SERVER = 1,
+  FETCH_CLIENT = 2,
+}
+
+export const enum MF_DATA_FETCH_STATUS {
+  LOADED = 1,
+  LOADING = 2,
+  AWAIT = 0,
+  ERROR = 3,
+}
+
+export const DATA_FETCH_IDENTIFIER = 'data';
+export const DATA_FETCH_CLIENT_SUFFIX = '.client';
+export const DATA_FETCH_QUERY = 'x-mf-data-fetch';
+export const DATA_FETCH_ERROR_PREFIX =
+  'caught the following error during dataFetch: ';
+export const LOAD_REMOTE_ERROR_PREFIX =
+  'caught the following error during loadRemote: ';

packages/modernjs/src/runtime/createRemoteComponent.tsx renamed to packages/bridge/bridge-react/src/module/createRemoteComponent.tsx

@@ -1,32 +1,32 @@
 import React, { ReactNode, useEffect, useState } from 'react';
-import logger from '../logger';
-import { getInstance } from '@module-federation/enhanced/runtime';
+import logger from './logger';
 import { AwaitDataFetch, transformError } from './AwaitDataFetch';
 import {
   fetchData,
   getDataFetchItem,
   getDataFetchMapKey,
-} from '../utils/dataFetch';
-import {
   getDataFetchInfo,
   getLoadedRemoteInfos,
   setDataFetchItemLoadedStatus,
   wrapDataFetchId,
-} from '../utils';
+} from './utils';
 import {
   DATA_FETCH_ERROR_PREFIX,
   DATA_FETCH_FUNCTION,
   FS_HREF,
   LOAD_REMOTE_ERROR_PREFIX,
   MF_DATA_FETCH_TYPE,
-} from '../constant';
+} from './constant';
+
 import type { ErrorInfo } from './AwaitDataFetch';
-import type { DataFetchParams, NoSSRRemoteInfo } from '../interfaces/global';
+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> = {
@@ -36,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;
   }
@@ -89,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];
   }
@@ -192,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
@@ -213,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')];
@@ -265,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
@@ -283,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/call-data-fetch.ts

@@ -0,0 +1,13 @@
+import { DATA_FETCH_FUNCTION } from '../constant';
+import { dataFetchFunction } from './inject-data-fetch';
+
+export async function callDataFetch() {
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+  if (dataFetch) {
+    await Promise.all(
+      dataFetch.map(async (options) => {
+        await dataFetchFunction(options);
+      }),
+    );
+  }
+}