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

package/dist/index.es.js

@@ -1,6 +1,431 @@
-import { B, a, c } from "./plugin-qjDRExZS.js";
+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 = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+function e() {
+  const t = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(t);
+}
+const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const RemoteApp2 = () => {
+    LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...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);
+    useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+        let renderProps = {
+          moduleName,
+          dom: rootRef.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent render >>>`,
+          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 = 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, _g, _h;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            LoggerInstance.log(
+              `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({
+              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}`;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: rootComponentClassName,
+        style: props == null ? void 0 : props.style,
+        ref: rootRef
+      }
+    );
+  };
+  RemoteApp2["__APP_VERSION__"] = "0.7.4";
+  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
+});
+function withRouterData(WrappedComponent) {
+  const Component2 = forwardRef(function(props, ref) {
+    var _a;
+    let enableDispathPopstate = false;
+    let routerContextVal;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } catch {
+      enableDispathPopstate = false;
+    }
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = pathJoin(basename, pathnameBase || "/");
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+        }
+        if (match) {
+          basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
+        }
+      }
+    }
+    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM.useLocation();
+      const [pathname, setPathname] = useState(location.pathname);
+      useEffect(() => {
+        if (pathname !== "" && pathname !== location.pathname) {
+          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+            name: props.name,
+            pathname: location.pathname
+          });
+          e();
+        }
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
+  });
+  return forwardRef(function(props, ref) {
+    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
+  });
+}
+const RemoteApp = withRouterData(RemoteAppWrapper);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React__default.lazy(async () => {
+    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m2 = await info.loader();
+      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m2, exportName }
+      );
+      const exportFn = m2[exportName];
+      if (exportName in m2 && typeof exportFn === "function") {
+        const RemoteAppComponent = forwardRef((props, ref) => {
+          return /* @__PURE__ */ React__default.createElement(
+            RemoteApp,
+            {
+              moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              fallback: info.fallback,
+              ref,
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m2, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+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 })));
+    }
+  );
+}
+var client = {};
+var m = ReactDOM;
+if (process.env.NODE_ENV === "production") {
+  client.createRoot = m.createRoot;
+  client.hydrateRoot = m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  client.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  client.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  return () => {
+    const rootMap = /* @__PURE__ */ new Map();
+    const instance = getInstance();
+    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const RawComponent = (info) => {
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
+    };
+    return {
+      async render(info) {
+        var _a, _b, _c, _d, _e, _f;
+        LoggerInstance.log(`createBridgeComponent render Info`, info);
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          fallback,
+          ...propsInfo
+        } = info;
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
+        const rootComponentWithErrorBoundary = (
+          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
+          /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename,
+                memoryRoute
+              },
+              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+            }
+          ))
+        );
+        if (atLeastReact18(React)) {
+          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+            Promise.resolve(
+              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+            ).then((root) => rootMap.set(info.dom, root));
+          } else {
+            const root = client.createRoot(info.dom);
+            root.render(rootComponentWithErrorBoundary);
+            rootMap.set(info.dom, root);
+          }
+        } else {
+          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
+        }
+        ((_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
+        });
+        (_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();
+          rootMap.delete(info.dom);
+        } 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);
+      },
+      rawComponent: bridgeInfo.rootComponent,
+      __BRIDGE_FN__: (_args) => {
+      }
+    };
+  };
+}
 export {
-  B as BridgeReactPlugin,
-  a as createBridgeComponent,
-  c as createRemoteComponent
+  createBridgeComponent,
+  createRemoteComponent
 };

package/dist/router-v6.cjs.js

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

package/dist/router-v6.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
-import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
+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-CUbFnlO5.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$1.MemoryRouter,
+      ReactRouterDom.MemoryRouter,
       {
         ...props,
         initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
@@ -20,7 +20,7 @@ function WraperRouter(props) {
     );
   }
   return /* @__PURE__ */ React__default.createElement(
-    ReactRouterDom$1.BrowserRouter,
+    ReactRouterDom.BrowserRouter,
     {
       ...propsRes,
       basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
@@ -37,9 +37,9 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
-  const RouterProvider = ReactRouterDom$1["RouterProvider"];
-  const createMemoryRouter = ReactRouterDom$1["createMemoryRouter"];
-  const createBrowserRouter = ReactRouterDom$1["createBrowserRouter"];
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["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-20241118092546",
+  "version": "0.0.0-next-20241118100312",
   "publishConfig": {
     "access": "public"
   },
@@ -26,11 +26,6 @@
       "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",
@@ -46,8 +41,9 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241118092546",
-    "@module-federation/sdk": "0.0.0-next-20241118092546"
+    "@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"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -67,8 +63,7 @@
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1",
-    "@module-federation/runtime": "0.0.0-next-20241118092546"
+    "vite-plugin-dts": "^3.9.1"
   },
   "scripts": {
     "dev": "vite",

package/src/create.tsx

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

package/src/index.ts

@@ -1,7 +1,5 @@
 export { createRemoteComponent } from './create';
 export { createBridgeComponent } from './provider';
-export { default as BridgeReactPlugin } from './plugin';
-
 export type {
   ProviderParams,
   RenderFnParams,

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 type { FederationHost } from '@module-federation/runtime';
+import { getInstance } from '@module-federation/runtime';
 
 type RenderParams = RenderFnParams & {
   [key: string]: unknown;
@@ -26,17 +26,13 @@ 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 } = bridgeInfo;
-    LoggerInstance.log(
-      `createBridgeComponent instance from props >>>`,
-      instance,
-    );
+    const instance = getInstance();
+    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
 
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -99,6 +95,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
+
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
@@ -106,6 +103,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
+
         instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
 
         // call destroy function
@@ -117,9 +115,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
 
-        (instance as any)?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(
-          info,
-        );
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},