feat: support lifecycyle hooks in module-deferation bridge

.changeset/great-feet-rule.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/bridge-react': patch
+'@module-federation/bridge-vue3': patch
+'@module-federation/runtime': patch
+---
+
+feat: support module isolated reported

packages/bridge/bridge-react/package.json

@@ -45,7 +45,8 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4"
+    "react-router-dom": ">=4",
+    "@module-federation/runtime": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

packages/bridge/bridge-react/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;

packages/bridge/bridge-react/src/lifecycle.ts

@@ -0,0 +1,28 @@
+import { getInstance } from '@module-federation/runtime';
+import helper from '@module-federation/runtime/helpers';
+
+function registerBridgeLifeCycle() {
+  const { registerPlugins, pluginHelper } = helper.global;
+  const host = getInstance();
+  const pluginSystem = new pluginHelper.PluginSystem({
+    beforeBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], any>(),
+    afterBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], any>(),
+    beforeBridgeDestroy: new pluginHelper.SyncHook<
+      [Record<string, any>],
+      any
+    >(),
+    afterBridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], any>(),
+  });
+
+  if (host) {
+    registerPlugins<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+      host?.options?.plugins,
+      [pluginSystem],
+    );
+    return pluginSystem;
+  }
+
+  return null;
+}
+
+export { registerBridgeLifeCycle };

packages/bridge/bridge-react/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;
+
+        // 可通过beforeBridgeRender返回一个props对象，用于传递额外的 props 参数
+        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,18 +104,45 @@ 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,
         });
+
+        // call beforeBridgeDestroy hook
+        if (
+          bridgeInfo?.hooks &&
+          bridgeInfo?.hooks.beforeBridgeDestroy &&
+          typeof bridgeInfo?.hooks.beforeBridgeDestroy === 'function'
+        ) {
+          bridgeInfo.hooks.beforeBridgeDestroy(info);
+        }
+
+        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();
           rootMap.delete(info.dom);
         } 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) => {},

packages/bridge/bridge-react/src/remote/index.tsx

@@ -7,9 +7,10 @@ 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 { registerBridgeLifeCycle } from '../lifecycle';
+import { LoggerInstance, pathJoin } from '../utils';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -39,6 +40,7 @@ const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
+  const bridgeHook = registerBridgeLifeCycle();
   const RemoteApp = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -65,7 +67,7 @@ const RemoteAppWrapper = forwardRef(function (
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
 
-        const renderProps = {
+        let renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -78,6 +80,24 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
+
+        if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeRender) {
+          const beforeBridgeRenderRes =
+            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 +109,16 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
+            if (bridgeHook && bridgeHook?.lifecycle?.afterBridgeDestroy) {
+              bridgeHook?.lifecycle?.afterBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps,
+              });
+            }
             providerInfoRef.current?.destroy({
               dom: renderDom.current,
             });

packages/bridge/bridge-react/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';
 

packages/bridge/bridge-react/src/router-v6.tsx

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

packages/bridge/bridge-react/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,
     });

packages/bridge/vue3-bridge/package.json

@@ -28,7 +28,8 @@
   },
   "peerDependencies": {
     "vue": "=3",
-    "vue-router": "=3"
+    "vue-router": "=3",
+    "@module-federation/runtime": "workspace:*"
   },
   "dependencies": {
     "@module-federation/bridge-shared": "workspace:*"

packages/bridge/vue3-bridge/src/create.ts

@@ -1,7 +1,7 @@
 import { defineAsyncComponent, h } from 'vue';
+import { useRoute } from 'vue-router';
 import RemoteApp from './remoteApp.jsx';
 import { LoggerInstance } from './utils.js';
-import { useRoute } from 'vue-router';
 
 declare const __APP_VERSION__: string;
 

packages/bridge/vue3-bridge/src/lifecycle.ts

@@ -0,0 +1,29 @@
+import { getInstance } from '@module-federation/runtime';
+import helper from '@module-federation/runtime/helpers';
+
+function registerBridgeLifeCycle() {
+  const { registerPlugins, pluginHelper } = helper.global;
+  const host = getInstance();
+  const pluginSystem = new pluginHelper.PluginSystem({
+    beforeBridgeRender: new pluginHelper.SyncHook<
+      [Record<string, any>],
+      void
+    >(),
+    beforeBridgeDestroy: new pluginHelper.SyncHook<
+      [Record<string, any>],
+      void
+    >(),
+  });
+
+  if (host) {
+    registerPlugins<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+      host?.options?.plugins,
+      [pluginSystem],
+    );
+    return pluginSystem;
+  }
+
+  return null;
+}
+
+export { registerBridgeLifeCycle };

packages/bridge/vue3-bridge/src/provider.ts

@@ -14,6 +14,7 @@ export function createBridgeComponent(bridgeInfo: any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const app = Vue.createApp(bridgeInfo.rootComponent);
         rootMap.set(info.dom, app);
+        bridgeInfo?.renderLifecycle?.(info);
         const appOptions = bridgeInfo.appOptions({
           basename: info.basename,
           memoryRoute: info.memoryRoute,
@@ -46,6 +47,7 @@ export function createBridgeComponent(bridgeInfo: any) {
       destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info?.dom);
+        bridgeInfo?.destroyLifecycle?.(info);
         root?.unmount();
       },
     };