@module-federation/bridge-react 2.3.3 → 2.4.0

package/src/lazy/utils.ts

@@ -1,375 +0,0 @@
-import {
-  isBrowserEnvValue,
-  composeKeyWithSeparator,
-} from '@module-federation/sdk';
-import logger from './logger';
-import {
-  DOWNGRADE_KEY,
-  MF_DATA_FETCH_STATUS,
-  WRAP_DATA_FETCH_ID_IDENTIFIER,
-  DATA_FETCH_QUERY,
-  MF_DATA_FETCH_TYPE,
-  DATA_FETCH_IDENTIFIER,
-  DATA_FETCH_CLIENT_SUFFIX,
-} from './constant';
-
-import type { GlobalModuleInfo } from '@module-federation/sdk';
-import type {
-  DataFetchParams,
-  MF_DATA_FETCH_MAP,
-  NoSSRRemoteInfo,
-  MF_SSR_DOWNGRADE,
-  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET,
-  MF_DATA_FETCH_CACHE,
-} from './types';
-import type { ModuleFederation } from '@module-federation/runtime';
-import { clearStore } from './data-fetch/cache';
-
-export const getDataFetchInfo = ({
-  name,
-  alias,
-  id,
-  remoteSnapshot,
-}: {
-  id: string;
-  name: string;
-  remoteSnapshot: GlobalModuleInfo[string];
-  alias?: string;
-}) => {
-  if (!remoteSnapshot) {
-    return;
-  }
-  if (!('modules' in remoteSnapshot)) {
-    return;
-  }
-  const regex = new RegExp(`^${name}(/[^/].*|)$`);
-  const nameOrAlias = regex.test(id) ? name : alias || name;
-
-  const expose = id.replace(nameOrAlias, '');
-  let dataFetchName = '';
-  let dataFetchId = '';
-  let dataFetchKey = '';
-  if (expose.startsWith('/')) {
-    dataFetchName = `${expose.slice(1)}.${DATA_FETCH_IDENTIFIER}`;
-    dataFetchId = `${id}.${DATA_FETCH_IDENTIFIER}`;
-    dataFetchKey = `${name}${expose}.${DATA_FETCH_IDENTIFIER}`;
-  } else if (expose === '') {
-    dataFetchName = DATA_FETCH_IDENTIFIER;
-    dataFetchId = `${id}/${DATA_FETCH_IDENTIFIER}`;
-    dataFetchKey = `${name}/${DATA_FETCH_IDENTIFIER}`;
-  } else {
-    return;
-  }
-
-  if (!dataFetchName || !dataFetchId || !dataFetchKey) {
-    return;
-  }
-
-  if (
-    !remoteSnapshot.modules.find(
-      (module) => module.moduleName === dataFetchName,
-    )
-  ) {
-    return;
-  }
-
-  return {
-    dataFetchName,
-    dataFetchId,
-    dataFetchKey,
-  };
-};
-
-export function initDataFetchMap() {
-  globalThis.__MF_DATA_FETCH_MAP__ ||= {};
-}
-
-export function getDataFetchItem(id: string) {
-  return (globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP)?.[id];
-}
-
-export function getDataFetchMap() {
-  return globalThis.__MF_DATA_FETCH_MAP__ as MF_DATA_FETCH_MAP;
-}
-
-export function getDataFetchCache() {
-  return globalThis.__MF_DATA_FETCH_CACHE__ as MF_DATA_FETCH_CACHE;
-}
-
-export const flushDataFetch = () => {
-  globalThis.__MF_DATA_FETCH_MAP__ = {};
-  globalThis[DOWNGRADE_KEY] = undefined;
-  clearStore();
-};
-
-export function setDataFetchItemLoadedStatus(id: string) {
-  const dataFetchItem = getDataFetchItem(id);
-  if (!dataFetchItem) {
-    return;
-  }
-  dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
-}
-
-export const wrapDataFetchId = (id?: string) => {
-  return `${WRAP_DATA_FETCH_ID_IDENTIFIER}${id}${WRAP_DATA_FETCH_ID_IDENTIFIER}`;
-};
-
-export const getDataFetchIdWithErrorMsgs = (errMsgs: string) => {
-  const firstIdentifierIndex = errMsgs.indexOf(WRAP_DATA_FETCH_ID_IDENTIFIER);
-  if (firstIdentifierIndex === -1) {
-    return undefined;
-  }
-
-  const secondIdentifierIndex = errMsgs.indexOf(
-    WRAP_DATA_FETCH_ID_IDENTIFIER,
-    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
-  );
-
-  if (secondIdentifierIndex === -1) {
-    return undefined;
-  }
-
-  return errMsgs.substring(
-    firstIdentifierIndex + WRAP_DATA_FETCH_ID_IDENTIFIER.length,
-    secondIdentifierIndex,
-  );
-};
-
-export async function fetchData(
-  id: string,
-  params: DataFetchParams,
-  remoteInfo?: NoSSRRemoteInfo,
-): Promise<unknown | undefined> {
-  const callFetchData = async () => {
-    const item = getDataFetchItem(id);
-    if (!item) {
-      return;
-    }
-    const [fetchDataFnArr, ..._rest] = item;
-
-    const fetchDataFn = await fetchDataFnArr[2];
-    if (!fetchDataFn) {
-      return;
-    }
-    return fetchDataFn({
-      ...params,
-      _id: id,
-    });
-  };
-  if (isBrowserEnvValue) {
-    const dataFetchItem = getDataFetchItem(id);
-    if (!dataFetchItem) {
-      throw new Error(`dataFetchItem not found, id: ${id}`);
-    }
-    if (dataFetchItem[1]?.[0]) {
-      return dataFetchItem[1][0];
-    }
-
-    if (isCSROnly()) {
-      logger.debug('==========csr only!');
-      return callFetchData();
-    }
-
-    if (remoteInfo) {
-      return callDowngrade(id, params, remoteInfo);
-    }
-
-    const mfDowngrade = getDowngradeTag();
-    if (
-      mfDowngrade &&
-      (typeof mfDowngrade === 'boolean' || mfDowngrade.includes(id))
-    ) {
-      return callDowngrade(id, { ...params, isDowngrade: true });
-    }
-
-    let res;
-    let rej;
-    const p = new Promise((resolve, reject) => {
-      res = resolve;
-      rej = reject;
-    });
-    dataFetchItem[1] = [p, res, rej];
-    dataFetchItem[2] = MF_DATA_FETCH_STATUS.AWAIT;
-    return dataFetchItem[1][0];
-  }
-
-  return callFetchData();
-}
-
-export function getDataFetchMapKey(
-  dataFetchInfo?: ReturnType<typeof getDataFetchInfo>,
-  hostInfo?: { name: string; version?: string },
-) {
-  if (!dataFetchInfo || !hostInfo) {
-    return;
-  }
-
-  const { dataFetchKey } = dataFetchInfo;
-
-  return composeKeyWithSeparator(dataFetchKey, hostInfo.name, hostInfo.version);
-}
-
-export async function loadDataFetchModule(
-  instance: ModuleFederation,
-  id: string,
-) {
-  return instance.loadRemote(id).then((m) => {
-    if (
-      m &&
-      typeof m === 'object' &&
-      'fetchData' in m &&
-      typeof m.fetchData === 'function'
-    ) {
-      return m.fetchData as (params: DataFetchParams) => Promise<unknown>;
-    }
-    throw new Error(
-      `fetchData not found in remote ${id}, ${JSON.stringify(m)}`,
-    );
-  });
-}
-
-export function isDataLoaderExpose(exposeKey: string) {
-  return (
-    exposeKey.endsWith(DATA_FETCH_IDENTIFIER) ||
-    exposeKey.endsWith(DATA_FETCH_CLIENT_SUFFIX)
-  );
-}
-
-export function getDowngradeTag() {
-  return globalThis[DOWNGRADE_KEY] as MF_SSR_DOWNGRADE;
-}
-
-export function callAllDowngrade() {
-  const dataFetchMap = getDataFetchMap();
-  if (!dataFetchMap) {
-    return;
-  }
-  Object.keys(dataFetchMap).forEach((key) => {
-    callDowngrade(key);
-  });
-}
-
-export async function callDowngrade(
-  id: string,
-  params?: DataFetchParams,
-  remoteInfo?: NoSSRRemoteInfo,
-) {
-  const dataFetchMap = getDataFetchMap();
-  if (!dataFetchMap) {
-    return;
-  }
-  const mfDataFetch = dataFetchMap[id];
-  if (mfDataFetch?.[2] === MF_DATA_FETCH_STATUS.AWAIT) {
-    mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADING;
-    let promise: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[0];
-    let res: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[1];
-    let rej: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[2];
-    if (mfDataFetch[1]) {
-      promise = mfDataFetch[1][0];
-      res = mfDataFetch[1][1];
-      rej = mfDataFetch[1][2];
-    } else {
-      promise = new Promise((resolve, reject) => {
-        res = resolve;
-        rej = reject;
-      });
-      mfDataFetch[1] = [promise, res, rej];
-    }
-    const dataFetchType = mfDataFetch[0][1];
-    if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_CLIENT) {
-      try {
-        mfDataFetch[0][0]().then(async (getDataFetchFn) => {
-          return getDataFetchFn({
-            ...params,
-            isDowngrade: true,
-            _id: id,
-          }).then((data) => {
-            mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
-            res && res(data);
-          });
-        });
-      } catch (e) {
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
-        rej && rej(e);
-      }
-    } else if (dataFetchType === MF_DATA_FETCH_TYPE.FETCH_SERVER) {
-      try {
-        const currentUrl = new URL(window.location.href);
-        currentUrl.searchParams.set(DATA_FETCH_QUERY, encodeURIComponent(id));
-        if (params) {
-          currentUrl.searchParams.set(
-            'params',
-            encodeURIComponent(JSON.stringify(params)),
-          );
-        }
-        if (remoteInfo) {
-          currentUrl.searchParams.set(
-            'remoteInfo',
-            encodeURIComponent(JSON.stringify(remoteInfo)),
-          );
-        }
-        const fetchServerQuery = globalThis.FEDERATION_SERVER_QUERY;
-        if (fetchServerQuery && typeof fetchServerQuery === 'object') {
-          Object.keys(fetchServerQuery).forEach((key) => {
-            currentUrl.searchParams.set(
-              key,
-              JSON.stringify(fetchServerQuery[key]),
-            );
-          });
-        }
-        const fetchUrl = currentUrl.toString();
-        const data = await fetch(fetchUrl).then((res) => res.json());
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
-        res && res(data);
-      } catch (e) {
-        mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
-        rej && rej(e);
-      }
-    }
-
-    return promise;
-  }
-}
-
-export function isCSROnly() {
-  // @ts-ignore  modern.js will inject window._SSR_DATA if enable ssr
-  return window._SSR_DATA === undefined;
-}
-
-export function isServerEnv() {
-  return typeof window === 'undefined';
-}
-
-export function setSSREnv({
-  fetchServerQuery,
-}: {
-  fetchServerQuery?: Record<string, unknown>;
-}) {
-  globalThis.FEDERATION_SSR = true;
-  globalThis.FEDERATION_SERVER_QUERY = fetchServerQuery;
-}
-
-export function getLoadedRemoteInfos(
-  id: string,
-  instance: ModuleFederation | null,
-) {
-  if (!instance) {
-    return;
-  }
-  const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
-  if (!name) {
-    return;
-  }
-  const module = instance.moduleCache.get(name);
-  if (!module) {
-    return;
-  }
-  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(
-    module.remoteInfo,
-  );
-  return {
-    ...module.remoteInfo,
-    snapshot: remoteSnapshot,
-    expose,
-  };
-}

package/src/lazy/wrapNoSSR.tsx

@@ -1,10 +0,0 @@
-import { createLazyComponent } from './createLazyComponent';
-import type { CreateLazyComponentOptions } from './createLazyComponent';
-
-export function wrapNoSSR<T, E extends keyof T>(
-  createLazyComponentFn: typeof createLazyComponent<T, E>,
-) {
-  return (options: Omit<CreateLazyComponentOptions<T, E>, 'noSSR'>) => {
-    return createLazyComponentFn({ ...options, noSSR: true });
-  };
-}

package/src/modern-app-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types='@modern-js/module-tools/types' />
-/// <reference types='@modern-js/plugin-testing/types' />

package/src/plugins/lazy-load-component-plugin.spec.ts

@@ -1,21 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { lazyLoadComponentPlugin } from './lazy-load-component-plugin';
-import type { ModuleFederation } from '@module-federation/runtime';
-
-describe('lazyLoadComponentPlugin', () => {
-  it('should register lazy load component methods on the instance', () => {
-    const instance = {
-      registerPlugins: vi.fn(),
-    } as unknown as ModuleFederation;
-
-    const plugin = lazyLoadComponentPlugin();
-    if (plugin.apply) {
-      plugin.apply(instance);
-    }
-
-    expect(instance.registerPlugins).toHaveBeenCalled();
-    expect(typeof instance.createLazyComponent).toBe('function');
-    expect(typeof instance.prefetch).toBe('function');
-    expect(typeof instance.collectSSRAssets).toBe('function');
-  });
-});

package/src/plugins/lazy-load-component-plugin.ts

@@ -1,57 +0,0 @@
-import type {
-  ModuleFederation,
-  ModuleFederationRuntimePlugin,
-} from '@module-federation/runtime';
-import {
-  createLazyComponent,
-  prefetch,
-  collectSSRAssets,
-  autoFetchDataPlugin,
-} from '../lazy';
-import type { CreateLazyComponentOptions, PrefetchOptions } from '../lazy';
-
-declare module '@module-federation/runtime-core' {
-  interface ModuleFederation {
-    createLazyComponent<T, E extends keyof T>(
-      options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>,
-    ): ReturnType<typeof createLazyComponent<T, E>>;
-    prefetch(
-      options: Omit<PrefetchOptions, 'instance'>,
-    ): ReturnType<typeof prefetch>;
-    collectSSRAssets(
-      options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>,
-    ): ReturnType<typeof collectSSRAssets>;
-  }
-}
-
-export function lazyLoadComponentPlugin(): ModuleFederationRuntimePlugin {
-  return {
-    name: 'lazy-load-component-plugin',
-    apply(instance: ModuleFederation) {
-      instance.registerPlugins([autoFetchDataPlugin()]);
-
-      instance.createLazyComponent = (options) => {
-        return createLazyComponent({
-          instance,
-          ...options,
-        });
-      };
-
-      instance.prefetch = (options) => {
-        return prefetch({
-          instance,
-          ...options,
-        });
-      };
-
-      instance.collectSSRAssets = (options) => {
-        return collectSSRAssets({
-          instance,
-          ...options,
-        });
-      };
-    },
-  };
-}
-
-export default lazyLoadComponentPlugin;

package/src/provider/context.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ProviderParams } from '../types';
-
-export const RouterContext = React.createContext<ProviderParams | null>(null);

package/src/provider/plugin.ts

@@ -1,22 +0,0 @@
-import type {
-  ModuleFederationRuntimePlugin,
-  ModuleFederation,
-} from '@module-federation/runtime';
-
-export type FederationRuntimeType = {
-  instance: ModuleFederation | null;
-};
-
-export const federationRuntime: FederationRuntimeType = { instance: null };
-
-function BridgeReactPlugin(): ModuleFederationRuntimePlugin {
-  return {
-    name: 'bridge-react-plugin',
-    beforeInit(args) {
-      federationRuntime.instance = args.origin;
-      return args;
-    },
-  };
-}
-
-export default BridgeReactPlugin;

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

@@ -1,153 +0,0 @@
-/**
- * Base bridge component implementation
- * This file contains bridge component logic shared across all React versions
- */
-import * as React from 'react';
-import type {
-  ProviderParams,
-  ProviderFnParams,
-  RootType,
-  DestroyParams,
-  RenderParams,
-  CreateRootOptions,
-} from '../../types';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import { RouterContext } from '../context';
-import { LoggerInstance } from '../../utils';
-import { federationRuntime } from '../plugin';
-
-export function createBaseBridgeComponent<T>({
-  createRoot,
-  defaultRootOptions,
-  ...bridgeInfo
-}: ProviderFnParams<T>) {
-  return () => {
-    const rootMap = new Map<any, RootType>();
-    const instance = federationRuntime.instance;
-    LoggerInstance.debug(
-      `createBridgeComponent instance from props >>>`,
-      instance,
-    );
-
-    const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = '/' } = appInfo;
-      return (
-        <RouterContext.Provider value={{ moduleName, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent
-            {...propsInfo}
-            basename={basename}
-            {...restProps}
-          />
-        </RouterContext.Provider>
-      );
-    };
-
-    const DefaultFallback = ({ error }: FallbackProps) => (
-      <div role="alert">
-        <p>Something went wrong:</p>
-        <pre style={{ color: 'red' }}>{error.message}</pre>
-      </div>
-    );
-
-    const ErrorBoundaryComponent =
-      ErrorBoundary as unknown as React.ComponentType<any>;
-
-    const BridgeWrapper = ({
-      basename,
-      moduleName,
-      memoryRoute,
-      propsInfo,
-      fallback,
-    }: {
-      basename?: string;
-      moduleName?: string;
-      memoryRoute?: any;
-      propsInfo: T;
-      fallback?: React.ComponentType<FallbackProps>;
-    }) => (
-      <ErrorBoundaryComponent FallbackComponent={fallback || DefaultFallback}>
-        <RawComponent
-          appInfo={{
-            moduleName,
-            basename,
-            memoryRoute,
-          }}
-          propsInfo={propsInfo}
-        />
-      </ErrorBoundaryComponent>
-    );
-
-    return {
-      async render(info: RenderParams) {
-        LoggerInstance.debug(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          rootOptions,
-          ...propsInfo
-        } = info;
-
-        const mergedRootOptions: CreateRootOptions | undefined = {
-          ...defaultRootOptions,
-          ...(rootOptions as CreateRootOptions),
-        };
-
-        const beforeBridgeRenderRes =
-          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
-
-        const rootComponentWithErrorBoundary = (
-          <BridgeWrapper
-            basename={basename}
-            moduleName={moduleName}
-            memoryRoute={memoryRoute}
-            fallback={fallback as React.ComponentType<FallbackProps>}
-            propsInfo={
-              {
-                ...propsInfo,
-                basename,
-                ...(beforeBridgeRenderRes as any)?.extraProps,
-              } as T
-            }
-          />
-        );
-
-        if (bridgeInfo.render) {
-          await Promise.resolve(
-            bridgeInfo.render(rootComponentWithErrorBoundary, dom),
-          ).then((root: RootType) => rootMap.set(dom, root));
-        } else {
-          let root = rootMap.get(dom);
-          // Do not call createRoot multiple times
-          if (!root && createRoot) {
-            root = createRoot(dom, mergedRootOptions);
-            rootMap.set(dom, root as any);
-          }
-
-          if (root && 'render' in root) {
-            root.render(rootComponentWithErrorBoundary);
-          }
-        }
-        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
-      },
-
-      destroy(info: DestroyParams) {
-        const { dom } = info;
-        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
-        const root = rootMap.get(dom);
-        if (root) {
-          if ('unmount' in root) {
-            root.unmount();
-          } else {
-            LoggerInstance.warn('Root does not have unmount method');
-          }
-          rootMap.delete(dom);
-        }
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
-      },
-    };
-  };
-}