@module-federation/bridge-react 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @module-federation/bridge-react
 
+## 0.17.0
+
+### Minor Changes
+
+- e874c64: refactor(bridge-react): rename createRemoteComponent as createRemoteAppComponent
+
+### Patch Changes
+
+- e874c64: feat(bridge-react): export createLazyCompoent api
+- 3f736b6: chore: rename FederationHost to ModuleFederation
+  - @module-federation/sdk@0.17.0
+  - @module-federation/bridge-shared@0.17.0
+
 ## 0.16.0
 
 ### Patch Changes

package/__tests__/bridge.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert, describe, it } from 'vitest';
-import { createBridgeComponent, createRemoteComponent } from '../src';
+import { createBridgeComponent, createRemoteAppComponent } from '../src';
 import {
   act,
   fireEvent,
@@ -44,14 +44,14 @@ describe('bridge', () => {
     expect(document.querySelector('#container')!.innerHTML).toContain('');
   });
 
-  it('createRemoteComponent', async () => {
+  it('createRemoteAppComponent', async () => {
     function Component({ props }: { props?: Record<string, any> }) {
       return <div>life cycle render {props?.msg}</div>;
     }
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -71,7 +71,7 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('hello world');
   });
 
-  it('createRemoteComponent and obtain ref property', async () => {
+  it('createRemoteAppComponent and obtain ref property', async () => {
     const ref = {
       current: null,
     };
@@ -82,7 +82,7 @@ describe('bridge', () => {
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -103,7 +103,7 @@ describe('bridge', () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it('createRemoteComponent with custom createRoot prop', async () => {
+  it('createRemoteAppComponent with custom createRoot prop', async () => {
     const renderMock = vi.fn();
 
     function Component({ props }: { props?: Record<string, any> }) {
@@ -118,7 +118,7 @@ describe('bridge', () => {
         };
       },
     });
-    const RemoteComponent = createRemoteComponent({
+    const RemoteComponent = createRemoteAppComponent({
       loader: async () => {
         return {
           default: BridgeComponent,

package/__tests__/createLazyComponent.spec.tsx

@@ -0,0 +1,210 @@
+import React, { Suspense } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  createLazyComponent,
+  collectSSRAssets,
+} from '../src/lazy/createLazyComponent';
+import * as runtime from '@module-federation/runtime';
+import * as utils from '../src/lazy/utils';
+
+// Mocking dependencies
+vi.mock('@module-federation/runtime');
+vi.mock('../src/lazy/utils');
+
+const mockGetInstance = runtime.getInstance as vi.Mock;
+const mockGetLoadedRemoteInfos = utils.getLoadedRemoteInfos as vi.Mock;
+const mockGetDataFetchMapKey = utils.getDataFetchMapKey as vi.Mock;
+const mockFetchData = utils.fetchData as vi.Mock;
+
+const MockComponent = () => <div>Mock Component</div>;
+const LoadingComponent = () => <div>Loading...</div>;
+const ErrorComponent = () => <div>Error!</div>;
+
+describe('createLazyComponent', () => {
+  let mockInstance: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockInstance = {
+      name: 'host-app',
+      options: { version: '1.0.0' },
+      getModuleInfo: vi.fn(),
+    };
+    mockGetInstance.mockReturnValue(mockInstance);
+    mockGetLoadedRemoteInfos.mockReturnValue({
+      name: 'remoteApp',
+      alias: 'remote',
+      expose: './Component',
+      version: '1.0.0',
+      snapshot: {
+        modules: [
+          {
+            modulePath: './Component',
+            assets: {
+              css: { sync: [], async: [] },
+              js: { sync: [], async: [] },
+            },
+          },
+        ],
+        publicPath: 'http://localhost:3001/',
+        remoteEntry: 'remoteEntry.js',
+      },
+      entryGlobalName: 'remoteApp',
+    });
+    mockGetDataFetchMapKey.mockReturnValue('data-fetch-key');
+  });
+
+  it('should render loading component then the actual component', async () => {
+    const loader = vi.fn().mockResolvedValue({
+      default: MockComponent,
+      [Symbol.for('mf_module_id')]: 'remoteApp/Component',
+    });
+
+    const LazyComponent = createLazyComponent({
+      loader,
+      instance: mockInstance,
+      loading: <LoadingComponent />,
+      fallback: <ErrorComponent />,
+    });
+
+    render(
+      <Suspense fallback={<LoadingComponent />}>
+        <LazyComponent />
+      </Suspense>,
+    );
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText('Mock Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should render fallback component on data fetch error', async () => {
+    mockFetchData.mockRejectedValue(new Error('Data fetch failed'));
+    const LazyComponentWithDataFetch = createLazyComponent({
+      loader: vi.fn().mockResolvedValue({
+        default: MockComponent,
+        [Symbol.for('mf_module_id')]: 'remoteApp/Component',
+      }),
+      instance: mockInstance,
+      loading: <LoadingComponent />,
+      fallback: <ErrorComponent />,
+    });
+
+    render(<LazyComponentWithDataFetch />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error!')).toBeInTheDocument();
+    });
+  });
+
+  it('should fetch data and pass it to the component', async () => {
+    const loader = vi.fn().mockResolvedValue({
+      default: (props: { mfData: any }) => (
+        <div>Data: {JSON.stringify(props.mfData)}</div>
+      ),
+      [Symbol.for('mf_module_id')]: 'remoteApp/Component',
+    });
+    const mockData = { message: 'Hello' };
+    mockFetchData.mockResolvedValue(mockData);
+
+    const LazyComponent = createLazyComponent({
+      loader,
+      instance: mockInstance,
+      loading: <LoadingComponent />,
+      fallback: <ErrorComponent />,
+    });
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(`Data: ${JSON.stringify(mockData)}`),
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+describe('collectSSRAssets', () => {
+  let mockInstance: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockInstance = {
+      name: 'host-app',
+      options: { version: '1.0.0' },
+    };
+    mockGetInstance.mockReturnValue(mockInstance);
+  });
+
+  it('should return an empty array if instance is not available', () => {
+    const assets = collectSSRAssets({
+      id: 'test/expose',
+      instance: undefined as any,
+    });
+    expect(assets).toEqual([]);
+  });
+
+  it('should return an empty array if module info is not found', () => {
+    mockGetLoadedRemoteInfos.mockReturnValue(undefined);
+    const assets = collectSSRAssets({
+      id: 'test/expose',
+      instance: mockInstance,
+    });
+    expect(assets).toEqual([]);
+  });
+
+  it('should collect CSS and JS assets for SSR', () => {
+    mockGetLoadedRemoteInfos.mockReturnValue({
+      name: 'remoteApp',
+      expose: './Component',
+      snapshot: {
+        publicPath: 'http://localhost:3001/',
+        remoteEntry: 'remoteEntry.js',
+        modules: [
+          {
+            modulePath: './Component',
+            assets: {
+              css: { sync: ['main.css'], async: ['extra.css'] },
+              js: { sync: ['main.js'], async: [] },
+            },
+          },
+        ],
+      },
+    });
+
+    const assets = collectSSRAssets({
+      id: 'remoteApp/Component',
+      instance: mockInstance,
+      injectScript: true,
+      injectLink: true,
+    });
+
+    expect(assets).toHaveLength(4); // 2 links, 2 scripts
+
+    const links = assets.filter(
+      (asset) => (asset as React.ReactElement).type === 'link',
+    );
+    const scripts = assets.filter(
+      (asset) => (asset as React.ReactElement).type === 'script',
+    );
+
+    expect(links).toHaveLength(2);
+    expect((links[0] as React.ReactElement).props.href).toBe(
+      'http://localhost:3001/extra.css',
+    );
+    expect((links[1] as React.ReactElement).props.href).toBe(
+      'http://localhost:3001/main.css',
+    );
+
+    expect(scripts).toHaveLength(2);
+    expect((scripts[0] as React.ReactElement).props.src).toBe(
+      'http://localhost:3001/remoteEntry.js',
+    );
+    expect((scripts[1] as React.ReactElement).props.src).toBe(
+      'http://localhost:3001/main.js',
+    );
+  });
+});

package/__tests__/prefetch.spec.ts

@@ -0,0 +1,153 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { prefetch } from '../src/lazy/data-fetch/prefetch';
+import * as utils from '../src/lazy/utils';
+import logger from '../src/lazy/logger';
+import helpers from '@module-federation/runtime/helpers';
+
+// Mock dependencies
+vi.mock('../src/lazy/logger');
+vi.mock('../src/lazy/utils');
+vi.mock('@module-federation/runtime/helpers', () => ({
+  default: {
+    utils: {
+      matchRemoteWithNameAndExpose: vi.fn(),
+      getRemoteInfo: vi.fn(),
+    },
+  },
+}));
+
+describe('prefetch', () => {
+  let mockInstance: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockInstance = {
+      name: 'host',
+      options: {
+        version: '1.0.0',
+        remotes: [
+          {
+            name: 'remote1',
+            alias: 'remote1_alias',
+            entry: 'http://localhost:3001/remoteEntry.js',
+          },
+        ],
+      },
+      snapshotHandler: {
+        loadRemoteSnapshotInfo: vi.fn(),
+      },
+      remoteHandler: {
+        hooks: {
+          lifecycle: {
+            generatePreloadAssets: {
+              emit: vi.fn(),
+            },
+          },
+        },
+      },
+    };
+  });
+
+  it('should log an error if id is not provided', async () => {
+    // @ts-ignore
+    await prefetch({ instance: mockInstance });
+    expect(logger.error).toHaveBeenCalledWith('id is required for prefetch!');
+  });
+
+  it('should log an error if instance is not provided', async () => {
+    // @ts-ignore
+    await prefetch({ id: 'remote1/component1' });
+    expect(logger.error).toHaveBeenCalledWith(
+      'instance is required for prefetch!',
+    );
+  });
+
+  it('should log an error if remote is not found', async () => {
+    (helpers.utils.matchRemoteWithNameAndExpose as vi.Mock).mockReturnValue(
+      undefined,
+    );
+    await prefetch({ id: 'nonexistent/component', instance: mockInstance });
+    expect(logger.error).toHaveBeenCalledWith(
+      `Can not found 'nonexistent/component' in instance.options.remotes!`,
+    );
+  });
+
+  it('should successfully prefetch data and component resources', async () => {
+    const mockRemoteInfo = {
+      remote: { name: 'remote1', alias: 'remote1_alias' },
+      expose: './component1',
+    };
+    (helpers.utils.matchRemoteWithNameAndExpose as vi.Mock).mockReturnValue(
+      mockRemoteInfo,
+    );
+    (
+      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as vi.Mock
+    ).mockResolvedValue({
+      remoteSnapshot: {},
+      globalSnapshot: {},
+    });
+    (helpers.utils.getRemoteInfo as vi.Mock).mockReturnValue({});
+
+    const mockDataFetchFn = vi
+      .fn()
+      .mockResolvedValue({ data: 'prefetched data' });
+    const mockGetDataFetchGetter = vi.fn().mockResolvedValue(mockDataFetchFn);
+    const mockDataFetchMap = {
+      'remote1_alias@remote1/component1': [
+        [mockGetDataFetchGetter, 'GET', undefined],
+      ],
+    };
+    (utils.getDataFetchMap as vi.Mock).mockReturnValue(mockDataFetchMap);
+    (utils.getDataFetchInfo as vi.Mock).mockReturnValue({
+      name: 'remote1',
+      alias: 'remote1_alias',
+      id: 'remote1/component1',
+    });
+    (utils.getDataFetchMapKey as vi.Mock).mockReturnValue(
+      'remote1_alias@remote1/component1',
+    );
+
+    await prefetch({
+      id: 'remote1/component1',
+      instance: mockInstance,
+      dataFetchParams: { some: 'param' },
+      preloadComponentResource: true,
+    });
+
+    expect(
+      mockInstance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit,
+    ).toHaveBeenCalled();
+
+    expect(mockGetDataFetchGetter).toHaveBeenCalled();
+    await new Promise(process.nextTick);
+    expect(mockDataFetchFn).toHaveBeenCalledWith({
+      some: 'param',
+      _id: 'remote1_alias@remote1/component1',
+      isDowngrade: false,
+    });
+  });
+
+  it('should handle cases where data fetch info is not available', async () => {
+    const mockRemoteInfo = {
+      remote: { name: 'remote1', alias: 'remote1_alias' },
+      expose: './component1',
+    };
+    (helpers.utils.matchRemoteWithNameAndExpose as vi.Mock).mockReturnValue(
+      mockRemoteInfo,
+    );
+    (
+      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as vi.Mock
+    ).mockResolvedValue({
+      remoteSnapshot: {},
+      globalSnapshot: {},
+    });
+    (utils.getDataFetchMap as vi.Mock).mockReturnValue(undefined);
+
+    await prefetch({
+      id: 'remote1/component1',
+      instance: mockInstance,
+    });
+
+    expect(utils.getDataFetchInfo).not.toHaveBeenCalled();
+  });
+});

package/__tests__/setupTests.ts

@@ -0,0 +1,3 @@
+// In vitest, you can use the setupFiles option in your configuration file to import any necessary setup files for your tests.
+// For example, if you want to use testing-library's custom matchers, you can import them in a setup file like this:
+import '@testing-library/jest-dom';

package/dist/{bridge-base-P6pEjY1q.js → bridge-base-BoshEggF.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-D4yt7Udv.js";
+import { L as LoggerInstance, R as RouterContext } from "./index-CqxytsLY.mjs";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {

package/dist/{bridge-base-BBH982Tz.cjs → bridge-base-UGCwcMnG.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index = require("./index-Cv3p6r66.cjs");
+const index = require("./index-C0fDZB5b.js");
 const plugin = require("./plugin.cjs.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/data-fetch-server-middleware.cjs.js

@@ -0,0 +1,163 @@
+"use strict";
+const lazyUtils = require("./utils-iEVlDmyk.js");
+const index_esm = require("./index.esm-j_1sIRzg.js");
+function wrapSetTimeout(targetPromise, delay = 2e4, id) {
+  if (targetPromise && typeof targetPromise.then === "function") {
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        lazyUtils.logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
+        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
+      }, delay);
+      targetPromise.then((value) => {
+        clearTimeout(timeoutId);
+        resolve(value);
+      }).catch((err) => {
+        clearTimeout(timeoutId);
+        reject(err);
+      });
+    });
+  }
+}
+function addProtocol(url) {
+  if (url.startsWith("//")) {
+    return "https:" + url;
+  }
+  return url;
+}
+const getDecodeQuery = (url, name) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+const dataFetchServerMiddleware = async (ctx, next) => {
+  var _a, _b, _c;
+  let url;
+  let dataFetchKey;
+  let params;
+  let remoteInfo;
+  try {
+    url = new URL(ctx.req.url);
+    dataFetchKey = getDecodeQuery(url, lazyUtils.DATA_FETCH_QUERY);
+    params = JSON.parse(getDecodeQuery(url, "params") || "{}");
+    const remoteInfoQuery = getDecodeQuery(url, "remoteInfo");
+    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+  } catch (e) {
+    lazyUtils.logger.error("fetch data from server, error: ", e);
+    return next();
+  }
+  if (!dataFetchKey) {
+    return next();
+  }
+  lazyUtils.logger.log("fetch data from server, dataFetchKey: ", dataFetchKey);
+  lazyUtils.logger.debug(
+    "fetch data from server, moduleInfo: ",
+    (_a = globalThis.__FEDERATION__) == null ? void 0 : _a.moduleInfo
+  );
+  try {
+    const dataFetchMap = lazyUtils.getDataFetchMap();
+    if (!dataFetchMap) {
+      lazyUtils.initDataFetchMap();
+    }
+    const fetchDataPromise = (_b = dataFetchMap[dataFetchKey]) == null ? void 0 : _b[1];
+    lazyUtils.logger.debug(
+      "fetch data from server, fetchDataPromise: ",
+      fetchDataPromise
+    );
+    if (fetchDataPromise && ((_c = dataFetchMap[dataFetchKey]) == null ? void 0 : _c[2]) !== lazyUtils.MF_DATA_FETCH_STATUS.ERROR) {
+      const targetPromise = fetchDataPromise[0];
+      const wrappedPromise = wrapSetTimeout(targetPromise, 2e4, dataFetchKey);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        lazyUtils.logger.log("fetch data from server, fetchDataPromise res: ", res);
+        return ctx.json(res);
+      }
+      lazyUtils.logger.error(
+        `Expected a Promise from fetchDataPromise[0] for dataFetchKey ${dataFetchKey}, but received:`,
+        targetPromise,
+        "Will try call new dataFetch again..."
+      );
+    }
+    if (remoteInfo) {
+      try {
+        const hostInstance2 = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance2) {
+          throw new Error("host instance not found!");
+        }
+        const remote = hostInstance2.options.remotes.find(
+          (remote2) => remote2.name === remoteInfo.name
+        );
+        lazyUtils.logger.debug("find remote: ", JSON.stringify(remote));
+        if (!remote) {
+          hostInstance2.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName
+            }
+          ]);
+        } else if (!("entry" in remote) || !remote.entry.includes(index_esm.MANIFEST_EXT)) {
+          const { hostGlobalSnapshot, remoteSnapshot } = hostInstance2.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          lazyUtils.logger.debug(
+            "find hostGlobalSnapshot: ",
+            JSON.stringify(hostGlobalSnapshot)
+          );
+          lazyUtils.logger.debug("find remoteSnapshot: ", JSON.stringify(remoteSnapshot));
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ("version" in remote) {
+              delete remote.version;
+            }
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(
+          `failed to fetch ${remoteInfo.name} data, error:
+ ${e}`
+        );
+      }
+    }
+    const dataFetchItem = dataFetchMap[dataFetchKey];
+    lazyUtils.logger.debug("fetch data from server, dataFetchItem: ", dataFetchItem);
+    if (dataFetchItem) {
+      const callFetchDataPromise = lazyUtils.fetchData(dataFetchKey, {
+        ...params,
+        isDowngrade: !remoteInfo,
+        _id: dataFetchKey
+      });
+      const wrappedPromise = wrapSetTimeout(
+        callFetchDataPromise,
+        2e4,
+        dataFetchKey
+      );
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        lazyUtils.logger.log("fetch data from server, dataFetchItem res: ", res);
+        return ctx.json(res);
+      }
+    }
+    const remoteId = dataFetchKey.split(index_esm.SEPARATOR)[0];
+    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+    if (!hostInstance) {
+      throw new Error("host instance not found!");
+    }
+    const dataFetchFn = await lazyUtils.loadDataFetchModule(hostInstance, remoteId);
+    const data = await dataFetchFn({
+      ...params,
+      isDowngrade: !remoteInfo,
+      _id: dataFetchKey
+    });
+    lazyUtils.logger.log("fetch data from server, loadDataFetchModule res: ", data);
+    return ctx.json(data);
+  } catch (e) {
+    lazyUtils.logger.error("server plugin data fetch error: ", e);
+    ctx.status(500);
+    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:
+ ${e}`);
+  }
+};
+module.exports = dataFetchServerMiddleware;

package/dist/data-fetch-server-middleware.d.ts

@@ -0,0 +1,15 @@
+import { MiddlewareHandler } from 'hono';
+
+declare const dataFetchServerMiddleware: MiddlewareHandler;
+export default dataFetchServerMiddleware;
+
+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>;
+    }
+}