@module-federation/bridge-react 0.0.0-next-20241118100312 → 0.0.0-next-20241119071808

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241118100312
+## 0.0.0-next-20241119071808
 
 ### Patch Changes
 
-- @module-federation/runtime@0.0.0-next-20241118100312
-- @module-federation/sdk@0.0.0-next-20241118100312
-- @module-federation/bridge-shared@0.0.0-next-20241118100312
+- c7dbc4b: feat: mount bridge api to module instance
+- 0309fb5: fix: wrap try catch with react-router-dom path resolve
+  - @module-federation/sdk@0.0.0-next-20241119071808
+  - @module-federation/bridge-shared@0.0.0-next-20241119071808
 
 ## 0.7.4
 

package/dist/index.cjs.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context-BcJ-YlNr.cjs");
 const ReactRouterDOM = require("react-router-dom");
-const runtime = require("@module-federation/runtime");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -133,13 +132,13 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       className,
       style,
       fallback,
+      instance,
       ...resProps
     } = props;
     const rootRef = ref && "current" in ref ? ref : React.useRef(null);
     const renderDom = React.useRef(null);
     const providerInfoRef = React.useRef(null);
-    const hostInstance = runtime.getInstance();
-    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+    context.LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
         var _a, _b, _c, _d, _e, _f;
@@ -160,16 +159,14 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
         );
         context.LoggerInstance.log(
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
+          instance
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
           renderProps
         )) || {};
         renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          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);
       });
       return () => {
         clearTimeout(renderTimeout);
@@ -180,7 +177,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -192,7 +189,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
               moduleName,
               dom: renderDom.current
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -308,6 +305,7 @@ function createLazyRemoteComponent(info) {
               exportName: info.export || "default",
               fallback: info.fallback,
               ref,
+              instance: info.instance,
               ...props
             }
           );
@@ -331,13 +329,10 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponent(info) {
-  return React.forwardRef(
-    (props, ref) => {
-      const LazyComponent = createLazyRemoteComponent(info);
-      return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
-    }
-  );
+function createRemoteComponentWithInstance(instance) {
+  return (info) => {
+    return createLazyRemoteComponent({ ...info, instance });
+  };
 }
 var client = {};
 var m = ReactDOM;
@@ -366,8 +361,11 @@ if (process.env.NODE_ENV === "production") {
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const instance = runtime.getInstance();
-    context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const { instance } = bridgeInfo;
+    context.LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
       const { moduleName, memoryRoute, basename = "/" } = appInfo;
@@ -436,7 +434,9 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(
+          info
+        );
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {
@@ -444,5 +444,21 @@ function createBridgeComponent(bridgeInfo) {
     };
   };
 }
-exports.createBridgeComponent = createBridgeComponent;
-exports.createRemoteComponent = createRemoteComponent;
+function createBridgeComponentWithInstance(instance) {
+  return (bridgeInfo) => {
+    return createBridgeComponent({ ...bridgeInfo, instance });
+  };
+}
+exports.createRemoteComponent = void 0;
+exports.createBridgeComponent = void 0;
+function BridgeReactPlugin() {
+  return {
+    name: "bridge-react-plugin",
+    beforeInit(args) {
+      exports.createRemoteComponent = createRemoteComponentWithInstance(args.origin);
+      exports.createBridgeComponent = createBridgeComponentWithInstance(args.origin);
+      return args;
+    }
+  };
+}
+exports.BridgeReactPlugin = BridgeReactPlugin;

package/dist/index.d.ts

@@ -2,22 +2,29 @@ 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 { FederationHost } from '@module-federation/runtime';
+import { FederationRuntimePlugin } from '@module-federation/runtime';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
+export declare function BridgeReactPlugin(): FederationRuntimePlugin;
+
+declare type CreateBridgeComponent = typeof createBridgeComponent_2;
+
+export declare let createBridgeComponent: CreateBridgeComponent;
+
+declare function createBridgeComponent_2<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
 
-export declare function createRemoteComponent<T, E extends keyof T>(info: {
-    loader: () => Promise<T>;
-    loading: default_2.ReactNode;
-    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-    export?: 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>>;
+declare type CreateRemoteComponent = typeof createRemoteComponent_2;
+
+export declare let createRemoteComponent: CreateRemoteComponent;
+
+declare function createRemoteComponent_2<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>>;
 
 declare type DestroyParams = {
     moduleName: string;
@@ -48,9 +55,18 @@ declare type FallbackProps = {
     resetErrorBoundary: (...args: any[]) => void;
 };
 
+declare type LazyRemoteComponentInfo<T, E extends keyof T> = {
+    loader: () => Promise<T>;
+    loading: default_2.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+    export?: E;
+    instance?: FederationHost;
+};
+
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    instance?: FederationHost;
 };
 
 export declare interface ProviderParams {

package/dist/index.es.js

@@ -2,7 +2,6 @@ import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
 import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-CUbFnlO5.js";
 import * as ReactRouterDOM from "react-router-dom";
-import { getInstance } from "@module-federation/runtime";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -114,13 +113,13 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       className,
       style,
       fallback,
+      instance,
       ...resProps
     } = props;
     const rootRef = ref && "current" in ref ? ref : useRef(null);
     const renderDom = useRef(null);
     const providerInfoRef = useRef(null);
-    const hostInstance = getInstance();
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+    LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
         var _a, _b, _c, _d, _e, _f;
@@ -141,16 +140,14 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
         );
         LoggerInstance.log(
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
+          instance
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
           renderProps
         )) || {};
         renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          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);
       });
       return () => {
         clearTimeout(renderTimeout);
@@ -161,7 +158,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -173,7 +170,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
               moduleName,
               dom: renderDom.current
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -289,6 +286,7 @@ function createLazyRemoteComponent(info) {
               exportName: info.export || "default",
               fallback: info.fallback,
               ref,
+              instance: info.instance,
               ...props
             }
           );
@@ -312,13 +310,10 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponent(info) {
-  return forwardRef(
-    (props, ref) => {
-      const LazyComponent = createLazyRemoteComponent(info);
-      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 createRemoteComponentWithInstance(instance) {
+  return (info) => {
+    return createLazyRemoteComponent({ ...info, instance });
+  };
 }
 var client = {};
 var m = ReactDOM;
@@ -344,11 +339,14 @@ if (process.env.NODE_ENV === "production") {
     }
   };
 }
-function createBridgeComponent(bridgeInfo) {
+function createBridgeComponent$1(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const instance = getInstance();
-    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const { instance } = bridgeInfo;
+    LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
       const { moduleName, memoryRoute, basename = "/" } = appInfo;
@@ -417,7 +415,9 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(
+          info
+        );
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {
@@ -425,7 +425,25 @@ function createBridgeComponent(bridgeInfo) {
     };
   };
 }
+function createBridgeComponentWithInstance(instance) {
+  return (bridgeInfo) => {
+    return createBridgeComponent$1({ ...bridgeInfo, instance });
+  };
+}
+let createRemoteComponent;
+let createBridgeComponent;
+function BridgeReactPlugin() {
+  return {
+    name: "bridge-react-plugin",
+    beforeInit(args) {
+      createRemoteComponent = createRemoteComponentWithInstance(args.origin);
+      createBridgeComponent = createBridgeComponentWithInstance(args.origin);
+      return args;
+    }
+  };
+}
 export {
+  BridgeReactPlugin,
   createBridgeComponent,
   createRemoteComponent
 };

package/dist/plugin.cjs.js

@@ -0,0 +1,3 @@
+"use strict";
+const index = require("./index.cjs.js");
+module.exports = index.BridgeReactPlugin;

package/dist/plugin.d.ts

@@ -0,0 +1,6 @@
+import { FederationRuntimePlugin } from '@module-federation/runtime';
+
+declare function BridgeReactPlugin(): FederationRuntimePlugin;
+export default BridgeReactPlugin;
+
+export { }

package/dist/plugin.es.js

@@ -0,0 +1,4 @@
+import { BridgeReactPlugin } from "./index.es.js";
+export {
+  BridgeReactPlugin as default
+};

package/dist/router-v6.cjs.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const ReactRouterDom = require("react-router-dom/dist/index.js");
+const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
 const context = require("./context-BcJ-YlNr.cjs");
+const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,7 +20,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom$1);
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = React.useContext(context.RouterContext) || {};

package/dist/router-v6.d.ts

@@ -6,6 +6,6 @@ export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.Br
 export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
 
 
-export * from "react-router-dom/dist/index.js";
+export * from "react-router-dom/";
 
 export { }

package/dist/router-v6.es.js

@@ -1,7 +1,7 @@
 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 * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
 import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
+export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
@@ -12,7 +12,7 @@ function WraperRouter(props) {
   });
   if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
     return /* @__PURE__ */ React__default.createElement(
-      ReactRouterDom.MemoryRouter,
+      ReactRouterDom$1.MemoryRouter,
       {
         ...props,
         initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
@@ -20,7 +20,7 @@ function WraperRouter(props) {
     );
   }
   return /* @__PURE__ */ React__default.createElement(
-    ReactRouterDom.BrowserRouter,
+    ReactRouterDom$1.BrowserRouter,
     {
       ...propsRes,
       basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
@@ -37,9 +37,9 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
-  const RouterProvider = ReactRouterDom["RouterProvider"];
-  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
-  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  const RouterProvider = ReactRouterDom$1["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom$1["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom$1["createBrowserRouter"];
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241118100312",
+  "version": "0.0.0-next-20241119071808",
   "publishConfig": {
     "access": "public"
   },
@@ -26,6 +26,11 @@
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.es.js",
+      "require": "./dist/plugin.es.js"
+    },
     "./router-v5": {
       "types": "./dist/router-v5.d.ts",
       "import": "./dist/router-v5.es.js",
@@ -41,9 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241118100312",
-    "@module-federation/sdk": "0.0.0-next-20241118100312",
-    "@module-federation/runtime": "0.0.0-next-20241118100312"
+    "@module-federation/bridge-shared": "0.0.0-next-20241119071808",
+    "@module-federation/sdk": "0.0.0-next-20241119071808"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -63,7 +67,8 @@
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "@module-federation/runtime": "0.0.0-next-20241119071808"
   },
   "scripts": {
     "dev": "vite",

package/src/create.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import type { FederationHost } from '@module-federation/runtime';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
@@ -18,12 +19,17 @@ interface RemoteModule {
   };
 }
 
-function createLazyRemoteComponent<T, E extends keyof T>(info: {
+type LazyRemoteComponentInfo<T, E extends keyof T> = {
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}) {
+  instance?: FederationHost;
+};
+
+function createLazyRemoteComponent<T, E extends keyof T>(
+  info: LazyRemoteComponentInfo<T, E>,
+) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
     LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
@@ -58,6 +64,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
               exportName={info.export || 'default'}
               fallback={info.fallback}
               ref={ref}
+              instance={info.instance}
               {...props}
             />
           );
@@ -83,12 +90,9 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   });
 }
 
-export function createRemoteComponent<T, E extends keyof T>(info: {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  export?: E;
-}) {
+export function createRemoteComponent<T, E extends keyof T>(
+  info: LazyRemoteComponentInfo<T, E>,
+) {
   type ExportType = T[E] extends (...args: any) => any
     ? ReturnType<T[E]>
     : never;
@@ -112,3 +116,13 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
     },
   );
 }
+
+export function createRemoteComponentWithInstance<T, E extends keyof T>(
+  instance: FederationHost,
+) {
+  return (info: LazyRemoteComponentInfo<T, E>) => {
+    return createLazyRemoteComponent({ ...info, instance });
+  };
+}
+
+export type CreateRemoteComponent = typeof createRemoteComponent;

package/src/index.ts

@@ -1,5 +1,24 @@
-export { createRemoteComponent } from './create';
-export { createBridgeComponent } from './provider';
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
+import { createRemoteComponentWithInstance } from './create';
+import { createBridgeComponentWithInstance } from './provider';
+import type { CreateRemoteComponent } from './create';
+import type { CreateBridgeComponent } from './provider';
+
+let createRemoteComponent: CreateRemoteComponent;
+let createBridgeComponent: CreateBridgeComponent;
+function BridgeReactPlugin(): FederationRuntimePlugin {
+  return {
+    name: 'bridge-react-plugin',
+    beforeInit(args) {
+      // @ts-ignore
+      createRemoteComponent = createRemoteComponentWithInstance(args.origin);
+      createBridgeComponent = createBridgeComponentWithInstance(args.origin);
+      return args;
+    },
+  };
+}
+
+export { BridgeReactPlugin, createRemoteComponent, createBridgeComponent };
 export type {
   ProviderParams,
   RenderFnParams,

package/src/plugin.ts

@@ -0,0 +1,2 @@
+import { BridgeReactPlugin } from './index';
+export default BridgeReactPlugin;

package/src/provider.tsx

@@ -9,7 +9,7 @@ import type {
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
 import { LoggerInstance, atLeastReact18 } from './utils';
-import { getInstance } from '@module-federation/runtime';
+import type { FederationHost } from '@module-federation/runtime';
 
 type RenderParams = RenderFnParams & {
   [key: string]: unknown;
@@ -26,13 +26,17 @@ type ProviderFnParams<T> = {
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
+  instance?: FederationHost;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
-    const instance = getInstance();
-    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const { instance } = bridgeInfo;
+    LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance,
+    );
 
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -95,7 +99,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
-
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
@@ -103,7 +106,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-
         instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
 
         // call destroy function
@@ -115,7 +117,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
 
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+        (instance as any)?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(
+          info,
+        );
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},
@@ -130,3 +134,11 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
+
+export function createBridgeComponentWithInstance<T>(instance: FederationHost) {
+  return (bridgeInfo: ProviderFnParams<T>) => {
+    return createBridgeComponent({ ...bridgeInfo, instance });
+  };
+}
+
+export type CreateBridgeComponent = typeof createBridgeComponent;

package/src/remote/index.tsx

@@ -10,7 +10,7 @@ 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 { getInstance } from '@module-federation/runtime';
+import type { FederationHost } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -34,6 +34,7 @@ interface RemoteAppParams {
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  instance: FederationHost;
 }
 
 const RemoteAppWrapper = forwardRef(function (
@@ -50,6 +51,7 @@ const RemoteAppWrapper = forwardRef(function (
       className,
       style,
       fallback,
+      instance,
       ...resProps
     } = props;
 
@@ -60,8 +62,7 @@ const RemoteAppWrapper = forwardRef(function (
 
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
-    const hostInstance = getInstance();
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+    LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
 
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
@@ -84,18 +85,16 @@ const RemoteAppWrapper = forwardRef(function (
 
         LoggerInstance.log(
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance,
+          instance,
         );
         const beforeBridgeRenderRes =
-          hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
             renderProps,
           ) || {};
         // @ts-ignore
         renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(
-          renderProps,
-        );
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
       });
 
       return () => {
@@ -107,7 +106,7 @@ const RemoteAppWrapper = forwardRef(function (
               { moduleName, basename, dom: renderDom.current },
             );
 
-            hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+            instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -121,7 +120,7 @@ const RemoteAppWrapper = forwardRef(function (
               dom: renderDom.current,
             });
 
-            hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+            instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,

package/src/router-v5.tsx

@@ -36,7 +36,7 @@ function WraperRouter(
 }
 
 // @ts-ignore
-// cause export directly from react-router-dom/index.js will cause build falied.
+// because export directly from react-router-dom/index.js will cause build falied.
 // it will be replace by react-router-dom/index.js in building phase
 export * from 'react-router-dom/';
 

package/src/router-v6.tsx

@@ -69,6 +69,7 @@ function WraperRouterProvider(
   }
 }
 
-export * from 'react-router-dom/dist/index.js';
+// export * from 'react-router-dom/dist/index.js';
+export * from 'react-router-dom/';
 export { WraperRouter as BrowserRouter };
 export { WraperRouterProvider as RouterProvider };

package/src/utils.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FederationHost } from '@module-federation/runtime';
 import { createLogger } from '@module-federation/sdk';
 
 export const LoggerInstance = createLogger(

package/vite.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
+// import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dts from 'vite-plugin-dts';
-import react from '@vitejs/plugin-react';
+// import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
 
 const perDepsKeys = Object.keys(packageJson.peerDependencies);
@@ -21,6 +21,7 @@ export default defineConfig({
     lib: {
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
+        plugin: path.resolve(__dirname, 'src/plugin.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'),
@@ -36,7 +37,6 @@ export default defineConfig({
         'react-router-dom/',
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
-        '@module-federation/runtime',
       ],
       plugins: [
         {
@@ -44,13 +44,13 @@ export default defineConfig({
           generateBundle(options, bundle) {
             for (const fileName in bundle) {
               const chunk = bundle[fileName];
-              // if (fileName.includes('router-v6') && chunk.type === 'chunk') {
-              //   chunk.code = chunk.code.replace(
-              //     // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
-              //     /react-router-dom\/(?=[\'\"\`])/g,
-              //     'react-router-dom/dist/index.js',
-              //   );
-              // }
+              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/dist/index.js',
+                );
+              }
 
               if (fileName.includes('router-v5') && chunk.type === 'chunk') {
                 chunk.code = chunk.code.replace(