@module-federation/bridge-react 0.0.0-next-20250630125121 → 0.0.0-next-20250701070959

package/src/lazy/AwaitDataFetch.tsx

@@ -1,176 +0,0 @@
-import React, { MutableRefObject, ReactNode, Suspense, useRef } 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;
-  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,
-}: 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}
-      // @ts-ignore
-      resolve={getData}
-    >
-      {children}
-    </AwaitSuspense>
-  );
-}
-
-function AwaitSuspense<T>({
-  resolve,
-  children,
-  loading = DefaultLoading,
-  errorElement = DefaultErrorElement,
-}: AwaitErrorHandlerProps<T>) {
-  return (
-    <Suspense fallback={loading}>
-      <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
-                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

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

@@ -1,393 +0,0 @@
-import React, { ReactNode, useState, useEffect } from 'react';
-import logger from './logger';
-import { AwaitDataFetch, 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';
-
-import type { ErrorInfo } from './AwaitDataFetch';
-import type { DataFetchParams, NoSSRRemoteInfo } from './types';
-import type { FederationHost, getInstance } from '@module-federation/runtime';
-
-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;
-  fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
-  export?: E;
-  dataFetchParams?: DataFetchParams;
-  noSSR?: boolean;
-  cacheData?: boolean;
-};
-
-type ReactKey = { key?: React.Key | null };
-
-function getTargetModuleInfo(id: string, instance?: FederationHost) {
-  if (!instance) {
-    return;
-  }
-  const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
-  if (!loadedRemoteInfo) {
-    return;
-  }
-  const snapshot = loadedRemoteInfo.snapshot;
-  if (!snapshot) {
-    return;
-  }
-  const publicPath =
-    '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, cacheData } = options;
-  if (!instance) {
-    throw new Error('instance is required for createLazyComponent!');
-  }
-  let dataCache: unknown = null;
-
-  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);
-      dataCache = 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,
-    });
-
-    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} />
-          </>
-        ),
-      };
-    } else {
-      throw Error(
-        `Make sure that ${moduleId} has the correct export when export is ${String(
-          exportName,
-        )}`,
-      );
-      // eslint-disable-next-line max-lines
-    }
-  });
-
-  return (props: ComponentType) => {
-    const { key, ...args } = props;
-    if (cacheData && dataCache) {
-      // @ts-expect-error ignore
-      return <LazyComponent {...args} mfData={dataCache} />;
-    }
-    if (!options.noSSR) {
-      return (
-        <AwaitDataFetch
-          resolve={getData(options.noSSR)}
-          loading={options.loading}
-          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 <>{options.loading}</>;
-      }
-
-      if (error) {
-        return (
-          <>
-            {typeof options.fallback === 'function'
-              ? options.fallback(error)
-              : options.fallback}
-          </>
-        );
-      }
-      // @ts-expect-error ignore
-      return <LazyComponent {...args} mfData={data} />;
-    }
-  };
-}