@module-federation/bridge-react 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

package/CHANGELOG.md

@@ -1,12 +1,90 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250925034616
+## 0.0.0-perf-devtools-20260106124142
 
 ### Patch Changes
 
+- @module-federation/sdk@0.0.0-perf-devtools-20260106124142
+- @module-federation/bridge-shared@0.0.0-perf-devtools-20260106124142
+
+## 0.22.0
+
+### Patch Changes
+
+- @module-federation/sdk@0.22.0
+- @module-federation/bridge-shared@0.22.0
+
+## 0.21.6
+
+### Patch Changes
+
+- @module-federation/sdk@0.21.6
+- @module-federation/bridge-shared@0.21.6
+
+## 0.21.5
+
+### Patch Changes
+
+- Updated dependencies [94d8868]
+  - @module-federation/sdk@0.21.5
+  - @module-federation/bridge-shared@0.21.5
+
+## 0.21.4
+
+### Patch Changes
+
+- 444db72: fix(bridge-react): hoist BridgeWrapper to prevent component recreation
+- Updated dependencies [a50e068]
+  - @module-federation/sdk@0.21.4
+  - @module-federation/bridge-shared@0.21.4
+
+## 0.21.3
+
+### Patch Changes
+
+- @module-federation/sdk@0.21.3
+- @module-federation/bridge-shared@0.21.3
+
+## 0.21.2
+
+### Patch Changes
+
+- e98133e: feat: Re-export the exports of the v18/v19/plugin from @module-federation/bridge-react in modernjs
+- dc103ee: fix: support React Router v6 in peer dependencies
+
+  Update react-router peer dependency from "^7" to "^6 || ^7" to fix npm install failures for projects using React Router v6.
+
+  - @module-federation/sdk@0.21.2
+  - @module-federation/bridge-shared@0.21.2
+
+## 0.21.1
+
+### Patch Changes
+
+- @module-federation/sdk@0.21.1
+- @module-federation/bridge-shared@0.21.1
+
+## 0.21.0
+
+### Minor Changes
+
+- d225658: feat: Add React Router v7 Support to Module Federation Bridge
+
+### Patch Changes
+
+- Updated dependencies [d1e90a4]
+  - @module-federation/sdk@0.21.0
+  - @module-federation/bridge-shared@0.21.0
+
+## 0.20.0
+
+### Patch Changes
+
+- 0008621: test(bridge-react): stabilize async assertions for bridge tests
 - Updated dependencies [37346d4]
-  - @module-federation/sdk@0.0.0-next-20250925034616
-  - @module-federation/bridge-shared@0.0.0-next-20250925034616
+- Updated dependencies [639a83b]
+  - @module-federation/sdk@0.20.0
+  - @module-federation/bridge-shared@0.20.0
 
 ## 0.19.1
 

package/__tests__/bridge.spec.tsx

@@ -7,7 +7,7 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { createContainer, getHtml, sleep } from './util';
+import { createContainer, getHtml } from './util';
 
 describe('bridge', () => {
   let containerInfo: ReturnType<typeof createContainer>;
@@ -31,9 +31,13 @@ describe('bridge', () => {
       dom: containerInfo?.container,
     });
 
-    await sleep(200);
-    expect(document.querySelector('#container')!.innerHTML).toContain(
-      '<div>life cycle render</div>',
+    await waitFor(
+      () => {
+        expect(document.querySelector('#container')?.innerHTML).toContain(
+          '<div>life cycle render</div>',
+        );
+      },
+      { timeout: 2000 },
     );
 
     lifeCycle.destroy({
@@ -41,7 +45,14 @@ describe('bridge', () => {
       moduleName: 'test',
     });
 
-    expect(document.querySelector('#container')!.innerHTML).toContain('');
+    await waitFor(
+      () => {
+        expect(
+          (document.querySelector('#container')?.innerHTML || '').trim(),
+        ).toBe('');
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('createRemoteAppComponent', async () => {
@@ -66,9 +77,13 @@ describe('bridge', () => {
     );
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render');
-    expect(getHtml(container)).toMatch('hello world');
+    await waitFor(
+      () => {
+        expect(getHtml(container)).toMatch('life cycle render');
+        expect(getHtml(container)).toMatch('hello world');
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('createRemoteAppComponent and obtain ref property', async () => {
@@ -97,10 +112,14 @@ describe('bridge', () => {
     );
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render');
-    expect(getHtml(container)).toMatch('hello world');
-    expect(ref.current).not.toBeNull();
+    await waitFor(
+      () => {
+        expect(getHtml(container)).toMatch('life cycle render');
+        expect(getHtml(container)).toMatch('hello world');
+        expect(ref.current).not.toBeNull();
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('createRemoteAppComponent with custom createRoot prop', async () => {
@@ -131,7 +150,11 @@ describe('bridge', () => {
     const { container } = render(<RemoteComponent />);
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(renderMock).toHaveBeenCalledTimes(1);
+    await waitFor(
+      () => {
+        expect(renderMock).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 2000 },
+    );
   });
 });

package/dist/base.cjs.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const createHelpers = require("./createHelpers-B_L612IN.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-BbKBABLx.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const dataFetchUtils = require("./data-fetch-utils.cjs.js");
+const prefetch = require("./prefetch-DcwCyN6i.js");
+const createRemoteAppComponent = createHelpers.createRemoteAppComponentFactory(createHelpers.RemoteAppWrapper);
+const createRemoteComponent = createHelpers.createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent
+);
+exports.createBridgeComponent = createHelpers.createBridgeComponent;
+exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
+exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
+exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;
+exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
+exports.CacheSize = lazyUtils.CacheSize;
+exports.CacheTime = lazyUtils.CacheTime;
+exports.ERROR_TYPE = lazyUtils.ERROR_TYPE;
+exports.cache = lazyUtils.cache;
+exports.clearStore = lazyUtils.clearStore;
+exports.configureCache = lazyUtils.configureCache;
+exports.generateKey = lazyUtils.generateKey;
+exports.revalidateTag = lazyUtils.revalidateTag;
+exports.setSSREnv = lazyUtils.setSSREnv;
+exports.callDataFetch = dataFetchUtils.callDataFetch;
+exports.prefetch = prefetch.prefetch;
+exports.createRemoteAppComponent = createRemoteAppComponent;
+exports.createRemoteComponent = createRemoteComponent;

package/dist/base.d.ts

@@ -0,0 +1,311 @@
+import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { getInstance } from '@module-federation/runtime';
+import { ModuleFederationRuntimePlugin } from '@module-federation/runtime';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const autoFetchDataPlugin: () => ModuleFederationRuntimePlugin;
+
+export declare function cache<T>(fn: DataFetch<T>, options?: CacheOptions): DataFetch<T>;
+
+declare interface CacheConfig {
+    maxSize?: number;
+    unstable_shouldDisable?: ({ request, }: {
+        request: Request;
+    }) => boolean | Promise<boolean>;
+}
+
+declare interface CacheOptions {
+    tag?: string | string[];
+    maxAge?: number;
+    revalidate?: number;
+    getKey?: <Args extends any[]>(...args: Args) => string;
+    onCache?: (info: CacheStatsInfo) => boolean;
+}
+
+export declare const CacheSize: {
+    readonly KB: 1024;
+    readonly MB: number;
+    readonly GB: number;
+};
+
+export declare interface CacheStatsInfo {
+    status: CacheStatus;
+    key: string | symbol;
+    params: DataFetchParams;
+    result: any;
+}
+
+export declare type CacheStatus = 'hit' | 'stale' | 'miss';
+
+export declare const CacheTime: {
+    readonly SECOND: 1000;
+    readonly MINUTE: number;
+    readonly HOUR: number;
+    readonly DAY: number;
+    readonly WEEK: number;
+    readonly MONTH: number;
+};
+
+export declare function callDataFetch(): Promise<void>;
+
+export declare function clearStore(): void;
+
+export declare function collectSSRAssets(options: CollectSSRAssetsOptions): default_2.ReactNode[];
+
+export declare type CollectSSRAssetsOptions = {
+    id: string;
+    instance: ReturnType<typeof getInstance>;
+    injectScript?: boolean;
+    injectLink?: boolean;
+};
+
+export declare function configureCache(config: CacheConfig): void;
+
+export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): void;
+};
+
+export declare function createLazyComponent<T, E extends keyof T>(options: CreateLazyComponentOptions<T, E>): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? ReactKey : Parameters<T[E]>[0] & ReactKey : ReactKey) => default_2.JSX.Element;
+
+export declare type CreateLazyComponentOptions<T, E extends keyof T> = {
+    loader: () => Promise<T>;
+    instance: ReturnType<typeof getInstance>;
+    loading: default_2.ReactNode;
+    delayLoading?: number;
+    fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
+    export?: E;
+    dataFetchParams?: DataFetchParams;
+    noSSR?: boolean;
+    injectScript?: boolean;
+    injectLink?: boolean;
+};
+
+export declare const createRemoteAppComponent: <T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>) => ForwardRefExoticComponent<Omit<RemoteComponentProps_2<Record<string, unknown>>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export declare const createRemoteComponent: <T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>) => any;
+
+export declare interface CreateRootOptions {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+/**
+ * Options for creating a React root
+ */
+declare interface CreateRootOptions_2 {
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+    transitionCallbacks?: unknown;
+}
+
+declare type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
+
+export declare type DataFetchParams = {
+    isDowngrade: boolean;
+    _id?: string;
+} & Record<string, unknown>;
+
+/**
+ * Parameters for the destroy function
+ */
+export declare interface DestroyParams {
+    moduleName: string;
+    dom: HTMLElement;
+}
+
+export declare const ERROR_TYPE: {
+    DATA_FETCH: number;
+    LOAD_REMOTE: number;
+    UNKNOWN: number;
+};
+
+declare type ErrorInfo = {
+    error: Error;
+    errorType: number;
+    dataFetchMapKey?: string;
+};
+
+export declare function generateKey(dataFetchOptions: DataFetchParams): string;
+
+export declare function lazyLoadComponentPlugin(): ModuleFederationRuntimePlugin;
+
+export declare type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
+
+export declare type NoSSRRemoteInfo = {
+    name: string;
+    version: string;
+    ssrPublicPath: string;
+    ssrRemoteEntry: string;
+    globalName: string;
+};
+
+export declare function prefetch(options: PrefetchOptions): Promise<void>;
+
+declare type PrefetchOptions = {
+    id: string;
+    instance: ReturnType<typeof getInstance>;
+    dataFetchParams?: DataFetchParams;
+    preloadComponentResource?: boolean;
+};
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderFnParams<T> {
+    rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions_2) => Root_2;
+    /**
+     * Default options to pass to createRoot for React 18 and 19
+     * These options will be used when creating a root unless overridden by rootOptions in render params
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    defaultRootOptions?: CreateRootOptions_2;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export declare interface ProviderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    style?: React_2.CSSProperties;
+    className?: string;
+}
+
+declare type ReactKey = {
+    key?: default_2.Key | null;
+};
+
+/**
+ * Parameters for the remote component loader
+ */
+export declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
+    loader: () => Promise<T>;
+    loading: React_2.ReactNode;
+    fallback: React_2.ComponentType<{
+        error: Error;
+    }>;
+    export?: E;
+    props?: T;
+}
+
+/**
+ * Parameters for the remote component
+ */
+export declare interface RemoteComponentProps<T = Record<string, unknown>> {
+    props?: T;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    loading?: React_2.ReactNode;
+    [key: string]: unknown;
+}
+
+/**
+ * Parameters for the remote component
+ */
+declare interface RemoteComponentProps_2<T = Record<string, unknown>> {
+    props?: T;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    loading?: React_2.ReactNode;
+    [key: string]: unknown;
+}
+
+/**
+ * Interface for a remote module provider
+ */
+export declare interface RemoteModule {
+    provider: () => {
+        render: (info: RenderFnParams) => void;
+        destroy: (info: {
+            dom: any;
+        }) => void;
+    };
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
+export declare interface RenderFnParams extends ProviderParams {
+    dom: HTMLElement;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    [key: string]: unknown;
+}
+
+/**
+ * Parameters for the render function
+ */
+export declare interface RenderParams {
+    moduleName?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+        initialState?: Record<string, unknown>;
+    };
+    dom: HTMLElement;
+    /**
+     * Options to pass to createRoot for React 18 and 19
+     * @example
+     * {
+     *   identifierPrefix: 'app-',
+     *   onRecoverableError: (err) => console.error(err)
+     * }
+     */
+    rootOptions?: CreateRootOptions_2;
+    [key: string]: unknown;
+}
+
+export declare function revalidateTag(tag: string): void;
+
+export declare interface Root {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Interface for a React root object
+ */
+declare interface Root_2 {
+    render(children: React_2.ReactNode): void;
+    unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export declare type RootType = HTMLElement | Root_2;
+
+export declare function setSSREnv({ fetchServerQuery, }: {
+    fetchServerQuery?: Record<string, unknown>;
+}): void;
+
+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/base.es.js

@@ -0,0 +1,30 @@
+import { c as createDeprecatedRemoteComponentFactory, a as createRemoteAppComponentFactory, R as RemoteAppWrapper } from "./createHelpers-Ui5pt7je.mjs";
+import { b } from "./createHelpers-Ui5pt7je.mjs";
+import { b as b2, a, c, l } from "./lazy-load-component-plugin-CHUcCRrF.mjs";
+import { C, a as a2, E, b as b3, d, c as c2, g, r, s } from "./utils-dUgb9Jkm.mjs";
+import { callDataFetch } from "./data-fetch-utils.es.js";
+import { p } from "./prefetch-CBBSKet3.mjs";
+const createRemoteAppComponent = createRemoteAppComponentFactory(RemoteAppWrapper);
+const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent
+);
+export {
+  C as CacheSize,
+  a2 as CacheTime,
+  E as ERROR_TYPE,
+  b2 as autoFetchDataPlugin,
+  b3 as cache,
+  callDataFetch,
+  d as clearStore,
+  a as collectSSRAssets,
+  c2 as configureCache,
+  b as createBridgeComponent,
+  c as createLazyComponent,
+  createRemoteAppComponent,
+  createRemoteComponent,
+  g as generateKey,
+  l as lazyLoadComponentPlugin,
+  p as prefetch,
+  r as revalidateTag,
+  s as setSSREnv
+};

package/dist/{bridge-base-BwHtOqw_.mjs → bridge-base-CPSTBjEp.mjs}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Component, createElement, createContext } from "react";
-import { L as LoggerInstance, R as RouterContext } from "./index-rAO0Wr0M.mjs";
+import { L as LoggerInstance, R as RouterContext } from "./index-DyQNwY2M.mjs";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -121,6 +121,24 @@ function createBaseBridgeComponent({
         }
       ));
     };
+    const DefaultFallback = ({ error }) => /* @__PURE__ */ React.createElement("div", { role: "alert" }, /* @__PURE__ */ React.createElement("p", null, "Something went wrong:"), /* @__PURE__ */ React.createElement("pre", { style: { color: "red" } }, error.message));
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback
+    }) => /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback || DefaultFallback }, /* @__PURE__ */ React.createElement(
+      RawComponent,
+      {
+        appInfo: {
+          moduleName,
+          basename,
+          memoryRoute
+        },
+        propsInfo
+      }
+    ));
     return {
       async render(info) {
         var _a, _b, _c, _d, _e, _f;
@@ -140,24 +158,18 @@ function createBaseBridgeComponent({
         };
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(
-          ErrorBoundary,
+          BridgeWrapper,
           {
-            FallbackComponent: fallback
-          },
-          /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: {
-                ...propsInfo,
-                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-              }
+            basename,
+            moduleName,
+            memoryRoute,
+            fallback,
+            propsInfo: {
+              ...propsInfo,
+              basename,
+              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
             }
-          )
+          }
         );
         if (bridgeInfo.render) {
           await Promise.resolve(
@@ -184,7 +196,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }