@module-federation/bridge-react 0.0.0-next-20241106033302 → 0.0.0-next-20241106104434

package/CHANGELOG.md

@@ -1,11 +1,16 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241106033302
+## 0.0.0-next-20241106104434
 
 ### Patch Changes
 
-- @module-federation/sdk@0.0.0-next-20241106033302
-- @module-federation/bridge-shared@0.0.0-next-20241106033302
+- 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-20241106104434
+  - @module-federation/sdk@0.0.0-next-20241106104434
+  - @module-federation/bridge-shared@0.0.0-next-20241106104434
 
 ## 0.7.0
 

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

@@ -29,8 +29,16 @@ var supportColor = () => {
     return supportsSubstitutions;
   }
   try {
-    console.log("%c", "color:");
-    supportsSubstitutions = true;
+    const testString = "color test";
+    const css = "color: red;";
+    const originalConsoleLog = console.log;
+    console.log = (...args) => {
+      if (args[0] === `%c${testString}` && args[1] === css) {
+        supportsSubstitutions = true;
+      }
+    };
+    console.log(`%c${testString}`, css);
+    console.log = originalConsoleLog;
   } catch (e) {
     supportsSubstitutions = false;
   }

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

@@ -28,8 +28,16 @@ var supportColor = () => {
     return supportsSubstitutions;
   }
   try {
-    console.log("%c", "color:");
-    supportsSubstitutions = true;
+    const testString = "color test";
+    const css = "color: red;";
+    const originalConsoleLog = console.log;
+    console.log = (...args) => {
+      if (args[0] === `%c${testString}` && args[1] === css) {
+        supportsSubstitutions = true;
+      }
+    };
+    console.log(`%c${testString}`, css);
+    console.log = originalConsoleLog;
   } catch (e) {
     supportsSubstitutions = false;
   }

package/dist/index.cjs.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-CefGbh9w.cjs");
+const context = require("./context-BBLu8BlQ.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" } });
@@ -121,7 +122,23 @@ 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 name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 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 {
@@ -139,9 +156,10 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     const providerInfoRef = React.useRef(null);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        const renderProps = {
+        let renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -154,28 +172,49 @@ 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
+          };
+        }
         providerReturn.render(renderProps);
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             context.LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            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({
               dom: renderDom.current
             });
           }
         });
       };
     }, []);
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: props == null ? void 0 : props.className,
+        className: rootComponentClassName,
         style: props == null ? void 0 : props.style,
         ref: rootRef
       }
@@ -331,7 +370,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  return () => {
+  return (params) => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -347,6 +386,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
+        var _a, _b;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -356,6 +396,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 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(
@@ -366,7 +409,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
           ))
         );
@@ -384,11 +427,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);
       },
       async destroy(info) {
+        var _a, _b;
         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);
         if (context.atLeastReact18(React__namespace)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
@@ -396,6 +444,8 @@ 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);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

package/dist/index.d.ts

@@ -5,11 +5,18 @@ import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): Promise<void>;
-    destroy(info: {
-        dom: HTMLElement;
-    }): Promise<void>;
+declare type BridgeHooks = {
+    beforeBridgeRender?: (params: RenderFnParams) => any;
+    afterBridgeRender?: (params: RenderFnParams) => any;
+    beforeBridgeDestroy?: (params: DestroyParams) => any;
+    afterBridgeDestroy?: (params: DestroyParams) => any;
+};
+
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): (params?: {
+    hooks?: BridgeHooks;
+}) => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
@@ -21,6 +28,10 @@ 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 = {
+    dom: HTMLElement;
+};
+
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;
     FallbackComponent: ComponentType<FallbackProps>;
@@ -48,6 +59,7 @@ 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 {
@@ -64,6 +76,8 @@ 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,7 +1,8 @@
 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-DnCWjvho.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 { getInstance } from "@module-federation/runtime";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -102,7 +103,23 @@ 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 name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const host = getInstance();
+  LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -120,9 +137,10 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     const providerInfoRef = useRef(null);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        const renderProps = {
+        let renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -135,28 +153,49 @@ 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
+          };
+        }
         providerReturn.render(renderProps);
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            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({
               dom: renderDom.current
             });
           }
         });
       };
     }, []);
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: props == null ? void 0 : props.className,
+        className: rootComponentClassName,
         style: props == null ? void 0 : props.style,
         ref: rootRef
       }
@@ -312,7 +351,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  return () => {
+  return (params) => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -328,6 +367,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
+        var _a, _b;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -337,6 +377,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 rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
@@ -347,7 +390,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
           ))
         );
@@ -365,11 +408,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);
       },
       async destroy(info) {
+        var _a, _b;
         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);
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
@@ -377,6 +425,8 @@ 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);
       },
       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-CefGbh9w.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-DnCWjvho.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-CefGbh9w.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-DnCWjvho.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-CefGbh9w.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,
+      basename: routerContextProps.basename || (router == null ? void 0 : router.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-DnCWjvho.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,
+      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
       future: router.future,
       window: router.window
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241106033302",
+  "version": "0.0.0-next-20241106104434",
   "publishConfig": {
     "access": "public"
   },
@@ -41,13 +41,14 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241106033302",
-    "@module-federation/sdk": "0.0.0-next-20241106033302"
+    "@module-federation/bridge-shared": "0.0.0-next-20241106104434",
+    "@module-federation/sdk": "0.0.0-next-20241106104434"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4"
+    "react-router-dom": ">=4",
+    "@module-federation/runtime": "0.0.0-next-20241106104434"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

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,25 +2,37 @@ 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 } from './utils';
 
+type RenderParams = RenderFnParams & any;
+type DestroyParams = {
+  dom: HTMLElement;
+};
 type RootType = HTMLElement | ReactDOMClient.Root;
+
+type BridgeHooks = {
+  beforeBridgeRender?: (params: RenderFnParams) => any;
+  afterBridgeRender?: (params: RenderFnParams) => any;
+  beforeBridgeDestroy?: (params: DestroyParams) => any;
+  afterBridgeDestroy?: (params: DestroyParams) => 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>) {
-  return () => {
+  return (params?: { hooks?: BridgeHooks }) => {
     const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -37,7 +49,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
     };
 
     return {
-      async render(info: RenderFnParams & any) {
+      async render(info: RenderParams) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -47,6 +59,21 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           fallback,
           ...propsInfo
         } = info;
+
+        const beforeBridgeRender =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeRender) ||
+          params?.hooks?.beforeBridgeRender;
+
+        // 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
+            : {};
+
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           <ErrorBoundary FallbackComponent={fallback}>
@@ -56,11 +83,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 basename,
                 memoryRoute,
               }}
-              propsInfo={propsInfo}
+              propsInfo={{ ...propsInfo, ...extraProps } as T}
             />
           </ErrorBoundary>
         );
-
+        // call render function
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -77,11 +104,24 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
+
+        const afterBridgeRender =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
+          params?.hooks?.afterBridgeRender;
+        afterBridgeRender && afterBridgeRender(info);
       },
-      async destroy(info: { dom: HTMLElement }) {
+
+      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);
+
+        // call destroy function
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           (root as ReactDOMClient.Root)?.unmount();
@@ -89,6 +129,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
+
+        const afterBridgeDestroy =
+          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
+          params?.hooks?.afterBridgeDestroy;
+        afterBridgeDestroy && afterBridgeDestroy(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -7,9 +7,28 @@ 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 } 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}`;
+};
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -39,6 +58,8 @@ 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 {
@@ -65,7 +86,7 @@ const RemoteAppWrapper = forwardRef(function (
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
 
-        const renderProps = {
+        let renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -78,6 +99,27 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           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;
+        }
         providerReturn.render(renderProps);
       });
 
@@ -89,6 +131,19 @@ 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,
+              });
+            }
             providerInfoRef.current?.destroy({
               dom: renderDom.current,
             });
@@ -97,9 +152,11 @@ const RemoteAppWrapper = forwardRef(function (
       };
     }, []);
 
+    // bridge-remote-root
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props?.className}`;
     return (
       <div
-        className={props?.className}
+        className={rootComponentClassName}
         style={props?.style}
         ref={rootRef}
       ></div>

package/src/router-v5.tsx

@@ -2,7 +2,6 @@ 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,
+      basename: routerContextProps.basename || router?.basename,
       future: router.future,
       window: router.window,
     });