@module-federation/bridge-react 0.0.0-next-20240923034121 → 0.0.0-next-20240923065315

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240923034121
+## 0.0.0-next-20240923065315
 
 ### Patch Changes
 
 - 3082116: feat: support module isolated reported
 - Updated dependencies [3082116]
-  - @module-federation/runtime@0.0.0-next-20240923034121
-  - @module-federation/bridge-shared@0.0.0-next-20240923034121
+  - @module-federation/runtime@0.0.0-next-20240923065315
+  - @module-federation/bridge-shared@0.0.0-next-20240923065315
 
 ## 0.6.6
 

package/dist/index.cjs.js

@@ -1,5 +1,4 @@
 "use strict";
-var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context--mtFt3tp.cjs");
@@ -1071,7 +1070,7 @@ function getRegisteredShare(localShareScopeMap, pkgName, shareInfo, resolveShare
 function getGlobalShareScope() {
   return Global.__FEDERATION__.__SHARE__;
 }
-var pluginHelper$1 = /* @__PURE__ */ Object.freeze({
+var pluginHelper = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   SyncHook,
   AsyncHook,
@@ -1103,24 +1102,31 @@ const GlobalUtils = {
   getPreloaded,
   setPreloaded,
   registerPlugins,
-  pluginHelper: pluginHelper$1
+  pluginHelper
 };
 var helpers = {
   global: GlobalUtils,
   share: ShareUtils
 };
-const registerPlugin = helpers.global.registerPlugins;
-const pluginHelper = helpers.global.pluginHelper;
-const host = runtime.getInstance();
-const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.SyncHook(),
-  beforeBridgeDestroy: new pluginHelper.SyncHook()
-});
-registerPlugin(
-  (_a = host == null ? void 0 : host.options) == null ? void 0 : _a.plugins,
-  [pluginSystem]
-);
+function registerBridgeLifeCycle() {
+  var _a;
+  const { registerPlugins: registerPlugins2, pluginHelper: pluginHelper2 } = helpers.global;
+  const host = runtime.getInstance();
+  const pluginSystem = new pluginHelper2.PluginSystem({
+    beforeBridgeRender: new pluginHelper2.SyncHook(),
+    beforeBridgeDestroy: new pluginHelper2.SyncHook()
+  });
+  if (host) {
+    registerPlugins2(
+      (_a = host == null ? void 0 : host.options) == null ? void 0 : _a.plugins,
+      [pluginSystem]
+    );
+    return pluginSystem;
+  }
+  return null;
+}
 const RemoteAppWrapper = React.forwardRef(function(props, ref) {
+  const bridgeHook = registerBridgeLifeCycle();
   const RemoteApp2 = () => {
     context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -1138,6 +1144,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     const providerInfoRef = React.useRef(null);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
+        var _a, _b;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
         const renderProps = {
@@ -1153,29 +1160,33 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        pluginSystem.lifecycle.beforeBridgeRender.emit({
-          ...renderProps
-        });
+        if (bridgeHook && ((_a = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _a.beforeBridgeRender)) {
+          (_b = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _b.beforeBridgeRender.emit({
+            ...renderProps
+          });
+        }
         providerReturn.render(renderProps);
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a2, _b;
-          if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
+          var _a, _b, _c, _d;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             context.LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            pluginSystem.lifecycle.beforeBridgeDestroy.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            if (bridgeHook && ((_b = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy)) {
+              (_c = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps
+              });
+            }
+            (_d = providerInfoRef.current) == null ? void 0 : _d.destroy({
               dom: renderDom.current
             });
           }
@@ -1196,7 +1207,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
 });
 function withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
-    var _a2;
+    var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -1226,7 +1237,7 @@ function withRouterData(WrappedComponent) {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
         if (useHistory) {
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
         }
         if (match) {
           basename = context.pathJoin(basename, (match == null ? void 0 : match.path) || "/");

package/dist/index.d.ts

@@ -2,12 +2,8 @@ import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
 import { default as default_3 } from 'react-dom/client';
 import { ErrorInfo } from 'react';
-import { PluginSystem } from '@module-federation/runtime/dist/src/utils/hooks';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
-import { SyncHook } from '@module-federation/runtime/dist/src/utils/hooks';
-
-export declare type BridgeRuntimePlugin = typeof pluginSystem;
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
@@ -51,11 +47,6 @@ declare type FallbackProps = {
     resetErrorBoundary: (...args: any[]) => void;
 };
 
-declare const pluginSystem: PluginSystem<    {
-beforeBridgeRender: SyncHook<[Record<string, any>], void>;
-beforeBridgeDestroy: SyncHook<[Record<string, any>], void>;
-}>;
-
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;

package/dist/index.es.js

@@ -1,4 +1,3 @@
-var _a;
 import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
 import { L as LoggerInstance, p as pathJoin, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
@@ -1052,7 +1051,7 @@ function getRegisteredShare(localShareScopeMap, pkgName, shareInfo, resolveShare
 function getGlobalShareScope() {
   return Global.__FEDERATION__.__SHARE__;
 }
-var pluginHelper$1 = /* @__PURE__ */ Object.freeze({
+var pluginHelper = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   SyncHook,
   AsyncHook,
@@ -1084,24 +1083,31 @@ const GlobalUtils = {
   getPreloaded,
   setPreloaded,
   registerPlugins,
-  pluginHelper: pluginHelper$1
+  pluginHelper
 };
 var helpers = {
   global: GlobalUtils,
   share: ShareUtils
 };
-const registerPlugin = helpers.global.registerPlugins;
-const pluginHelper = helpers.global.pluginHelper;
-const host = getInstance();
-const pluginSystem = new pluginHelper.PluginSystem({
-  beforeBridgeRender: new pluginHelper.SyncHook(),
-  beforeBridgeDestroy: new pluginHelper.SyncHook()
-});
-registerPlugin(
-  (_a = host == null ? void 0 : host.options) == null ? void 0 : _a.plugins,
-  [pluginSystem]
-);
+function registerBridgeLifeCycle() {
+  var _a;
+  const { registerPlugins: registerPlugins2, pluginHelper: pluginHelper2 } = helpers.global;
+  const host = getInstance();
+  const pluginSystem = new pluginHelper2.PluginSystem({
+    beforeBridgeRender: new pluginHelper2.SyncHook(),
+    beforeBridgeDestroy: new pluginHelper2.SyncHook()
+  });
+  if (host) {
+    registerPlugins2(
+      (_a = host == null ? void 0 : host.options) == null ? void 0 : _a.plugins,
+      [pluginSystem]
+    );
+    return pluginSystem;
+  }
+  return null;
+}
 const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const bridgeHook = registerBridgeLifeCycle();
   const RemoteApp2 = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -1119,6 +1125,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     const providerInfoRef = useRef(null);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
+        var _a, _b;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
         const renderProps = {
@@ -1134,29 +1141,33 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
           `createRemoteComponent LazyComponent render >>>`,
           renderProps
         );
-        pluginSystem.lifecycle.beforeBridgeRender.emit({
-          ...renderProps
-        });
+        if (bridgeHook && ((_a = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _a.beforeBridgeRender)) {
+          (_b = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _b.beforeBridgeRender.emit({
+            ...renderProps
+          });
+        }
         providerReturn.render(renderProps);
       });
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
-          var _a2, _b;
-          if ((_a2 = providerInfoRef.current) == null ? void 0 : _a2.destroy) {
+          var _a, _b, _c, _d;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
             LoggerInstance.log(
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current }
             );
-            pluginSystem.lifecycle.beforeBridgeDestroy.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            if (bridgeHook && ((_b = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy)) {
+              (_c = bridgeHook == null ? void 0 : bridgeHook.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps
+              });
+            }
+            (_d = providerInfoRef.current) == null ? void 0 : _d.destroy({
               dom: renderDom.current
             });
           }
@@ -1177,7 +1188,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
 });
 function withRouterData(WrappedComponent) {
   const Component2 = forwardRef(function(props, ref) {
-    var _a2;
+    var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -1207,7 +1218,7 @@ function withRouterData(WrappedComponent) {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
         if (useHistory) {
           const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a2 = history == null ? void 0 : history.createHref) == null ? void 0 : _a2.call(history, { pathname: "/" });
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
         }
         if (match) {
           basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240923034121",
+  "version": "0.0.0-next-20240923065315",
   "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-20240923034121"
+    "@module-federation/bridge-shared": "0.0.0-next-20240923065315"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
     "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20240923034121"
+    "@module-federation/runtime": "0.0.0-next-20240923065315"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",

package/src/create.tsx

@@ -3,10 +3,8 @@ 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 {

package/src/index.ts

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

package/src/lifecycle.ts

@@ -1,18 +1,29 @@
 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>(),
-});
+function registerBridgeLifeCycle() {
+  const { registerPlugins, pluginHelper } = helper.global;
+  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],
-);
+  if (host) {
+    registerPlugins<typeof pluginSystem.lifecycle, typeof pluginSystem>(
+      host?.options?.plugins,
+      [pluginSystem],
+    );
+    return pluginSystem;
+  }
 
-export default pluginSystem;
-export type BridgeRuntimePlugin = typeof pluginSystem;
+  return null;
+}
+
+export { registerBridgeLifeCycle };

package/src/provider.tsx

@@ -7,7 +7,6 @@ import type {
   RenderFnParams,
 } from '@module-federation/bridge-shared';
 import { ErrorBoundary } from 'react-error-boundary';
-
 import { RouterContext } from './context';
 import { LoggerInstance, atLeastReact18 } from './utils';
 

package/src/remote/index.tsx

@@ -9,7 +9,7 @@ import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
-import bridgeHook from '../lifecycle';
+import { registerBridgeLifeCycle } from '../lifecycle';
 import { LoggerInstance, pathJoin } from '../utils';
 
 declare const __APP_VERSION__: string;
@@ -40,6 +40,7 @@ const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
+  const bridgeHook = registerBridgeLifeCycle();
   const RemoteApp = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -79,9 +80,13 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
-        bridgeHook.lifecycle.beforeBridgeRender.emit({
-          ...renderProps,
-        });
+
+        if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeRender) {
+          bridgeHook?.lifecycle?.beforeBridgeRender.emit({
+            ...renderProps,
+          });
+        }
+
         providerReturn.render(renderProps);
       });
 
@@ -93,14 +98,16 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
-            bridgeHook.lifecycle.beforeBridgeDestroy.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps,
-            });
+            if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeDestroy) {
+              bridgeHook?.lifecycle?.beforeBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps,
+              });
+            }
             providerInfoRef.current?.destroy({
               dom: renderDom.current,
             });