@module-federation/bridge-react 0.0.0-next-20241107072243 → 0.0.0-next-20241111073908

package/CHANGELOG.md

@@ -1,16 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241107072243
+## 0.0.0-next-20241111073908
 
 ### Patch Changes
 
 - 3082116: feat: feat: support lifecycyle hooks in module-deferation bridge
-- Updated dependencies [8712967]
 - Updated dependencies [6db4c5f]
-- Updated dependencies [3082116]
-  - @module-federation/runtime@0.0.0-next-20241107072243
-  - @module-federation/sdk@0.0.0-next-20241107072243
-  - @module-federation/bridge-shared@0.0.0-next-20241107072243
+  - @module-federation/sdk@0.0.0-next-20241111073908
+  - @module-federation/bridge-shared@0.0.0-next-20241111073908
 
 ## 0.7.0
 

package/dist/{context-BcyT-d0V.js → context-Dh6IUBWT.js}

@@ -328,10 +328,29 @@ function pathJoin(...args) {
   }, "");
   return res || "/";
 }
+const getModuleName = (id) => {
+  if (!id) {
+    return id;
+  }
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,
-  atLeastReact18 as a,
+  getModuleName as a,
+  atLeastReact18 as b,
+  getRootDomDefaultClassName as g,
   pathJoin as p
 };

package/dist/{context-BBLu8BlQ.cjs → context-DmzxwI_7.cjs}

@@ -329,8 +329,27 @@ function pathJoin(...args) {
   }, "");
   return res || "/";
 }
+const getModuleName = (id) => {
+  if (!id) {
+    return id;
+  }
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
 exports.atLeastReact18 = atLeastReact18;
+exports.getModuleName = getModuleName;
+exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
 exports.pathJoin = pathJoin;

package/dist/index.cjs.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-BBLu8BlQ.cjs");
+const context = require("./context-DmzxwI_7.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" } });
@@ -122,23 +121,21 @@ function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
-const getModuleName = (id) => {
-  const idArray = id.split("/");
-  if (idArray.length < 2) {
-    return id;
-  }
-  return idArray[0] + "/" + idArray[1];
-};
-const getRootDomDefaultClassName = (moduleName) => {
-  if (!moduleName) {
-    return "";
+const getHostInstance = (moduleName) => {
+  var _a, _b;
+  let hostInstance = void 0;
+  const currentName = context.getModuleName(moduleName);
+  const remoteInstance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
+    (v) => v.name === currentName
+  );
+  if (remoteInstance && (remoteInstance == null ? void 0 : remoteInstance.hostName)) {
+    hostInstance = window.__VMOK__.__INSTANCES__.find(
+      (instance) => instance.name === (remoteInstance == null ? void 0 : remoteInstance.hostName)
+    );
   }
-  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
-  return `bridge-root-component-${name}`;
+  return hostInstance;
 };
 const RemoteAppWrapper = React.forwardRef(function(props, ref) {
-  const host = runtime.getInstance();
-  context.LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
     context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -154,9 +151,11 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     const rootRef = ref && "current" in ref ? ref : React.useRef(null);
     const renderDom = React.useRef(null);
     const providerInfoRef = React.useRef(null);
+    const hostInstance = getHostInstance(moduleName);
+    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
         let renderProps = {
@@ -172,46 +171,53 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
-          const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
-            ...renderProps
-          });
-          const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
-          renderProps = {
-            ...renderProps,
-            ...extraProps
-          };
-        }
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          hostInstance
+        );
+        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(
+          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
+        );
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             context.LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
-              (_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
-                moduleName,
-                dom: renderDom.current,
-                basename,
-                memoryRoute,
-                fallback,
-                ...resProps
-              });
-            }
-            (_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
+            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
               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({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
           }
         });
       };
     }, []);
-    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
+    const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -371,7 +377,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  return (params) => {
+  return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -385,9 +391,17 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
+    const getModuleInstance = (moduleName) => {
+      var _a, _b;
+      const moduleNameWithoutExpose = context.getModuleName(moduleName);
+      const instance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
+        (v) => v.name === moduleNameWithoutExpose
+      );
+      return instance;
+    };
     return {
       async render(info) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -397,9 +411,9 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
-        const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
-        const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
+        const instance = getModuleInstance(moduleName);
+        context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
@@ -410,7 +424,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo: { ...propsInfo, ...extraProps }
+              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
             }
           ))
         );
@@ -428,16 +442,16 @@ function createBridgeComponent(bridgeInfo) {
           const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-        const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
-        afterBridgeRender && afterBridgeRender(info);
+        ((_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)) || {};
       },
       async destroy(info) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
-        beforeBridgeDestroy && beforeBridgeDestroy(info);
+        const instance = getModuleInstance(info.moduleName);
+        context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
         if (context.atLeastReact18(React__namespace)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
@@ -445,8 +459,7 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
-        afterBridgeDestroy && afterBridgeDestroy(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) => {

package/dist/index.d.ts

@@ -12,9 +12,7 @@ declare type BridgeHooks = {
     afterBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
 };
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): (params?: {
-    hooks?: BridgeHooks;
-}) => {
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): Promise<void>;
     rawComponent: React_2.ComponentType<T>;

package/dist/index.es.js

@@ -1,8 +1,7 @@
 import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { L as LoggerInstance, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BcyT-d0V.js";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as getModuleName, b as atLeastReact18, R as RouterContext } from "./context-Dh6IUBWT.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 = {
@@ -103,23 +102,21 @@ function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
-const getModuleName = (id) => {
-  const idArray = id.split("/");
-  if (idArray.length < 2) {
-    return id;
-  }
-  return idArray[0] + "/" + idArray[1];
-};
-const getRootDomDefaultClassName = (moduleName) => {
-  if (!moduleName) {
-    return "";
+const getHostInstance = (moduleName) => {
+  var _a, _b;
+  let hostInstance = void 0;
+  const currentName = getModuleName(moduleName);
+  const remoteInstance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
+    (v) => v.name === currentName
+  );
+  if (remoteInstance && (remoteInstance == null ? void 0 : remoteInstance.hostName)) {
+    hostInstance = window.__VMOK__.__INSTANCES__.find(
+      (instance) => instance.name === (remoteInstance == null ? void 0 : remoteInstance.hostName)
+    );
   }
-  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
-  return `bridge-root-component-${name}`;
+  return hostInstance;
 };
 const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const host = getInstance();
-  LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -135,9 +132,11 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     const rootRef = ref && "current" in ref ? ref : useRef(null);
     const renderDom = useRef(null);
     const providerInfoRef = useRef(null);
+    const hostInstance = getHostInstance(moduleName);
+    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
         let renderProps = {
@@ -153,41 +152,48 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
-          const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
-            ...renderProps
-          });
-          const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
-          renderProps = {
-            ...renderProps,
-            ...extraProps
-          };
-        }
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          hostInstance
+        );
+        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(
+          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
+        );
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
-              (_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
-                moduleName,
-                dom: renderDom.current,
-                basename,
-                memoryRoute,
-                fallback,
-                ...resProps
-              });
-            }
-            (_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
+            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
               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({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
           }
         });
       };
@@ -352,7 +358,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  return (params) => {
+  return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -366,9 +372,17 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
+    const getModuleInstance = (moduleName) => {
+      var _a, _b;
+      const moduleNameWithoutExpose = getModuleName(moduleName);
+      const instance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
+        (v) => v.name === moduleNameWithoutExpose
+      );
+      return instance;
+    };
     return {
       async render(info) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -378,9 +392,9 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
-        const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
-        const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
+        const instance = getModuleInstance(moduleName);
+        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
@@ -391,7 +405,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo: { ...propsInfo, ...extraProps }
+              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
             }
           ))
         );
@@ -409,16 +423,16 @@ function createBridgeComponent(bridgeInfo) {
           const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-        const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
-        afterBridgeRender && afterBridgeRender(info);
+        ((_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)) || {};
       },
       async destroy(info) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
-        beforeBridgeDestroy && beforeBridgeDestroy(info);
+        const instance = getModuleInstance(info.moduleName);
+        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
@@ -426,8 +440,7 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
-        afterBridgeDestroy && afterBridgeDestroy(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) => {

package/dist/router-v5.cjs.js

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

package/dist/router-v5.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Dh6IUBWT.js";
 export * from "react-router-dom/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router-v6.cjs.js

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

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 { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Dh6IUBWT.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/dist/router.cjs.js

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

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Dh6IUBWT.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241107072243",
+  "version": "0.0.0-next-20241111073908",
   "publishConfig": {
     "access": "public"
   },
@@ -41,14 +41,13 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241107072243",
-    "@module-federation/sdk": "0.0.0-next-20241107072243"
+    "@module-federation/bridge-shared": "0.0.0-next-20241111073908",
+    "@module-federation/sdk": "0.0.0-next-20241111073908"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20241107072243"
+    "react-router-dom": ">=4"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -63,7 +62,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-20241111073908"
   },
   "scripts": {
     "dev": "vite",

package/src/provider.tsx

@@ -8,7 +8,7 @@ import type {
 } from '@module-federation/bridge-shared';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
-import { LoggerInstance, atLeastReact18 } from './utils';
+import { LoggerInstance, atLeastReact18, getModuleName } from './utils';
 
 type RenderParams = RenderFnParams & any;
 type DestroyParams = {
@@ -32,8 +32,9 @@ type ProviderFnParams<T> = {
   ) => RootType | Promise<RootType>;
   hooks?: BridgeHooks;
 };
+
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
-  return (params?: { hooks?: BridgeHooks }) => {
+  return () => {
     const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -49,6 +50,14 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
       );
     };
 
+    const getModuleInstance = (moduleName: string) => {
+      const moduleNameWithoutExpose = getModuleName(moduleName);
+      const instance = window?.__FEDERATION__?.__INSTANCES__?.find(
+        (v) => v.name === moduleNameWithoutExpose,
+      );
+      return instance;
+    };
+
     return {
       async render(info: RenderParams) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -61,19 +70,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           ...propsInfo
         } = info;
 
-        const beforeBridgeRender =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeRender) ||
-          params?.hooks?.beforeBridgeRender;
+        const instance = getModuleInstance(moduleName);
+        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
 
-        // you can return a props object through beforeBridgeRender to pass additional props parameters
         const beforeBridgeRenderRes =
-          beforeBridgeRender && beforeBridgeRender(info);
-        const extraProps =
-          beforeBridgeRenderRes &&
-          typeof beforeBridgeRenderRes === 'object' &&
-          beforeBridgeRenderRes?.extraProps
-            ? beforeBridgeRenderRes?.extraProps
-            : {};
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
@@ -84,7 +85,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 basename,
                 memoryRoute,
               }}
-              propsInfo={{ ...propsInfo, ...extraProps } as T}
+              propsInfo={
+                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
+              }
             />
           </ErrorBoundary>
         );
@@ -106,21 +109,16 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
 
-        const afterBridgeRender =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeRender;
-        afterBridgeRender && afterBridgeRender(info);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
       async destroy(info: DestroyParams) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-
-        const beforeBridgeDestroy =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeDestroy) ||
-          params?.hooks?.beforeBridgeDestroy;
-        beforeBridgeDestroy && beforeBridgeDestroy(info);
+        const instance = getModuleInstance(info.moduleName);
+        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
 
         // call destroy function
         if (atLeastReact18(React)) {
@@ -131,10 +129,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
 
-        const afterBridgeDestroy =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeDestroy;
-        afterBridgeDestroy && afterBridgeDestroy(info);
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -9,26 +9,13 @@ 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 } from '../utils';
-import { getInstance } from '@module-federation/runtime';
-
-export const getModuleName = (id: string) => {
-  // separate module name without detailed module path
-  // @vmok-e2e/edenx-demo-app2/button -> @vmok-e2e/edenx-demo-app2
-  const idArray = id.split('/');
-  if (idArray.length < 2) {
-    return id;
-  }
-  return idArray[0] + '/' + idArray[1];
-};
-
-export const getRootDomDefaultClassName = (moduleName: string) => {
-  if (!moduleName) {
-    return '';
-  }
-  const name = getModuleName(moduleName).replace(/\@/, '').replace(/\//, '-');
-  return `bridge-root-component-${name}`;
-};
+import {
+  LoggerInstance,
+  pathJoin,
+  getModuleName,
+  getRootDomDefaultClassName,
+} from '../utils';
+import { FederationHost } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -54,12 +41,27 @@ interface RemoteAppParams {
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
 }
 
+const getHostInstance = (moduleName: string) => {
+  let hostInstance: FederationHost | undefined = undefined;
+  const currentName = getModuleName(moduleName);
+  const remoteInstance = window?.__FEDERATION__?.__INSTANCES__?.find(
+    (v) => v.name === currentName,
+  );
+
+  // @ts-ignore
+  if (remoteInstance && remoteInstance?.hostName) {
+    // @ts-ignore
+    hostInstance = window.__VMOK__.__INSTANCES__.find(
+      (instance) => instance.name === remoteInstance?.hostName,
+    );
+  }
+  return hostInstance;
+};
+
 const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
-  const host = getInstance();
-  LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -80,6 +82,8 @@ const RemoteAppWrapper = forwardRef(function (
 
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
+    const hostInstance = getHostInstance(moduleName);
+    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
 
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
@@ -100,27 +104,20 @@ const RemoteAppWrapper = forwardRef(function (
           renderProps,
         );
 
-        if (
-          host?.bridgeHook &&
-          host?.bridgeHook?.lifecycle?.beforeBridgeRender
-        ) {
-          const beforeBridgeRenderRes =
-            host?.bridgeHook?.lifecycle?.beforeBridgeRender.emit({
-              ...renderProps,
-            });
-          const extraProps =
-            beforeBridgeRenderRes &&
-            typeof beforeBridgeRenderRes === 'object' &&
-            beforeBridgeRenderRes?.extraProps
-              ? beforeBridgeRenderRes?.extraProps
-              : {};
-
-          renderProps = {
-            ...renderProps,
-            ...extraProps,
-          } as any;
-        }
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          hostInstance,
+        );
+        const beforeBridgeRenderRes =
+          hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+            renderProps,
+          ) || {};
+        // @ts-ignore
+        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
+        hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(
+          renderProps,
+        );
       });
 
       return () => {
@@ -131,23 +128,29 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
-            if (
-              host?.bridgeHook &&
-              host?.bridgeHook?.lifecycle?.afterBridgeDestroy
-            ) {
-              host?.bridgeHook?.lifecycle?.afterBridgeDestroy.emit({
-                moduleName,
-                dom: renderDom.current,
-                basename,
-                memoryRoute,
-                fallback,
-                ...resProps,
-              });
-            }
+
+            hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
+
             providerInfoRef.current?.destroy({
               moduleName,
               dom: renderDom.current,
             });
+
+            hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
           }
         });
       };

package/src/utils.ts

@@ -41,3 +41,24 @@ export function pathJoin(...args: string[]) {
   }, '');
   return res || '/';
 }
+
+export const getModuleName = (id: string) => {
+  if (!id) {
+    return id;
+  }
+  // separate module name without detailed module path
+  // @vmok-e2e/edenx-demo-app2/button -> @vmok-e2e/edenx-demo-app2
+  const idArray = id.split('/');
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + '/' + idArray[1];
+};
+
+export const getRootDomDefaultClassName = (moduleName: string) => {
+  if (!moduleName) {
+    return '';
+  }
+  const name = getModuleName(moduleName).replace(/\@/, '').replace(/\//, '-');
+  return `bridge-root-component-${name}`;
+};