@module-federation/bridge-react 0.0.0-next-20250926024003 → 0.0.0-perf-devtools-20260107043700

package/src/remote/RemoteAppWrapper.tsx

@@ -0,0 +1,108 @@
+/**
+ * Shared RemoteAppWrapper component used by both base and router versions
+ * This component handles the lifecycle of remote Module Federation apps
+ */
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import { LoggerInstance, getRootDomDefaultClassName } from '../utils';
+import { federationRuntime } from '../provider/plugin';
+import { RemoteComponentProps, RemoteAppParams } from '../types';
+
+export const RemoteAppWrapper = forwardRef(function (
+  props: RemoteAppParams & RemoteComponentProps,
+  ref,
+) {
+  const {
+    moduleName,
+    memoryRoute,
+    basename,
+    providerInfo,
+    className,
+    style,
+    fallback,
+    loading,
+    ...resProps
+  } = props;
+
+  const instance = federationRuntime.instance;
+  const rootRef: React.MutableRefObject<HTMLDivElement | null> =
+    ref && 'current' in ref
+      ? (ref as React.MutableRefObject<HTMLDivElement | null>)
+      : useRef(null);
+
+  const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
+  const providerInfoRef = useRef<any>(null);
+  const [initialized, setInitialized] = useState(false);
+
+  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+
+  // 初始化远程组件
+  useEffect(() => {
+    if (initialized) return;
+    const providerReturn = providerInfo();
+    providerInfoRef.current = providerReturn;
+    setInitialized(true);
+
+    return () => {
+      if (providerInfoRef.current?.destroy) {
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent destroy >>>`,
+          { moduleName, basename, dom: renderDom.current },
+        );
+
+        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps,
+        });
+
+        providerInfoRef.current?.destroy({
+          moduleName,
+          dom: renderDom.current,
+        });
+
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps,
+        });
+      }
+    };
+  }, [moduleName]);
+
+  // trigger render after props updated
+  useEffect(() => {
+    if (!initialized || !providerInfoRef.current) return;
+
+    let renderProps = {
+      moduleName,
+      dom: rootRef.current,
+      basename,
+      memoryRoute,
+      fallback,
+      ...resProps,
+    };
+    renderDom.current = rootRef.current;
+
+    const beforeBridgeRenderRes =
+      instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
+      {};
+    // @ts-ignore
+    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+    providerInfoRef.current.render(renderProps);
+    instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
+  }, [initialized, ...Object.values(props)]);
+
+  // bridge-remote-root
+  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
+  return (
+    <div className={rootComponentClassName} style={style} ref={rootRef}>
+      {loading}
+    </div>
+  );
+});

package/src/remote/base-component/component.tsx

@@ -0,0 +1,2 @@
+import { RemoteAppWrapper } from '../RemoteAppWrapper';
+export default RemoteAppWrapper;

package/src/remote/base-component/create.tsx

@@ -0,0 +1,23 @@
+import RemoteApp from './component';
+import {
+  createLazyRemoteComponentFactory,
+  createRemoteAppComponentFactory,
+  createDeprecatedRemoteComponentFactory,
+  type LazyRemoteComponentInfo,
+} from '../createHelpers';
+
+export type { LazyRemoteComponentInfo };
+
+const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+export const createRemoteAppComponent =
+  createRemoteAppComponentFactory(RemoteApp);
+
+/**
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent,
+);
+
+export { createLazyRemoteComponent };

package/src/remote/base-component/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Base entry point without React Router dependencies
+ * Re-exports from base/create.tsx
+ */
+export {
+  createRemoteAppComponent,
+  createRemoteComponent,
+  createLazyRemoteComponent,
+  type LazyRemoteComponentInfo,
+} from './create';

package/src/remote/createHelpers.tsx

@@ -0,0 +1,130 @@
+import React, { forwardRef } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { LoggerInstance } from '../utils';
+import {
+  RemoteComponentParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from '../types';
+
+export type LazyRemoteComponentInfo<
+  T,
+  _E extends keyof T,
+> = RemoteComponentParams<T>;
+
+/**
+ * Creates a factory function for creating lazy remote components
+ * @param RemoteApp The RemoteAppWrapper component to use (with or without router)
+ */
+export function createLazyRemoteComponentFactory(
+  RemoteApp: React.ComponentType<any>,
+) {
+  return function createLazyRemoteComponent<
+    T = Record<string, unknown>,
+    E extends keyof T = keyof T,
+  >(info: LazyRemoteComponentInfo<T, E>) {
+    const exportName = info?.export || 'default';
+    return React.lazy(async () => {
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent create >>>`,
+        {
+          lazyComponent: info.loader,
+          exportName,
+        },
+      );
+
+      try {
+        const m = (await info.loader()) as RemoteModule;
+        // @ts-ignore
+        const moduleName = m && m[Symbol.for('mf_module_id')];
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+          { name: moduleName, module: m, exportName },
+        );
+
+        // @ts-ignore
+        const exportFn = m[exportName];
+        if (exportName in m && typeof exportFn === 'function') {
+          const RemoteAppComponent = forwardRef<
+            HTMLDivElement,
+            RemoteComponentProps
+          >((props, ref) => {
+            return (
+              <RemoteApp
+                // change `name` key to `moduleName` to avoid same property `name` passed by user's props which may cause unexpected issues.
+                moduleName={moduleName}
+                providerInfo={exportFn}
+                exportName={info.export || 'default'}
+                fallback={info.fallback}
+                loading={info.loading}
+                ref={ref}
+                {...props}
+              />
+            );
+          });
+
+          return {
+            default: RemoteAppComponent,
+          };
+        } else {
+          LoggerInstance.debug(
+            `createRemoteAppComponent LazyComponent module not found >>>`,
+            { name: moduleName, module: m, exportName },
+          );
+          throw Error(
+            `Make sure that ${moduleName} has the correct export when export is ${String(
+              exportName,
+            )}`,
+          );
+        }
+      } catch (error) {
+        throw error;
+      }
+    });
+  };
+}
+
+/**
+ * Creates a factory function for creating remote app components
+ * @param RemoteApp The RemoteAppWrapper component to use (with or without router)
+ */
+export function createRemoteAppComponentFactory(
+  RemoteApp: React.ComponentType<any>,
+) {
+  const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+  return function createRemoteAppComponent<
+    T = Record<string, unknown>,
+    E extends keyof T = keyof T,
+  >(info: LazyRemoteComponentInfo<T, E>) {
+    const LazyComponent = createLazyRemoteComponent(info);
+    return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
+      return (
+        <ErrorBoundary
+          FallbackComponent={
+            info.fallback as React.ComponentType<FallbackProps>
+          }
+        >
+          <React.Suspense fallback={info.loading}>
+            <LazyComponent {...props} ref={ref} />
+          </React.Suspense>
+        </ErrorBoundary>
+      );
+    });
+  };
+}
+
+/**
+ * Creates the deprecated createRemoteComponent function
+ */
+export function createDeprecatedRemoteComponentFactory<
+  T = Record<string, unknown>,
+  E extends keyof T = keyof T,
+>(createFn: (info: LazyRemoteComponentInfo<T, E>) => any) {
+  return function createRemoteComponent(info: LazyRemoteComponentInfo<T, E>) {
+    LoggerInstance.warn(
+      `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`,
+    );
+    return createFn(info);
+  };
+}

package/src/remote/{component.tsx → router-component/component.tsx}

@@ -1,115 +1,8 @@
-import React, {
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  forwardRef,
-} from 'react';
+import React, { useContext, useEffect, useState, forwardRef } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
-import { federationRuntime } from '../provider/plugin';
-import { RemoteComponentProps, RemoteAppParams } from '../types';
-
-const RemoteAppWrapper = forwardRef(function (
-  props: RemoteAppParams & RemoteComponentProps,
-  ref,
-) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    loading,
-    ...resProps
-  } = props;
-
-  const instance = federationRuntime.instance;
-  const rootRef: React.MutableRefObject<HTMLDivElement | null> =
-    ref && 'current' in ref
-      ? (ref as React.MutableRefObject<HTMLDivElement | null>)
-      : useRef(null);
-
-  const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-  const [initialized, setInitialized] = useState(false);
-
-  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-
-  // 初始化远程组件
-  useEffect(() => {
-    if (initialized) return;
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-
-    return () => {
-      if (providerInfoRef.current?.destroy) {
-        LoggerInstance.debug(
-          `createRemoteAppComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current },
-        );
-
-        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
-
-        providerInfoRef.current?.destroy({
-          moduleName,
-          dom: renderDom.current,
-        });
-
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
-      }
-    };
-  }, [moduleName]);
-
-  // trigger render after props updated
-  useEffect(() => {
-    if (!initialized || !providerInfoRef.current) return;
-
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps,
-    };
-    renderDom.current = rootRef.current;
-
-    const beforeBridgeRenderRes =
-      instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
-      {};
-    // @ts-ignore
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-
-  // bridge-remote-root
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
-  return (
-    <div className={rootComponentClassName} style={style} ref={rootRef}>
-      {loading}
-    </div>
-  );
-});
+import { LoggerInstance, pathJoin } from '../../utils';
+import { RemoteAppWrapper } from '../RemoteAppWrapper';
 
 interface ExtraDataProps {
   basename?: string;

package/src/remote/router-component/create.tsx

@@ -0,0 +1,23 @@
+import RemoteApp from './component';
+import {
+  createLazyRemoteComponentFactory,
+  createRemoteAppComponentFactory,
+  createDeprecatedRemoteComponentFactory,
+  type LazyRemoteComponentInfo,
+} from '../createHelpers';
+
+export type { LazyRemoteComponentInfo };
+
+const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+export const createRemoteAppComponent =
+  createRemoteAppComponentFactory(RemoteApp);
+
+/**
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent,
+);
+
+export { createLazyRemoteComponent };

package/src/remote/router-component/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Default entry point with React Router support
+ * Re-exports from router/create.tsx
+ */
+export {
+  createRemoteAppComponent,
+  createRemoteComponent,
+  createLazyRemoteComponent,
+  type LazyRemoteComponentInfo,
+} from './create';

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

@@ -20,10 +20,12 @@ export default defineConfig({
     lib: {
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
+        base: path.resolve(__dirname, 'src/base.ts'),
         plugin: path.resolve(__dirname, 'src/provider/plugin.ts'),
         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 +51,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 +75,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

package/src/remote/create.tsx

@@ -1,103 +0,0 @@
-import React, { forwardRef } from 'react';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import { LoggerInstance } from '../utils';
-import RemoteApp from './component';
-import {
-  RemoteComponentParams,
-  RemoteComponentProps,
-  RemoteModule,
-} from '../types';
-
-type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
-
-function createLazyRemoteComponent<
-  T = Record<string, unknown>,
-  E extends keyof T = keyof T,
->(info: LazyRemoteComponentInfo<T, E>) {
-  const exportName = info?.export || 'default';
-  return React.lazy(async () => {
-    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName,
-    });
-
-    try {
-      const m = (await info.loader()) as RemoteModule;
-      // @ts-ignore
-      const moduleName = m && m[Symbol.for('mf_module_id')];
-      LoggerInstance.debug(
-        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m, exportName },
-      );
-
-      // @ts-ignore
-      const exportFn = m[exportName];
-      if (exportName in m && typeof exportFn === 'function') {
-        const RemoteAppComponent = forwardRef<
-          HTMLDivElement,
-          RemoteComponentProps
-        >((props, ref) => {
-          return (
-            <RemoteApp
-              // change `name` key to `moduleName` to avoid same property `name` passed by user's props which may cause unexpected issues.
-              moduleName={moduleName}
-              providerInfo={exportFn}
-              exportName={info.export || 'default'}
-              fallback={info.fallback}
-              loading={info.loading}
-              ref={ref}
-              {...props}
-            />
-          );
-        });
-
-        return {
-          default: RemoteAppComponent,
-        };
-      } else {
-        LoggerInstance.debug(
-          `createRemoteAppComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m, exportName },
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName,
-          )}`,
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-
-export function createRemoteAppComponent<
-  T = Record<string, unknown>,
-  E extends keyof T = keyof T,
->(info: LazyRemoteComponentInfo<T, E>) {
-  const LazyComponent = createLazyRemoteComponent(info);
-  return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
-    return (
-      <ErrorBoundary
-        FallbackComponent={info.fallback as React.ComponentType<FallbackProps>}
-      >
-        <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} ref={ref} />
-        </React.Suspense>
-      </ErrorBoundary>
-    );
-  });
-}
-
-/**
- * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
- */
-export function createRemoteComponent<
-  T = Record<string, unknown>,
-  E extends keyof T = keyof T,
->(info: LazyRemoteComponentInfo<T, E>) {
-  LoggerInstance.warn(
-    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`,
-  );
-  return createRemoteAppComponent(info);
-}