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

package/CHANGELOG.md

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

package/dist/index.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const reactErrorBoundary_esm = require("./internal/react-error-boundary.esm-D8nxmvmv.cjs.js");
-const context = require("./internal/context.cjs.js");
+const context = require("./context-C79iMWYD.cjs");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
 const ReactDOM = require("react-dom");
@@ -24,6 +24,101 @@ function _interopNamespaceDefault(e2) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 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() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
@@ -51,8 +146,8 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     providerInfoRef.current = providerReturn;
     setInitialized(true);
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
         context.LoggerInstance.debug(
           `createRemoteComponent LazyComponent destroy >>>`,
           { moduleName, basename, dom: renderDom.current }
@@ -81,7 +176,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   React.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
@@ -92,7 +187,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       ...resProps
     };
     renderDom.current = rootRef.current;
-    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)) || {};
+    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)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
     providerInfoRef.current.render(renderProps);
     (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
@@ -102,7 +197,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
 });
 function withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
-    var _a;
+    var _a2;
     if (props == null ? void 0 : props.basename) {
       return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
     }
@@ -135,7 +230,7 @@ function withRouterData(WrappedComponent) {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
         if (useHistory) {
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
         }
         if (match) {
           basename = context.pathJoin(basename, (match == null ? void 0 : match.path) || "/");
@@ -223,27 +318,13 @@ function createLazyRemoteComponent(info) {
 function createRemoteComponent(info) {
   const LazyComponent = createLazyRemoteComponent(info);
   return React.forwardRef((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 }))
-    );
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
   });
 }
-function defaultCreateRoot(container, options) {
-  const reactVersion = ReactDOM.version || "";
-  const isReact18 = reactVersion.startsWith("18");
+const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
+function createRoot(container, options) {
   if (isReact18) {
-    try {
-      return ReactDOM.createRoot(container, options);
-    } catch (e2) {
-      console.warn(
-        "Failed to use React 18 createRoot API, falling back to legacy API",
-        e2
-      );
-    }
+    return ReactDOM.createRoot(container, options);
   }
   return {
     render(children) {
@@ -255,8 +336,7 @@ function defaultCreateRoot(container, options) {
   };
 }
 function createBridgeComponent({
-  createRoot = defaultCreateRoot,
-  defaultRootOptions,
+  createRoot: createRoot$1 = createRoot,
   ...bridgeInfo
 }) {
   return () => {
@@ -280,7 +360,7 @@ function createBridgeComponent({
     };
     return {
       async render(info) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f;
         context.LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -288,46 +368,38 @@ function createBridgeComponent({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
-        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,
+        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,
           {
-            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);
+            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);
+          }
         }
         ((_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 _a, _b, _c;
+        var _a2, _b, _c;
         const { dom } = info;
         context.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(dom);
@@ -335,11 +407,11 @@ function createBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            ReactDOM.unmountComponentAtNode(dom);
+            ReactDOM.unmountComponentAtNode(root);
           }
           rootMap.delete(dom);
         }
-        (_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);
+        (_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);
       }
     };
   };

package/dist/index.d.ts

@@ -1,11 +1,7 @@
 import { default as default_2 } from 'react';
 import * as React_2 from 'react';
 
-/**
- * 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>): () => {
+export declare function createBridgeComponent<T>({ createRoot, ...bridgeInfo }: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): void;
 };
@@ -38,16 +34,6 @@ 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) => 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;
 }
 
 /**
@@ -111,15 +97,6 @@ export declare 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;
 }
 

package/dist/index.es.js

@@ -1,10 +1,105 @@
+var _a;
 import * as React from "react";
-import React__default, { forwardRef, useRef, useState, useEffect, useContext } from "react";
-import { E as ErrorBoundary } from "./internal/react-error-boundary.esm-CMdlkNPP.es.js";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./internal/context.es.js";
+import React__default, { createContext, Component, createElement, forwardRef, useRef, useState, useEffect, useContext } from "react";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-Dbqf0szX.js";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
 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() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
@@ -32,8 +127,8 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     providerInfoRef.current = providerReturn;
     setInitialized(true);
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
         LoggerInstance.debug(
           `createRemoteComponent LazyComponent destroy >>>`,
           { moduleName, basename, dom: renderDom.current }
@@ -62,7 +157,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b, _c, _d, _e, _f;
     if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
@@ -73,7 +168,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       ...resProps
     };
     renderDom.current = rootRef.current;
-    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)) || {};
+    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)) || {};
     renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
     providerInfoRef.current.render(renderProps);
     (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
@@ -82,8 +177,8 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
   return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef });
 });
 function withRouterData(WrappedComponent) {
-  const Component = forwardRef(function(props, ref) {
-    var _a;
+  const Component2 = forwardRef(function(props, ref) {
+    var _a2;
     if (props == null ? void 0 : props.basename) {
       return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
     }
@@ -116,7 +211,7 @@ function withRouterData(WrappedComponent) {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
         if (useHistory) {
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
         }
         if (match) {
           basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
@@ -149,7 +244,7 @@ function withRouterData(WrappedComponent) {
     return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
   });
   return forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React__default.createElement(Component, { ...props, ref });
+    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
   });
 }
 const RemoteApp = withRouterData(RemoteAppWrapper);
@@ -204,27 +299,13 @@ function createLazyRemoteComponent(info) {
 function createRemoteComponent(info) {
   const LazyComponent = createLazyRemoteComponent(info);
   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 })));
   });
 }
-function defaultCreateRoot(container, options) {
-  const reactVersion = ReactDOM.version || "";
-  const isReact18 = reactVersion.startsWith("18");
+const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
+function createRoot(container, options) {
   if (isReact18) {
-    try {
-      return ReactDOM.createRoot(container, options);
-    } catch (e2) {
-      console.warn(
-        "Failed to use React 18 createRoot API, falling back to legacy API",
-        e2
-      );
-    }
+    return ReactDOM.createRoot(container, options);
   }
   return {
     render(children) {
@@ -236,8 +317,7 @@ function defaultCreateRoot(container, options) {
   };
 }
 function createBridgeComponent({
-  createRoot = defaultCreateRoot,
-  defaultRootOptions,
+  createRoot: createRoot$1 = createRoot,
   ...bridgeInfo
 }) {
   return () => {
@@ -261,7 +341,7 @@ function createBridgeComponent({
     };
     return {
       async render(info) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f;
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -269,46 +349,38 @@ function createBridgeComponent({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
-        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,
+        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,
           {
-            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);
+            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);
+          }
         }
         ((_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 _a, _b, _c;
+        var _a2, _b, _c;
         const { dom } = info;
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(dom);
@@ -316,11 +388,11 @@ function createBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            ReactDOM.unmountComponentAtNode(dom);
+            ReactDOM.unmountComponentAtNode(root);
           }
           rootMap.delete(dom);
         }
-        (_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);
+        (_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);
       }
     };
   };

package/dist/router-v5.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const context = require("./internal/context.cjs.js");
+const context = require("./context-C79iMWYD.cjs");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });