@module-federation/bridge-react 0.0.0-next-20240822063818 → 0.0.0-next-20240822101913

package/CHANGELOG.md

@@ -1,10 +1,17 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240822063818
+## 0.0.0-next-20240822101913
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240822063818
+- 3082116: feat: support module isolated reported
+  - @module-federation/bridge-shared@0.0.0-next-20240822101913
+
+## 0.5.1
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.5.1
 
 ## 0.5.0
 

package/dist/index.cjs.js

@@ -177,7 +177,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.5.0";
+  RemoteApp2["__APP_VERSION__"] = "0.5.1";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -327,6 +327,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
+  let provider;
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
@@ -341,62 +342,65 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
-    return {
-      async render(info) {
-        context.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
-          /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo
+    if (!provider) {
+      provider = {
+        async render(info) {
+          context.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
+            /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
+              RawComponent,
+              {
+                appInfo: {
+                  moduleName,
+                  basename,
+                  memoryRoute
+                },
+                propsInfo
+              }
+            ))
+          );
+          if (context.atLeastReact18(React__namespace)) {
+            if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+              Promise.resolve(
+                bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+              ).then((root) => rootMap.set(info.dom, root));
+            } else {
+              const root = client.createRoot(info.dom);
+              root.render(rootComponentWithErrorBoundary);
+              rootMap.set(info.dom, root);
             }
-          ))
-        );
-        if (context.atLeastReact18(React__namespace)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
           } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
+            const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+            renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
           }
-        } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
-        }
-      },
-      async destroy(info) {
-        context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        if (context.atLeastReact18(React__namespace)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
-          rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
+        },
+        async destroy(info) {
+          context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
+            dom: info.dom
+          });
+          if (context.atLeastReact18(React__namespace)) {
+            const root = rootMap.get(info.dom);
+            root == null ? void 0 : root.unmount();
+            rootMap.delete(info.dom);
+          } else {
+            ReactDOM.unmountComponentAtNode(info.dom);
+          }
+        },
+        rawComponent: bridgeInfo.rootComponent,
+        __BRIDGE_FN__: (_args) => {
         }
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
-      }
-    };
+      };
+    }
+    return provider;
   };
 }
 exports.createBridgeComponent = createBridgeComponent;

package/dist/index.d.ts

@@ -5,14 +5,7 @@ import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): Promise<void>;
-    destroy(info: {
-        dom: HTMLElement;
-    }): Promise<void>;
-    rawComponent: React_2.ComponentType<T>;
-    __BRIDGE_FN__: (_args: T) => void;
-};
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => Provider<T>;
 
 export declare function createRemoteComponent<T, E extends keyof T>(info: {
     loader: () => Promise<T>;
@@ -45,6 +38,15 @@ declare type FallbackProps = {
     resetErrorBoundary: (...args: any[]) => void;
 };
 
+declare type Provider<T> = {
+    render(info: any): Promise<void>;
+    destroy(info: {
+        dom: HTMLElement;
+    }): Promise<void>;
+    rawComponent: React_2.ComponentType<T>;
+    __BRIDGE_FN__: (_args: T) => 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

@@ -158,7 +158,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.5.0";
+  RemoteApp2["__APP_VERSION__"] = "0.5.1";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -308,6 +308,7 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
+  let provider;
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
@@ -322,62 +323,65 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
-    return {
-      async render(info) {
-        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
-          /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo
+    if (!provider) {
+      provider = {
+        async render(info) {
+          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
+            /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                appInfo: {
+                  moduleName,
+                  basename,
+                  memoryRoute
+                },
+                propsInfo
+              }
+            ))
+          );
+          if (atLeastReact18(React)) {
+            if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
+              Promise.resolve(
+                bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+              ).then((root) => rootMap.set(info.dom, root));
+            } else {
+              const root = client.createRoot(info.dom);
+              root.render(rootComponentWithErrorBoundary);
+              rootMap.set(info.dom, root);
             }
-          ))
-        );
-        if (atLeastReact18(React)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
           } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
+            const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+            renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
           }
-        } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
-        }
-      },
-      async destroy(info) {
-        LoggerInstance.log(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        if (atLeastReact18(React)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
-          rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
+        },
+        async destroy(info) {
+          LoggerInstance.log(`createBridgeComponent destroy Info`, {
+            dom: info.dom
+          });
+          if (atLeastReact18(React)) {
+            const root = rootMap.get(info.dom);
+            root == null ? void 0 : root.unmount();
+            rootMap.delete(info.dom);
+          } else {
+            ReactDOM.unmountComponentAtNode(info.dom);
+          }
+        },
+        rawComponent: bridgeInfo.rootComponent,
+        __BRIDGE_FN__: (_args) => {
         }
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
-      }
-    };
+      };
+    }
+    return provider;
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240822063818",
+  "version": "0.0.0-next-20240822101913",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240822063818"
+    "@module-federation/bridge-shared": "0.0.0-next-20240822101913"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

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