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

package/CHANGELOG.md

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

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

@@ -329,27 +329,8 @@ 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/{context-Dh6IUBWT.js → context-BcyT-d0V.js}

@@ -328,29 +328,10 @@ 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,
-  getModuleName as a,
-  atLeastReact18 as b,
-  getRootDomDefaultClassName as g,
+  atLeastReact18 as a,
   pathJoin as p
 };

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 const ReactRouterDOM = require("react-router-dom");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e2) {
@@ -121,20 +121,6 @@ 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 RemoteApp2 = () => {
     context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
@@ -151,14 +137,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, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        let renderProps = {
+        const renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -171,63 +154,34 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           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 = 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;
+          var _a, _b;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             context.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,
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
               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 = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: rootComponentClassName,
+        className: props == null ? void 0 : props.className,
         style: props == null ? void 0 : props.style,
         ref: rootRef
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.7.0";
+  RemoteApp2["__APP_VERSION__"] = "0.7.2";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -391,17 +345,8 @@ 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, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -411,9 +356,6 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        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(
@@ -424,7 +366,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+              propsInfo
             }
           ))
         );
@@ -442,16 +384,11 @@ function createBridgeComponent(bridgeInfo) {
           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;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        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();
@@ -459,7 +396,6 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

package/dist/index.d.ts

@@ -5,16 +5,11 @@ import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-declare type BridgeHooks = {
-    beforeBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-    afterBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-    beforeBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-    afterBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-};
-
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderParams): Promise<void>;
-    destroy(info: DestroyParams): Promise<void>;
+    render(info: RenderFnParams & any): Promise<void>;
+    destroy(info: {
+        dom: HTMLElement;
+    }): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
@@ -26,11 +21,6 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     export?: E;
 }): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
 
-declare type DestroyParams = {
-    moduleName: string;
-    dom: HTMLElement;
-};
-
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;
     FallbackComponent: ComponentType<FallbackProps>;
@@ -58,7 +48,6 @@ declare type FallbackProps = {
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
-    hooks?: BridgeHooks;
 };
 
 export declare interface ProviderParams {
@@ -75,8 +64,6 @@ export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
 }
 
-declare type RenderParams = RenderFnParams & any;
-
 declare type RootType = HTMLElement | default_3.Root;
 
 export { }

package/dist/index.es.js

@@ -1,6 +1,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 { L as LoggerInstance, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BcyT-d0V.js";
 import * as ReactRouterDOM from "react-router-dom";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
@@ -102,20 +102,6 @@ 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 RemoteApp2 = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
@@ -132,14 +118,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, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        let renderProps = {
+        const renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -152,63 +135,34 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
           `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;
+          var _a, _b;
           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,
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
               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,
+        className: props == null ? void 0 : props.className,
         style: props == null ? void 0 : props.style,
         ref: rootRef
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.7.0";
+  RemoteApp2["__APP_VERSION__"] = "0.7.2";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -372,17 +326,8 @@ 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, _e, _f;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -392,9 +337,6 @@ function createBridgeComponent(bridgeInfo) {
           fallback,
           ...propsInfo
         } = info;
-        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(
@@ -405,7 +347,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+              propsInfo
             }
           ))
         );
@@ -423,16 +365,11 @@ function createBridgeComponent(bridgeInfo) {
           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
         });
-        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();
@@ -440,7 +377,6 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
       },
       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-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.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-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.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-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.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-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.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-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -65,7 +65,7 @@ function WrapperRouterProvider(props) {
     return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });

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-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
@@ -47,7 +47,7 @@ function WrapperRouterProvider(props) {
     return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241111073908",
+  "version": "0.0.0-next-20241112074706",
   "publishConfig": {
     "access": "public"
   },
@@ -41,8 +41,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241111073908",
-    "@module-federation/sdk": "0.0.0-next-20241111073908"
+    "@module-federation/bridge-shared": "0.0.0-next-20241112074706",
+    "@module-federation/sdk": "0.0.0-next-20241112074706"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -62,8 +62,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-20241111073908"
+    "vite-plugin-dts": "^3.9.1"
   },
   "scripts": {
     "dev": "vite",

package/src/create.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
+import type { ProviderParams } from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
-import { LoggerInstance } from './utils';
 import RemoteApp from './remote';
-import type { ProviderParams } from '@module-federation/bridge-shared';
 
 export interface RenderFnParams extends ProviderParams {
   dom?: any;

package/src/provider.tsx

@@ -2,35 +2,21 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOMClient from 'react-dom/client';
+import { RouterContext } from './context';
 import type {
   ProviderParams,
   RenderFnParams,
 } from '@module-federation/bridge-shared';
+import { LoggerInstance, atLeastReact18 } from './utils';
 import { ErrorBoundary } from 'react-error-boundary';
-import { RouterContext } from './context';
-import { LoggerInstance, atLeastReact18, getModuleName } from './utils';
 
-type RenderParams = RenderFnParams & any;
-type DestroyParams = {
-  moduleName: string;
-  dom: HTMLElement;
-};
 type RootType = HTMLElement | ReactDOMClient.Root;
-
-type BridgeHooks = {
-  beforeBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-  afterBridgeRender?: (params: RenderFnParams) => void | Record<string, any>;
-  beforeBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-  afterBridgeDestroy?: (params: DestroyParams) => void | Record<string, any>;
-};
-
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  hooks?: BridgeHooks;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
@@ -50,16 +36,8 @@ 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) {
+      async render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -69,13 +47,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           fallback,
           ...propsInfo
         } = info;
-
-        const instance = getModuleInstance(moduleName);
-        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-
-        const beforeBridgeRenderRes =
-          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
-
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           <ErrorBoundary FallbackComponent={fallback}>
@@ -85,13 +56,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 basename,
                 memoryRoute,
               }}
-              propsInfo={
-                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
-              }
+              propsInfo={propsInfo}
             />
           </ErrorBoundary>
         );
-        // call render function
+
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -108,19 +77,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
-
-        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
-
-      async destroy(info: DestroyParams) {
+      async destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-        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);
           (root as ReactDOMClient.Root)?.unmount();
@@ -128,8 +89,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -7,15 +7,9 @@ import React, {
 } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
+import { LoggerInstance, pathJoin } from '../utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
-import {
-  LoggerInstance,
-  pathJoin,
-  getModuleName,
-  getRootDomDefaultClassName,
-} from '../utils';
-import { FederationHost } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -41,23 +35,6 @@ 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,
@@ -82,15 +59,13 @@ 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(() => {
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
 
-        let renderProps = {
+        const renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -103,21 +78,7 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
-
-        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 () => {
@@ -128,39 +89,17 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
-
-            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,
             });
           }
         });
       };
     }, []);
 
-    // bridge-remote-root
-    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props?.className}`;
     return (
       <div
-        className={rootComponentClassName}
+        className={props?.className}
         style={props?.style}
         ref={rootRef}
       ></div>

package/src/router-v5.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 // The upper alias react-router-dom$ into this file avoids the loop
 // @ts-ignore
 import * as ReactRouterDom from 'react-router-dom/index.js';
+
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 

package/src/router.tsx

@@ -59,7 +59,7 @@ function WrapperRouterProvider(
     return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || router?.basename,
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window,
     });

package/src/utils.ts

@@ -41,24 +41,3 @@ 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}`;
-};