chore(bridge-react): export createRemoteComponent and related utils

Author: 2heal1

.changeset/spicy-parents-greet.md

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

packages/bridge/bridge-react/package.json

@@ -32,27 +32,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-constant": {
+      "types": "./dist/module/constant.d.ts",
+      "import": "./dist/data-fetch-constant.es.js",
+      "require": "./dist/data-fetch-constant.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-constant": [
+        "./dist/module/constant.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -66,7 +115,13 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": "^4 || ^5 || ^6 || ^7"
+    "react-router-dom": "^4 || ^5 || ^6 || ^7",
+    "@module-federation/runtime": ">=0.15.0"
+  },
+  "peerDependenciesMeta": {
+    "@module-federation/runtime": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -81,7 +136,7 @@
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.4.18",
-    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dts": "^4.5.4",
     "@module-federation/runtime": "workspace:*"
   }
 }

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

@@ -12,3 +12,6 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
+
+export { kit, ERROR_TYPE, autoFetchDataPlugin } from './module';
+export type { DataFetchParams, NoSSRRemoteInfo } 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,27 +1,27 @@
 import React, { ReactNode, useEffect, useState } from 'react';
-import logger from '../logger';
-import { getInstance } from '@module-federation/enhanced/runtime';
+import logger from './logger';
+import { getInstance } from '@module-federation/runtime';
 import { AwaitDataFetch, transformError } from './AwaitDataFetch';
+import { injectDataFetch } from './data-fetch/inject-data-fetch';
 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';
 
 type IProps = {
   id: string;
@@ -192,6 +192,7 @@ function getServerNeedRemoteInfo(
 export function createRemoteComponent<T, E extends keyof T>(
   options: CreateRemoteComponentOptions<T, E>,
 ) {
+  injectDataFetch();
   type ComponentType = T[E] extends (...args: any) => any
     ? Parameters<T[E]>[0] extends undefined
       ? ReactKey

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);
+      }),
+    );
+  }
+}

packages/bridge/bridge-react/src/module/data-fetch/inject-data-fetch.ts

@@ -0,0 +1,111 @@
+import {
+  DATA_FETCH_FUNCTION,
+  DOWNGRADE_KEY,
+  FS_HREF,
+  MF_DATA_FETCH_STATUS,
+  MF_DATA_FETCH_TYPE,
+} from '../constant';
+import logger from '../logger';
+import {
+  dataFetchFunctionOptions,
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET,
+} from '../types';
+import {
+  callAllDowngrade,
+  callDowngrade,
+  getDataFetchItem,
+  getDataFetchMap,
+  getDowngradeTag,
+  initDataFetchMap,
+  setSSREnv,
+} from '../utils';
+
+const dataFetchFunction = async function (options: dataFetchFunctionOptions) {
+  const [id, data, downgrade] = options;
+  logger.debug('==========call data fetch function!');
+  if (data) {
+    if (!id) {
+      throw new Error('id is required!');
+    }
+    if (!getDataFetchMap()) {
+      initDataFetchMap();
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    if (dataFetchItem) {
+      dataFetchItem[1]?.[1]?.(data);
+      dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
+      return;
+    }
+    if (!dataFetchItem) {
+      const dataFetchMap = getDataFetchMap();
+      let res: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[1];
+      let rej: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[2];
+      const p = new Promise((resolve, reject) => {
+        res = resolve;
+        rej = reject;
+      });
+
+      dataFetchMap[id] = [
+        [
+          async () => async () => {
+            return '';
+          },
+          MF_DATA_FETCH_TYPE.FETCH_SERVER,
+        ],
+        [p, res, rej],
+        MF_DATA_FETCH_STATUS.LOADED,
+      ];
+      res && res(data);
+      return;
+    }
+  }
+
+  if (downgrade) {
+    const mfDowngrade = getDowngradeTag();
+    if (!mfDowngrade) {
+      globalThis[DOWNGRADE_KEY] = id ? [id] : true;
+    } else if (Array.isArray(mfDowngrade) && id && !mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+  }
+
+  const mfDowngrade = getDowngradeTag();
+
+  if (typeof mfDowngrade === 'boolean') {
+    return callAllDowngrade();
+  }
+  if (Array.isArray(mfDowngrade)) {
+    if (!id) {
+      globalThis[DOWNGRADE_KEY] = true;
+      return callAllDowngrade();
+    }
+
+    if (!mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+
+    return callDowngrade(id);
+  }
+};
+
+export function injectDataFetch() {
+  // @ts-ignore
+  if (dataFetch.push === dataFetchFunction) {
+    return;
+  }
+
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  globalThis[FS_HREF] = window.location.href;
+  globalThis[DATA_FETCH_FUNCTION] ||= [];
+
+  const dataFetch: Array<dataFetchFunctionOptions> =
+    globalThis[DATA_FETCH_FUNCTION];
+
+  // @ts-ignore
+  dataFetch.push = dataFetchFunction;
+}
+
+export { dataFetchFunction };

packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts renamed to packages/bridge/bridge-react/src/module/data-fetch/runtime-plugin.ts

@@ -4,18 +4,19 @@ import {
   getDataFetchItem,
   getDataFetchMap,
   isCSROnly,
-} from '../../utils';
-import logger from '../../logger';
-import {
   getDataFetchMapKey,
   isDataLoaderExpose,
   loadDataFetchModule,
-} from '../../utils/dataFetch';
-import { MF_DATA_FETCH_TYPE, MF_DATA_FETCH_STATUS } from '../../constant';
-import { DATA_FETCH_CLIENT_SUFFIX } from '@module-federation/rsbuild-plugin/constant';
+} from '../utils';
+import logger from '../logger';
+import {
+  MF_DATA_FETCH_TYPE,
+  MF_DATA_FETCH_STATUS,
+  DATA_FETCH_CLIENT_SUFFIX,
+} from '../constant';
 
-import type { MF_DATA_FETCH_MAP_VALUE } from '../../interfaces/global';
-import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+import type { MF_DATA_FETCH_MAP_VALUE } from '../types';
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
 
 const autoFetchData: () => FederationRuntimePlugin = () => ({
   name: 'auto-fetch-data-plugin',

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

@@ -0,0 +1,31 @@
+import autoFetchDataPlugin from './data-fetch/runtime-plugin';
+
+export type { DataFetchParams, NoSSRRemoteInfo } from './types';
+export { ERROR_TYPE } from './constant';
+
+// avoid import react directly https://github.com/web-infra-dev/modern.js/issues/7096
+export const kit = {
+  get createRemoteSSRComponent(): typeof import('./createRemoteComponent').createRemoteSSRComponent {
+    return require('./createRemoteComponent').createRemoteSSRComponent;
+  },
+  get createRemoteComponent(): typeof import('./createRemoteComponent').createRemoteComponent {
+    return require('./createRemoteComponent').createRemoteComponent;
+  },
+  get collectSSRAssets(): typeof import('./createRemoteComponent').collectSSRAssets {
+    return require('./createRemoteComponent').collectSSRAssets;
+  },
+  get wrapNoSSR(): typeof import('./wrapNoSSR').wrapNoSSR {
+    return require('./wrapNoSSR').wrapNoSSR;
+  },
+  get injectDataFetch(): typeof import('./data-fetch/inject-data-fetch').injectDataFetch {
+    return require('./data-fetch/inject-data-fetch').injectDataFetch;
+  },
+  get callDataFetch(): typeof import('./data-fetch/call-data-fetch').callDataFetch {
+    return require('./data-fetch/call-data-fetch').callDataFetch;
+  },
+  get setSSREnv(): typeof import('./utils').setSSREnv {
+    return require('./utils').setSSREnv;
+  },
+};
+
+export { autoFetchDataPlugin };