@module-federation/bridge-react 0.0.0-next-20240718061842 → 0.0.0-next-20240718072411

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240718061842
+## 0.0.0-next-20240718072411
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240718061842
+- chore: bump next
+  - @module-federation/bridge-shared@0.0.0-next-20240718072411
 
 ## 0.2.6
 

package/dist/index.cjs.js

@@ -307,32 +307,50 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
     };
     return {
-      render(info) {
+      async render(info) {
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (context.atLeastReact18(React__namespace)) {
-          const root = client.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            /* @__PURE__ */ React__namespace.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
+          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
+              /* @__PURE__ */ React__namespace.createElement(
+                RawComponent,
+                {
+                  propsInfo,
+                  appInfo: {
+                    name,
+                    basename,
+                    memoryRoute
+                  }
                 }
-              }
-            )
-          );
+              ),
+              info.dom
+            )).then((root) => rootMap.set(info.dom, root));
+          } else {
+            const root = client.createRoot(info.dom);
+            root.render(
+              /* @__PURE__ */ React__namespace.createElement(
+                RawComponent,
+                {
+                  propsInfo,
+                  appInfo: {
+                    name,
+                    basename,
+                    memoryRoute
+                  }
+                }
+              )
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFunc(
             /* @__PURE__ */ React__namespace.createElement(
               RawComponent,
               {
@@ -348,7 +366,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      destroy(info) {
+      async destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
+import { default as default_3 } from 'react-dom/client';
 import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): void;
+    render(info: RenderFnParams & any): Promise<void>;
     destroy(info: {
         dom: HTMLElement;
-    }): void;
+    }): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
@@ -19,8 +20,8 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
 }): (props: {
-    basename?: ProviderParams['basename'];
-    memoryRoute?: ProviderParams['memoryRoute'];
+    basename?: ProviderParams["basename"];
+    memoryRoute?: ProviderParams["memoryRoute"];
 } & ("__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.JSX.Element;
 
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
@@ -49,6 +50,7 @@ declare type FallbackProps = {
 
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
 export declare interface ProviderParams {
@@ -63,4 +65,6 @@ export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
 }
 
+declare type RootType = HTMLElement | default_3.Root;
+
 export { }

package/dist/index.es.js

@@ -288,32 +288,50 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
     };
     return {
-      render(info) {
+      async render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          const root = client.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            /* @__PURE__ */ React.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
+          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
+              /* @__PURE__ */ React.createElement(
+                RawComponent,
+                {
+                  propsInfo,
+                  appInfo: {
+                    name,
+                    basename,
+                    memoryRoute
+                  }
                 }
-              }
-            )
-          );
+              ),
+              info.dom
+            )).then((root) => rootMap.set(info.dom, root));
+          } else {
+            const root = client.createRoot(info.dom);
+            root.render(
+              /* @__PURE__ */ React.createElement(
+                RawComponent,
+                {
+                  propsInfo,
+                  appInfo: {
+                    name,
+                    basename,
+                    memoryRoute
+                  }
+                }
+              )
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFunc(
             /* @__PURE__ */ React.createElement(
               RawComponent,
               {
@@ -329,7 +347,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      destroy(info) {
+      async destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/dist/router-v5.cjs.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactRouterDom = require("react-router-dom/index.js");
+const context = require("./context--mtFt3tp.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routers = router.routes;
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+exports.BrowserRouter = WraperRouter;
+exports.RouterProvider = WraperRouterProvider;

package/dist/router-v5.d.ts

@@ -0,0 +1,8 @@
+import { default as default_2 } from 'react';
+import * as ReactRouterDom from 'react-router-dom/index.js';
+
+export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+
+export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
+
+export { }

package/dist/router-v5.es.js

@@ -0,0 +1,63 @@
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React__default.createElement(
+      ReactRouterDom.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/dist/router-v6.cjs.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactRouterDom = require("react-router-dom/dist/index.js");
+const context = require("./context--mtFt3tp.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routers = router.routes;
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+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]
+    });
+});

package/dist/router-v6.d.ts

@@ -0,0 +1,11 @@
+import { default as default_2 } from 'react';
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
+
+export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+
+export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
+
+
+export * from "react-router-dom/dist/index.js";
+
+export { }

package/dist/router-v6.es.js

@@ -0,0 +1,64 @@
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/dist/index.js";
+export * from "react-router-dom/dist/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.BrowserRouter, { ...props });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React__default.createElement(
+      ReactRouterDom.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/dist/router.cjs.js

@@ -60,14 +60,21 @@ function WraperRouterProvider(props) {
   const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
   const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
   const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  console.log("=======resolve to v5!!");
   if (!routerContextProps)
     return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
+  console.log("=======resolve to v6!!");
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
     return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
+    console.log("=======createBrowserRouter routers", routers);
+    console.log(
+      "=======createBrowserRouter routerContextProps.basename",
+      routerContextProps.basename
+    );
     const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,

package/dist/router.es.js

@@ -42,14 +42,21 @@ function WraperRouterProvider(props) {
   const RouterProvider = ReactRouterDom["RouterProvider"];
   const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
   const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  console.log("=======resolve to v5!!");
   if (!routerContextProps)
     return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
+  console.log("=======resolve to v6!!");
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
     return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
+    console.log("=======createBrowserRouter routers", routers);
+    console.log(
+      "=======createBrowserRouter routerContextProps.basename",
+      routerContextProps.basename
+    );
     const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240718061842",
+  "version": "0.0.0-next-20240718072411",
   "publishConfig": {
     "access": "public"
   },
@@ -20,12 +20,22 @@
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
+    "./router-v5": {
+      "types": "./dist/router-v5.d.ts",
+      "import": "./dist/router-v5.es.js",
+      "require": "./dist/router-v5.cjs.js"
+    },
+    "./router-v6": {
+      "types": "./dist/router-v6.d.ts",
+      "import": "./dist/router-v6.es.js",
+      "require": "./dist/router-v6.cjs.js"
+    },
     "./*": "./*"
   },
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240718061842"
+    "@module-federation/bridge-shared": "0.0.0-next-20240718072411"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/provider.tsx

@@ -9,45 +9,61 @@ import type {
 } from '@module-federation/bridge-shared';
 import { LoggerInstance, atLeastReact18 } from './utils';
 
+type RootType = HTMLElement | ReactDOMClient.Root;
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
+  render?: (App: React.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
-    const rootMap = new Map<any, ReactDOMClient.Root>();
-
+    const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = '/' } = appInfo;
 
       return (
         <RouterContext.Provider value={{ name, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
+          <bridgeInfo.rootComponent {...propsInfo} basename={basename} {...restProps} />
         </RouterContext.Provider>
       );
     };
 
     return {
-      render(info: RenderFnParams & any) {
+      async render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
-
         if (atLeastReact18(React)) {
-          const root = ReactDOMClient.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            <RawComponent
-              propsInfo={propsInfo}
-              appInfo={{
-                name,
-                basename,
-                memoryRoute,
-              }}
-            />,
-          );
+          // render is provided by user
+          if (bridgeInfo?.render) {
+            Promise.resolve(bridgeInfo?.render(
+              <RawComponent
+                propsInfo={propsInfo}
+                appInfo={{
+                  name,
+                  basename,
+                  memoryRoute,
+                }}
+              />,
+              info.dom
+            )).then((root: RootType) => rootMap.set(info.dom, root));
+          } else {
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
+            root.render(
+              <RawComponent
+                propsInfo={propsInfo}
+                appInfo={{
+                  name,
+                  basename,
+                  memoryRoute,
+                }}
+              />,
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = bridgeInfo?.render || ReactDOM.render;
+          renderFunc(
             <RawComponent
               propsInfo={propsInfo}
               appInfo={{
@@ -60,13 +76,13 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           );
         }
       },
-      destroy(info: { dom: HTMLElement }) {
+      async destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
-          root?.unmount();
+          (root as ReactDOMClient.Root)?.unmount();
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
@@ -84,5 +100,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-// function ShadowContent() {}

package/src/router-v5.tsx

@@ -0,0 +1,78 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+// @ts-ignore
+import * as ReactRouterDom from 'react-router-dom/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+// @ts-ignore
+// export * from 'react-router-dom/index.js';
+
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/src/router-v6.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+export * from 'react-router-dom/dist/index.js';
+
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/src/router.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 // The upper alias react-router-dom$ into this file avoids the loop
 import * as ReactRouterDom from 'react-router-dom/';
+
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 
@@ -52,14 +53,22 @@ function WraperRouterProvider(
   const createBrowserRouter = (ReactRouterDom as any)[
     'create' + 'BrowserRouter'
   ];
+  console.log('=======resolve to v5!!');
   if (!routerContextProps) return <RouterProvider {...props} />;
 
+  console.log('=======resolve to v6!!');
+
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps?.memoryRoute.entryPath],
     });
     return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
+    console.log('=======createBrowserRouter routers', routers);
+    console.log(
+      '=======createBrowserRouter routerContextProps.basename',
+      routerContextProps.basename,
+    );
     const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,

package/vite.config.ts

@@ -22,6 +22,8 @@ export default defineConfig({
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
+        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -32,6 +34,8 @@ export default defineConfig({
         '@remix-run/router',
         'react-router',
         'react-router-dom/',
+        'react-router-dom/index.js',
+        'react-router-dom/dist/index.js',
       ],
     },
     minify: false,