feat: support proxy bridge export

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

@@ -18,8 +18,15 @@ type ProviderFnParams<T> = {
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
 };
+type Provider<T> = {
+  render(info: any): Promise<void>;
+  destroy(info: { dom: HTMLElement }): Promise<void>;
+  rawComponent: React.ComponentType<T>;
+  __BRIDGE_FN__: (_args: T) => void;
+};
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
+  let provider: Provider<T>;
   return () => {
     const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
@@ -36,63 +43,66 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
       );
     };
 
-    return {
-      async render(info: RenderFnParams & any) {
-        LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          ...propsInfo
-        } = info;
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          <ErrorBoundary FallbackComponent={fallback}>
-            <RawComponent
-              appInfo={{
-                moduleName,
-                basename,
-                memoryRoute,
-              }}
-              propsInfo={propsInfo}
-            />
-          </ErrorBoundary>
-        );
+    if (!provider) {
+      provider = {
+        async render(info: RenderFnParams & any) {
+          LoggerInstance.log(`createBridgeComponent render Info`, info);
+          const {
+            moduleName,
+            dom,
+            basename,
+            memoryRoute,
+            fallback,
+            ...propsInfo
+          } = info;
+          const rootComponentWithErrorBoundary = (
+            // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
+            <ErrorBoundary FallbackComponent={fallback}>
+              <RawComponent
+                appInfo={{
+                  moduleName,
+                  basename,
+                  memoryRoute,
+                }}
+                propsInfo={propsInfo}
+              />
+            </ErrorBoundary>
+          );
 
-        if (atLeastReact18(React)) {
-          if (bridgeInfo?.render) {
-            // in case bridgeInfo?.render is an async function, resolve this to promise
-            Promise.resolve(
-              bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
-            ).then((root: RootType) => rootMap.set(info.dom, root));
+          if (atLeastReact18(React)) {
+            if (bridgeInfo?.render) {
+              // in case bridgeInfo?.render is an async function, resolve this to promise
+              Promise.resolve(
+                bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
+              ).then((root: RootType) => rootMap.set(info.dom, root));
+            } else {
+              const root: RootType = ReactDOMClient.createRoot(info.dom);
+              root.render(rootComponentWithErrorBoundary);
+              rootMap.set(info.dom, root);
+            }
           } else {
-            const root: RootType = ReactDOMClient.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
+            // react 17 render
+            const renderFn = bridgeInfo?.render || ReactDOM.render;
+            renderFn?.(rootComponentWithErrorBoundary, info.dom);
           }
-        } else {
-          // react 17 render
-          const renderFn = bridgeInfo?.render || ReactDOM.render;
-          renderFn?.(rootComponentWithErrorBoundary, info.dom);
-        }
-      },
-      async destroy(info: { dom: HTMLElement }) {
-        LoggerInstance.log(`createBridgeComponent destroy Info`, {
-          dom: info.dom,
-        });
-        if (atLeastReact18(React)) {
-          const root = rootMap.get(info.dom);
-          (root as ReactDOMClient.Root)?.unmount();
-          rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
-        }
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args: T) => {},
-    };
+        },
+        async destroy(info: { dom: HTMLElement }) {
+          LoggerInstance.log(`createBridgeComponent destroy Info`, {
+            dom: info.dom,
+          });
+          if (atLeastReact18(React)) {
+            const root = rootMap.get(info.dom);
+            (root as ReactDOMClient.Root)?.unmount();
+            rootMap.delete(info.dom);
+          } else {
+            ReactDOM.unmountComponentAtNode(info.dom);
+          }
+        },
+        rawComponent: bridgeInfo.rootComponent,
+        __BRIDGE_FN__: (_args: T) => {},
+      };
+    }
+    return provider;
   };
 }
 

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

@@ -4,50 +4,59 @@ import { RenderFnParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 
 declare const __APP_VERSION__: string;
+type Provider = {
+  __APP_VERSION__: string;
+  render(info: RenderFnParams): void;
+  destroy(info: { dom: HTMLElement }): void;
+};
 
 export function createBridgeComponent(bridgeInfo: any) {
+  let provider: Provider;
   const rootMap = new Map();
   return () => {
-    return {
-      __APP_VERSION__,
-      render(info: RenderFnParams) {
-        LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const app = Vue.createApp(bridgeInfo.rootComponent);
-        rootMap.set(info.dom, app);
-        const appOptions = bridgeInfo.appOptions({
-          basename: info.basename,
-          memoryRoute: info.memoryRoute,
-        });
+    if (!provider) {
+      provider = {
+        __APP_VERSION__,
+        render(info: RenderFnParams) {
+          LoggerInstance.log(`createBridgeComponent render Info`, info);
+          const app = Vue.createApp(bridgeInfo.rootComponent);
+          rootMap.set(info.dom, app);
+          const appOptions = bridgeInfo.appOptions({
+            basename: info.basename,
+            memoryRoute: info.memoryRoute,
+          });
 
-        const history = info.memoryRoute
-          ? VueRouter.createMemoryHistory(info.basename)
-          : VueRouter.createWebHistory(info.basename);
-        const router = VueRouter.createRouter({
-          ...appOptions.router.options,
-          history,
-          routes: appOptions.router.getRoutes(),
-        });
+          const history = info.memoryRoute
+            ? VueRouter.createMemoryHistory(info.basename)
+            : VueRouter.createWebHistory(info.basename);
+          const router = VueRouter.createRouter({
+            ...appOptions.router.options,
+            history,
+            routes: appOptions.router.getRoutes(),
+          });
 
-        LoggerInstance.log(`createBridgeComponent render router info>>>`, {
-          name: info.moduleName,
-          router,
-        });
-        // memory route Initializes the route
-        if (info.memoryRoute) {
-          router.push(info.memoryRoute.entryPath).then(() => {
+          LoggerInstance.log(`createBridgeComponent render router info>>>`, {
+            name: info.moduleName,
+            router,
+          });
+          // memory route Initializes the route
+          if (info.memoryRoute) {
+            router.push(info.memoryRoute.entryPath).then(() => {
+              app.use(router);
+              app.mount(info.dom);
+            });
+          } else {
             app.use(router);
             app.mount(info.dom);
-          });
-        } else {
-          app.use(router);
-          app.mount(info.dom);
-        }
-      },
-      destroy(info: { dom: HTMLElement }) {
-        LoggerInstance.log(`createBridgeComponent destroy Info`, info);
-        const root = rootMap.get(info?.dom);
-        root?.unmount();
-      },
-    };
+          }
+        },
+        destroy(info: { dom: HTMLElement }) {
+          LoggerInstance.log(`createBridgeComponent destroy Info`, info);
+          const root = rootMap.get(info?.dom);
+          root?.unmount();
+        },
+      };
+    }
+    return provider;
   };
 }

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): {