@module-federation/bridge-react 2.3.2 → 2.4.0

package/src/provider/versions/legacy.ts

@@ -1,87 +0,0 @@
-/**
- * Entry point for React 16/17 (legacy) specific bridge components
- * This file provides support for React 16 and 17 versions, using the traditional ReactDOM.render API
- */
-import type { ProviderFnParams } from '../../types';
-import { createBaseBridgeComponent } from './bridge-base';
-import ReactDOM from 'react-dom';
-import { LoggerInstance } from '../../utils';
-
-export interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
-}
-
-export interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-/**
- * Default createRoot function that automatically detects React version and uses the appropriate API(only support React 16/17, 18)
- *
- * Note: Users can also directly import version-specific bridge components:
- * - import { createBridgeComponent } from '@module-federation/bridge-react'
- * - import { createBridgeComponent } from '@module-federation/bridge-react/v18'
- * - import { createBridgeComponent } from '@module-federation/bridge-react/v19'
- */
-
-export function createReact16Or17Root(
-  container: Element | DocumentFragment,
-): Root {
-  return {
-    render(children: React.ReactNode) {
-      /**
-       * Detect React version
-       */
-      const reactVersion = ReactDOM.version || '';
-      const isReact18 = reactVersion.startsWith('18');
-      const isReact19 = reactVersion.startsWith('19');
-
-      /**
-       * Throw error for React 19
-       *
-       * Note: Due to Module Federation sharing mechanism, the actual version detected here
-       * might be 18 or 19, even if the application itself uses React 16/17.
-       * This happens because in MF environments, different remote modules may share different React versions.
-       * The console may throw warnings about version and API mismatches. If you need to resolve these issues,
-       * consider disabling the shared configuration for React.
-       */
-      if (isReact19) {
-        throw new Error(
-          `React 19 detected in legacy mode. This is not supported. ` +
-            `Please use the version-specific import: ` +
-            `import { createBridgeComponent } from '@module-federation/bridge-react/v19'`,
-        );
-      }
-
-      /**
-       * Provide warning for React 18
-       */
-      if (isReact18) {
-        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'`,
-        );
-      }
-
-      // @ts-ignore - React 17's render method is deprecated but still functional
-      ReactDOM.render(children, container);
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container as Element);
-    },
-  };
-}
-
-export function createBridgeComponent<T = any>(
-  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
-) {
-  const fullBridgeInfo = {
-    createRoot: createReact16Or17Root,
-    ...bridgeInfo,
-  } as unknown as ProviderFnParams<T>;
-
-  return createBaseBridgeComponent(fullBridgeInfo);
-}

package/src/provider/versions/v18.ts

@@ -1,47 +0,0 @@
-/**
- * Entry point for React 18 specific bridge components
- */
-import React from 'react';
-import { createRoot as createReactRoot, hydrateRoot } from 'react-dom/client';
-import { createBaseBridgeComponent } from './bridge-base';
-import type { ProviderFnParams } from '../../types';
-
-export interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
-}
-
-export interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-export function createReact18Root(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): Root {
-  return createReactRoot(container, options);
-}
-
-export function hydrateReact18Root(
-  container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
-  options?: CreateRootOptions,
-) {
-  return hydrateRoot(
-    container as Element,
-    initialChildren as React.ReactElement,
-    options,
-  );
-}
-
-export function createBridgeComponent<T = any>(
-  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
-) {
-  const fullBridgeInfo = {
-    createRoot: createReact18Root,
-    ...bridgeInfo,
-  } as unknown as ProviderFnParams<T>;
-
-  return createBaseBridgeComponent(fullBridgeInfo);
-}

package/src/provider/versions/v19.ts

@@ -1,48 +0,0 @@
-/**
- * Entry point for React 19 specific bridge components
- * This file provides support for React 19 version, using the new ReactDOM.createRoot API
- */
-import React from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { createBaseBridgeComponent } from './bridge-base';
-import type { ProviderFnParams } from '../../types';
-export interface CreateRootOptions {
-  identifierPrefix?: string;
-  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
-  transitionCallbacks?: unknown;
-}
-
-export interface Root {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-}
-
-export function createReact19Root(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): Root {
-  return createRoot(container as Element, options);
-}
-
-export function hydrateReact19Root(
-  container: Element | DocumentFragment,
-  initialChildren: React.ReactNode,
-  options?: CreateRootOptions,
-): Root {
-  return hydrateRoot(
-    container as Element,
-    initialChildren as React.ReactElement,
-    options,
-  );
-}
-
-export function createBridgeComponent<T = any>(
-  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
-) {
-  const fullBridgeInfo = {
-    createRoot: createReact19Root,
-    ...bridgeInfo,
-  } as unknown as ProviderFnParams<T>;
-
-  return createBaseBridgeComponent(fullBridgeInfo);
-}

package/src/remote/RemoteAppWrapper.tsx

@@ -1,108 +0,0 @@
-/**
- * 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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,132 +0,0 @@
-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 ErrorBoundaryComponent =
-    ErrorBoundary as unknown as 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 (
-        <ErrorBoundaryComponent
-          FallbackComponent={
-            info.fallback as React.ComponentType<FallbackProps>
-          }
-        >
-          <React.Suspense fallback={info.loading}>
-            <LazyComponent {...props} ref={ref} />
-          </React.Suspense>
-        </ErrorBoundaryComponent>
-      );
-    });
-  };
-}
-
-/**
- * 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/router-component/component.tsx

@@ -1,104 +0,0 @@
-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 } from '../../utils';
-import { RemoteAppWrapper } from '../RemoteAppWrapper';
-
-interface ExtraDataProps {
-  basename?: string;
-}
-
-export function withRouterData<
-  P extends Parameters<typeof RemoteAppWrapper>[0],
->(
-  WrappedComponent: React.ComponentType<P & ExtraDataProps>,
-): React.FC<Omit<P, keyof ExtraDataProps>> {
-  const Component = forwardRef(function (props: any, ref) {
-    if (props?.basename) {
-      return (
-        <WrappedComponent {...props} basename={props.basename} ref={ref} />
-      );
-    }
-    let enableDispathPopstate = false;
-    let routerContextVal: any;
-    try {
-      ReactRouterDOM.useLocation();
-      enableDispathPopstate = true;
-    } catch {
-      enableDispathPopstate = false;
-    }
-    let basename = '/';
-
-    if (!props.basename && 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.length > 0
-        ) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase =
-            routerContextVal.matches[matchIndex].pathnameBase;
-          basename = pathJoin(basename, 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 || '/');
-        }
-      }
-    }
-
-    LoggerInstance.debug(`createRemoteAppComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate,
-    });
-
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM.useLocation();
-      const [pathname, setPathname] = useState(location.pathname);
-
-      useEffect(() => {
-        if (pathname !== '' && pathname !== location.pathname) {
-          LoggerInstance.debug(
-            `createRemoteAppComponent dispatchPopstateEnv >>>`,
-            {
-              name: props.name,
-              pathname: location.pathname,
-            },
-          );
-          dispatchPopstateEnv();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-
-    return <WrappedComponent {...(props as P)} basename={basename} ref={ref} />;
-  });
-
-  return forwardRef(function (props, ref) {
-    return <Component {...props} ref={ref} />;
-  }) as any;
-}
-
-export default withRouterData(RemoteAppWrapper);

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

@@ -1,23 +0,0 @@
-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

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

package/src/router/default.tsx

@@ -1,73 +0,0 @@
-import React, { useContext } from 'react';
-// The upper alias react-router-dom$ into this file avoids the loop
-import * as ReactRouterDom from 'react-router-dom/';
-import { RouterContext } from '../provider/context';
-import { LoggerInstance } from '../utils';
-
-function WrapperRouter(
-  props:
-    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
-    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
-) {
-  const { basename, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-
-  LoggerInstance.debug(`WrapperRouter info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WrapperRouterProps: props,
-  });
-
-  if (routerContextProps?.memoryRoute) {
-    return (
-      <ReactRouterDom.MemoryRouter
-        {...props}
-        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
-      />
-    );
-  }
-  return (
-    <ReactRouterDom.BrowserRouter
-      {...propsRes}
-      basename={routerContextProps?.basename || basename}
-    />
-  );
-}
-
-function WrapperRouterProvider(
-  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
-) {
-  const { router, ...propsRes } = props;
-  const routerContextProps = useContext(RouterContext) || {};
-  const routers = router.routes;
-  LoggerInstance.debug(`WrapperRouterProvider info >>>`, {
-    ...routerContextProps,
-    routerContextProps,
-    WrapperRouterProviderProps: 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 || router?.basename,
-      future: router.future,
-      window: router.window,
-    });
-    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
-  }
-}
-
-export * from 'react-router-dom/';
-
-export { WrapperRouter as BrowserRouter };
-export { WrapperRouterProvider as RouterProvider };