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

package/CHANGELOG.md

@@ -1,16 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241108091829
+## 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-20241108091829
-  - @module-federation/sdk@0.0.0-next-20241108091829
-  - @module-federation/bridge-shared@0.0.0-next-20241108091829
+  - @module-federation/sdk@0.0.0-next-20241111073908
+  - @module-federation/bridge-shared@0.0.0-next-20241111073908
 
 ## 0.7.0
 

package/dist/index.cjs.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 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,9 +121,21 @@ function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
+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)
+    );
+  }
+  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 {
@@ -140,6 +151,8 @@ 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, _e, _f;
@@ -158,10 +171,18 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+        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 = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(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);
@@ -172,7 +193,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_d = (_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_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,
@@ -184,7 +205,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
               moduleName,
               dom: renderDom.current
             });
-            (_h = (_g = (_f = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_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,
@@ -356,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;
@@ -370,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, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -382,10 +411,7 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        const moduleNameWithoutExpose = context.getModuleName(moduleName);
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        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 = (
@@ -416,22 +442,14 @@ 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) || ((_d = params == null ? void 0 : params.hooks) == null ? void 0 : _d.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, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const moduleNameWithoutExpose = context.getModuleName(info.moduleName);
-        context.LoggerInstance.log(
-          `createBridgeComponent remote module without expose name >>>`,
-          moduleNameWithoutExpose
-        );
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        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)) {

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

@@ -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 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,9 +102,21 @@ function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
+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)
+    );
+  }
+  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 {
@@ -121,6 +132,8 @@ 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, _e, _f;
@@ -139,10 +152,18 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+        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 = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(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);
@@ -153,7 +174,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_d = (_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_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,
@@ -165,7 +186,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
               moduleName,
               dom: renderDom.current
             });
-            (_h = (_g = (_f = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_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,
@@ -337,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;
@@ -351,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, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -363,10 +392,7 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        const moduleNameWithoutExpose = getModuleName(moduleName);
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        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 = (
@@ -397,22 +423,14 @@ 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) || ((_d = params == null ? void 0 : params.hooks) == null ? void 0 : _d.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, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const moduleNameWithoutExpose = getModuleName(info.moduleName);
-        LoggerInstance.log(
-          `createBridgeComponent remote module without expose name >>>`,
-          moduleNameWithoutExpose
-        );
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241108091829",
+  "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-20241108091829",
-    "@module-federation/sdk": "0.0.0-next-20241108091829"
+    "@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-20241108091829"
+    "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

@@ -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,10 +70,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           ...propsInfo
         } = info;
 
-        const moduleNameWithoutExpose = getModuleName(moduleName);
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose,
-        );
+        const instance = getModuleInstance(moduleName);
         LoggerInstance.log(`createBridgeComponent remote instance`, instance);
 
         const beforeBridgeRenderRes =
@@ -103,27 +109,17 @@ 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 moduleNameWithoutExpose = getModuleName(info.moduleName);
-        LoggerInstance.log(
-          `createBridgeComponent remote module without expose name >>>`,
-          moduleNameWithoutExpose,
-        );
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose,
-        );
+        const instance = getModuleInstance(info.moduleName);
         LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-
         instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
+
         // call destroy function
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);

package/src/remote/index.tsx

@@ -9,8 +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, getRootDomDefaultClassName } from '../utils';
-import { getInstance } from '@module-federation/runtime';
+import {
+  LoggerInstance,
+  pathJoin,
+  getModuleName,
+  getRootDomDefaultClassName,
+} from '../utils';
+import { FederationHost } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -36,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 {
@@ -62,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(() => {
@@ -82,13 +104,20 @@ const RemoteAppWrapper = forwardRef(function (
           renderProps,
         );
 
-        // TODO: 寻找当前 remote 实例上的 hostName, 找到 host instance
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          hostInstance,
+        );
         const beforeBridgeRenderRes =
-          host?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
-          {};
+          hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+            renderProps,
+          ) || {};
+        // @ts-ignore
         renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        host?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
+        hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(
+          renderProps,
+        );
       });
 
       return () => {
@@ -99,7 +128,8 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
-            host?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+
+            hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -107,12 +137,13 @@ const RemoteAppWrapper = forwardRef(function (
               fallback,
               ...resProps,
             });
+
             providerInfoRef.current?.destroy({
               moduleName,
               dom: renderDom.current,
             });
 
-            host?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+            hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,