@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20240731082143 to 0.0.0-next-20240731105745

__tests__/util.ts

@@ -15,2 +15,6 @@ import { JSDOM } from 'jsdom';
   container.setAttribute('id', 'container');
+  container.setAttribute('data-testid', 'container');
+
+  container.setAttribute('background', 'rgb(255, 112, 127)');
+
   document.body.appendChild(container);
@@ -26,2 +30,16 @@
 
+export function createCustomContainer() {
+  const container = document.createElement('div');
+  container.setAttribute('id', 'container-custom');
+  container.setAttribute('data-testid', 'container-custom');
+  document.body.appendChild(container);
+
+  return {
+    clean: () => {
+      document.body.removeChild(container);
+    },
+    container,
+  };
+}
+
 export function getWindowImpl(initialUrl: string, isHash = false): Window {
@@ -28,0 +46,0 @@ // Need to use our own custom DOM in order to get a working history

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20240731082143
+## 0.0.0-next-20240731105745
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240731082143
+- 67fa05b: feat(@module-federation/bridge): optimize @module-federation/bridge package
+- Updated dependencies [67fa05b]
+  - @module-federation/bridge-shared@0.0.0-next-20240731105745
 
@@ -9,0 +11,0 @@ ## 0.3.3

dist/index.cjs.js

@@ -120,51 +120,75 @@ "use strict";
 }
-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 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.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
+          rootRef.current = domElement;
+        } else {
+          domElement = rootRef.current;
         }
+        const renderProps = {
+          name,
+          dom: domElement,
+          basename,
+          memoryRoute,
+          ...resProps
+        };
+        renderDom.current = rootRef.current;
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps
+        );
+        providerReturn.render(renderProps);
       });
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
-};
-RemoteApp["__APP_VERSION__"] = "0.3.3";
+      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.3";
+  return /* @__PURE__ */ React.createElement(RemoteApp2, null);
+});
 function withRouterData(WrappedComponent) {
-  return (props) => {
+  const Component = React.forwardRef(function(props, ref) {
     var _a;
@@ -227,6 +251,9 @@ let enableDispathPopstate = false;
     }
-    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
-  };
+    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
+  });
+  return React.forwardRef(function(props, ref) {
+    return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
+  });
 }
-const RemoteApp$1 = withRouterData(RemoteApp);
+const RemoteApp = withRouterData(RemoteAppWrapper);
 function createLazyRemoteComponent(info) {
@@ -248,5 +275,5 @@ const exportName = (info == null ? void 0 : info.export) || "default";
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = React.forwardRef((props, _ref) => {
+        const RemoteAppComponent = React.forwardRef((props, ref) => {
           return /* @__PURE__ */ React.createElement(
-            RemoteApp$1,
+            RemoteApp,
             {
@@ -256,2 +283,3 @@ name: moduleName,
               exportName: info.export || "default",
+              ref,
               ...props
@@ -281,6 +309,6 @@ }
 function createRemoteComponent(info) {
-  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 })));
-  };
+  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 })));
+  });
 }
@@ -315,28 +343,55 @@ var client = {};
     const RawComponent = (info) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = 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 }));
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
     };
     return {
-      render(info) {
+      async render(info) {
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (context.atLeastReact18(React__namespace)) {
-          const root = client.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            /* @__PURE__ */ React__namespace.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
+          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
+                  }
                 }
-              }
-            )
-          );
+              )
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFunc(
             /* @__PURE__ */ React__namespace.createElement(
@@ -357,3 +412,3 @@ RawComponent,
       },
-      destroy(info) {
+      async destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
@@ -360,0 +415,0 @@ dom: info.dom

dist/index.d.ts

 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): void;
+    render(info: RenderFnParams & any): Promise<void>;
     destroy(info: {
         dom: HTMLElement;
-    }): void;
+    }): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
@@ -21,6 +25,4 @@ __BRIDGE_FN__: (_args: T) => void;
     export?: E;
-}): (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;
+    dom?: string;
+}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>>;
 
@@ -53,5 +55,6 @@ declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
-export declare interface ProviderParams {
+export declare interface ProviderParams extends default_2.HTMLAttributes<HTMLDivElement> {
     name?: string;
@@ -62,2 +65,5 @@ basename?: string;
     };
+    props?: {
+        [key: string]: any;
+    };
 }
@@ -69,2 +75,4 @@
 
+declare type RootType = HTMLElement | default_3.Root;
+
 export { }

dist/index.es.js

 import * as React from "react";
-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 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 * as ReactRouterDOM from "react-router-dom";
@@ -101,51 +101,75 @@ import ReactDOM from "react-dom";
 }
-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 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.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
+          rootRef.current = domElement;
+        } else {
+          domElement = rootRef.current;
         }
+        const renderProps = {
+          name,
+          dom: domElement,
+          basename,
+          memoryRoute,
+          ...resProps
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps
+        );
+        providerReturn.render(renderProps);
       });
-    };
-  }, []);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
-};
-RemoteApp["__APP_VERSION__"] = "0.3.3";
+      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.3";
+  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
+});
 function withRouterData(WrappedComponent) {
-  return (props) => {
+  const Component2 = forwardRef(function(props, ref) {
     var _a;
@@ -208,6 +232,9 @@ let enableDispathPopstate = false;
     }
-    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
-  };
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
+  });
+  return forwardRef(function(props, ref) {
+    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
+  });
 }
-const RemoteApp$1 = withRouterData(RemoteApp);
+const RemoteApp = withRouterData(RemoteAppWrapper);
 function createLazyRemoteComponent(info) {
@@ -229,5 +256,5 @@ const exportName = (info == null ? void 0 : info.export) || "default";
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, _ref) => {
+        const RemoteAppComponent = forwardRef((props, ref) => {
           return /* @__PURE__ */ React__default.createElement(
-            RemoteApp$1,
+            RemoteApp,
             {
@@ -237,2 +264,3 @@ name: moduleName,
               exportName: info.export || "default",
+              ref,
               ...props
@@ -262,6 +290,6 @@ }
 function createRemoteComponent(info) {
-  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 })));
-  };
+  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 })));
+  });
 }
@@ -296,28 +324,55 @@ var client = {};
     const RawComponent = (info) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
     };
     return {
-      render(info) {
+      async render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          const root = client.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            /* @__PURE__ */ React.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
+          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
+                  }
                 }
-              }
-            )
-          );
+              )
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFunc(
             /* @__PURE__ */ React.createElement(
@@ -338,3 +393,3 @@ RawComponent,
       },
-      destroy(info) {
+      async destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
@@ -341,0 +396,0 @@ dom: info.dom

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240731082143",
+  "version": "0.0.0-next-20240731105745",
   "publishConfig": {
@@ -23,2 +23,12 @@ "access": "public"
     },
+    "./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"
+    },
     "./*": "./*"
@@ -29,3 +39,3 @@ },
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240731082143"
+    "@module-federation/bridge-shared": "0.0.0-next-20240731105745"
   },
@@ -32,0 +42,0 @@ "peerDependencies": {

vite.config.ts

@@ -25,2 +25,4 @@ import { defineConfig } from 'vite';
         router: path.resolve(__dirname, 'src/router.tsx'),
+        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
       },
@@ -36,2 +38,4 @@ formats: ['cjs', 'es'],
         'react-router-dom/',
+        'react-router-dom/index.js',
+        'react-router-dom/dist/index.js',
       ],
@@ -38,0 +42,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93477

increased by39.9%

Number of package files

37

increased by27.59%

Lines of code

2558

increased by37.97%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20240731105745(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20240731082143(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20240731105745