@module-federation/bridge-react 0.0.0-next-20250408084324 → 0.0.0-next-20250410121036

package/dist/v16.d.ts

@@ -0,0 +1,104 @@
+import * as React_2 from 'react';
+
+export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): void;
+};
+
+export declare interface CreateRootOptions {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+/**
+ * Options for creating a React root
+ */
+declare interface CreateRootOptions_2 {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
+/**
+ * Parameters for the destroy function
+ */
+export declare interface DestroyParams {
+    moduleName: string;
+    dom: HTMLElement;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderFnParams<T> {
+    rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions_2) => Root_2;
+    /**
+     * Default options to pass to createRoot for React 18 and 19
+     * These options will be used when creating a root unless overridden by rootOptions in render params
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    defaultRootOptions?: CreateRootOptions_2;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    style?: React_2.CSSProperties;
+    className?: string;
+}
+
+/**
+ * Parameters for the render function
+ */
+export declare interface RenderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    dom: HTMLElement;
+    /**
+     * Options to pass to createRoot for React 18 and 19
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    rootOptions?: CreateRootOptions_2;
+    [key: string]: unknown;
+}
+
+export declare interface Root {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Interface for a React root object
+ */
+declare interface Root_2 {
+    render(children: React_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export declare type RootType = HTMLElement | Root_2;
+
+export { }

package/dist/v16.es.js

@@ -0,0 +1,22 @@
+import { c as createBaseBridgeComponent } from "./internal/bridge-base-CW88-1Be.es.js";
+import ReactDOM from "react-dom";
+function createReact16Or17Root(container) {
+  return {
+    render(children) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact16Or17Root
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
+export {
+  createBridgeComponent
+};

package/dist/v18.cjs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const client = require("react-dom/client");
+const bridgeBase = require("./internal/bridge-base-DBiwuddQ.cjs.js");
+function createReact18Root(container, options) {
+  return client.createRoot(container, options);
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact18Root
+  };
+  return bridgeBase.createBaseBridgeComponent(fullBridgeInfo);
+}
+exports.createBridgeComponent = createBridgeComponent;

package/dist/v18.d.ts

@@ -0,0 +1,105 @@
+import { default as default_2 } from 'react';
+import * as React_2 from 'react';
+
+export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): void;
+};
+
+export declare interface CreateRootOptions {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+/**
+ * Options for creating a React root
+ */
+declare interface CreateRootOptions_2 {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
+/**
+ * Parameters for the destroy function
+ */
+export declare interface DestroyParams {
+    moduleName: string;
+    dom: HTMLElement;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderFnParams<T> {
+    rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions_2) => Root_2;
+    /**
+     * Default options to pass to createRoot for React 18 and 19
+     * These options will be used when creating a root unless overridden by rootOptions in render params
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    defaultRootOptions?: CreateRootOptions_2;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    style?: React_2.CSSProperties;
+    className?: string;
+}
+
+/**
+ * Parameters for the render function
+ */
+export declare interface RenderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    dom: HTMLElement;
+    /**
+     * Options to pass to createRoot for React 18 and 19
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    rootOptions?: CreateRootOptions_2;
+    [key: string]: unknown;
+}
+
+export declare interface Root {
+    render(children: default_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Interface for a React root object
+ */
+declare interface Root_2 {
+    render(children: React_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export declare type RootType = HTMLElement | Root_2;
+
+export { }

package/dist/v18.es.js

@@ -0,0 +1,15 @@
+import { createRoot } from "react-dom/client";
+import { c as createBaseBridgeComponent } from "./internal/bridge-base-CW88-1Be.es.js";
+function createReact18Root(container, options) {
+  return createRoot(container, options);
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact18Root
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
+export {
+  createBridgeComponent
+};

package/dist/v19.cjs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const client = require("react-dom/client");
+const bridgeBase = require("./internal/bridge-base-DBiwuddQ.cjs.js");
+function createReact19Root(container, options) {
+  return client.createRoot(container, options);
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact19Root
+  };
+  return bridgeBase.createBaseBridgeComponent(fullBridgeInfo);
+}
+exports.createBridgeComponent = createBridgeComponent;

package/dist/v19.d.ts

@@ -0,0 +1,106 @@
+import { default as default_2 } from 'react';
+import * as React_2 from 'react';
+
+export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): void;
+};
+
+export declare interface CreateRootOptions {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
+/**
+ * Options for creating a React root
+ */
+declare interface CreateRootOptions_2 {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
+/**
+ * Parameters for the destroy function
+ */
+export declare interface DestroyParams {
+    moduleName: string;
+    dom: HTMLElement;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderFnParams<T> {
+    rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions_2) => Root_2;
+    /**
+     * Default options to pass to createRoot for React 18 and 19
+     * These options will be used when creating a root unless overridden by rootOptions in render params
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    defaultRootOptions?: CreateRootOptions_2;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    style?: React_2.CSSProperties;
+    className?: string;
+}
+
+/**
+ * Parameters for the render function
+ */
+export declare interface RenderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    dom: HTMLElement;
+    /**
+     * Options to pass to createRoot for React 18 and 19
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    rootOptions?: CreateRootOptions_2;
+    [key: string]: unknown;
+}
+
+export declare interface Root {
+    render(children: default_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Interface for a React root object
+ */
+declare interface Root_2 {
+    render(children: React_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export declare type RootType = HTMLElement | Root_2;
+
+export { }

package/dist/v19.es.js

@@ -0,0 +1,15 @@
+import { createRoot } from "react-dom/client";
+import { c as createBaseBridgeComponent } from "./internal/bridge-base-CW88-1Be.es.js";
+function createReact19Root(container, options) {
+  return createRoot(container, options);
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact19Root
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
+export {
+  createBridgeComponent
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250408084324",
+  "version": "0.0.0-next-20250410121036",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,21 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
+    "./legacy": {
+      "types": "./dist/legacy.d.ts",
+      "import": "./dist/legacy.es.js",
+      "require": "./dist/legacy.cjs.js"
+    },
+    "./v18": {
+      "types": "./dist/v18.d.ts",
+      "import": "./dist/v18.es.js",
+      "require": "./dist/v18.cjs.js"
+    },
+    "./v19": {
+      "types": "./dist/v19.d.ts",
+      "import": "./dist/v19.es.js",
+      "require": "./dist/v19.cjs.js"
+    },
     "./router": {
       "types": "./dist/router.d.ts",
       "import": "./dist/router.es.js",
@@ -45,8 +60,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250408084324",
-    "@module-federation/sdk": "0.0.0-next-20250408084324"
+    "@module-federation/bridge-shared": "0.0.0-next-20250410121036",
+    "@module-federation/sdk": "0.0.0-next-20250410121036"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -67,7 +82,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250408084324"
+    "@module-federation/runtime": "0.0.0-next-20250410121036"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -6,3 +6,9 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
+
+// 注意：对于特定React版本的支持，请使用以下导入路径：
+// - React 16/17: import { createBridgeComponent } from '@module-federation/bridge-react/legacy'
+// - React 18: import { createBridgeComponent } from '@module-federation/bridge-react/v18'
+// - React 19: import { createBridgeComponent } from '@module-federation/bridge-react/v19'
+// export * from './legacy';

package/src/legacy.ts

@@ -0,0 +1,13 @@
+/**
+ * Entry point for React 16/17 (legacy) specific bridge components
+ * This file provides support for React 16 and 17 versions, using the traditional ReactDOM.render API
+ */
+export { createBridgeComponent } from './provider/versions/legacy';
+export type { CreateRootOptions, Root } from './provider/versions/legacy';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/src/provider/create.tsx

@@ -6,15 +6,63 @@ import type {
   RootType,
   DestroyParams,
   RenderParams,
+  CreateRootOptions,
 } from '../types';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { RouterContext } from './context';
 import { LoggerInstance } from '../utils';
 import { federationRuntime } from './plugin';
-import { createRoot as defaultCreateRoot } from './compat';
 
+/**
+ * Default createRoot function that automatically detects React version and uses the appropriate API(only support React 16/17, 18)
+ *
+ * Note: Users can also directly import version-specific bridge components:
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/legacy'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v18'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v19'
+ */
+function defaultCreateRoot(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+} {
+  const reactVersion = ReactDOM.version || '';
+  const isReact18 = reactVersion.startsWith('18');
+
+  // For React 18, use createRoot API
+  if (isReact18) {
+    try {
+      // @ts-ignore - Types will be available in React 18
+      return (ReactDOM as any).createRoot(container, options);
+    } catch (e) {
+      console.warn(
+        'Failed to use React 18 createRoot API, falling back to legacy API',
+        e,
+      );
+    }
+  }
+
+  // For React 16/17, use legacy API
+  return {
+    render(children: React.ReactNode) {
+      // @ts-ignore - React 17's render method is deprecated but still functional
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container as Element);
+    },
+  };
+}
+
+/**
+ * Creates a bridge component factory that automatically detects and uses
+ * the appropriate React version (16/17, 18, or 19)
+ */
 export function createBridgeComponent<T>({
   createRoot = defaultCreateRoot,
+  defaultRootOptions,
   ...bridgeInfo
 }: ProviderFnParams<T>) {
   return () => {
@@ -48,14 +96,23 @@ export function createBridgeComponent<T>({
           basename,
           memoryRoute,
           fallback,
+          rootOptions,
           ...propsInfo
         } = info;
 
+        // Merge default root options with render-specific root options
+        const mergedRootOptions: CreateRootOptions | undefined = {
+          ...defaultRootOptions,
+          ...(rootOptions as CreateRootOptions),
+        };
+
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
         const rootComponentWithErrorBoundary = (
-          <ErrorBoundary FallbackComponent={fallback}>
+          <ErrorBoundary
+            FallbackComponent={fallback as React.ComponentType<FallbackProps>}
+          >
             <RawComponent
               appInfo={{
                 moduleName,
@@ -63,29 +120,25 @@ export function createBridgeComponent<T>({
                 memoryRoute,
               }}
               propsInfo={
-                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
+                {
+                  ...propsInfo,
+                  ...(beforeBridgeRenderRes as any)?.extraProps,
+                } as T
               }
             />
           </ErrorBoundary>
         );
 
-        if (bridgeInfo.render) {
-          await Promise.resolve(
-            bridgeInfo.render(rootComponentWithErrorBoundary, dom),
-          ).then((root: RootType) => rootMap.set(dom, root));
-        } else {
-          let root = rootMap.get(dom);
-          // do not call createRoot multiple times
-          if (!root) {
-            root = createRoot(dom);
-            rootMap.set(dom, root);
-          }
-
-          if ('render' in root) {
-            root.render(rootComponentWithErrorBoundary);
-          }
+        let root = rootMap.get(dom);
+        // Do not call createRoot multiple times
+        if (!root) {
+          root = createRoot(dom, mergedRootOptions);
+          rootMap.set(dom, root);
         }
 
+        if ('render' in root) {
+          root.render(rootComponentWithErrorBoundary);
+        }
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
@@ -97,7 +150,7 @@ export function createBridgeComponent<T>({
           if ('unmount' in root) {
             root.unmount();
           } else {
-            ReactDOM.unmountComponentAtNode(root as HTMLElement);
+            ReactDOM.unmountComponentAtNode(dom as HTMLElement);
           }
           rootMap.delete(dom);
         }