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

package/CHANGELOG.md

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

package/dist/index.cjs.js

@@ -327,7 +327,6 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  let provider;
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
@@ -342,65 +341,62 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
-    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);
+    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 (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 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);
+            const root = client.createRoot(info.dom);
+            root.render(rootComponentWithErrorBoundary);
+            rootMap.set(info.dom, root);
           }
-        },
-        rawComponent: bridgeInfo.rootComponent,
-        __BRIDGE_FN__: (_args) => {
+        } else {
+          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-      };
-    }
-    return provider;
+      },
+      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) => {
+      }
+    };
   };
 }
 exports.createBridgeComponent = createBridgeComponent;

package/dist/index.d.ts

@@ -5,7 +5,14 @@ import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => Provider<T>;
+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 createRemoteComponent<T, E extends keyof T>(info: {
     loader: () => Promise<T>;
@@ -38,15 +45,6 @@ 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

@@ -308,7 +308,6 @@ if (process.env.NODE_ENV === "production") {
   };
 }
 function createBridgeComponent(bridgeInfo) {
-  let provider;
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
@@ -323,65 +322,62 @@ function createBridgeComponent(bridgeInfo) {
         }
       ));
     };
-    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);
+    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 (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 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);
+            const root = client.createRoot(info.dom);
+            root.render(rootComponentWithErrorBoundary);
+            rootMap.set(info.dom, root);
           }
-        },
-        rawComponent: bridgeInfo.rootComponent,
-        __BRIDGE_FN__: (_args) => {
+        } else {
+          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
-      };
-    }
-    return provider;
+      },
+      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) => {
+      }
+    };
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240822101913",
+  "version": "0.0.0-next-20240823062237",
   "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-20240822101913"
+    "@module-federation/bridge-shared": "0.0.0-next-20240823062237"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/provider.tsx

@@ -18,15 +18,8 @@ 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 }) => {
@@ -43,66 +36,63 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
       );
     };
 
-    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>
-          );
+    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 (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 {
-            // 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);
+        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 {
-            ReactDOM.unmountComponentAtNode(info.dom);
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
+            root.render(rootComponentWithErrorBoundary);
+            rootMap.set(info.dom, root);
           }
-        },
-        rawComponent: bridgeInfo.rootComponent,
-        __BRIDGE_FN__: (_args: T) => {},
-      };
-    }
-    return provider;
+        } 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) => {},
+    };
   };
 }