@module-federation/bridge-react 0.19.1 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -51,6 +51,11 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
+    "./router-v7": {
+      "types": "./dist/router-v7.d.ts",
+      "import": "./dist/router-v7.es.js",
+      "require": "./dist/router-v7.cjs.js"
+    },
     "./lazy-utils": {
       "types": "./dist/lazy-utils.d.ts",
       "import": "./dist/lazy-utils.es.js",
@@ -95,13 +100,22 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/bridge-shared": "0.19.1",
-    "@module-federation/sdk": "0.19.1"
+    "@module-federation/bridge-shared": "0.21.0",
+    "@module-federation/sdk": "0.21.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": "^4 || ^5 || ^6 || ^7"
+    "react-router-dom": "^4 || ^5 || ^6 || ^7",
+    "react-router": "^7"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "react-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -114,12 +128,13 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
+    "react-router": "7.9.4",
     "typescript": "^5.2.2",
-    "vite": "^5.4.18",
+    "vite": "^5.4.20",
     "vite-plugin-dts": "^4.3.0",
     "hono": "3.12.12",
-    "@module-federation/runtime": "0.19.1",
-    "@module-federation/runtime-core": "0.19.1"
+    "@module-federation/runtime": "0.21.0",
+    "@module-federation/runtime-core": "0.21.0"
   },
   "scripts": {
     "dev": "vite",

package/src/provider/versions/bridge-base.tsx

@@ -64,7 +64,7 @@ export function createBaseBridgeComponent<T>({
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
-        const rootComponentWithErrorBoundary = (
+        const BridgeWrapper = ({ basename }: { basename?: string }) => (
           <ErrorBoundary
             FallbackComponent={fallback as React.ComponentType<FallbackProps>}
           >
@@ -77,6 +77,7 @@ export function createBaseBridgeComponent<T>({
               propsInfo={
                 {
                   ...propsInfo,
+                  basename,
                   ...(beforeBridgeRenderRes as any)?.extraProps,
                 } as T
               }
@@ -84,6 +85,10 @@ export function createBaseBridgeComponent<T>({
           </ErrorBoundary>
         );
 
+        const rootComponentWithErrorBoundary = (
+          <BridgeWrapper basename={basename} />
+        );
+
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom),
@@ -111,7 +116,7 @@ export function createBaseBridgeComponent<T>({
           if ('unmount' in root) {
             root.unmount();
           } else {
-            console.warn('Root does not have unmount method');
+            LoggerInstance.warn('Root does not have unmount method');
           }
           rootMap.delete(dom);
         }

package/src/provider/versions/legacy.ts

@@ -5,6 +5,7 @@
 import type { ProviderFnParams } from '../../types';
 import { createBaseBridgeComponent } from './bridge-base';
 import ReactDOM from 'react-dom';
+import { LoggerInstance } from '../../utils';
 
 export interface CreateRootOptions {
   identifierPrefix?: string;
@@ -58,7 +59,7 @@ export function createReact16Or17Root(
        * Provide warning for React 18
        */
       if (isReact18) {
-        console.warn(
+        LoggerInstance.warn(
           `[Bridge-React] React 18 detected in legacy mode. ` +
             `For better compatibility, please use the version-specific import: ` +
             `import { createBridgeComponent } from '@module-federation/bridge-react/v18'`,

package/src/router/v7.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react';
+// The upper alias react-router$ into this file avoids the loop
+// React Router v7 uses different dist structure, we'll import from the main entry
+import * as ReactRouterDom from 'react-router';
+import { RouterContext } from '../provider/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.debug(`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}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.debug(`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, {
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+// Export all from react-router for v7 compatibility
+export * from 'react-router';
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
         router: path.resolve(__dirname, 'src/router/default.tsx'),
         'router-v5': path.resolve(__dirname, 'src/router/v5.tsx'),
         'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
+        'router-v7': path.resolve(__dirname, 'src/router/v7.tsx'),
         v18: path.resolve(__dirname, 'src/v18.ts'),
         v19: path.resolve(__dirname, 'src/v19.ts'),
         'lazy-load-component-plugin': path.resolve(
@@ -49,6 +50,12 @@ export default defineConfig({
         '@remix-run/router',
         /react-dom\/.*/,
         'react-router',
+        'react-router/',
+        'react-router/index.js',
+        'react-router/dist/index.js',
+        'react-router/dist/development/index.js',
+        'react-router/dist/production/index.js',
+        /^react-router\/.*/,
         'react-router-dom/',
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
@@ -67,6 +74,23 @@ export default defineConfig({
                 );
               }
 
+              if (fileName.includes('router-v7') && chunk.type === 'chunk') {
+                // Replace 'react-router' with the correct v7 dist path based on environment
+                const isProduction = process.env.NODE_ENV === 'production';
+                const distPath = isProduction
+                  ? 'react-router/dist/production/index.js'
+                  : 'react-router/dist/development/index.js';
+
+                chunk.code = chunk.code.replace(
+                  /from\s+['"`]react-router['"`]/g,
+                  `from '${distPath}'`,
+                );
+                chunk.code = chunk.code.replace(
+                  /export\s+\*\s+from\s+['"`]react-router['"`]/g,
+                  `export * from '${distPath}'`,
+                );
+              }
+
               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