@module-federation/bridge-react 0.0.0-feat-support-bridge-react-router-v7-20251015102312

package/src/lazy/AwaitDataFetch.tsx

@@ -0,0 +1,215 @@
+import React, {
+  MutableRefObject,
+  ReactNode,
+  Suspense,
+  useRef,
+  useState,
+} from 'react';
+import logger from './logger';
+import {
+  DATA_FETCH_ERROR_PREFIX,
+  LOAD_REMOTE_ERROR_PREFIX,
+  ERROR_TYPE,
+  DATA_FETCH_FUNCTION,
+} from './constant';
+
+import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from './utils';
+import type { DataFetchParams } from './types';
+
+function isPromise<T>(obj: any): obj is PromiseLike<T> {
+  return (
+    !!obj &&
+    (typeof obj === 'object' || typeof obj === 'function') &&
+    typeof obj.then === 'function'
+  );
+}
+const AWAIT_ERROR_PREFIX =
+  '<Await /> caught the following error during render: ';
+
+export type ErrorInfo = {
+  error: Error;
+  errorType: number;
+  dataFetchMapKey?: string;
+};
+
+export const transformError = (err: string | Error): ErrorInfo => {
+  const errMsg = err instanceof Error ? err.message : err;
+  const originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, '');
+  const dataFetchMapKey = getDataFetchIdWithErrorMsgs(originalMsg);
+  if (originalMsg.indexOf(DATA_FETCH_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(
+        originalMsg
+          .replace(DATA_FETCH_ERROR_PREFIX, '')
+          .replace(wrapDataFetchId(dataFetchMapKey), ''),
+      ),
+      errorType: ERROR_TYPE.DATA_FETCH,
+      dataFetchMapKey,
+    };
+  }
+  if (originalMsg.indexOf(LOAD_REMOTE_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(
+        originalMsg
+          .replace(LOAD_REMOTE_ERROR_PREFIX, '')
+          .replace(wrapDataFetchId(dataFetchMapKey), ''),
+      ),
+      errorType: ERROR_TYPE.LOAD_REMOTE,
+      dataFetchMapKey,
+    };
+  }
+
+  return {
+    error: new Error(originalMsg.replace(wrapDataFetchId(dataFetchMapKey), '')),
+    errorType: ERROR_TYPE.UNKNOWN,
+    dataFetchMapKey,
+  };
+};
+
+export interface AwaitProps<T> {
+  resolve: T | Promise<T>;
+  loading?: ReactNode;
+  delayLoading?: number;
+  errorElement?: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
+  children: (data: T) => ReactNode;
+  params?: DataFetchParams;
+}
+
+export interface AwaitErrorHandlerProps<T = any>
+  extends Omit<AwaitProps<T>, 'resolve'> {
+  resolve: () => T | string;
+}
+
+const DefaultLoading = <></>;
+const DefaultErrorElement = (_data: any) => <div>Error</div>;
+
+export function AwaitDataFetch<T>({
+  resolve,
+  loading = DefaultLoading,
+  errorElement = DefaultErrorElement,
+  children,
+  params,
+  delayLoading,
+}: AwaitProps<T>) {
+  const dataRef = useRef<T>();
+  const data = dataRef.current || resolve;
+  const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
+
+  return (
+    <AwaitSuspense
+      params={params}
+      loading={loading}
+      errorElement={errorElement}
+      delayLoading={delayLoading}
+      // @ts-expect-error
+      resolve={getData}
+    >
+      {children}
+    </AwaitSuspense>
+  );
+}
+
+export const DelayedLoading = ({
+  delayLoading,
+  children,
+}: {
+  delayLoading?: number;
+  children: ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const timerSet = useRef(false);
+
+  if (!delayLoading) {
+    return children;
+  }
+
+  if (typeof window !== 'undefined' && !show && !timerSet.current) {
+    timerSet.current = true;
+    setTimeout(() => {
+      setShow(true);
+    }, delayLoading);
+  }
+
+  return show ? children : null;
+};
+
+function AwaitSuspense<T>({
+  resolve,
+  children,
+  loading = DefaultLoading,
+  errorElement = DefaultErrorElement,
+  delayLoading,
+}: AwaitErrorHandlerProps<T>) {
+  return (
+    <Suspense
+      fallback={
+        <DelayedLoading delayLoading={delayLoading}>{loading}</DelayedLoading>
+      }
+    >
+      <ResolveAwait resolve={resolve} errorElement={errorElement}>
+        {children}
+      </ResolveAwait>
+    </Suspense>
+  );
+}
+
+function ResolveAwait<T>({
+  children,
+  resolve,
+  errorElement,
+  params,
+}: AwaitErrorHandlerProps<T>) {
+  const data = resolve();
+  logger.debug('resolve data: ', data);
+  if (typeof data === 'string' && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
+    const transformedError = transformError(data);
+    return (
+      <>
+        {typeof errorElement === 'function' ? (
+          <>
+            {globalThis.FEDERATION_SSR && (
+              <script
+                suppressHydrationWarning
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}']  || []
+                  globalThis['${DATA_FETCH_FUNCTION}'].push([${transformedError.dataFetchMapKey ? `'${transformedError.dataFetchMapKey}'` : ''},${params ? JSON.stringify(params) : null},true]);`,
+                }}
+              ></script>
+            )}
+            {errorElement(transformedError)}
+          </>
+        ) : (
+          errorElement
+        )}
+      </>
+    );
+  }
+  const toRender =
+    typeof children === 'function' ? children(data as T) : children;
+  return <>{toRender}</>;
+}
+
+// return string when promise is rejected
+const fetchData = <T,>(promise: Promise<T>, ref: MutableRefObject<T>) => {
+  let data: T | string;
+  let status: 'pending' | 'success' = 'pending';
+  const suspender = promise
+    .then((res) => {
+      status = 'success';
+      data = res;
+      ref.current = res;
+    })
+    .catch((e) => {
+      status = 'success';
+      console.warn(e);
+      data = AWAIT_ERROR_PREFIX + e;
+    });
+  return () => {
+    if (status === 'pending') {
+      throw suspender;
+    }
+    return data;
+  };
+};

package/src/lazy/constant.ts

@@ -0,0 +1,30 @@
+export const PLUGIN_IDENTIFIER = '[ Module Federation React ]';
+export const DOWNGRADE_KEY = '_mfSSRDowngrade';
+export const DATA_FETCH_MAP_KEY = '__MF_DATA_FETCH_MAP__';
+export const DATA_FETCH_FUNCTION = '_mfDataFetch';
+export const FS_HREF = '_mfFSHref';
+export const ERROR_TYPE = {
+  DATA_FETCH: 1,
+  LOAD_REMOTE: 2,
+  UNKNOWN: 3,
+};
+export const WRAP_DATA_FETCH_ID_IDENTIFIER = 'wrap_dfip_identifier';
+export const enum MF_DATA_FETCH_TYPE {
+  FETCH_SERVER = 1,
+  FETCH_CLIENT = 2,
+}
+
+export const enum MF_DATA_FETCH_STATUS {
+  LOADED = 1,
+  LOADING = 2,
+  AWAIT = 0,
+  ERROR = 3,
+}
+
+export const DATA_FETCH_IDENTIFIER = 'data';
+export const DATA_FETCH_CLIENT_SUFFIX = '.client';
+export const DATA_FETCH_QUERY = 'x-mf-data-fetch';
+export const DATA_FETCH_ERROR_PREFIX =
+  'caught the following error during dataFetch: ';
+export const LOAD_REMOTE_ERROR_PREFIX =
+  'caught the following error during loadRemote: ';

package/src/lazy/createLazyComponent.tsx

@@ -0,0 +1,411 @@
+import type { ModuleFederation, getInstance } from '@module-federation/runtime';
+import type { BasicProviderModuleInfo } from '@module-federation/sdk';
+import React, { ReactNode, useState, useEffect } from 'react';
+import type { ErrorInfo } from './AwaitDataFetch';
+import type { DataFetchParams, NoSSRRemoteInfo } from './types';
+
+import logger from './logger';
+import {
+  AwaitDataFetch,
+  DelayedLoading,
+  transformError,
+} from './AwaitDataFetch';
+import {
+  fetchData,
+  getDataFetchItem,
+  getDataFetchMapKey,
+  getDataFetchInfo,
+  getLoadedRemoteInfos,
+  setDataFetchItemLoadedStatus,
+  wrapDataFetchId,
+} from './utils';
+import {
+  DATA_FETCH_ERROR_PREFIX,
+  DATA_FETCH_FUNCTION,
+  FS_HREF,
+  LOAD_REMOTE_ERROR_PREFIX,
+  MF_DATA_FETCH_TYPE,
+} from './constant';
+
+export type IProps = {
+  id: string;
+  instance: ReturnType<typeof getInstance>;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+
+export type CreateLazyComponentOptions<T, E extends keyof T> = {
+  loader: () => Promise<T>;
+  instance: ReturnType<typeof getInstance>;
+  loading: React.ReactNode;
+  delayLoading?: number;
+  fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
+  export?: E;
+  dataFetchParams?: DataFetchParams;
+  noSSR?: boolean;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+
+type ReactKey = { key?: React.Key | null };
+
+function getTargetModuleInfo(
+  id: string,
+  instance?: ModuleFederation,
+):
+  | {
+      module: BasicProviderModuleInfo['modules'][0];
+      publicPath: string;
+      remoteEntry: string;
+    }
+  | undefined {
+  if (!instance) {
+    return;
+  }
+  const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  const { snapshot } = loadedRemoteInfo;
+  if (!snapshot) {
+    return;
+  }
+  const publicPath: string =
+    'publicPath' in snapshot
+      ? snapshot.publicPath
+      : 'getPublicPath' in snapshot
+        ? new Function(snapshot.getPublicPath)()
+        : '';
+  if (!publicPath) {
+    return;
+  }
+  const modules = 'modules' in snapshot ? snapshot.modules : [];
+  const targetModule = modules.find(
+    (m) => m.modulePath === loadedRemoteInfo.expose,
+  );
+  if (!targetModule) {
+    return;
+  }
+
+  const remoteEntry = 'remoteEntry' in snapshot ? snapshot.remoteEntry : '';
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry,
+  };
+}
+
+export function collectSSRAssets(options: IProps) {
+  const {
+    id,
+    injectLink = true,
+    injectScript = false,
+  } = typeof options === 'string' ? { id: options } : options;
+  const links: React.ReactNode[] = [];
+  const scripts: React.ReactNode[] = [];
+  const instance = options.instance;
+  if (!instance || (!injectLink && !injectScript)) {
+    return [...scripts, ...links];
+  }
+
+  const moduleAndPublicPath = getTargetModuleInfo(id, instance);
+  if (!moduleAndPublicPath) {
+    return [...scripts, ...links];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async]
+      .sort()
+      .forEach((file, index) => {
+        links.push(
+          <link
+            key={`${file.split('.')[0]}_${index}`}
+            href={`${publicPath}${file}`}
+            rel="stylesheet"
+            type="text/css"
+          />,
+        );
+      });
+  }
+
+  if (injectScript) {
+    scripts.push(
+      <script
+        async={true}
+        key={remoteEntry.split('.')[0]}
+        src={`${publicPath}${remoteEntry}`}
+        crossOrigin="anonymous"
+      />,
+    );
+    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
+      scripts.push(
+        <script
+          key={`${file.split('.')[0]}_${index}`}
+          async={true}
+          src={`${publicPath}${file}`}
+          crossOrigin="anonymous"
+        />,
+      );
+    });
+  }
+
+  return [...scripts, ...links];
+}
+
+function getServerNeedRemoteInfo(
+  loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>,
+  id: string,
+  noSSR?: boolean,
+): NoSSRRemoteInfo | undefined {
+  if (
+    noSSR ||
+    (typeof window !== 'undefined' && window.location.href !== window[FS_HREF])
+  ) {
+    if (!loadedRemoteInfo?.version) {
+      throw new Error(`${loadedRemoteInfo?.name} version is empty`);
+    }
+    const { snapshot } = loadedRemoteInfo;
+    if (!snapshot) {
+      throw new Error(`${loadedRemoteInfo?.name} snapshot is empty`);
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    const isFetchServer =
+      dataFetchItem?.[0]?.[1] === MF_DATA_FETCH_TYPE.FETCH_SERVER;
+
+    if (
+      isFetchServer &&
+      (!('ssrPublicPath' in snapshot) || !snapshot.ssrPublicPath)
+    ) {
+      throw new Error(
+        `ssrPublicPath is required while fetching ${loadedRemoteInfo?.name} data in SSR project!`,
+      );
+    }
+
+    if (
+      isFetchServer &&
+      (!('ssrRemoteEntry' in snapshot) || !snapshot.ssrRemoteEntry)
+    ) {
+      throw new Error(
+        `ssrRemoteEntry is required while loading ${loadedRemoteInfo?.name} data loader in SSR project!`,
+      );
+    }
+
+    return {
+      name: loadedRemoteInfo.name,
+      version: loadedRemoteInfo.version,
+      ssrPublicPath:
+        'ssrPublicPath' in snapshot ? snapshot.ssrPublicPath || '' : '',
+      ssrRemoteEntry:
+        'ssrRemoteEntry' in snapshot ? snapshot.ssrRemoteEntry || '' : '',
+      globalName: loadedRemoteInfo.entryGlobalName,
+    };
+  }
+  return undefined;
+}
+
+export function createLazyComponent<T, E extends keyof T>(
+  options: CreateLazyComponentOptions<T, E>,
+) {
+  const { instance, injectScript, injectLink } = options;
+  if (!instance) {
+    throw new Error('instance is required for createLazyComponent!');
+  }
+
+  type ComponentType = T[E] extends (...args: any) => any
+    ? Parameters<T[E]>[0] extends undefined
+      ? ReactKey
+      : Parameters<T[E]>[0] & ReactKey
+    : ReactKey;
+  const exportName = options?.export || 'default';
+
+  const callLoader = async () => {
+    logger.debug('callLoader start', Date.now());
+    const m = (await options.loader()) as Record<string, React.FC> &
+      Record<symbol, string>;
+    logger.debug('callLoader end', Date.now());
+    if (!m) {
+      throw new Error('load remote failed');
+    }
+    return m;
+  };
+
+  const getData = async (noSSR?: boolean) => {
+    let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
+    let moduleId: string;
+    try {
+      const m = await callLoader();
+      moduleId = m && m[Symbol.for('mf_module_id')];
+      if (!moduleId) {
+        throw new Error('moduleId is empty');
+      }
+      loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+      if (!loadedRemoteInfo) {
+        throw new Error(`can not find loaded remote('${moduleId}') info!`);
+      }
+    } catch (e) {
+      const errMsg = `${LOAD_REMOTE_ERROR_PREFIX}${e}`;
+      logger.debug(e);
+      throw new Error(errMsg);
+    }
+    let dataFetchMapKey: string | undefined;
+    try {
+      dataFetchMapKey = getDataFetchMapKey(
+        getDataFetchInfo({
+          name: loadedRemoteInfo.name,
+          alias: loadedRemoteInfo.alias,
+          id: moduleId,
+          remoteSnapshot: loadedRemoteInfo.snapshot,
+        }),
+        { name: instance.name, version: instance.options.version },
+      );
+      logger.debug('getData dataFetchMapKey: ', dataFetchMapKey);
+      if (!dataFetchMapKey) {
+        return;
+      }
+      const data = await fetchData(
+        dataFetchMapKey,
+        {
+          ...options.dataFetchParams,
+          isDowngrade: false,
+        },
+        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR),
+      );
+      setDataFetchItemLoadedStatus(dataFetchMapKey);
+      logger.debug('get data res: \n', data);
+      return data;
+    } catch (err) {
+      const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
+      logger.debug(errMsg);
+      throw new Error(errMsg);
+    }
+  };
+
+  const LazyComponent = React.lazy(async () => {
+    const m = await callLoader();
+    const moduleId = m && m[Symbol.for('mf_module_id')];
+    const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+    loadedRemoteInfo?.snapshot;
+    const dataFetchMapKey = loadedRemoteInfo
+      ? getDataFetchMapKey(
+          getDataFetchInfo({
+            name: loadedRemoteInfo.name,
+            alias: loadedRemoteInfo.alias,
+            id: moduleId,
+            remoteSnapshot: loadedRemoteInfo.snapshot,
+          }),
+          { name: instance.name, version: instance?.options.version },
+        )
+      : undefined;
+    logger.debug('LazyComponent dataFetchMapKey: ', dataFetchMapKey);
+
+    const assets = collectSSRAssets({
+      id: moduleId,
+      instance,
+      injectLink,
+      injectScript,
+    });
+
+    const Com = m[exportName] as React.FC<ComponentType>;
+    if (exportName in m && typeof Com === 'function') {
+      return {
+        default: (props: Omit<ComponentType, 'key'> & { mfData?: unknown }) => (
+          <>
+            {globalThis.FEDERATION_SSR && dataFetchMapKey && (
+              <script
+                suppressHydrationWarning
+                dangerouslySetInnerHTML={{
+                  __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || [];
+                  globalThis['${DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
+                  `,
+                }}
+              ></script>
+            )}
+            {globalThis.FEDERATION_SSR && assets}
+            <Com {...props} />
+          </>
+        ),
+      };
+      // eslint-disable-next-line max-lines
+    } else {
+      throw Error(
+        `Make sure that ${moduleId} has the correct export when export is ${String(
+          exportName,
+        )}`,
+      );
+    }
+  });
+
+  return (props: ComponentType) => {
+    const { key, ...args } = props;
+
+    if (!options.noSSR) {
+      return (
+        <AwaitDataFetch
+          resolve={getData(options.noSSR)}
+          loading={options.loading}
+          delayLoading={options.delayLoading}
+          errorElement={options.fallback}
+        >
+          {/* @ts-expect-error ignore */}
+          {(data) => <LazyComponent {...args} mfData={data} />}
+        </AwaitDataFetch>
+      );
+    } else {
+      // Client-side rendering logic
+      const [data, setData] = useState<unknown>(null);
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<ErrorInfo | null>(null);
+
+      useEffect(() => {
+        let isMounted = true;
+        const fetchDataAsync = async () => {
+          try {
+            setLoading(true);
+            const result = await getData(options.noSSR);
+            if (isMounted) {
+              setData(result);
+            }
+          } catch (e) {
+            if (isMounted) {
+              setError(transformError(e as Error));
+            }
+          } finally {
+            if (isMounted) {
+              setLoading(false);
+            }
+          }
+        };
+
+        fetchDataAsync();
+
+        return () => {
+          isMounted = false;
+        };
+      }, []);
+
+      if (loading) {
+        return (
+          <DelayedLoading delayLoading={options.delayLoading}>
+            {options.loading}
+          </DelayedLoading>
+        );
+      }
+
+      if (error) {
+        return (
+          <>
+            {typeof options.fallback === 'function'
+              ? options.fallback(error)
+              : options.fallback}
+          </>
+        );
+      }
+      // @ts-expect-error ignore
+      return <LazyComponent {...args} mfData={data} />;
+    }
+  };
+}