@module-federation/bridge-react 0.0.0-next-20240620052430 → 0.2.0

package/CHANGELOG.md

@@ -1,7 +1,12 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240620052430
+## 0.2.0
+
+### Minor Changes
+
+- d2ab821: feat(bridge): Supports exporting and loading of application-level modules (with routing), currently supports react and vue3
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240620052430
+- Updated dependencies [d2ab821]
+  - @module-federation/bridge-shared@0.2.0

package/__tests__/bridge.spec.tsx

@@ -51,15 +51,17 @@ describe('bridge', () => {
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent(async () => {
-      return {
-        default: BridgeComponent,
-      };
+    const RemoteComponent = createRemoteComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
     });
 
-    const { container } = render(
-      <RemoteComponent fallback={<div>loading</div>} msg={'hello world'} />,
-    );
+    const { container } = render(<RemoteComponent msg={'hello world'} />);
     expect(getHtml(container)).toMatch('loading');
 
     await sleep(200);

package/dist/{context-ePt4wynZ.cjs → context--mtFt3tp.cjs}

@@ -48,8 +48,26 @@ function atLeastReact18(React2) {
     return false;
   }
 }
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
 const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
 exports.atLeastReact18 = atLeastReact18;
 exports.f = f;
+exports.pathJoin = pathJoin;

package/dist/{context-CPtN38Ur.js → context-Bw2PEwa6.js}

@@ -47,10 +47,28 @@ function atLeastReact18(React2) {
     return false;
   }
 }
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
 const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,
   atLeastReact18 as a,
-  f
+  f,
+  pathJoin as p
 };

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDOM = require("react-router-dom");
-const context = require("./context-ePt4wynZ.cjs");
+const context = require("./context--mtFt3tp.cjs");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -22,6 +22,101 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
+const ErrorBoundaryContext = React.createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = React.createElement(FallbackComponent, props);
+      } else if (fallback === null || React.isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return React.createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  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 RemoteApp = ({
   name,
   memoryRoute,
@@ -83,9 +178,10 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
+    var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
     let basename = "/";
     let enableDispathPopstate = false;
@@ -96,41 +192,84 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM__namespace;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = React.useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = context.pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          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) || "/");
+        }
+      }
+    }
     const LazyComponent = React.useMemo(() => {
       return React.lazy(async () => {
         context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal
         });
-        const m2 = await lazyComponent();
-        const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent loadRemote info >>>`,
-          { basename, name: moduleName, module: m2, exportName, props }
-        );
-        const exportFn = m2[exportName];
-        if (exportName in m2 && typeof exportFn === "function") {
-          return {
-            default: () => /* @__PURE__ */ React.createElement(
-              RemoteApp,
-              {
-                name: moduleName,
-                dispathPopstate: enableDispathPopstate,
-                ...info,
-                ...props,
-                providerInfo: exportFn,
-                basename
-              }
-            )
-          };
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          context.LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            context.LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
         }
-        throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React.createElement(LazyComponent, null));
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, null)));
   };
 }
 var client = {};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
+import { ErrorInfo } from 'react';
+import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderFnParams & any): void;
@@ -11,14 +13,40 @@ export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>
     __BRIDGE_FN__: (_args: T) => void;
 };
 
-export declare function createRemoteComponent<T, E extends keyof T>(lazyComponent: () => Promise<T>, info?: {
+export declare function createRemoteComponent<T, E extends keyof T>(info: {
+    loader: () => Promise<T>;
+    loading: default_2.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
 }): (props: {
-    basename?: ProviderParams['basename'];
-    memoryRoute?: ProviderParams['memoryRoute'];
-    fallback: ReactNode;
+    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;
+    FallbackComponent: ComponentType<FallbackProps>;
+    fallbackRender?: never;
+};
+
+declare type ErrorBoundarySharedProps = PropsWithChildren<{
+    onError?: (error: Error, info: ErrorInfo) => void;
+    onReset?: (details: {
+        reason: "imperative-api";
+        args: any[];
+    } | {
+        reason: "keys";
+        prev: any[] | undefined;
+        next: any[] | undefined;
+    }) => void;
+    resetKeys?: any[];
+}>;
+
+declare type FallbackProps = {
+    error: any;
+    resetErrorBoundary: (...args: any[]) => void;
+};
+
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
 };

package/dist/index.es.js

@@ -1,8 +1,103 @@
 import * as React from "react";
-import React__default, { useMemo, useRef, useState, useEffect } from "react";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useMemo, useRef, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
-import { L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-CPtN38Ur.js";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import ReactDOM from "react-dom";
+const ErrorBoundaryContext = createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback === null || isValidElement(fallback)) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  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 RemoteApp = ({
   name,
   memoryRoute,
@@ -64,9 +159,10 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.0.1";
-function createRemoteComponent(lazyComponent, info) {
+RemoteApp["__APP_VERSION__"] = "0.2.0";
+function createRemoteComponent(info) {
   return (props) => {
+    var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
     let basename = "/";
     let enableDispathPopstate = false;
@@ -77,41 +173,84 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          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) || "/");
+        }
+      }
+    }
     const LazyComponent = useMemo(() => {
       return React__default.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal
         });
-        const m2 = await lazyComponent();
-        const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent loadRemote info >>>`,
-          { basename, name: moduleName, module: m2, exportName, props }
-        );
-        const exportFn = m2[exportName];
-        if (exportName in m2 && typeof exportFn === "function") {
-          return {
-            default: () => /* @__PURE__ */ React__default.createElement(
-              RemoteApp,
-              {
-                name: moduleName,
-                dispathPopstate: enableDispathPopstate,
-                ...info,
-                ...props,
-                providerInfo: exportFn,
-                basename
-              }
-            )
-          };
+        try {
+          const m2 = await info.loader();
+          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m2, exportName, props }
+          );
+          const exportFn = m2[exportName];
+          if (exportName in m2 && typeof exportFn === "function") {
+            return {
+              default: () => /* @__PURE__ */ React__default.createElement(
+                RemoteApp,
+                {
+                  name: moduleName,
+                  dispathPopstate: enableDispathPopstate,
+                  ...info,
+                  ...props,
+                  providerInfo: exportFn,
+                  basename
+                }
+              )
+            };
+          } else {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m2, exportName, props }
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName
+              )}`
+            );
+          }
+        } catch (error) {
+          throw error;
         }
-        throw Error("module not found");
       });
     }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React__default.createElement(LazyComponent, null));
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, null)));
   };
 }
 var client = {};

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-ePt4wynZ.cjs");
+const context = require("./context--mtFt3tp.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -57,26 +57,23 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { ...props });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom__namespace.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom__namespace.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });
-    return /* @__PURE__ */ React.createElement(
-      ReactRouterDom__namespace.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
 }
 exports.BrowserRouter = WraperRouter;

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-CPtN38Ur.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
@@ -39,26 +39,23 @@ function WraperRouterProvider(props) {
     WraperRouterProviderProps: props,
     router
   });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
   if (!routerContextProps)
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { ...props });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
     });
-    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.RouterProvider, { router: MemeoryRouterInstance });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
-    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });
-    return /* @__PURE__ */ React__default.createElement(
-      ReactRouterDom.RouterProvider,
-      {
-        ...propsRes,
-        router: BrowserRouterInstance
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
 }
 export {

package/package.json

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

package/src/create.tsx

@@ -1,8 +1,12 @@
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
-import { LoggerInstance } from './utils';
+import { LoggerInstance, pathJoin } from './utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+import {
+  ErrorBoundary,
+  ErrorBoundaryPropsWithComponent,
+} from 'react-error-boundary';
 
 declare const __APP_VERSION__: string;
 
@@ -95,12 +99,12 @@ const RemoteApp = ({
 
 (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
 
-export function createRemoteComponent<T, E extends keyof T>(
-  lazyComponent: () => Promise<T>,
-  info?: {
-    export?: E;
-  },
-) {
+export function createRemoteComponent<T, E extends keyof T>(info: {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  export?: E;
+}) {
   type ExportType = T[E] extends (...args: any) => any
     ? ReturnType<T[E]>
     : never;
@@ -114,7 +118,6 @@ export function createRemoteComponent<T, E extends keyof T>(
     props: {
       basename?: ProviderParams['basename'];
       memoryRoute?: ProviderParams['memoryRoute'];
-      fallback: ReactNode;
     } & RawComponentType,
   ) => {
     const exportName = info?.export || 'default';
@@ -128,90 +131,106 @@ export function createRemoteComponent<T, E extends keyof T>(
       enableDispathPopstate = false;
     }
 
-    // if (props.basename) {
-    //   basename = props.basename
-    // } else if (enableDispathPopstate) {
-    //   const routerV5Api = 'useRoute' + 'Match';
-    //   const routerV6Api = 'useMatches';
-    //   const routerV5History = 'use' + 'History';
-    //   const useHref = 'useHref';
-
-    //   const match = (ReactRouterDOM as any)[routerV5Api]?.();
-    //   const matchs = (ReactRouterDOM as any)[routerV6Api]?.();
-    //   const location = ReactRouterDOM.useLocation();
-
-    //   if ((ReactRouterDOM as any)[routerV5History] /* react-router@5 */) {
-    //     // there is no dynamic switching of the router version in the project
-    //     // so hooks can be used in conditional judgment
-    //     // eslint-disable-next-line react-hooks/rules-of-hooks
-    //     const history = (ReactRouterDOM as any)[routerV5History]?.();
-    //     // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
-    //     basename = history?.createHref?.({ pathname: '/' });
-    //   } else if (useHref /* react-router@6 */) {
-    //     // eslint-disable-next-line react-hooks/rules-of-hooks
-    //     basename = useHref?.('/');
-    //   }
-    // }
-
-    // if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
-    //   routerContextVal = eval('useContext(ReactRouterDOM.UNSAFE_RouteContext)');
-    //   if (
-    //     routerContextVal &&
-    //     routerContextVal.matches &&
-    //     routerContextVal.matches[0] &&
-    //     routerContextVal.matches[0].pathnameBase
-    //   ) {
-    //     basename = routerContextVal.matches[0].pathnameBase;
-    //   }
-    //   enableDispathPopstate =
-    //     routerContextVal?.matches && routerContextVal?.matches.length > 0;
-    // }
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny: any = ReactRouterDOM;
+      // Avoid building tools checking references
+      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
+      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
+      const useHref = ReactRouterDOMAny['use' + 'Href'];
+      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
+
+      if (UNSAFE_RouteContext /* react-router@6 */) {
+        if (useHref) {
+          basename = useHref?.('/');
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (
+          routerContextVal &&
+          routerContextVal.matches &&
+          routerContextVal.matches[0] &&
+          routerContextVal.matches[0].pathnameBase
+        ) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || '/',
+          );
+        }
+      } /* react-router@5 */ else {
+        const match = useRouteMatch?.(); // v5
+        if (useHistory /* react-router@5 */) {
+          // there is no dynamic switching of the router version in the project
+          // so hooks can be used in conditional judgment
+          const history = useHistory?.();
+          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
+          basename = history?.createHref?.({ pathname: '/' });
+        }
+        if (match /* react-router@5 */) {
+          basename = pathJoin(basename, match?.path || '/');
+        }
+      }
+    }
 
     const LazyComponent = useMemo(() => {
       //@ts-ignore
       return React.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
           basename,
-          lazyComponent,
+          lazyComponent: info.loader,
           exportName,
           props,
           routerContextVal,
         });
-        const m = (await lazyComponent()) as RemoteModule;
-        // @ts-ignore
-        const moduleName = m && m[Symbol.for('mf_module_id')];
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent loadRemote info >>>`,
-          { basename, name: moduleName, module: m, exportName, props },
-        );
-
-        // @ts-ignore
-        const exportFn = m[exportName] as any;
-
-        if (exportName in m && typeof exportFn === 'function') {
-          return {
-            default: () => (
-              <RemoteApp
-                name={moduleName}
-                dispathPopstate={enableDispathPopstate}
-                {...info}
-                {...props}
-                providerInfo={exportFn}
-                basename={basename}
-              />
-            ),
-          };
-        }
+        try {
+          const m = (await info.loader()) as RemoteModule;
+          // @ts-ignore
+          const moduleName = m && m[Symbol.for('mf_module_id')];
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent loadRemote info >>>`,
+            { basename, name: moduleName, module: m, exportName, props },
+          );
 
-        throw Error('module not found');
+          // @ts-ignore
+          const exportFn = m[exportName] as any;
+
+          if (exportName in m && typeof exportFn === 'function') {
+            return {
+              default: () => (
+                <RemoteApp
+                  name={moduleName}
+                  dispathPopstate={enableDispathPopstate}
+                  {...info}
+                  {...props}
+                  providerInfo={exportFn}
+                  basename={basename}
+                />
+              ),
+            };
+          } else {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent module not found >>>`,
+              { basename, name: moduleName, module: m, exportName, props },
+            );
+            throw Error(
+              `Make sure that ${moduleName} has the correct export when export is ${String(
+                exportName,
+              )}`,
+            );
+          }
+        } catch (error) {
+          throw error;
+        }
       });
     }, [exportName, basename, props.memoryRoute]);
 
     //@ts-ignore
     return (
-      <React.Suspense fallback={props.fallback}>
-        <LazyComponent />
-      </React.Suspense>
+      <ErrorBoundary FallbackComponent={info.fallback}>
+        <React.Suspense fallback={info.loading}>
+          <LazyComponent />
+        </React.Suspense>
+      </ErrorBoundary>
     );
   };
 }

package/src/router.tsx

@@ -47,24 +47,25 @@ function WraperRouterProvider(
     WraperRouterProviderProps: props,
     router,
   });
-  if (!routerContextProps) return <ReactRouterDom.RouterProvider {...props} />;
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
   if (routerContextProps.memoryRoute) {
-    const MemeoryRouterInstance = ReactRouterDom.createMemoryRouter(routers, {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps?.memoryRoute.entryPath],
     });
-    return <ReactRouterDom.RouterProvider router={MemeoryRouterInstance} />;
+    return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
-    const BrowserRouterInstance = ReactRouterDom.createBrowserRouter(routers, {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
       basename: routerContextProps.basename,
       future: router.future,
       window: router.window,
     });
-    return (
-      <ReactRouterDom.RouterProvider
-        {...propsRes}
-        router={BrowserRouterInstance}
-      />
-    );
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
   }
 }
 

package/src/utils.ts

@@ -21,3 +21,21 @@ export function atLeastReact18(React: typeReact) {
     return false;
   }
 }
+
+export function pathJoin(...args: string[]) {
+  const res = args.reduce((res, path: string) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== 'string') {
+      return res;
+    }
+    if (nPath[0] !== '/') {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === '/') {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res + nPath;
+  }, '');
+  return res || '/';
+}