@module-federation/bridge-react 0.0.0-next-20240913094943 → 0.0.0-next-20240918063302

package/package.json

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

package/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;
 }

package/src/index.ts

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

package/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({
+  beforeBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
+  beforeBridgeDestroy: 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;

package/src/provider.tsx

@@ -2,23 +2,32 @@ 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>;
+  hooks?: {
+    beforeBridgeRender?: (params: RenderFnParams) => void;
+    beforeBridgeDestroy?: (params: DestroyParams) => void;
+  };
 };
-
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
@@ -37,7 +46,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 +70,17 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           </ErrorBoundary>
         );
 
+        // call beforeBridgeRender hook
+        if (
+          bridgeInfo?.hooks &&
+          bridgeInfo?.hooks.beforeBridgeRender &&
+          typeof bridgeInfo?.hooks.beforeBridgeRender === 'function'
+        ) {
+          bridgeInfo.hooks.beforeBridgeRender(info);
+          // bridgeInfo?.beforeBridgeRender?.(info);
+        }
+
+        // call render function
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -78,10 +98,21 @@ 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,
         });
+
+        // call beforeBridgeDestroy hook
+        if (
+          bridgeInfo?.hooks &&
+          bridgeInfo?.hooks.beforeBridgeDestroy &&
+          typeof bridgeInfo?.hooks.beforeBridgeDestroy === 'function'
+        ) {
+          bridgeInfo.hooks.beforeBridgeDestroy(info);
+        }
+
+        // call destroy function
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           (root as ReactDOMClient.Root)?.unmount();

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