feat: add bridgeHook plugin system to support lifecycyle in bridge (#2992)

Co-authored-by: nyqykk <[email protected]>
Co-authored-by: nyqykk <[email protected]>
Co-authored-by: Zack Jackson <[email protected]>

Author: 3 people

.changeset/great-feet-rule.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/bridge-react': patch
+'@module-federation/bridge-vue3': patch
+'@module-federation/runtime': patch
+---
+
+feat: feat: support lifecycyle hooks in module-deferation bridge

packages/bridge/bridge-react/package.json

@@ -47,7 +47,8 @@
     "@loadable/component": "^5.16.4",
     "@module-federation/bridge-shared": "workspace:*",
     "@module-federation/sdk": "workspace:*",
-    "react-error-boundary": "^4.0.13"
+    "react-error-boundary": "^4.0.13",
+    "@module-federation/runtime": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

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/provider.tsx

@@ -2,15 +2,24 @@ 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';
+import { getInstance } from '@module-federation/runtime';
 
+type RenderParams = RenderFnParams & {
+  [key: string]: unknown;
+};
+type DestroyParams = {
+  moduleName: string;
+  dom: HTMLElement;
+};
 type RootType = HTMLElement | ReactDOMClient.Root;
+
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
@@ -22,6 +31,9 @@ type ProviderFnParams<T> = {
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
+    const instance = getInstance();
+    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
       const { moduleName, memoryRoute, basename = '/' } = appInfo;
@@ -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,10 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           fallback,
           ...propsInfo
         } = info;
+
+        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}>
@@ -56,11 +72,13 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 basename,
                 memoryRoute,
               }}
-              propsInfo={propsInfo}
+              propsInfo={
+                { ...propsInfo, ...beforeBridgeRenderRes?.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 +95,27 @@ 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: { dom: HTMLElement }) {
+
+      async destroy(info: DestroyParams) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
+
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(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);
         }
+
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(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 { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
+import { getInstance } from '@module-federation/runtime';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -59,13 +60,15 @@ const RemoteAppWrapper = forwardRef(function (
 
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
+    const hostInstance = getInstance();
+    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
 
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
 
-        const renderProps = {
+        let renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -78,7 +81,21 @@ 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 () => {
@@ -89,17 +106,39 @@ 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={props?.className}
+        className={rootComponentClassName}
         style={props?.style}
         ref={rootRef}
       ></div>

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.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/bridge-react/src/utils.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FederationHost } from '@module-federation/runtime';
 import { createLogger } from '@module-federation/sdk';
 
 export const LoggerInstance = createLogger(
@@ -41,3 +42,24 @@ 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}`;
+};

packages/bridge/bridge-react/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
         'react-router-dom/',
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
+        '@module-federation/runtime',
       ],
       plugins: [
         {

packages/bridge/vue3-bridge/package.json

@@ -38,7 +38,8 @@
   },
   "dependencies": {
     "@module-federation/bridge-shared": "workspace:*",
-    "@module-federation/sdk": "workspace:*"
+    "@module-federation/sdk": "workspace:*",
+    "@module-federation/runtime": "workspace:*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",