@module-federation/bridge-react 0.0.0-docs-remove-invalid-lark-link-20251205062649

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# React Bridge
+
+React bridge is used to load the routing module in mf, so that the routing module can work properly with the host environment.
+
+> When to use
+
+- Load the route module
+- Load across the front end framework
+
+## How to use
+
+# 1. Install the react bridge library
+
+```bash
+pnpm add @module-federation/bridge-react
+```
+
+# 2. Configure the react bridge library
+
+> Use createBridgeComponent create component provider
+
+```jsx
+// ./src/index.tsx
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+function App() {
+  return ( <BrowserRouter basename="/">
+    <Routes>
+      <Route path="/" Component={()=> <div>Home page</div>}>
+      <Route path="/detail" Component={()=> <div>Detail page</div>}>
+    </Routes>
+  </BrowserRouter>)
+}
+
+export default createBridgeComponent({
+  rootComponent: App
+});
+```
+
+> set alias to proxy
+
+```js
+//rsbuild.config.ts
+export default defineConfig({
+  source: {
+    alias: {
+      'react-router-dom$': path.resolve(
+        __dirname,
+        'node_modules/@module-federation/bridge-react/dist/router.es.js',
+      ),
+    },
+  },
+  server: {
+    port: 2001,
+    host: 'localhost',
+  },
+  dev: {
+    assetPrefix: 'http://localhost:2001',
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      delete config.optimization?.splitChunks;
+      config.output!.uniqueName = 'remote1';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'remote1',
+          exposes: {
+            './export-app': './src/index.tsx',
+          }
+        }),
+      ]);
+    },
+  },
+});
+```
+
+# 3. Load the module with routing
+
+```js
+//rsbuild.config.ts
+export default defineConfig({
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      config.output!.uniqueName = 'host';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'host',
+          remotes: {
+            remote1: 'remote1@http://localhost:2001/mf-manifest.json',
+          },
+        }),
+      ]);
+    },
+  },
+});
+```
+
+> Use the module
+
+```jsx
+// ./src/index.tsx
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));
+
+function App() {
+  return ( <BrowserRouter basename="/">
+    <ul>
+      <li>
+        <Link to="/">
+          Home
+        </Link>
+      </li>
+      <li>
+        <Link to="/remote1">
+          Remote1
+        </Link>
+      </li>
+    </ul>
+    <Routes>
+      <Route path="/" Component={()=> <div>Home page</div>}>
+      <Route path="/remote1" Component={()=> <Remote1 />}>
+    </Routes>
+  </BrowserRouter>)
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+    <App />
+);
+```

package/__tests__/bridge.spec.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { createBridgeComponent, createRemoteAppComponent } from '../src';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { createContainer, getHtml } from './util';
+
+describe('bridge', () => {
+  let containerInfo: ReturnType<typeof createContainer>;
+  beforeEach(() => {
+    containerInfo = createContainer();
+  });
+
+  afterEach(() => {
+    containerInfo?.clean();
+  });
+
+  it('createBridgeComponent life cycle', async () => {
+    function Component() {
+      return <div>life cycle render</div>;
+    }
+    const lifeCycle = createBridgeComponent({
+      rootComponent: Component,
+    })();
+
+    lifeCycle.render({
+      dom: containerInfo?.container,
+    });
+
+    await waitFor(
+      () => {
+        expect(document.querySelector('#container')?.innerHTML).toContain(
+          '<div>life cycle render</div>',
+        );
+      },
+      { timeout: 2000 },
+    );
+
+    lifeCycle.destroy({
+      dom: containerInfo?.container,
+      moduleName: 'test',
+    });
+
+    await waitFor(
+      () => {
+        expect(
+          (document.querySelector('#container')?.innerHTML || '').trim(),
+        ).toBe('');
+      },
+      { timeout: 2000 },
+    );
+  });
+
+  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 = createRemoteAppComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(
+      <RemoteComponent props={{ msg: 'hello world' }} />,
+    );
+    expect(getHtml(container)).toMatch('loading');
+
+    await waitFor(
+      () => {
+        expect(getHtml(container)).toMatch('life cycle render');
+        expect(getHtml(container)).toMatch('hello world');
+      },
+      { timeout: 2000 },
+    );
+  });
+
+  it('createRemoteAppComponent and obtain ref property', async () => {
+    const ref = {
+      current: null,
+    };
+
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+    });
+    const RemoteComponent = createRemoteAppComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(
+      <RemoteComponent ref={ref} props={{ msg: 'hello world' }} />,
+    );
+    expect(getHtml(container)).toMatch('loading');
+
+    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 () => {
+    const renderMock = jest.fn();
+
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+      createRoot: () => {
+        return {
+          render: renderMock,
+          unmount: jest.fn(),
+        };
+      },
+    });
+    const RemoteComponent = createRemoteAppComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(<RemoteComponent />);
+    expect(getHtml(container)).toMatch('loading');
+
+    await waitFor(
+      () => {
+        expect(renderMock).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 2000 },
+    );
+  });
+});

package/__tests__/createLazyComponent.spec.tsx

@@ -0,0 +1,209 @@
+import React, { Suspense } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  createLazyComponent,
+  collectSSRAssets,
+} from '../src/lazy/createLazyComponent';
+import * as runtime from '@module-federation/runtime';
+import * as utils from '../src/lazy/utils';
+
+// Mocking dependencies
+jest.mock('@module-federation/runtime');
+jest.mock('../src/lazy/utils');
+
+const mockGetInstance = runtime.getInstance as jest.Mock;
+const mockGetLoadedRemoteInfos = utils.getLoadedRemoteInfos as jest.Mock;
+const mockGetDataFetchMapKey = utils.getDataFetchMapKey as jest.Mock;
+const mockFetchData = utils.fetchData as jest.Mock;
+
+const MockComponent = () => <div>Mock Component</div>;
+const LoadingComponent = () => <div>Loading...</div>;
+const ErrorComponent = () => <div>Error!</div>;
+
+describe('createLazyComponent', () => {
+  let mockInstance: any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockInstance = {
+      name: 'host-app',
+      options: { version: '1.0.0' },
+      getModuleInfo: jest.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 = jest.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: jest.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 = jest.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(() => {
+    jest.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,156 @@
+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
+jest.mock('../src/lazy/logger');
+jest.mock('../src/lazy/utils');
+jest.mock('@module-federation/runtime/helpers', () => ({
+  default: {
+    utils: {
+      matchRemoteWithNameAndExpose: jest.fn(),
+      getRemoteInfo: jest.fn(),
+    },
+  },
+  utils: {
+    matchRemoteWithNameAndExpose: jest.fn(),
+    getRemoteInfo: jest.fn(),
+  },
+}));
+
+describe('prefetch', () => {
+  let mockInstance: any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockInstance = {
+      name: 'host',
+      options: {
+        version: '1.0.0',
+        remotes: [
+          {
+            name: 'remote1',
+            alias: 'remote1_alias',
+            entry: 'http://localhost:3001/remoteEntry.js',
+          },
+        ],
+      },
+      snapshotHandler: {
+        loadRemoteSnapshotInfo: jest.fn(),
+      },
+      remoteHandler: {
+        hooks: {
+          lifecycle: {
+            generatePreloadAssets: {
+              emit: jest.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 jest.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 jest.Mock).mockReturnValue(
+      mockRemoteInfo,
+    );
+    (
+      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as jest.Mock
+    ).mockResolvedValue({
+      remoteSnapshot: {},
+      globalSnapshot: {},
+    });
+    (helpers.utils.getRemoteInfo as jest.Mock).mockReturnValue({});
+
+    const mockDataFetchFn = jest
+      .fn()
+      .mockResolvedValue({ data: 'prefetched data' });
+    const mockGetDataFetchGetter = jest.fn().mockResolvedValue(mockDataFetchFn);
+    const mockDataFetchMap = {
+      'remote1_alias@remote1/component1': [
+        [mockGetDataFetchGetter, 'GET', undefined],
+      ],
+    };
+    (utils.getDataFetchMap as jest.Mock).mockReturnValue(mockDataFetchMap);
+    (utils.getDataFetchInfo as jest.Mock).mockReturnValue({
+      name: 'remote1',
+      alias: 'remote1_alias',
+      id: 'remote1/component1',
+    });
+    (utils.getDataFetchMapKey as jest.Mock).mockReturnValue(
+      'remote1_alias@remote1/component1',
+    );
+
+    await prefetch({
+      id: 'remote1/component1',
+      instance: mockInstance,
+      dataFetchParams: { some: 'param', isDowngrade: false } as any,
+      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 jest.Mock).mockReturnValue(
+      mockRemoteInfo,
+    );
+    (
+      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as jest.Mock
+    ).mockResolvedValue({
+      remoteSnapshot: {},
+      globalSnapshot: {},
+    });
+    (utils.getDataFetchMap as jest.Mock).mockReturnValue(undefined);
+
+    await prefetch({
+      id: 'remote1/component1',
+      instance: mockInstance,
+    });
+
+    expect(utils.getDataFetchInfo).not.toHaveBeenCalled();
+  });
+});