feat: add lifecycle hooks for 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,12 +1,14 @@
 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/index.ts

@@ -4,3 +4,4 @@ export type {
   ProviderParams,
   RenderFnParams,
 } from '@module-federation/bridge-shared';
+export type { BridgeRuntimePlugin } from './lifecycle';

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

@@ -0,0 +1,18 @@
+import { getInstance } from '@module-federation/runtime';
+import helper from '@module-federation/runtime/helpers';
+
+const registerPlugin = helper.global.registerPlugins;
+const pluginHelper = helper.global.pluginHelper;
+const host = getInstance()!;
+const pluginSystem = new pluginHelper.PluginSystem({
+  bridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+  bridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+});
+
+registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+  host.options.plugins,
+  [pluginSystem],
+);
+
+export default pluginSystem;
+export type BridgeRuntimePlugin = typeof pluginSystem;

packages/bridge/bridge-react/src/provider.tsx

@@ -2,23 +2,29 @@ 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 ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
+  renderLifecycle?: (params: RenderFnParams) => void;
+  destroyLifecycle?: (params: DestroyParams) => void;
 };
-
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
@@ -37,7 +43,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,
@@ -61,6 +67,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           </ErrorBoundary>
         );
 
+        bridgeInfo?.renderLifecycle?.(info);
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -78,7 +85,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
       },
-      async destroy(info: { dom: HTMLElement }) {
+      async destroy(info: DestroyParams) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
@@ -89,6 +96,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
+        bridgeInfo?.destroyLifecycle?.(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

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

@@ -7,10 +7,12 @@ 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 hook from '../lifecycle';
+import { LoggerInstance, pathJoin } from '../utils';
+
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
@@ -78,6 +80,9 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
+        hook.lifecycle.bridgeRender.emit({
+          ...renderProps,
+        });
         providerReturn.render(renderProps);
       });
 
@@ -89,6 +94,14 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
+            hook.lifecycle.bridgeDestroy.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
             providerInfoRef.current?.destroy({
               dom: renderDom.current,
             });

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,8 @@
 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/index.ts

@@ -1,3 +1,4 @@
 export { createBridgeComponent } from './provider';
 export { createRemoteComponent } from './create';
 export type { RenderFnParams } from '@module-federation/bridge-shared';
+export type { BridgeRuntimePlugin } from './lifecycle';

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

@@ -0,0 +1,18 @@
+import { getInstance } from '@module-federation/runtime';
+import helper from '@module-federation/runtime/helpers';
+
+const registerPlugin = helper.global.registerPlugins;
+const pluginHelper = helper.global.pluginHelper;
+const host = getInstance()!;
+const pluginSystem = new pluginHelper.PluginSystem({
+  bridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+  bridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+});
+
+registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+  host.options.plugins,
+  [pluginSystem],
+);
+
+export default pluginSystem;
+export type BridgeRuntimePlugin = typeof pluginSystem;

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();
       },
     };

packages/bridge/vue3-bridge/src/remoteApp.tsx

@@ -1,7 +1,9 @@
 import { ref, onMounted, onBeforeUnmount, watch, defineComponent } from 'vue';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { useRoute } from 'vue-router';
+
+import hook from './lifecycle';
 import { LoggerInstance } from './utils';
-import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 
 export default defineComponent({
   name: 'RemoteApp',
@@ -30,6 +32,9 @@ export default defineComponent({
         `createRemoteComponent LazyComponent render >>>`,
         renderProps,
       );
+      hook.lifecycle.bridgeRender.emit({
+        ...renderProps,
+      });
       providerReturn.render(renderProps);
     };
 
@@ -61,6 +66,12 @@ export default defineComponent({
         ...props,
       });
       watchStopHandle();
+      hook.lifecycle.bridgeDestroy.emit({
+        name: props.moduleName,
+        dom: rootRef.value,
+        basename: props.basename,
+        memoryRoute: props.memoryRoute,
+      });
       (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
     });
 

packages/runtime/src/helpers.ts

@@ -19,6 +19,8 @@ import {
   Global,
 } from './global';
 import { getRegisteredShare, getGlobalShareScope } from './utils/share';
+import * as pluginHelper from './utils/hooks';
+import { registerPlugins } from './utils';
 
 interface IShareUtils {
   getRegisteredShare: typeof getRegisteredShare;
@@ -48,6 +50,8 @@ interface IGlobalUtils {
   getGlobalHostPlugins: typeof getGlobalHostPlugins;
   getPreloaded: typeof getPreloaded;
   setPreloaded: typeof setPreloaded;
+  registerPlugins: typeof registerPlugins;
+  pluginHelper: typeof pluginHelper;
 }
 
 const GlobalUtils: IGlobalUtils = {
@@ -69,6 +73,8 @@ const GlobalUtils: IGlobalUtils = {
   getGlobalHostPlugins,
   getPreloaded,
   setPreloaded,
+  registerPlugins,
+  pluginHelper,
 };
 
 export default {

packages/runtime/src/module/index.ts

@@ -1,4 +1,4 @@
-import { getFMId, assert } from '../utils';
+import { getFMId, assert, processModuleAlias } from '../utils';
 import { safeToString } from '@module-federation/sdk';
 import { getRemoteEntry } from '../utils/load';
 import { FederationHost } from '../core';
@@ -114,7 +114,9 @@ class Module {
       `${getFMId(this.remoteInfo)} remote don't export ${expose}.`,
     );
 
-    const wrapModuleFactory = this.wraperFactory(moduleFactory, id);
+    // keep symbol for module name always one format
+    const symbolName = processModuleAlias(this.remoteInfo.name, expose);
+    const wrapModuleFactory = this.wraperFactory(moduleFactory, symbolName);
 
     if (!loadFactory) {
       return wrapModuleFactory;

packages/runtime/src/plugins/snapshot/SnapshotHandler.ts

@@ -94,6 +94,11 @@ export class SnapshotHandler {
       remoteSnapshot: ModuleInfo;
       from: 'global' | 'manifest';
     }>('loadRemoteSnapshot'),
+    afterLoadSnapshot: new AsyncWaterfallHook<{
+      options: Options;
+      moduleInfo: Remote;
+      remoteSnapshot: ModuleInfo;
+    }>('afterLoadSnapshot'),
   });
   loaderHook: FederationHost['loaderHook'];
   manifestLoading: Record<string, Promise<ModuleInfo>> =
@@ -189,6 +194,8 @@ export class SnapshotHandler {
       globalSnapshot,
     });
 
+    let mSnapshot;
+    let gSnapshot;
     // global snapshot includes manifest or module info includes manifest
     if (globalRemoteSnapshot) {
       if (isManifestProvider(globalRemoteSnapshot)) {
@@ -212,10 +219,8 @@ export class SnapshotHandler {
           },
           moduleSnapshot,
         );
-        return {
-          remoteSnapshot: moduleSnapshot,
-          globalSnapshot: globalSnapshotRes,
-        };
+        mSnapshot = moduleSnapshot;
+        gSnapshot = globalSnapshotRes;
       } else {
         const { remoteSnapshot: remoteSnapshotRes } =
           await this.hooks.lifecycle.loadRemoteSnapshot.emit({
@@ -224,10 +229,8 @@ export class SnapshotHandler {
             remoteSnapshot: globalRemoteSnapshot,
             from: 'global',
           });
-        return {
-          remoteSnapshot: remoteSnapshotRes,
-          globalSnapshot: globalSnapshotRes,
-        };
+        mSnapshot = remoteSnapshotRes;
+        gSnapshot = globalSnapshotRes;
       }
     } else {
       if (isRemoteInfoWithEntry(moduleInfo)) {
@@ -249,10 +252,9 @@ export class SnapshotHandler {
             remoteSnapshot: moduleSnapshot,
             from: 'global',
           });
-        return {
-          remoteSnapshot: remoteSnapshotRes,
-          globalSnapshot: globalSnapshotRes,
-        };
+
+        mSnapshot = remoteSnapshotRes;
+        gSnapshot = globalSnapshotRes;
       } else {
         error(`
           Cannot get remoteSnapshot with the name: '${
@@ -268,6 +270,17 @@ export class SnapshotHandler {
         `);
       }
     }
+
+    await this.hooks.lifecycle.afterLoadSnapshot.emit({
+      options,
+      moduleInfo,
+      remoteSnapshot: mSnapshot,
+    });
+
+    return {
+      remoteSnapshot: mSnapshot,
+      globalSnapshot: gSnapshot,
+    };
   }
 
   getGlobalRemoteInfo(moduleInfo: Remote): {

packages/runtime/src/utils/plugin.ts

@@ -2,10 +2,15 @@ import { FederationHost } from '../core';
 import { UserOptions } from '../type';
 import { Module } from '../module';
 import { getGlobalHostPlugins } from '../global';
+import { PluginSystem } from './hooks';
 
-export function registerPlugins(
+export function registerPlugins<
+  Y extends Record<string, any>,
+  T extends PluginSystem<Y>,
+>(
   plugins: UserOptions['plugins'],
   hookInstances: Array<
+    | T
     | FederationHost['hooks']
     | FederationHost['snapshotHandler']['hooks']
     | FederationHost['sharedHandler']['hooks']