@module-federation/bridge-react 0.0.0-next-20240830065016 → 0.0.0-next-20240830100524

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240830065016
+## 0.0.0-next-20240830100524
 
 ### Patch Changes
 
 - 3082116: feat: support module isolated reported
 - Updated dependencies [3082116]
 - Updated dependencies [b90fa7d]
-  - @module-federation/runtime@0.0.0-next-20240830065016
-  - @module-federation/bridge-shared@0.0.0-next-20240830065016
+  - @module-federation/runtime@0.0.0-next-20240830100524
+  - @module-federation/bridge-shared@0.0.0-next-20240830100524
 
 ## 0.5.1
 

package/dist/index.cjs.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const runtime = require("@module-federation/runtime");
 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(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -1054,12 +1054,8 @@ const registerPlugin = helpers.global.registerPlugins;
 const pluginHelper = helpers.global.pluginHelper;
 const host = runtime.getInstance();
 const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.AsyncWaterfallHook("beforeBridgeRender"),
-  afterBridgeRender: new pluginHelper.AsyncWaterfallHook("afterBridgeRender"),
-  beforeBridgeDestroy: new pluginHelper.AsyncWaterfallHook(
-    "beforeBridgeDestroy"
-  ),
-  afterBridgeDestroy: new pluginHelper.AsyncWaterfallHook("afterBridgeDestroy")
+  bridgeRender: new pluginHelper.SyncHook(),
+  bridgeDestroy: new pluginHelper.SyncHook()
 });
 registerPlugin(
   host.options.plugins,
@@ -1081,11 +1077,6 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     const rootRef = ref && "current" in ref ? ref : React.useRef(null);
     const renderDom = React.useRef(null);
     const providerInfoRef = React.useRef(null);
-    React.useEffect(() => {
-      (async () => {
-        await pluginSystem.lifecycle.afterBridgeRender.emit({});
-      })();
-    }, []);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
         const providerReturn = providerInfo();
@@ -1103,26 +1094,33 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
+        pluginSystem.lifecycle.bridgeRender.emit({
+          ...renderProps
+        });
         providerReturn.render(renderProps);
       });
       return () => {
-        (async () => {
-          await pluginSystem.lifecycle.beforeBridgeDestroy.emit({});
-          clearTimeout(renderTimeout);
-          setTimeout(async () => {
-            var _a, _b;
-            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({
-                dom: renderDom.current
-              });
-              await pluginSystem.lifecycle.afterBridgeDestroy.emit({});
-            }
-          });
-        })();
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          var _a, _b;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            context.LoggerInstance.log(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current }
+            );
+            pluginSystem.lifecycle.bridgeDestroy.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+              dom: renderDom.current
+            });
+          }
+        });
       };
     }, []);
     return /* @__PURE__ */ React.createElement(
@@ -1212,7 +1210,6 @@ function createLazyRemoteComponent(info) {
     });
     try {
       const m2 = await info.loader();
-      await pluginSystem.lifecycle.beforeBridgeRender.emit({});
       const moduleName = m2 && m2[Symbol.for("mf_module_id")];
       context.LoggerInstance.log(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
@@ -1301,7 +1298,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
-        var _a, _b;
+        var _a;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -1325,7 +1322,7 @@ function createBridgeComponent(bridgeInfo) {
             }
           ))
         );
-        (_a = bridgeInfo == null ? void 0 : bridgeInfo.beforeRender) == null ? void 0 : _a.call(bridgeInfo, info);
+        (_a = bridgeInfo == null ? void 0 : bridgeInfo.renderLifecycle) == null ? void 0 : _a.call(bridgeInfo, info);
         if (context.atLeastReact18(React__namespace)) {
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
             Promise.resolve(
@@ -1340,11 +1337,9 @@ function createBridgeComponent(bridgeInfo) {
           const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-        (_b = bridgeInfo == null ? void 0 : bridgeInfo.afterRender) == null ? void 0 : _b.call(bridgeInfo, info);
       },
       async destroy(info) {
-        var _a, _b;
-        (_a = bridgeInfo == null ? void 0 : bridgeInfo.beforeDestroy) == null ? void 0 : _a.call(bridgeInfo, info);
+        var _a;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
@@ -1355,7 +1350,7 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_b = bridgeInfo == null ? void 0 : bridgeInfo.afterDestroy) == null ? void 0 : _b.call(bridgeInfo, info);
+        (_a = bridgeInfo == null ? void 0 : bridgeInfo.destroyLifecycle) == null ? void 0 : _a.call(bridgeInfo, info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

package/dist/index.d.ts

@@ -50,10 +50,8 @@ declare type FallbackProps = {
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
-    beforeRender?: (params: RenderFnParams) => void;
-    afterRender?: (params: RenderFnParams) => void;
-    beforeDestroy?: (params: DestroyParams) => void;
-    afterDestroy?: (params: DestroyParams) => void;
+    renderLifecycle?: (params: RenderFnParams) => void;
+    destroyLifecycle?: (params: DestroyParams) => void;
 };
 
 export declare interface ProviderParams {

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { getInstance } from "@module-federation/runtime";
 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 = {
@@ -1035,12 +1035,8 @@ const registerPlugin = helpers.global.registerPlugins;
 const pluginHelper = helpers.global.pluginHelper;
 const host = getInstance();
 const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.AsyncWaterfallHook("beforeBridgeRender"),
-  afterBridgeRender: new pluginHelper.AsyncWaterfallHook("afterBridgeRender"),
-  beforeBridgeDestroy: new pluginHelper.AsyncWaterfallHook(
-    "beforeBridgeDestroy"
-  ),
-  afterBridgeDestroy: new pluginHelper.AsyncWaterfallHook("afterBridgeDestroy")
+  bridgeRender: new pluginHelper.SyncHook(),
+  bridgeDestroy: new pluginHelper.SyncHook()
 });
 registerPlugin(
   host.options.plugins,
@@ -1062,11 +1058,6 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     const rootRef = ref && "current" in ref ? ref : useRef(null);
     const renderDom = useRef(null);
     const providerInfoRef = useRef(null);
-    useEffect(() => {
-      (async () => {
-        await pluginSystem.lifecycle.afterBridgeRender.emit({});
-      })();
-    }, []);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
         const providerReturn = providerInfo();
@@ -1084,26 +1075,33 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
+        pluginSystem.lifecycle.bridgeRender.emit({
+          ...renderProps
+        });
         providerReturn.render(renderProps);
       });
       return () => {
-        (async () => {
-          await pluginSystem.lifecycle.beforeBridgeDestroy.emit({});
-          clearTimeout(renderTimeout);
-          setTimeout(async () => {
-            var _a, _b;
-            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({
-                dom: renderDom.current
-              });
-              await pluginSystem.lifecycle.afterBridgeDestroy.emit({});
-            }
-          });
-        })();
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          var _a, _b;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current }
+            );
+            pluginSystem.lifecycle.bridgeDestroy.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+              dom: renderDom.current
+            });
+          }
+        });
       };
     }, []);
     return /* @__PURE__ */ React__default.createElement(
@@ -1193,7 +1191,6 @@ function createLazyRemoteComponent(info) {
     });
     try {
       const m2 = await info.loader();
-      await pluginSystem.lifecycle.beforeBridgeRender.emit({});
       const moduleName = m2 && m2[Symbol.for("mf_module_id")];
       LoggerInstance.log(
         `createRemoteComponent LazyComponent loadRemote info >>>`,
@@ -1282,7 +1279,7 @@ function createBridgeComponent(bridgeInfo) {
     };
     return {
       async render(info) {
-        var _a, _b;
+        var _a;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -1306,7 +1303,7 @@ function createBridgeComponent(bridgeInfo) {
             }
           ))
         );
-        (_a = bridgeInfo == null ? void 0 : bridgeInfo.beforeRender) == null ? void 0 : _a.call(bridgeInfo, info);
+        (_a = bridgeInfo == null ? void 0 : bridgeInfo.renderLifecycle) == null ? void 0 : _a.call(bridgeInfo, info);
         if (atLeastReact18(React)) {
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
             Promise.resolve(
@@ -1321,11 +1318,9 @@ function createBridgeComponent(bridgeInfo) {
           const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-        (_b = bridgeInfo == null ? void 0 : bridgeInfo.afterRender) == null ? void 0 : _b.call(bridgeInfo, info);
       },
       async destroy(info) {
-        var _a, _b;
-        (_a = bridgeInfo == null ? void 0 : bridgeInfo.beforeDestroy) == null ? void 0 : _a.call(bridgeInfo, info);
+        var _a;
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
@@ -1336,7 +1331,7 @@ function createBridgeComponent(bridgeInfo) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        (_b = bridgeInfo == null ? void 0 : bridgeInfo.afterDestroy) == null ? void 0 : _b.call(bridgeInfo, info);
+        (_a = bridgeInfo == null ? void 0 : bridgeInfo.destroyLifecycle) == null ? void 0 : _a.call(bridgeInfo, info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240830065016",
+  "version": "0.0.0-next-20240830100524",
   "publishConfig": {
     "access": "public"
   },
@@ -35,13 +35,13 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240830065016"
+    "@module-federation/bridge-shared": "0.0.0-next-20240830100524"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
     "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20240830065016"
+    "@module-federation/runtime": "0.0.0-next-20240830100524"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

package/src/create.tsx

@@ -36,7 +36,6 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
 
     try {
       const m = (await info.loader()) as RemoteModule;
-      await hook.lifecycle.beforeBridgeRender.emit({});
       // @ts-ignore
       const moduleName = m && m[Symbol.for('mf_module_id')];
       LoggerInstance.log(

package/src/lifecycle.ts

@@ -5,12 +5,8 @@ const registerPlugin = helper.global.registerPlugins;
 const pluginHelper = helper.global.pluginHelper;
 const host = getInstance()!;
 const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.AsyncWaterfallHook('beforeBridgeRender'),
-  afterBridgeRender: new pluginHelper.AsyncWaterfallHook('afterBridgeRender'),
-  beforeBridgeDestroy: new pluginHelper.AsyncWaterfallHook(
-    'beforeBridgeDestroy',
-  ),
-  afterBridgeDestroy: new pluginHelper.AsyncWaterfallHook('afterBridgeDestroy'),
+  bridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+  bridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], void>(),
 });
 
 registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(

package/src/provider.tsx

@@ -22,10 +22,8 @@ type ProviderFnParams<T> = {
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  beforeRender?: (params: RenderFnParams) => void;
-  afterRender?: (params: RenderFnParams) => void;
-  beforeDestroy?: (params: DestroyParams) => void;
-  afterDestroy?: (params: DestroyParams) => void;
+  renderLifecycle?: (params: RenderFnParams) => void;
+  destroyLifecycle?: (params: DestroyParams) => void;
 };
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
@@ -69,7 +67,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           </ErrorBoundary>
         );
 
-        bridgeInfo?.beforeRender?.(info);
+        bridgeInfo?.renderLifecycle?.(info);
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -86,10 +84,8 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
-        bridgeInfo?.afterRender?.(info);
       },
       async destroy(info: DestroyParams) {
-        bridgeInfo?.beforeDestroy?.(info);
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
@@ -100,7 +96,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        bridgeInfo?.afterDestroy?.(info);
+        bridgeInfo?.destroyLifecycle?.(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -62,11 +62,6 @@ const RemoteAppWrapper = forwardRef(function (
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
 
-    useEffect(() => {
-      (async () => {
-        await hook.lifecycle.afterBridgeRender.emit({});
-      })();
-    }, []);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
         const providerReturn = providerInfo();
@@ -85,26 +80,33 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
+        hook.lifecycle.bridgeRender.emit({
+          ...renderProps,
+        });
         providerReturn.render(renderProps);
       });
 
       return () => {
-        (async () => {
-          await hook.lifecycle.beforeBridgeDestroy.emit({});
-          clearTimeout(renderTimeout);
-          setTimeout(async () => {
-            if (providerInfoRef.current?.destroy) {
-              LoggerInstance.log(
-                `createRemoteComponent LazyComponent destroy >>>`,
-                { moduleName, basename, dom: renderDom.current },
-              );
-              providerInfoRef.current?.destroy({
-                dom: renderDom.current,
-              });
-              await hook.lifecycle.afterBridgeDestroy.emit({});
-            }
-          });
-        })();
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          if (providerInfoRef.current?.destroy) {
+            LoggerInstance.log(
+              `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,
+            });
+          }
+        });
       };
     }, []);