@module-federation/bridge-react 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @module-federation/bridge-react
 
+## 0.11.1
+
+### Patch Changes
+
+- 790bdea: fix(bridge-react): export DestroyParams and RenderParams types
+  - @module-federation/sdk@0.11.1
+  - @module-federation/bridge-shared@0.11.1
+
+## 0.11.0
+
+### Patch Changes
+
+- 4d67b8f: feat(bridge-react): enable custom createRoot in bridge-react
+- 2d086fc: Fix react-bridge version check for React versions earlier than 16.13.0
+- 4d67b8f: refactor(bridge-react): centralize type definitions into a single file for better maintainability and consistency
+- Updated dependencies [fce107e]
+  - @module-federation/sdk@0.11.0
+  - @module-federation/bridge-shared@0.11.0
+
 ## 0.10.0
 
 ### Minor Changes

package/__tests__/bridge.spec.tsx

@@ -102,4 +102,36 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('hello world');
     expect(ref.current).not.toBeNull();
   });
+
+  it('createRemoteComponent with custom createRoot prop', async () => {
+    const renderMock = vi.fn();
+
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+      createRoot: () => {
+        return {
+          render: renderMock,
+          unmount: vi.fn(),
+        };
+      },
+    });
+    const RemoteComponent = createRemoteComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(<RemoteComponent />);
+    expect(getHtml(container)).toMatch('loading');
+
+    await sleep(200);
+    expect(renderMock).toHaveBeenCalledTimes(1);
+  });
 });

package/dist/index.cjs.js

@@ -1,4 +1,5 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context-yPtLY2cD.cjs");
@@ -140,14 +141,13 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
   const [initialized, setInitialized] = React.useState(false);
   context.LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
   React.useEffect(() => {
-    if (initialized)
-      return;
+    if (initialized) return;
     const providerReturn = providerInfo();
     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 }
@@ -176,9 +176,8 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   React.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!initialized || !providerInfoRef.current)
-      return;
+    var _a2, _b, _c, _d, _e, _f;
+    if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
       dom: rootRef.current,
@@ -188,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);
@@ -198,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 });
     }
@@ -231,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) || "/");
@@ -318,13 +317,11 @@ function createLazyRemoteComponent(info) {
 }
 function createRemoteComponent(info) {
   const LazyComponent = createLazyRemoteComponent(info);
-  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 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 })));
+  });
 }
-const isReact18 = ReactDOM.version.startsWith("18");
+const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
 function createRoot(container, options) {
   if (isReact18) {
     return ReactDOM.createRoot(container, options);
@@ -338,7 +335,10 @@ function createRoot(container, options) {
     }
   };
 }
-function createBridgeComponent(bridgeInfo) {
+function createBridgeComponent({
+  createRoot: createRoot$1 = createRoot,
+  ...bridgeInfo
+}) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const instance = plugin.federationRuntime.instance;
@@ -360,7 +360,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     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,
@@ -370,7 +370,7 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        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 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,
           {
@@ -382,33 +382,36 @@ function createBridgeComponent(bridgeInfo) {
             propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
         ));
-        if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-          Promise.resolve(
-            bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-          ).then((root) => rootMap.set(info.dom, root));
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(dom, root));
         } else {
-          let root = rootMap.get(info.dom);
+          let root = rootMap.get(dom);
           if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
+            root = createRoot$1(dom);
+            rootMap.set(dom, root);
+          }
+          if ("render" in root) {
+            root.render(rootComponentWithErrorBoundary);
           }
-          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(info.dom);
+        const root = rootMap.get(dom);
         if (root) {
           if ("unmount" in root) {
             root.unmount();
           } else {
             ReactDOM.unmountComponentAtNode(root);
           }
-          rootMap.delete(info.dom);
+          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,91 +1,116 @@
-import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
-import { ErrorInfo } from 'react';
-import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
+export declare function createBridgeComponent<T>({ createRoot, ...bridgeInfo }: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): void;
 };
 
-export declare function createRemoteComponent<T, E extends keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
+export declare function createRemoteComponent<T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
 
 /**
- * Creates a root for a container element compatible with both React 16 and 18
+ * Options for creating a React root
  */
-declare function createRoot(container: Element | DocumentFragment, options?: CreateRootOptions): Root;
-
 declare interface CreateRootOptions {
     identifierPrefix?: string;
     onRecoverableError?: (error: unknown) => void;
     transitionCallbacks?: unknown;
 }
 
-declare type DestroyParams = {
+/**
+ * Parameters for the destroy function
+ */
+export declare interface DestroyParams {
     moduleName: string;
     dom: HTMLElement;
-};
-
-declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
-    fallback?: never;
-    FallbackComponent: ComponentType<FallbackProps>;
-    fallbackRender?: never;
-};
-
-declare type ErrorBoundarySharedProps = PropsWithChildren<{
-    onError?: (error: Error, info: ErrorInfo) => void;
-    onReset?: (details: {
-        reason: "imperative-api";
-        args: any[];
-    } | {
-        reason: "keys";
-        prev: any[] | undefined;
-        next: any[] | undefined;
-    }) => void;
-    resetKeys?: any[];
-}>;
-
-declare type FallbackProps = {
-    error: any;
-    resetErrorBoundary: (...args: any[]) => void;
-};
+}
 
-declare type LazyRemoteComponentInfo<T, E extends keyof T> = {
-    loader: () => Promise<T>;
-    loading: default_2.ReactNode;
-    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-    export?: E;
-};
+declare type LazyRemoteComponentInfo<T, E extends keyof T> = RemoteComponentParams<T>;
 
-declare type ProviderFnParams<T> = {
+/**
+ * Parameters for the provider function
+ */
+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;
+}
 
+/**
+ * Parameters for the provider function
+ */
 export declare interface ProviderParams {
     moduleName?: string;
     basename?: string;
     memoryRoute?: {
         entryPath: string;
+        initialState?: Record<string, unknown>;
     };
-    style?: React.CSSProperties;
+    style?: React_2.CSSProperties;
     className?: string;
 }
 
+/**
+ * Parameters for the remote component loader
+ */
+declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
+    loader: () => Promise<T>;
+    loading: React_2.ReactNode;
+    fallback: React_2.ComponentType<{
+        error: Error;
+    }>;
+    export?: E;
+    props?: T;
+}
+
+/**
+ * Parameters for the remote component
+ */
+declare interface RemoteComponentProps<T = Record<string, unknown>> {
+    props?: T;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    loading?: React_2.ReactNode;
+    [key: string]: unknown;
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
 export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    [key: string]: unknown;
 }
 
-declare type RenderParams = RenderFnParams & {
+/**
+ * Parameters for the render function
+ */
+export declare interface RenderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    dom: HTMLElement;
     [key: string]: unknown;
-};
+}
 
+/**
+ * Interface for a React root object
+ */
 declare interface Root {
-    render(children: React.ReactNode): void;
+    render(children: React_2.ReactNode): void;
     unmount(): void;
 }
 
-declare type RootType = HTMLElement | ReturnType<typeof createRoot>;
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+declare type RootType = HTMLElement | Root;
 
 export { }

package/dist/index.es.js

@@ -1,3 +1,4 @@
+var _a;
 import * as React from "react";
 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-YcJWgOAv.js";
@@ -121,14 +122,13 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
   const [initialized, setInitialized] = useState(false);
   LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
   useEffect(() => {
-    if (initialized)
-      return;
+    if (initialized) return;
     const providerReturn = providerInfo();
     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 }
@@ -157,9 +157,8 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     };
   }, [moduleName]);
   useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!initialized || !providerInfoRef.current)
-      return;
+    var _a2, _b, _c, _d, _e, _f;
+    if (!initialized || !providerInfoRef.current) return;
     let renderProps = {
       moduleName,
       dom: rootRef.current,
@@ -169,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);
@@ -179,7 +178,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
 });
 function withRouterData(WrappedComponent) {
   const Component2 = forwardRef(function(props, ref) {
-    var _a;
+    var _a2;
     if (props == null ? void 0 : props.basename) {
       return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
     }
@@ -212,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) || "/");
@@ -299,13 +298,11 @@ 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 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 })));
+  });
 }
-const isReact18 = ReactDOM.version.startsWith("18");
+const isReact18 = (_a = ReactDOM.version) == null ? void 0 : _a.startsWith("18");
 function createRoot(container, options) {
   if (isReact18) {
     return ReactDOM.createRoot(container, options);
@@ -319,7 +316,10 @@ function createRoot(container, options) {
     }
   };
 }
-function createBridgeComponent(bridgeInfo) {
+function createBridgeComponent({
+  createRoot: createRoot$1 = createRoot,
+  ...bridgeInfo
+}) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const instance = federationRuntime.instance;
@@ -341,7 +341,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     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,
@@ -351,7 +351,7 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        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 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,
           {
@@ -363,33 +363,36 @@ function createBridgeComponent(bridgeInfo) {
             propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
           }
         ));
-        if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-          Promise.resolve(
-            bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-          ).then((root) => rootMap.set(info.dom, root));
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(dom, root));
         } else {
-          let root = rootMap.get(info.dom);
+          let root = rootMap.get(dom);
           if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
+            root = createRoot$1(dom);
+            rootMap.set(dom, root);
+          }
+          if ("render" in root) {
+            root.render(rootComponentWithErrorBoundary);
           }
-          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(info.dom);
+        const root = rootMap.get(dom);
         if (root) {
           if ("unmount" in root) {
             root.unmount();
           } else {
             ReactDOM.unmountComponentAtNode(root);
           }
-          rootMap.delete(info.dom);
+          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

@@ -48,9 +48,8 @@ function WraperRouter(props) {
 }
 exports.BrowserRouter = WraperRouter;
 Object.keys(ReactRouterDom).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => ReactRouterDom[k]
-    });
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => ReactRouterDom[k]
+  });
 });

package/dist/router-v6.cjs.js

@@ -77,9 +77,8 @@ function WraperRouterProvider(props) {
 exports.BrowserRouter = WraperRouter;
 exports.RouterProvider = WraperRouterProvider;
 Object.keys(ReactRouterDom).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => ReactRouterDom[k]
-    });
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => ReactRouterDom[k]
+  });
 });

package/dist/router.cjs.js

@@ -75,9 +75,8 @@ function WrapperRouterProvider(props) {
 exports.BrowserRouter = WrapperRouter;
 exports.RouterProvider = WrapperRouterProvider;
 Object.keys(ReactRouterDom).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => ReactRouterDom[k]
-    });
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => ReactRouterDom[k]
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.10.0",
-    "@module-federation/sdk": "0.10.0"
+    "@module-federation/bridge-shared": "0.11.1",
+    "@module-federation/sdk": "0.11.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -66,9 +66,9 @@
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
-    "vite": "^5.2.14",
+    "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.10.0"
+    "@module-federation/runtime": "0.11.1"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -3,4 +3,6 @@ export { createBridgeComponent } from './provider/create';
 export type {
   ProviderParams,
   RenderFnParams,
-} from '@module-federation/bridge-shared';
+  DestroyParams,
+  RenderParams,
+} from './types';

package/src/provider/compat.ts

@@ -1,17 +1,8 @@
 import ReactDOM from 'react-dom';
+import { CreateRootOptions, Root } from '../types';
 
-interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown) => void;
-  transitionCallbacks?: unknown;
-}
-
-interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-const isReact18 = ReactDOM.version.startsWith('18');
+// 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
@@ -29,7 +20,6 @@ export function createRoot(
   // For React 16/17, simulate the new root API using render/unmountComponentAtNode
   return {
     render(children: React.ReactNode) {
-      // @ts-ignore - React 17's render method is deprecated but still functional
       ReactDOM.render(children, container);
     },
     unmount() {
@@ -52,11 +42,16 @@ export function hydrateRoot(
     return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
   }
 
-  // For React 16/17, simulate the new root API using hydrate
+  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
   return {
     render(children: React.ReactNode) {
-      // @ts-ignore - React 17's hydrate method is deprecated but still functional
-      ReactDOM.hydrate(children, container);
+      // 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/src/provider/context.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ProviderParams } from '@module-federation/bridge-shared';
+import { ProviderParams } from '../types';
 
 export const RouterContext = React.createContext<ProviderParams | null>(null);

package/src/provider/create.tsx

@@ -2,32 +2,21 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import type {
   ProviderParams,
-  RenderFnParams,
-} from '@module-federation/bridge-shared';
+  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 } from './compat';
+import { createRoot as defaultCreateRoot } from './compat';
 
-type RenderParams = RenderFnParams & {
-  [key: string]: unknown;
-};
-type DestroyParams = {
-  moduleName: string;
-  dom: HTMLElement;
-};
-type RootType = HTMLElement | ReturnType<typeof createRoot>;
-
-export type ProviderFnParams<T> = {
-  rootComponent: React.ComponentType<T>;
-  render?: (
-    App: React.ReactElement,
-    id?: HTMLElement | string,
-  ) => RootType | Promise<RootType>;
-};
-
-export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
+export function createBridgeComponent<T>({
+  createRoot = defaultCreateRoot,
+  ...bridgeInfo
+}: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
     const instance = federationRuntime.instance;
@@ -80,34 +69,37 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           </ErrorBoundary>
         );
 
-        if (bridgeInfo?.render) {
-          // in case bridgeInfo?.render is an async function, resolve this to promise
-          Promise.resolve(
-            bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
-          ).then((root: RootType) => rootMap.set(info.dom, root));
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom),
+          ).then((root: RootType) => rootMap.set(dom, root));
         } else {
-          let root = rootMap.get(info.dom);
+          let root = rootMap.get(dom);
           // do not call createRoot multiple times
           if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
+            root = createRoot(dom);
+            rootMap.set(dom, root);
+          }
+
+          if ('render' in root) {
+            root.render(rootComponentWithErrorBoundary);
           }
-          root.render(rootComponentWithErrorBoundary);
         }
 
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
       destroy(info: DestroyParams) {
+        const { dom } = info;
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
-        const root = rootMap.get(info.dom);
+        const root = rootMap.get(dom);
         if (root) {
           if ('unmount' in root) {
             root.unmount();
           } else {
             ReactDOM.unmountComponentAtNode(root as HTMLElement);
           }
-          rootMap.delete(info.dom);
+          rootMap.delete(dom);
         }
         instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },

package/src/remote/component.tsx

@@ -6,38 +6,13 @@ import React, {
   forwardRef,
 } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
-import type { ProviderParams } from '@module-federation/bridge-shared';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
 import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
 import { federationRuntime } from '../provider/plugin';
-
-declare const __APP_VERSION__: string;
-export interface RenderFnParams extends ProviderParams {
-  dom?: any;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-}
-
-interface RemoteModule {
-  provider: () => {
-    render: (
-      info: ProviderParams & {
-        dom: any;
-      },
-    ) => void;
-    destroy: (info: { dom: any }) => void;
-  };
-}
-
-interface RemoteAppParams {
-  moduleName: string;
-  providerInfo: NonNullable<RemoteModule['provider']>;
-  exportName: string | number | symbol;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-}
+import { RemoteComponentProps, RemoteAppParams } from '../types';
 
 const RemoteAppWrapper = forwardRef(function (
-  props: RemoteAppParams & RenderFnParams,
+  props: RemoteAppParams & RemoteComponentProps,
   ref,
 ) {
   const {

package/src/remote/create.tsx

@@ -1,33 +1,19 @@
 import React, { forwardRef } from 'react';
-import {
-  ErrorBoundary,
-  ErrorBoundaryPropsWithComponent,
-} from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
 import { LoggerInstance } from '../utils';
 import RemoteApp from './component';
-import type { ProviderParams } from '@module-federation/bridge-shared';
-
-export interface RenderFnParams extends ProviderParams {
-  dom?: any;
-}
-
-interface RemoteModule {
-  provider: () => {
-    render: (info: RenderFnParams) => void;
-    destroy: (info: { dom: any }) => void;
-  };
-}
+import {
+  RemoteComponentParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from '../types';
 
-type LazyRemoteComponentInfo<T, E extends keyof T> = {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  export?: E;
-};
+type LazyRemoteComponentInfo<T, E extends keyof T> = RemoteComponentParams<T>;
 
-function createLazyRemoteComponent<T, E extends keyof T>(
-  info: LazyRemoteComponentInfo<T, E>,
-) {
+function createLazyRemoteComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
     LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
@@ -49,10 +35,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(
       if (exportName in m && typeof exportFn === 'function') {
         const RemoteAppComponent = forwardRef<
           HTMLDivElement,
-          {
-            basename?: ProviderParams['basename'];
-            memoryRoute?: ProviderParams['memoryRoute'];
-          }
+          RemoteComponentProps
         >((props, ref) => {
           return (
             <RemoteApp
@@ -87,29 +70,18 @@ function createLazyRemoteComponent<T, E extends keyof T>(
   });
 }
 
-export function createRemoteComponent<T, E extends keyof T>(
-  info: LazyRemoteComponentInfo<T, E>,
-) {
-  type ExportType = T[E] extends (...args: any) => any
-    ? ReturnType<T[E]>
-    : never;
-
-  type RawComponentType = '__BRIDGE_FN__' extends keyof ExportType
-    ? ExportType['__BRIDGE_FN__'] extends (...args: any) => any
-      ? Parameters<ExportType['__BRIDGE_FN__']>[0]
-      : {}
-    : {};
-
+export function createRemoteComponent<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo<T, E>) {
   const LazyComponent = createLazyRemoteComponent(info);
-  return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>(
-    (props, ref) => {
-      return (
-        <ErrorBoundary FallbackComponent={info.fallback}>
-          <React.Suspense fallback={info.loading}>
-            <LazyComponent {...props} ref={ref} />
-          </React.Suspense>
-        </ErrorBoundary>
-      );
-    },
-  );
+  return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
+    return (
+      <ErrorBoundary FallbackComponent={info.fallback}>
+        <React.Suspense fallback={info.loading}>
+          <LazyComponent {...props} ref={ref} />
+        </React.Suspense>
+      </ErrorBoundary>
+    );
+  });
 }

package/src/types.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
+
+/**
+ * Options for creating a React root
+ */
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+/**
+ * Interface for a React root object
+ */
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export type RootType = HTMLElement | Root;
+
+/**
+ * Parameters for the render function
+ */
+export interface RenderParams {
+  moduleName?: string;
+  basename?: string;
+  memoryRoute?: {
+    entryPath: string;
+    initialState?: Record<string, unknown>;
+  };
+  dom: HTMLElement;
+  [key: string]: unknown;
+}
+
+/**
+ * Parameters for the destroy function
+ */
+export interface DestroyParams {
+  moduleName: string;
+  dom: HTMLElement;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export interface ProviderParams {
+  moduleName?: string;
+  basename?: string;
+  memoryRoute?: {
+    entryPath: string;
+    initialState?: Record<string, unknown>;
+  };
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
+export interface RenderFnParams extends ProviderParams {
+  dom: HTMLElement;
+  fallback?: React.ComponentType<{ error: Error }>;
+  [key: string]: unknown;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export interface ProviderFnParams<T> {
+  rootComponent: React.ComponentType<T>;
+  render?: (
+    App: React.ReactElement,
+    id?: HTMLElement | string,
+  ) => RootType | Promise<RootType>;
+  createRoot?: (
+    container: Element | DocumentFragment,
+    options?: CreateRootOptions,
+  ) => Root;
+}
+
+/**
+ * Parameters for the remote component
+ */
+export interface RemoteComponentProps<T = Record<string, unknown>> {
+  props?: T;
+  fallback?: React.ComponentType<{ error: Error }>;
+  loading?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+/**
+ * Parameters for the remote component loader
+ */
+export interface RemoteComponentParams<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+> {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: React.ComponentType<{ error: Error }>;
+  export?: E;
+  props?: T;
+}
+
+/**
+ * Interface for a remote module provider
+ */
+export interface RemoteModule {
+  provider: () => {
+    render: (info: RenderFnParams) => void;
+    destroy: (info: { dom: any }) => void;
+  };
+}
+
+/**
+ * Parameters for a remote app component
+ */
+export interface RemoteAppParams extends ProviderParams {
+  moduleName: string;
+  providerInfo: NonNullable<RemoteModule['provider']>;
+  exportName: string | number | symbol;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+}