@module-federation/bridge-react 0.0.0-next-20241101074502 → 0.0.0-next-20241101093646

package/CHANGELOG.md

@@ -1,32 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241101074502
+## 0.0.0-next-20241101093646
 
 ### Patch Changes
 
-- @module-federation/sdk@0.0.0-next-20241101074502
-- @module-federation/bridge-shared@0.0.0-next-20241101074502
-
-## 0.6.14
-
-### Patch Changes
-
-- ad605d2: chore: unified logger
-- Updated dependencies [ad605d2]
-  - @module-federation/bridge-shared@0.6.14
-  - @module-federation/sdk@0.6.14
-
-## 0.6.13
-
-### Patch Changes
-
-- @module-federation/bridge-shared@0.6.13
-
-## 0.6.12
-
-### Patch Changes
-
-- @module-federation/bridge-shared@0.6.12
+- 3082116: feat: support module isolated reported
+- Updated dependencies [3082116]
+  - @module-federation/runtime@0.0.0-next-20241101093646
+  - @module-federation/bridge-shared@0.0.0-next-20241101093646
 
 ## 0.6.11
 

package/dist/context--mtFt3tp.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const React = require("react");
+var a = Object.defineProperty;
+var c = (s, e, t) => e in s ? a(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
+var i = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+class g {
+  constructor(e) {
+    i(this, "name");
+    i(this, "isDebugEnabled");
+    i(this, "color");
+    this.name = e, this.isDebugEnabled = false, this.color = this.stringToColor(e), typeof window < "u" && typeof localStorage < "u" && (this.isDebugEnabled = localStorage.getItem("debug") === "true"), typeof process < "u" && process.env && (this.isDebugEnabled = process.env.DEBUG === "true");
+  }
+  log(...e) {
+    var t, n;
+    if (this.isDebugEnabled) {
+      const o = `color: ${this.color}; font-weight: bold`, l = `%c[${this.name}]`, r = ((n = (t = new Error().stack) == null ? void 0 : t.split(`
+`)[2]) == null ? void 0 : n.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(l, o, ...e, `
+ (${r})`);
+    }
+  }
+  stringToColor(e) {
+    let t = 0;
+    for (let o = 0; o < e.length; o++)
+      t = e.charCodeAt(o) + ((t << 5) - t);
+    let n = "#";
+    for (let o = 0; o < 3; o++) {
+      const l = t >> o * 8 & 255;
+      n += ("00" + l.toString(16)).substr(-2);
+    }
+    return n;
+  }
+}
+function f() {
+  const s = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(s);
+}
+const LoggerInstance = new g("bridge-react");
+function atLeastReact18(React2) {
+  if (React2 && typeof React2.version === "string" && React2.version.indexOf(".") >= 0) {
+    const majorVersionString = React2.version.split(".")[0];
+    try {
+      return Number(majorVersionString) >= 18;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
+const RouterContext = React.createContext(null);
+exports.LoggerInstance = LoggerInstance;
+exports.RouterContext = RouterContext;
+exports.atLeastReact18 = atLeastReact18;
+exports.f = f;
+exports.pathJoin = pathJoin;

package/dist/context-Bw2PEwa6.js

@@ -0,0 +1,74 @@
+import React__default from "react";
+var a = Object.defineProperty;
+var c = (s, e, t) => e in s ? a(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
+var i = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+class g {
+  constructor(e) {
+    i(this, "name");
+    i(this, "isDebugEnabled");
+    i(this, "color");
+    this.name = e, this.isDebugEnabled = false, this.color = this.stringToColor(e), typeof window < "u" && typeof localStorage < "u" && (this.isDebugEnabled = localStorage.getItem("debug") === "true"), typeof process < "u" && process.env && (this.isDebugEnabled = process.env.DEBUG === "true");
+  }
+  log(...e) {
+    var t, n;
+    if (this.isDebugEnabled) {
+      const o = `color: ${this.color}; font-weight: bold`, l = `%c[${this.name}]`, r = ((n = (t = new Error().stack) == null ? void 0 : t.split(`
+`)[2]) == null ? void 0 : n.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(l, o, ...e, `
+ (${r})`);
+    }
+  }
+  stringToColor(e) {
+    let t = 0;
+    for (let o = 0; o < e.length; o++)
+      t = e.charCodeAt(o) + ((t << 5) - t);
+    let n = "#";
+    for (let o = 0; o < 3; o++) {
+      const l = t >> o * 8 & 255;
+      n += ("00" + l.toString(16)).substr(-2);
+    }
+    return n;
+  }
+}
+function f() {
+  const s = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(s);
+}
+const LoggerInstance = new g("bridge-react");
+function atLeastReact18(React2) {
+  if (React2 && typeof React2.version === "string" && React2.version.indexOf(".") >= 0) {
+    const majorVersionString = React2.version.split(".")[0];
+    try {
+      return Number(majorVersionString) >= 18;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
+const RouterContext = React__default.createContext(null);
+export {
+  LoggerInstance as L,
+  RouterContext as R,
+  atLeastReact18 as a,
+  f,
+  pathJoin as p
+};

package/dist/index.cjs.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-BVnJi3LE.cjs");
+const context = require("./context--mtFt3tp.cjs");
 const ReactRouterDOM = require("react-router-dom");
+const runtime = require("@module-federation/runtime");
 const ReactDOM = require("react-dom");
-function _interopNamespaceDefault(e2) {
+function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e2) {
-    for (const k in e2) {
+  if (e) {
+    for (const k in e) {
       if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e2, k);
+        const d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: () => e2[k]
+          get: () => e[k]
         });
       }
     }
   }
-  n.default = e2;
+  n.default = e;
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
@@ -117,11 +118,20 @@ function hasArrayChanged() {
   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 getModuleName = (id) => {
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  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 +149,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,34 +165,55 @@ 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
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.6.14";
+  RemoteApp2["__APP_VERSION__"] = "0.6.11";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -238,7 +270,7 @@ function withRouterData(WrappedComponent) {
             name: props.name,
             pathname: location.pathname
           });
-          e();
+          context.f();
         }
         setPathname(location.pathname);
       }, [location]);
@@ -331,7 +363,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 +379,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
+        var _a, _b;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -356,6 +389,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 +402,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
           ))
         );
@@ -384,11 +420,19 @@ 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
         });
+        if ((bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) && typeof (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) === "function") {
+          bridgeInfo.hooks.beforeBridgeDestroy(info);
+        }
+        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 +440,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-9t7opEwi.js";
+import { L as LoggerInstance, p as pathJoin, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.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 = {
@@ -98,11 +99,20 @@ function hasArrayChanged() {
   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 getModuleName = (id) => {
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  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 +130,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,34 +146,55 @@ 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
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.6.14";
+  RemoteApp2["__APP_VERSION__"] = "0.6.11";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -219,7 +251,7 @@ function withRouterData(WrappedComponent) {
             name: props.name,
             pathname: location.pathname
           });
-          e();
+          f();
         }
         setPathname(location.pathname);
       }, [location]);
@@ -312,7 +344,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 +360,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
+        var _a, _b;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -337,6 +370,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 +383,7 @@ function createBridgeComponent(bridgeInfo) {
                 basename,
                 memoryRoute
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
           ))
         );
@@ -365,11 +401,19 @@ 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
         });
+        if ((bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) && typeof (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) === "function") {
+          bridgeInfo.hooks.beforeBridgeDestroy(info);
+        }
+        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 +421,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-BVnJi3LE.cjs");
+const context = require("./context--mtFt3tp.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-9t7opEwi.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.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-BVnJi3LE.cjs");
+const context = require("./context--mtFt3tp.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-9t7opEwi.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};