@module-federation/bridge-react 0.0.0-next-20240726084328 → 0.0.0-next-20240731082143

package/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240726084328
+## 0.0.0-next-20240731082143
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240726084328
+- @module-federation/bridge-shared@0.0.0-next-20240731082143
+
+## 0.3.3
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.3.3
+
+## 0.3.2
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.3.2
 
 ## 0.3.1
 

package/dist/index.cjs.js

@@ -117,70 +117,55 @@ function hasArrayChanged() {
   let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
   return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
 }
-const RemoteAppWrapper = React.forwardRef(function(props, ref) {
-  const RemoteApp2 = () => {
-    const {
-      name,
-      memoryRoute,
-      basename,
-      providerInfo,
-      dom,
-      className,
-      style,
-      ...resProps
-    } = props;
-    const rootRef = ref && "current" in ref ? ref : React.useRef(null);
-    const renderDom = React.useRef(null);
-    const providerInfoRef = React.useRef(null);
-    React.useEffect(() => {
-      const renderTimeout = setTimeout(() => {
-        const providerReturn = providerInfo();
-        providerInfoRef.current = providerReturn;
-        let domElement = null;
-        if (dom) {
-          domElement = document.getElementById(dom.replace("#", ""));
-          rootRef.current = domElement;
-        } else {
-          domElement = rootRef.current;
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}) => {
+  const rootRef = React.useRef(null);
+  const renderDom = React.useRef(null);
+  const providerInfoRef = React.useRef(null);
+  React.useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps
+      };
+      renderDom.current = rootRef.current;
+      context.LoggerInstance.log(
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps
+      );
+      providerReturn.render(renderProps);
+    });
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        var _a, _b;
+        if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+          context.LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current }
+          );
+          (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            dom: renderDom.current
+          });
         }
-        const renderProps = {
-          name,
-          // dom: rootRef.current,
-          dom: domElement,
-          basename,
-          memoryRoute,
-          ...resProps
-        };
-        renderDom.current = rootRef.current;
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent render >>>`,
-          renderProps
-        );
-        providerReturn.render(renderProps);
       });
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          var _a, _b;
-          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-            context.LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { name, basename, dom: renderDom.current }
-            );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
-              dom: renderDom.current
-            });
-          }
-        });
-      };
-    }, []);
-    return dom ? null : /* @__PURE__ */ React.createElement("div", { className: props == null ? void 0 : props.className, style: props == null ? void 0 : props.style, ref: rootRef });
-  };
-  RemoteApp2["__APP_VERSION__"] = "0.3.1";
-  return /* @__PURE__ */ React.createElement(RemoteApp2, null);
-});
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
+};
+RemoteApp["__APP_VERSION__"] = "0.3.3";
 function withRouterData(WrappedComponent) {
-  const Component = React.forwardRef(function(props, ref) {
+  return (props) => {
     var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
@@ -238,13 +223,10 @@ function withRouterData(WrappedComponent) {
         setPathname(location.pathname);
       }, [location]);
     }
-    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
-  });
-  return React.forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
-  });
+    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
+  };
 }
-const RemoteApp = withRouterData(RemoteAppWrapper);
+const RemoteApp$1 = withRouterData(RemoteApp);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React.lazy(async () => {
@@ -261,14 +243,13 @@ function createLazyRemoteComponent(info) {
       );
       const exportFn = m2[exportName];
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = React.forwardRef((props, ref) => {
+        const RemoteAppComponent = React.forwardRef((props, _ref) => {
           return /* @__PURE__ */ React.createElement(
-            RemoteApp,
+            RemoteApp$1,
             {
               name: moduleName,
               providerInfo: exportFn,
               exportName: info.export || "default",
-              ref,
               ...props
             }
           );
@@ -293,10 +274,10 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  return React.forwardRef(function(props, ref) {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, dom: info == null ? void 0 : info.dom, ref })));
-  });
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
+  };
 }
 var client = {};
 var m = ReactDOM;
@@ -326,50 +307,32 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
+      const { appInfo, propsInfo } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
     };
     return {
-      async render(info) {
+      render(info) {
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (context.atLeastReact18(React__namespace)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
-              /* @__PURE__ */ React__namespace.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
-                  }
-                }
-              ),
-              info.dom
-            )).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(
-              /* @__PURE__ */ React__namespace.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
-                  }
+          const root = client.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            /* @__PURE__ */ React__namespace.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
                 }
-              )
-            );
-            rootMap.set(info.dom, root);
-          }
+              }
+            )
+          );
         } else {
-          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFunc(
+          ReactDOM.render(
             /* @__PURE__ */ React__namespace.createElement(
               RawComponent,
               {
@@ -385,7 +348,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      async destroy(info) {
+      destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/dist/index.d.ts

@@ -1,18 +1,14 @@
 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 { ForwardRefExoticComponent } from 'react';
 import { PropsWithChildren } from 'react';
-import { PropsWithoutRef } from 'react';
 import * as React_2 from 'react';
-import { RefAttributes } from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): Promise<void>;
+    render(info: RenderFnParams & any): void;
     destroy(info: {
         dom: HTMLElement;
-    }): Promise<void>;
+    }): void;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
@@ -22,8 +18,10 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     loading: default_2.ReactNode;
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
-    dom?: string;
-}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>>;
+}): (props: {
+    basename?: ProviderParams['basename'];
+    memoryRoute?: ProviderParams['memoryRoute'];
+} & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;
 
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;
@@ -51,24 +49,18 @@ declare type FallbackProps = {
 
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
-    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
-export declare interface ProviderParams extends default_2.HTMLAttributes<HTMLDivElement> {
+export declare interface ProviderParams {
     name?: string;
     basename?: string;
     memoryRoute?: {
         entryPath: string;
     };
-    props?: {
-        [key: string]: any;
-    };
 }
 
 export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
 }
 
-declare type RootType = HTMLElement | default_3.Root;
-
 export { }

package/dist/index.es.js

@@ -1,6 +1,6 @@
 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";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import * as ReactRouterDOM from "react-router-dom";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
@@ -98,70 +98,55 @@ function hasArrayChanged() {
   let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
   return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
 }
-const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const RemoteApp2 = () => {
-    const {
-      name,
-      memoryRoute,
-      basename,
-      providerInfo,
-      dom,
-      className,
-      style,
-      ...resProps
-    } = props;
-    const rootRef = ref && "current" in ref ? ref : useRef(null);
-    const renderDom = useRef(null);
-    const providerInfoRef = useRef(null);
-    useEffect(() => {
-      const renderTimeout = setTimeout(() => {
-        const providerReturn = providerInfo();
-        providerInfoRef.current = providerReturn;
-        let domElement = null;
-        if (dom) {
-          domElement = document.getElementById(dom.replace("#", ""));
-          rootRef.current = domElement;
-        } else {
-          domElement = rootRef.current;
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef(null);
+  useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps
+      };
+      renderDom.current = rootRef.current;
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps
+      );
+      providerReturn.render(renderProps);
+    });
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        var _a, _b;
+        if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current }
+          );
+          (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            dom: renderDom.current
+          });
         }
-        const renderProps = {
-          name,
-          // dom: rootRef.current,
-          dom: domElement,
-          basename,
-          memoryRoute,
-          ...resProps
-        };
-        renderDom.current = rootRef.current;
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent render >>>`,
-          renderProps
-        );
-        providerReturn.render(renderProps);
       });
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          var _a, _b;
-          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { name, basename, dom: renderDom.current }
-            );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
-              dom: renderDom.current
-            });
-          }
-        });
-      };
-    }, []);
-    return dom ? null : /* @__PURE__ */ React__default.createElement("div", { className: props == null ? void 0 : props.className, style: props == null ? void 0 : props.style, ref: rootRef });
-  };
-  RemoteApp2["__APP_VERSION__"] = "0.3.1";
-  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
-});
+    };
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
+};
+RemoteApp["__APP_VERSION__"] = "0.3.3";
 function withRouterData(WrappedComponent) {
-  const Component2 = forwardRef(function(props, ref) {
+  return (props) => {
     var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
@@ -219,13 +204,10 @@ function withRouterData(WrappedComponent) {
         setPathname(location.pathname);
       }, [location]);
     }
-    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
-  });
-  return forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
-  });
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
+  };
 }
-const RemoteApp = withRouterData(RemoteAppWrapper);
+const RemoteApp$1 = withRouterData(RemoteApp);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React__default.lazy(async () => {
@@ -242,14 +224,13 @@ function createLazyRemoteComponent(info) {
       );
       const exportFn = m2[exportName];
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, ref) => {
+        const RemoteAppComponent = forwardRef((props, _ref) => {
           return /* @__PURE__ */ React__default.createElement(
-            RemoteApp,
+            RemoteApp$1,
             {
               name: moduleName,
               providerInfo: exportFn,
               exportName: info.export || "default",
-              ref,
               ...props
             }
           );
@@ -274,10 +255,10 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  return forwardRef(function(props, ref) {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, dom: info == null ? void 0 : info.dom, ref })));
-  });
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
+  };
 }
 var client = {};
 var m = ReactDOM;
@@ -307,50 +288,32 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
+      const { appInfo, propsInfo } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
     };
     return {
-      async render(info) {
+      render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
-              /* @__PURE__ */ React.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
-                  }
-                }
-              ),
-              info.dom
-            )).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(
-              /* @__PURE__ */ React.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
-                  }
+          const root = client.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
                 }
-              )
-            );
-            rootMap.set(info.dom, root);
-          }
+              }
+            )
+          );
         } else {
-          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFunc(
+          ReactDOM.render(
             /* @__PURE__ */ React.createElement(
               RawComponent,
               {
@@ -366,7 +329,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      async destroy(info) {
+      destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240726084328",
+  "version": "0.0.0-next-20240731082143",
   "publishConfig": {
     "access": "public"
   },
@@ -20,22 +20,12 @@
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
-    "./router-v5": {
-      "types": "./dist/router-v5.d.ts",
-      "import": "./dist/router-v5.es.js",
-      "require": "./dist/router-v5.cjs.js"
-    },
-    "./router-v6": {
-      "types": "./dist/router-v6.d.ts",
-      "import": "./dist/router-v6.es.js",
-      "require": "./dist/router-v6.cjs.js"
-    },
     "./*": "./*"
   },
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240726084328"
+    "@module-federation/bridge-shared": "0.0.0-next-20240731082143"
   },
   "peerDependencies": {
     "react": ">=16.9.0",