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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240830065016",
+  "version": "0.0.0-next-20240902023803",
   "publishConfig": {
     "access": "public"
   },
@@ -35,13 +35,12 @@
   "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-20240902023803"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20240830065016"
+    "react-router-dom": ">=4"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

package/src/create.tsx

@@ -1,15 +1,12 @@
 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 hook from './lifecycle';
-import { LoggerInstance } from './utils';
 import RemoteApp from './remote';
 
-import type { ProviderParams } from '@module-federation/bridge-shared';
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -36,7 +33,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/provider.tsx

@@ -2,19 +2,14 @@ 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 { ErrorBoundary } from 'react-error-boundary';
-
-import { RouterContext } from './context';
 import { LoggerInstance, atLeastReact18 } from './utils';
+import { ErrorBoundary } from 'react-error-boundary';
 
-type RenderParams = RenderFnParams & any;
-type DestroyParams = {
-  dom: HTMLElement;
-};
 type RootType = HTMLElement | ReactDOMClient.Root;
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
@@ -22,11 +17,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;
 };
+
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
@@ -45,7 +37,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
     };
 
     return {
-      async render(info: RenderParams) {
+      async render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -69,7 +61,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           </ErrorBoundary>
         );
 
-        bridgeInfo?.beforeRender?.(info);
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -86,10 +77,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);
+      async destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
@@ -100,7 +89,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-        bridgeInfo?.afterDestroy?.(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -7,12 +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 hook from '../lifecycle';
-import { LoggerInstance, pathJoin } from '../utils';
-
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
@@ -62,11 +60,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();
@@ -89,22 +82,18 @@ const RemoteAppWrapper = forwardRef(function (
       });
 
       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 },
+            );
+            providerInfoRef.current?.destroy({
+              dom: renderDom.current,
+            });
+          }
+        });
       };
     }, []);
 

package/src/lifecycle.ts

@@ -1,21 +0,0 @@
-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.AsyncWaterfallHook('beforeBridgeRender'),
-  afterBridgeRender: new pluginHelper.AsyncWaterfallHook('afterBridgeRender'),
-  beforeBridgeDestroy: new pluginHelper.AsyncWaterfallHook(
-    'beforeBridgeDestroy',
-  ),
-  afterBridgeDestroy: new pluginHelper.AsyncWaterfallHook('afterBridgeDestroy'),
-});
-
-registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(
-  host.options.plugins,
-  [pluginSystem],
-);
-
-export default pluginSystem;