@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20250411200445 to 0.0.0-next-20250413134017

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20250411200445
+## 0.0.0-next-20250413134017
 
+### Minor Changes
+
+- d802e00: feat(react-bridge): Add native support for React 19 in bridge-react with enhanced createRoot options
+
 ### Patch Changes
 
-- Updated dependencies [6ce82d3]
+- d0a11ff: feat(bridge-react): support react v19 in react compat file.
 - Updated dependencies [f4fb242]
-  - @module-federation/sdk@0.0.0-next-20250411200445
-  - @module-federation/bridge-shared@0.0.0-next-20250411200445
+  - @module-federation/sdk@0.0.0-next-20250413134017
+  - @module-federation/bridge-shared@0.0.0-next-20250413134017
 
@@ -12,0 +16,0 @@ ## 0.11.4

dist/index.cjs.js

 "use strict";
-var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const reactErrorBoundary_esm = require("./react-error-boundary.esm-D8nxmvmv.cjs");
 const context = require("./context-C79iMWYD.cjs");
@@ -27,97 +27,2 @@ const ReactRouterDOM = require("react-router-dom");
 const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
-const ErrorBoundaryContext = React.createContext(null);
-const initialState = {
-  didCatch: false,
-  error: null
-};
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      didCatch: true,
-      error
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error
-    } = this.state;
-    if (error !== null) {
-      var _this$props$onReset, _this$props;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
-        args,
-        reason: "imperative-api"
-      });
-      this.setState(initialState);
-    }
-  }
-  componentDidCatch(error, info) {
-    var _this$props$onError, _this$props2;
-    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      didCatch
-    } = this.state;
-    const {
-      resetKeys
-    } = this.props;
-    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-      var _this$props$onReset2, _this$props3;
-      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys"
-      });
-      this.setState(initialState);
-    }
-  }
-  render() {
-    const {
-      children,
-      fallbackRender,
-      FallbackComponent,
-      fallback
-    } = this.props;
-    const {
-      didCatch,
-      error
-    } = this.state;
-    let childToRender = children;
-    if (didCatch) {
-      const props = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = React.createElement(FallbackComponent, props);
-      } else if (fallback !== void 0) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-    return React.createElement(ErrorBoundaryContext.Provider, {
-      value: {
-        didCatch,
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, childToRender);
-  }
-}
-function hasArrayChanged() {
-  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
-}
 function e() {
@@ -150,4 +55,4 @@ const t = new PopStateEvent("popstate", { state: window.history.state });
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
         context.LoggerInstance.debug(
@@ -181,3 +86,3 @@ `createRemoteComponent LazyComponent destroy >>>`,
   React.useEffect(() => {
-    var _a2, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
@@ -193,3 +98,3 @@ let renderProps = {
     renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+    const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
@@ -204,3 +109,3 @@ providerInfoRef.current.render(renderProps);
   const Component = React.forwardRef(function(props, ref) {
-    var _a2;
+    var _a;
     if (props == null ? void 0 : props.basename) {
@@ -238,3 +143,3 @@ return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
         }
@@ -327,9 +232,23 @@ if (match) {
   return React.forwardRef((props, ref) => {
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
+    return /* @__PURE__ */ React.createElement(
+      reactErrorBoundary_esm.ErrorBoundary,
+      {
+        FallbackComponent: info.fallback
+      },
+      /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref }))
+    );
   });
 }
-const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
-function createRoot(container, options) {
+function defaultCreateRoot(container, options) {
+  const reactVersion = ReactDOM.version || "";
+  const isReact18 = reactVersion.startsWith("18");
   if (isReact18) {
-    return ReactDOM.createRoot(container, options);
+    try {
+      return ReactDOM.createRoot(container, options);
+    } catch (e2) {
+      console.warn(
+        "Failed to use React 18 createRoot API, falling back to legacy API",
+        e2
+      );
+    }
   }
@@ -346,3 +265,4 @@ return {
 function createBridgeComponent({
-  createRoot: createRoot$1 = createRoot,
+  createRoot = defaultCreateRoot,
+  defaultRootOptions,
   ...bridgeInfo
@@ -371,3 +291,3 @@ }) {
       async render(info) {
-        var _a2, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.debug(`createBridgeComponent render Info`, info);
@@ -380,34 +300,42 @@ const {
           fallback,
+          rootOptions,
           ...propsInfo
         } = info;
-        const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
-          RawComponent,
+        const mergedRootOptions = {
+          ...defaultRootOptions,
+          ...rootOptions
+        };
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(
+          reactErrorBoundary_esm.ErrorBoundary,
           {
-            appInfo: {
-              moduleName,
-              basename,
-              memoryRoute
-            },
-            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-          }
-        ));
-        if (bridgeInfo.render) {
-          await Promise.resolve(
-            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-          ).then((root) => rootMap.set(dom, root));
-        } else {
-          let root = rootMap.get(dom);
-          if (!root) {
-            root = createRoot$1(dom);
-            rootMap.set(dom, root);
-          }
-          if ("render" in root) {
-            root.render(rootComponentWithErrorBoundary);
-          }
+            FallbackComponent: fallback
+          },
+          /* @__PURE__ */ React__namespace.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename,
+                memoryRoute
+              },
+              propsInfo: {
+                ...propsInfo,
+                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
+              }
+            }
+          )
+        );
+        let root = rootMap.get(dom);
+        if (!root) {
+          root = createRoot(dom, mergedRootOptions);
+          rootMap.set(dom, root);
         }
+        if ("render" in root) {
+          root.render(rootComponentWithErrorBoundary);
+        }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
       destroy(info) {
-        var _a2, _b, _c;
+        var _a, _b, _c;
         const { dom } = info;
@@ -420,7 +348,7 @@ context.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
           } else {
-            ReactDOM.unmountComponentAtNode(root);
+            ReactDOM.unmountComponentAtNode(dom);
           }
           rootMap.delete(dom);
         }
-        (_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
       }
@@ -427,0 +355,0 @@ };

dist/index.d.ts

 import { default as default_2 } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>({ createRoot, ...bridgeInfo }: ProviderFnParams<T>): () => {
+/**
+ * Creates a bridge component factory that automatically detects and uses
+ * the appropriate React version (16/17, 18, or 19)
+ */
+export declare function createBridgeComponent<T>({ createRoot, defaultRootOptions, ...bridgeInfo }: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
@@ -37,2 +41,12 @@ destroy(info: DestroyParams): void;
     createRoot?: (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;
 }
@@ -101,2 +115,11 @@
     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;
@@ -103,0 +126,0 @@ }

dist/index.es.js

@@ -1,4 +0,4 @@
-var _a;
 import * as React from "react";
-import React__default, { createContext, Component, createElement, forwardRef, useRef, useState, useEffect, useContext } from "react";
+import React__default, { forwardRef, useRef, useState, useEffect, useContext } from "react";
+import { E as ErrorBoundary } from "./react-error-boundary.esm-CMdlkNPP.js";
 import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-Dbqf0szX.js";
@@ -8,97 +8,2 @@ import * as ReactRouterDOM from "react-router-dom";
 import ReactDOM from "react-dom";
-const ErrorBoundaryContext = createContext(null);
-const initialState = {
-  didCatch: false,
-  error: null
-};
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      didCatch: true,
-      error
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error
-    } = this.state;
-    if (error !== null) {
-      var _this$props$onReset, _this$props;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
-        args,
-        reason: "imperative-api"
-      });
-      this.setState(initialState);
-    }
-  }
-  componentDidCatch(error, info) {
-    var _this$props$onError, _this$props2;
-    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      didCatch
-    } = this.state;
-    const {
-      resetKeys
-    } = this.props;
-    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-      var _this$props$onReset2, _this$props3;
-      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys"
-      });
-      this.setState(initialState);
-    }
-  }
-  render() {
-    const {
-      children,
-      fallbackRender,
-      FallbackComponent,
-      fallback
-    } = this.props;
-    const {
-      didCatch,
-      error
-    } = this.state;
-    let childToRender = children;
-    if (didCatch) {
-      const props = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = createElement(FallbackComponent, props);
-      } else if (fallback !== void 0) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-    return createElement(ErrorBoundaryContext.Provider, {
-      value: {
-        didCatch,
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, childToRender);
-  }
-}
-function hasArrayChanged() {
-  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
-}
 function e() {
@@ -131,4 +36,4 @@ const t = new PopStateEvent("popstate", { state: window.history.state });
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
         LoggerInstance.debug(
@@ -162,3 +67,3 @@ `createRemoteComponent LazyComponent destroy >>>`,
   useEffect(() => {
-    var _a2, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
@@ -174,3 +79,3 @@ let renderProps = {
     renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+    const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
@@ -184,4 +89,4 @@ providerInfoRef.current.render(renderProps);
 function withRouterData(WrappedComponent) {
-  const Component2 = forwardRef(function(props, ref) {
-    var _a2;
+  const Component = forwardRef(function(props, ref) {
+    var _a;
     if (props == null ? void 0 : props.basename) {
@@ -219,3 +124,3 @@ return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
         }
@@ -253,3 +158,3 @@ if (match) {
   return forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
+    return /* @__PURE__ */ React__default.createElement(Component, { ...props, ref });
   });
@@ -309,9 +214,23 @@ }
   return forwardRef((props, ref) => {
-    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })));
+    return /* @__PURE__ */ React__default.createElement(
+      ErrorBoundary,
+      {
+        FallbackComponent: info.fallback
+      },
+      /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref }))
+    );
   });
 }
-const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
-function createRoot(container, options) {
+function defaultCreateRoot(container, options) {
+  const reactVersion = ReactDOM.version || "";
+  const isReact18 = reactVersion.startsWith("18");
   if (isReact18) {
-    return ReactDOM.createRoot(container, options);
+    try {
+      return ReactDOM.createRoot(container, options);
+    } catch (e2) {
+      console.warn(
+        "Failed to use React 18 createRoot API, falling back to legacy API",
+        e2
+      );
+    }
   }
@@ -328,3 +247,4 @@ return {
 function createBridgeComponent({
-  createRoot: createRoot$1 = createRoot,
+  createRoot = defaultCreateRoot,
+  defaultRootOptions,
   ...bridgeInfo
@@ -353,3 +273,3 @@ }) {
       async render(info) {
-        var _a2, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
@@ -362,34 +282,42 @@ const {
           fallback,
+          rootOptions,
           ...propsInfo
         } = info;
-        const beforeBridgeRenderRes = ((_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
-          RawComponent,
+        const mergedRootOptions = {
+          ...defaultRootOptions,
+          ...rootOptions
+        };
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(
+          ErrorBoundary,
           {
-            appInfo: {
-              moduleName,
-              basename,
-              memoryRoute
-            },
-            propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-          }
-        ));
-        if (bridgeInfo.render) {
-          await Promise.resolve(
-            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-          ).then((root) => rootMap.set(dom, root));
-        } else {
-          let root = rootMap.get(dom);
-          if (!root) {
-            root = createRoot$1(dom);
-            rootMap.set(dom, root);
-          }
-          if ("render" in root) {
-            root.render(rootComponentWithErrorBoundary);
-          }
+            FallbackComponent: fallback
+          },
+          /* @__PURE__ */ React.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename,
+                memoryRoute
+              },
+              propsInfo: {
+                ...propsInfo,
+                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
+              }
+            }
+          )
+        );
+        let root = rootMap.get(dom);
+        if (!root) {
+          root = createRoot(dom, mergedRootOptions);
+          rootMap.set(dom, root);
         }
+        if ("render" in root) {
+          root.render(rootComponentWithErrorBoundary);
+        }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
       destroy(info) {
-        var _a2, _b, _c;
+        var _a, _b, _c;
         const { dom } = info;
@@ -402,7 +330,7 @@ LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
           } else {
-            ReactDOM.unmountComponentAtNode(root);
+            ReactDOM.unmountComponentAtNode(dom);
           }
           rootMap.delete(dom);
         }
-        (_c = (_b = (_a2 = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a2.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
       }
@@ -409,0 +337,0 @@ };

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250411200445",
+  "version": "0.0.0-next-20250413134017",
   "publishConfig": {
@@ -24,2 +24,17 @@ "access": "public"
     },
+    "./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": {
@@ -49,4 +64,4 @@ "types": "./dist/router.d.ts",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250411200445",
-    "@module-federation/sdk": "0.0.0-next-20250411200445"
+    "@module-federation/bridge-shared": "0.0.0-next-20250413134017",
+    "@module-federation/sdk": "0.0.0-next-20250413134017"
   },
@@ -72,3 +87,3 @@ "peerDependencies": {
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250411200445"
+    "@module-federation/runtime": "0.0.0-next-20250413134017"
   },
@@ -75,0 +90,0 @@ "scripts": {

src/index.ts

@@ -9,1 +9,7 @@ export { createRemoteComponent } from './remote/create';
 } 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';

src/types.ts

@@ -37,2 +37,11 @@ import * as React from 'react';
   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;
@@ -85,2 +94,12 @@ }
   ) => 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;
 }
@@ -87,0 +106,0 @@

src/utils/index.ts

@@ -1,2 +0,1 @@
-import React from 'react';
 import { createLogger } from '@module-federation/sdk';
@@ -8,21 +7,2 @@
 
-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[]) {
@@ -29,0 +9,0 @@ const res = args.reduce((res, path: string) => {

vite.config.ts

 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';
@@ -12,2 +10,3 @@
   plugins: [
+    // 添加我们的自定义插件
     dts({
@@ -29,2 +28,6 @@ rollupTypes: true,
         'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
+        v16: path.resolve(__dirname, 'src/legacy.ts'),
+        legacy: path.resolve(__dirname, 'src/legacy.ts'),
+        v18: path.resolve(__dirname, 'src/v18.ts'),
+        v19: path.resolve(__dirname, 'src/v19.ts'),
       },
@@ -31,0 +34,0 @@ formats: ['cjs', 'es'],

No alert changes

Improved metrics

Total package byte prevSize

140192

31.53%

Number of package files

65

51.16%

Lines of code

3820

38.16%

Dependency changes

• + Added

  @module-federation/bridge-shared@0.0.0-next-20250413134017
  (transitive)

• + Added

  @module-federation/sdk@0.0.0-next-20250413134017
  (transitive)

• - Removed

  @module-federation/bridge-shared@0.0.0-next-20250411200445
  (transitive)

• - Removed

  @module-federation/sdk@0.0.0-next-20250411200445
  (transitive)

• Updated

  @module-federation/bridge-shared@0.0.0-next-20250413134017

• Updated

  @module-federation/sdk@0.0.0-next-20250413134017