@module-federation/bridge-react 0.0.0-next-20240816090839 → 0.0.0-next-20240818132231

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240816090839
+## 0.0.0-next-20240818132231
 
 ### Patch Changes
 
 - 49d6135: feat(@module-federation/bridge): enhance Bridge capabilities and fix some issues
 - Updated dependencies [49d6135]
-  - @module-federation/bridge-shared@0.0.0-next-20240816090839
+  - @module-federation/bridge-shared@0.0.0-next-20240818132231
 
 ## 0.4.0
 

package/dist/index.cjs.js

@@ -295,13 +295,12 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  return React.forwardRef((props, ref) => {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return (
-      // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
-      /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })))
-    );
-  });
+  return React.forwardRef(
+    (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, ref })));
+    }
+  );
 }
 var client = {};
 var m = ReactDOM;

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     loading: default_2.ReactNode;
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
-}): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__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.RefAttributes<unknown>>;
+}): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__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.RefAttributes<HTMLDivElement>>;
 
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;

package/dist/index.es.js

@@ -276,13 +276,12 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  return forwardRef((props, ref) => {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return (
-      // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
-      /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })))
-    );
-  });
+  return forwardRef(
+    (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, ref })));
+    }
+  );
 }
 var client = {};
 var m = ReactDOM;

package/dist/router-v5.cjs.js

@@ -1,15 +1,48 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("react");
+const React = require("react");
 const ReactRouterDom = require("react-router-dom/index.js");
-require("./context--mtFt3tp.cjs");
-const router = require("./router.cjs.js");
-exports.BrowserRouter = router.BrowserRouter;
-exports.RouterProvider = router.RouterProvider;
-Object.keys(ReactRouterDom).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => ReactRouterDom[k]
-    });
-});
+const context = require("./context--mtFt3tp.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+exports.BrowserRouter = WraperRouter;

package/dist/router-v5.d.ts

@@ -1,11 +1,6 @@
 import { default as default_2 } from 'react';
-import * as ReactRouterDom from 'react-router-dom/';
+import * as ReactRouterDom from 'react-router-dom/index.js';
 
 export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
 
-export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
-
-
-export * from "react-router-dom/";
-
 export { }

package/dist/router-v5.es.js

@@ -1,8 +1,31 @@
-import "react";
-export * from "react-router-dom/index.js";
-import "./context-Bw2PEwa6.js";
-import { BrowserRouter, RouterProvider } from "./router.es.js";
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React__default.createElement(
+      ReactRouterDom.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
 export {
-  BrowserRouter,
-  RouterProvider
+  WraperRouter as BrowserRouter
 };

package/dist/router-v6.cjs.js

@@ -1,11 +1,53 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("react");
+const React = require("react");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
-require("./context--mtFt3tp.cjs");
-const router = require("./router.cjs.js");
-exports.BrowserRouter = router.BrowserRouter;
-exports.RouterProvider = router.RouterProvider;
+const context = require("./context--mtFt3tp.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routers = router.routes;
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+exports.RouterProvider = WraperRouterProvider;
 Object.keys(ReactRouterDom).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
     Object.defineProperty(exports, k, {

package/dist/router-v6.d.ts

@@ -1,11 +1,9 @@
 import { default as default_2 } from 'react';
-import * as ReactRouterDom from 'react-router-dom/';
-
-export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
 
 export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
 
 
-export * from "react-router-dom/";
+export * from "react-router-dom/dist/index.js";
 
 export { }

package/dist/router-v6.es.js

@@ -1,8 +1,34 @@
-import "react";
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/dist/index.js";
 export * from "react-router-dom/dist/index.js";
-import "./context-Bw2PEwa6.js";
-import { BrowserRouter, RouterProvider } from "./router.es.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
 export {
-  BrowserRouter,
-  RouterProvider
+  WraperRouterProvider as RouterProvider
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240816090839",
+  "version": "0.0.0-next-20240818132231",
   "publishConfig": {
     "access": "public"
   },
@@ -21,21 +21,21 @@
       "require": "./dist/router.cjs.js"
     },
     "./router-v5": {
-      "types": "./dist/router.d.ts",
-      "import": "./dist/router.es.js",
-      "require": "./dist/router.cjs.js"
+      "types": "./dist/router-v5.d.ts",
+      "import": "./dist/router-v5.es.js",
+      "require": "./dist/router-v5.cjs.js"
     },
     "./router-v6": {
-      "types": "./dist/router.d.ts",
-      "import": "./dist/router.es.js",
-      "require": "./dist/router.cjs.js"
+      "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-20240816090839"
+    "@module-federation/bridge-shared": "0.0.0-next-20240818132231"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -99,15 +99,27 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
       : {}
     : {};
 
-  return forwardRef((props: ProviderParams & RawComponentType, ref) => {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return (
-      // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
-      <ErrorBoundary FallbackComponent={info.fallback}>
-        <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} ref={ref} />
-        </React.Suspense>
-      </ErrorBoundary>
-    );
-  });
+  // return forwardRef((props: ProviderParams & RawComponentType, ref) => {
+  //   const LazyComponent = createLazyRemoteComponent(info);
+  //   return (
+  //     // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
+  //     <ErrorBoundary FallbackComponent={info.fallback}>
+  //       <React.Suspense fallback={info.loading}>
+  //         <LazyComponent {...props} ref={ref} />
+  //       </React.Suspense>
+  //     </ErrorBoundary>
+  //   );
+  // });
+  return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>(
+    (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
+      return (
+        <ErrorBoundary FallbackComponent={info.fallback}>
+          <React.Suspense fallback={info.loading}>
+            <LazyComponent {...props} ref={ref} />
+          </React.Suspense>
+        </ErrorBoundary>
+      );
+    },
+  );
 }

package/src/router-v5.tsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+// @ts-ignore
+import * as ReactRouterDom from 'react-router-dom/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+export { WraperRouter as BrowserRouter };

package/src/router-v6.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+export * from 'react-router-dom/dist/index.js';
+export { WraperRouterProvider as RouterProvider };

package/vite.config.ts

@@ -22,8 +22,8 @@ export default defineConfig({
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
-        'router-v5': path.resolve(__dirname, 'src/router.tsx'),
-        'router-v6': path.resolve(__dirname, 'src/router.tsx'),
+        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -37,31 +37,31 @@ export default defineConfig({
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
       ],
-      plugins: [
-        {
-          name: 'modify-output-plugin',
-          generateBundle(options, bundle) {
-            for (const fileName in bundle) {
-              const chunk = bundle[fileName];
-              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
-                chunk.code = chunk.code.replace(
-                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
-                  /react-router-dom\/(?=[\'\"\`])/g,
-                  'react-router-dom/dist/index.js',
-                );
-              }
+      // plugins: [
+      //   {
+      //     name: 'modify-output-plugin',
+      //     generateBundle(options, bundle) {
+      //       for (const fileName in bundle) {
+      //         const chunk = bundle[fileName];
+      //         if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+      //           chunk.code = chunk.code.replace(
+      //             // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+      //             /react-router-dom\/(?=[\'\"\`])/g,
+      //             'react-router-dom/dist/index.js',
+      //           );
+      //         }
 
-              if (fileName.includes('router-v5') && chunk.type === 'chunk') {
-                chunk.code = chunk.code.replace(
-                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
-                  /react-router-dom\/(?=[\'\"\`])/g,
-                  'react-router-dom/index.js',
-                );
-              }
-            }
-          },
-        },
-      ],
+      //         if (fileName.includes('router-v5') && chunk.type === 'chunk') {
+      //           chunk.code = chunk.code.replace(
+      //             // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
+      //             /react-router-dom\/(?=[\'\"\`])/g,
+      //             'react-router-dom/index.js',
+      //           );
+      //         }
+      //       }
+      //     },
+      //   },
+      // ],
     },
     minify: false,
   },