@module-federation/bridge-react 0.16.0 → 0.17.1

package/dist/v18.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
+const bridgeBase = require("./bridge-base-UGCwcMnG.js");
 function createReact18Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v18.d.ts

@@ -103,3 +103,12 @@ declare interface Root_2 {
 export declare type RootType = HTMLElement | Root_2;
 
 export { }
+
+
+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>;
+    }
+}

package/dist/v18.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-P6pEjY1q.js";
+import { c as createBaseBridgeComponent } from "./bridge-base-BoshEggF.mjs";
 function createReact18Root(container, options) {
   return createRoot(container, options);
 }

package/dist/v19.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
+const bridgeBase = require("./bridge-base-UGCwcMnG.js");
 function createReact19Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v19.d.ts

@@ -104,3 +104,12 @@ declare interface Root_2 {
 export declare type RootType = HTMLElement | Root_2;
 
 export { }
+
+
+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>;
+    }
+}

package/dist/v19.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-P6pEjY1q.js";
+import { c as createBaseBridgeComponent } from "./bridge-base-BoshEggF.mjs";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'bridge-react',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        isolatedModules: true,
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/packages/bridge/bridge-react',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/__tests__/setupTests.ts'],
+  testMatch: [
+    '<rootDir>/__tests__/**/*.spec.ts',
+    '<rootDir>/__tests__/**/*.spec.tsx',
+  ],
+};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.16.0",
+  "version": "0.17.1",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -11,7 +12,6 @@
     "url": "https://github.com/module-federation/core",
     "directory": "packages/bridge-react"
   },
-  "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -51,12 +51,52 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
+    "./lazy-utils": {
+      "types": "./dist/lazy-utils.d.ts",
+      "import": "./dist/lazy-utils.es.js",
+      "require": "./dist/lazy-utils.cjs.js"
+    },
+    "./data-fetch-utils": {
+      "types": "./dist/data-fetch-utils.d.ts",
+      "import": "./dist/data-fetch-utils.es.js",
+      "require": "./dist/data-fetch-utils.cjs.js"
+    },
+    "./data-fetch-server-middleware": {
+      "types": "./dist/data-fetch-server-middleware.d.ts",
+      "import": "./dist/data-fetch-server-middleware.es.js",
+      "require": "./dist/data-fetch-server-middleware.cjs.js"
+    },
+    "./lazy-load-component-plugin": {
+      "types": "./dist/lazy-load-component-plugin.d.ts",
+      "import": "./dist/lazy-load-component-plugin.es.js",
+      "require": "./dist/lazy-load-component-plugin.cjs.js"
+    },
     "./*": "./*"
   },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/index.d.ts"
+      ],
+      "lazy-load-component-plugin": [
+        "./dist/lazy-load-component-plugin.d.ts"
+      ],
+      "lazy-utils": [
+        "./dist/lazy-utils.d.ts"
+      ],
+      "data-fetch-utils": [
+        "./dist/data-fetch-utils.d.ts"
+      ],
+      "data-fetch-server-middleware": [
+        "./dist/data-fetch-server-middleware.d.ts"
+      ]
+    }
+  },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.16.0",
-    "@module-federation/sdk": "0.16.0"
+    "lru-cache": "^10.4.3",
+    "@module-federation/bridge-shared": "0.17.1",
+    "@module-federation/sdk": "0.17.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -65,19 +105,21 @@
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
+    "@testing-library/jest-dom": "6.6.3",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "jsdom": "^24.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.16.0"
+    "hono": "3.12.12",
+    "@module-federation/runtime": "0.17.1",
+    "@module-federation/runtime-core": "0.17.1"
   },
   "scripts": {
     "dev": "vite",

package/project.json

@@ -12,15 +12,11 @@
       }
     },
     "test": {
-      "executor": "nx:run-commands",
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "parallel": false,
-        "commands": [
-          {
-            "command": "vitest run -c packages/bridge/bridge-react/vitest.config.ts",
-            "forwardAllArgs": false
-          }
-        ]
+        "jestConfig": "packages/bridge/bridge-react/jest.config.ts",
+        "passWithNoTests": true
       }
     }
   }

package/src/index.ts

@@ -3,7 +3,30 @@
  * This file provides support for React 16 and 17 versions, using the traditional ReactDOM.render API
  */
 export { createBridgeComponent } from './provider/versions/legacy';
-export { createRemoteComponent } from './remote/create';
+export {
+  createRemoteComponent,
+  createRemoteAppComponent,
+} from './remote/create';
+export {
+  ERROR_TYPE,
+  createLazyComponent,
+  collectSSRAssets,
+  // wrapNoSSR,
+  callDataFetch,
+  setSSREnv,
+  autoFetchDataPlugin,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './lazy';
+
+export { lazyLoadComponentPlugin } from './plugins/lazy-load-component-plugin';
+
 export type { CreateRootOptions, Root } from './provider/versions/legacy';
 export type {
   ProviderParams,
@@ -12,3 +35,11 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateLazyComponentOptions,
+  CacheStatus,
+  CacheStatsInfo,
+} from './lazy';

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: ';