@module-federation/bridge-react 0.12.0 → 0.13.1

package/dist/v19.es.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,16 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.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 +55,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.12.0",
-    "@module-federation/sdk": "0.12.0"
+    "@module-federation/bridge-shared": "0.13.1",
+    "@module-federation/sdk": "0.13.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -65,9 +75,9 @@
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
-    "vite": "^5.4.12",
+    "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.12.0"
+    "@module-federation/runtime": "0.13.1"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -1,8 +1,14 @@
+/**
+ * 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 { createRemoteComponent } from './remote/create';
-export { createBridgeComponent } from './provider/create';
+export type { CreateRootOptions, Root } from './provider/versions/legacy';
 export type {
   ProviderParams,
-  RenderFnParams,
+  ProviderFnParams,
+  RootType,
   DestroyParams,
   RenderParams,
 } from './types';

package/src/provider/{create.tsx → versions/bridge-base.tsx}

@@ -1,20 +1,24 @@
+/**
+ * Base bridge component implementation
+ * This file contains bridge component logic shared across all React versions
+ */
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import type {
   ProviderParams,
   ProviderFnParams,
   RootType,
   DestroyParams,
   RenderParams,
-} from '../types';
-import { ErrorBoundary } from 'react-error-boundary';
-import { RouterContext } from './context';
-import { LoggerInstance } from '../utils';
-import { federationRuntime } from './plugin';
-import { createRoot as defaultCreateRoot } from './compat';
+  CreateRootOptions,
+} from '../../types';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { RouterContext } from '../context';
+import { LoggerInstance } from '../../utils';
+import { federationRuntime } from '../plugin';
 
-export function createBridgeComponent<T>({
-  createRoot = defaultCreateRoot,
+export function createBaseBridgeComponent<T>({
+  createRoot,
+  defaultRootOptions,
   ...bridgeInfo
 }: ProviderFnParams<T>) {
   return () => {
@@ -48,14 +52,22 @@ export function createBridgeComponent<T>({
           basename,
           memoryRoute,
           fallback,
+          rootOptions,
           ...propsInfo
         } = info;
 
+        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,7 +75,10 @@ export function createBridgeComponent<T>({
                 memoryRoute,
               }}
               propsInfo={
-                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
+                {
+                  ...propsInfo,
+                  ...(beforeBridgeRenderRes as any)?.extraProps,
+                } as T
               }
             />
           </ErrorBoundary>
@@ -75,17 +90,16 @@ export function createBridgeComponent<T>({
           ).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);
+          // Do not call createRoot multiple times
+          if (!root && createRoot) {
+            root = createRoot(dom, mergedRootOptions);
+            rootMap.set(dom, root as any);
           }
 
-          if ('render' in root) {
+          if (root && 'render' in root) {
             root.render(rootComponentWithErrorBoundary);
           }
         }
-
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
@@ -97,7 +111,7 @@ export function createBridgeComponent<T>({
           if ('unmount' in root) {
             root.unmount();
           } else {
-            ReactDOM.unmountComponentAtNode(root as HTMLElement);
+            console.warn('Root does not have unmount method');
           }
           rootMap.delete(dom);
         }

package/src/provider/versions/legacy.ts

@@ -0,0 +1,86 @@
+/**
+ * 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
+ */
+import type { ProviderFnParams } from '../../types';
+import { createBaseBridgeComponent } from './bridge-base';
+import ReactDOM from 'react-dom';
+
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+/**
+ * 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'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v18'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v19'
+ */
+
+export function createReact16Or17Root(
+  container: Element | DocumentFragment,
+): Root {
+  return {
+    render(children: React.ReactNode) {
+      /**
+       * Detect React version
+       */
+      const reactVersion = ReactDOM.version || '';
+      const isReact18 = reactVersion.startsWith('18');
+      const isReact19 = reactVersion.startsWith('19');
+
+      /**
+       * Throw error for React 19
+       *
+       * Note: Due to Module Federation sharing mechanism, the actual version detected here
+       * might be 18 or 19, even if the application itself uses React 16/17.
+       * This happens because in MF environments, different remote modules may share different React versions.
+       * The console may throw warnings about version and API mismatches. If you need to resolve these issues,
+       * consider disabling the shared configuration for React.
+       */
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. ` +
+            `Please use the version-specific import: ` +
+            `import { createBridgeComponent } from '@module-federation/bridge-react/v19'`,
+        );
+      }
+
+      /**
+       * Provide warning for React 18
+       */
+      if (isReact18) {
+        console.warn(
+          `[Bridge-React] React 18 detected in legacy mode. ` +
+            `For better compatibility, please use the version-specific import: ` +
+            `import { createBridgeComponent } from '@module-federation/bridge-react/v18'`,
+        );
+      }
+
+      // @ts-ignore - React 17's render method is deprecated but still functional
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container as Element);
+    },
+  };
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    createRoot: createReact16Or17Root,
+    ...bridgeInfo,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/provider/versions/v18.ts

@@ -0,0 +1,47 @@
+/**
+ * Entry point for React 18 specific bridge components
+ */
+import React from 'react';
+import { createRoot as createReactRoot, hydrateRoot } from 'react-dom/client';
+import { createBaseBridgeComponent } from './bridge-base';
+import type { ProviderFnParams } from '../../types';
+
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+export function createReact18Root(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  return createReactRoot(container, options);
+}
+
+export function hydrateReact18Root(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+) {
+  return hydrateRoot(
+    container as Element,
+    initialChildren as React.ReactElement,
+    options,
+  );
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    createRoot: createReact18Root,
+    ...bridgeInfo,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/provider/versions/v19.ts

@@ -0,0 +1,48 @@
+/**
+ * Entry point for React 19 specific bridge components
+ * This file provides support for React 19 version, using the new ReactDOM.createRoot API
+ */
+import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { createBaseBridgeComponent } from './bridge-base';
+import type { ProviderFnParams } from '../../types';
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+export function createReact19Root(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  return createRoot(container as Element, options);
+}
+
+export function hydrateReact19Root(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+): Root {
+  return hydrateRoot(
+    container as Element,
+    initialChildren as React.ReactElement,
+    options,
+  );
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    createRoot: createReact19Root,
+    ...bridgeInfo,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/remote/create.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { LoggerInstance } from '../utils';
 import RemoteApp from './component';
 import {
@@ -77,7 +77,9 @@ export function createRemoteComponent<
   const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
     return (
-      <ErrorBoundary FallbackComponent={info.fallback}>
+      <ErrorBoundary
+        FallbackComponent={info.fallback as React.ComponentType<FallbackProps>}
+      >
         <React.Suspense fallback={info.loading}>
           <LazyComponent {...props} ref={ref} />
         </React.Suspense>

package/src/types.ts

@@ -34,6 +34,15 @@ export interface RenderParams {
     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;
   [key: string]: unknown;
 }
 
@@ -81,6 +90,16 @@ export interface ProviderFnParams<T> {
     container: Element | DocumentFragment,
     options?: CreateRootOptions,
   ) => Root;
+  /**
+   * 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;
 }
 
 /**

package/src/utils/index.ts

@@ -1,29 +1,9 @@
-import React from 'react';
 import { createLogger } from '@module-federation/sdk';
 
 export const LoggerInstance = createLogger(
   '[ Module Federation Bridge React ]',
 );
 
-type typeReact = typeof React;
-
-export function atLeastReact18(React: typeReact) {
-  if (
-    React &&
-    typeof React.version === 'string' &&
-    React.version.indexOf('.') >= 0
-  ) {
-    const majorVersionString = React.version.split('.')[0];
-    try {
-      return Number(majorVersionString) >= 18;
-    } catch (err) {
-      return false;
-    }
-  } else {
-    return false;
-  }
-}
-
 export function pathJoin(...args: string[]) {
   const res = args.reduce((res, path: string) => {
     let nPath = path;

package/src/v18.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v18';
+export type { CreateRootOptions, Root } from './provider/versions/v18';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/src/v19.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v19';
+export type { CreateRootOptions, Root } from './provider/versions/v19';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/vite.config.ts

@@ -1,14 +1,13 @@
 import { defineConfig } from 'vite';
-// import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dts from 'vite-plugin-dts';
-// import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
 
 const perDepsKeys = Object.keys(packageJson.peerDependencies);
 
 export default defineConfig({
   plugins: [
+    // 添加我们的自定义插件
     dts({
       rollupTypes: true,
       bundledPackages: [
@@ -25,6 +24,8 @@ export default defineConfig({
         router: path.resolve(__dirname, 'src/router/default.tsx'),
         'router-v5': path.resolve(__dirname, 'src/router/v5.tsx'),
         'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
+        v18: path.resolve(__dirname, 'src/v18.ts'),
+        v19: path.resolve(__dirname, 'src/v19.ts'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,

package/src/provider/compat.ts

@@ -1,60 +0,0 @@
-import ReactDOM from 'react-dom';
-import { CreateRootOptions, Root } from '../types';
-
-// ReactDOM.version is only available in React 16.13.0 and later
-const isReact18 = ReactDOM.version?.startsWith('18');
-
-/**
- * Creates a root for a container element compatible with both React 16 and 18
- */
-export function createRoot(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): Root {
-  if (isReact18) {
-    // For React 18, use the new createRoot API
-    // @ts-ignore - Types will be available in React 18
-    return (ReactDOM as any).createRoot(container, options);
-  }
-
-  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
-  return {
-    render(children: React.ReactNode) {
-      ReactDOM.render(children, container);
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container);
-    },
-  };
-}
-
-/**
- * Hydrates a container compatible with both React 16 and 18
- */
-export function hydrateRoot(
-  container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
-  options?: CreateRootOptions,
-): Root {
-  if (isReact18) {
-    // For React 18, use the new hydrateRoot API
-    // @ts-ignore - Types will be available in React 18
-    return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
-  }
-
-  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
-  return {
-    render(children: React.ReactNode) {
-      // For the initial render, use hydrate
-      if (children === initialChildren) {
-        ReactDOM.hydrate(children, container);
-      } else {
-        // For subsequent renders, use regular render
-        ReactDOM.render(children, container);
-      }
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container);
-    },
-  };
-}

package/dist/{context-C79iMWYD.cjs → index-BYDWxFmi.cjs}

@@ -1,5 +1,6 @@
 "use strict";
 const React = require("react");
+const RouterContext = React.createContext(null);
 const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
 const BROWSER_LOG_VALUE = "1";
 function isBrowserEnv() {
@@ -95,7 +96,6 @@ const getRootDomDefaultClassName = (moduleName) => {
   const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
   return `bridge-root-component-${name}`;
 };
-const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
 exports.getRootDomDefaultClassName = getRootDomDefaultClassName;

package/dist/{context-Dbqf0szX.js → index-BlBMQSoq.js}

@@ -1,4 +1,5 @@
 import React__default from "react";
+const RouterContext = React__default.createContext(null);
 const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
 const BROWSER_LOG_VALUE = "1";
 function isBrowserEnv() {
@@ -94,7 +95,6 @@ const getRootDomDefaultClassName = (moduleName) => {
   const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
   return `bridge-root-component-${name}`;
 };
-const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,