@module-federation/bridge-react 0.0.0-next-20240619092013

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @module-federation/bridge-react
+
+## 0.0.0-next-20240619092013
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.0.0-next-20240619092013

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,134 @@
+# 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,68 @@
+import React from 'react';
+import { assert, describe, it } from 'vitest';
+import { createBridgeComponent, createRemoteComponent } from '../src';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { createContainer, getHtml, sleep } 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 sleep(200);
+    expect(document.querySelector('#container')!.innerHTML).toContain(
+      '<div>life cycle render</div>',
+    );
+
+    lifeCycle.destroy({
+      dom: containerInfo?.container,
+    });
+
+    expect(document.querySelector('#container')!.innerHTML).toContain('');
+  });
+
+  it('createRemoteComponent', async () => {
+    function Component(info: { msg: string }) {
+      return <div>life cycle render {info.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+    });
+    const RemoteComponent = createRemoteComponent(async () => {
+      return {
+        default: BridgeComponent,
+      };
+    });
+
+    const { container } = render(
+      <RemoteComponent fallback={<div>loading</div>} msg={'hello world'} />,
+    );
+    expect(getHtml(container)).toMatch('loading');
+
+    await sleep(200);
+    expect(getHtml(container)).toMatch('life cycle render hello world');
+  });
+});

package/__tests__/router.spec.tsx

@@ -0,0 +1,82 @@
+import { assert, describe, it } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import {
+  Link,
+  Routes,
+  Route,
+  Outlet,
+  createBrowserRouter,
+} from 'react-router-dom';
+import { BrowserRouter, RouterProvider } from '../src/router';
+import { RouterContext } from '../src/context';
+import { getHtml, getWindowImpl } from './util';
+
+describe('react router proxy', () => {
+  it('BrowserRouter not wraper context', async () => {
+    let { container } = render(
+      <RouterContext.Provider value={{ name: 'test', basename: '/test' }}>
+        <BrowserRouter basename="/" window={getWindowImpl('/test', false)}>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/detail">Detail</Link>
+            </li>
+          </ul>
+          <Routes>
+            <Route path="/" Component={() => <div>home page</div>} />
+            <Route path="/detail" Component={() => <div>detail page</div>} />
+          </Routes>
+        </BrowserRouter>
+      </RouterContext.Provider>,
+    );
+    expect(getHtml(container)).toMatch('home page');
+  });
+
+  it('RouterProvider', async () => {
+    function Layout() {
+      return (
+        <>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/detail">Detail</Link>
+            </li>
+          </ul>
+          <Outlet />
+        </>
+      );
+    }
+    const router = createBrowserRouter(
+      [
+        {
+          path: '/',
+          element: <Layout />,
+          children: [
+            {
+              index: true,
+              element: <div>home page</div>,
+            },
+            {
+              path: '/detail',
+              element: <div>detail page</div>,
+            },
+          ],
+        },
+      ],
+      {
+        window: getWindowImpl('/test', false),
+      },
+    );
+    let { container } = render(
+      <RouterContext.Provider value={{ name: 'test', basename: '/test' }}>
+        <RouterProvider router={router} />
+      </RouterContext.Provider>,
+    );
+    expect(getHtml(container)).toMatch('home page');
+  });
+});

package/__tests__/util.ts

@@ -0,0 +1,36 @@
+import { JSDOM } from 'jsdom';
+import { prettyDOM } from '@testing-library/react';
+
+export async function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(null);
+    }, time);
+  });
+}
+
+export function createContainer() {
+  const container = document.createElement('div');
+  container.setAttribute('id', 'container');
+  document.body.appendChild(container);
+
+  return {
+    clean: () => {
+      document.body.removeChild(container);
+    },
+    container,
+  };
+}
+
+export function getWindowImpl(initialUrl: string, isHash = false): Window {
+  // Need to use our own custom DOM in order to get a working history
+  const dom = new JSDOM(`<!DOCTYPE html>`, { url: 'http://localhost/' });
+  dom.window.history.replaceState(null, '', (isHash ? '#' : '') + initialUrl);
+  return dom.window as unknown as Window;
+}
+
+export function getHtml(container: HTMLElement) {
+  return prettyDOM(container, undefined, {
+    highlight: false,
+  });
+}

package/dist/context-C7FfFcIe.cjs

@@ -0,0 +1,42 @@
+"use strict";
+const React = require("react");
+var a = Object.defineProperty;
+var c = (s, e, t) => e in s ? a(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
+var i = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+class g {
+  constructor(e) {
+    i(this, "name");
+    i(this, "isDebugEnabled");
+    i(this, "color");
+    this.name = e, this.isDebugEnabled = false, this.color = this.stringToColor(e), typeof window < "u" && typeof localStorage < "u" && (this.isDebugEnabled = localStorage.getItem("debug") === "true"), typeof process < "u" && process.env && (this.isDebugEnabled = process.env.DEBUG === "true");
+  }
+  log(...e) {
+    var t, n;
+    if (this.isDebugEnabled) {
+      const o = `color: ${this.color}; font-weight: bold`, l = `%c[${this.name}]`, r = ((n = (t = new Error().stack) == null ? void 0 : t.split(`
+`)[2]) == null ? void 0 : n.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(l, o, ...e, `
+ (${r})`);
+    }
+  }
+  stringToColor(e) {
+    let t = 0;
+    for (let o = 0; o < e.length; o++)
+      t = e.charCodeAt(o) + ((t << 5) - t);
+    let n = "#";
+    for (let o = 0; o < 3; o++) {
+      const l = t >> o * 8 & 255;
+      n += ("00" + l.toString(16)).substr(-2);
+    }
+    return n;
+  }
+}
+function f() {
+  const s = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(s);
+}
+const LoggerInstance = new g("bridge-react");
+const RouterContext = React.createContext(null);
+exports.LoggerInstance = LoggerInstance;
+exports.RouterContext = RouterContext;
+exports.f = f;

package/dist/context-CoFgcMIF.js

@@ -0,0 +1,43 @@
+import React from "react";
+var a = Object.defineProperty;
+var c = (s, e, t) => e in s ? a(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
+var i = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+class g {
+  constructor(e) {
+    i(this, "name");
+    i(this, "isDebugEnabled");
+    i(this, "color");
+    this.name = e, this.isDebugEnabled = false, this.color = this.stringToColor(e), typeof window < "u" && typeof localStorage < "u" && (this.isDebugEnabled = localStorage.getItem("debug") === "true"), typeof process < "u" && process.env && (this.isDebugEnabled = process.env.DEBUG === "true");
+  }
+  log(...e) {
+    var t, n;
+    if (this.isDebugEnabled) {
+      const o = `color: ${this.color}; font-weight: bold`, l = `%c[${this.name}]`, r = ((n = (t = new Error().stack) == null ? void 0 : t.split(`
+`)[2]) == null ? void 0 : n.trim()) || "Stack information not available";
+      typeof console < "u" && console.debug && console.debug(l, o, ...e, `
+ (${r})`);
+    }
+  }
+  stringToColor(e) {
+    let t = 0;
+    for (let o = 0; o < e.length; o++)
+      t = e.charCodeAt(o) + ((t << 5) - t);
+    let n = "#";
+    for (let o = 0; o < 3; o++) {
+      const l = t >> o * 8 & 255;
+      n += ("00" + l.toString(16)).substr(-2);
+    }
+    return n;
+  }
+}
+function f() {
+  const s = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(s);
+}
+const LoggerInstance = new g("bridge-react");
+const RouterContext = React.createContext(null);
+export {
+  LoggerInstance as L,
+  RouterContext as R,
+  f
+};

package/dist/index.cjs.js

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const reactRouterDom = require("react-router-dom");
+const context = require("./context-C7FfFcIe.cjs");
+const require$$0 = require("react-dom");
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}) => {
+  const rootRef = React.useRef(null);
+  const renderDom = React.useRef(null);
+  const location = reactRouterDom.useLocation();
+  const [pathname, setPathname] = React.useState(location.pathname);
+  const providerInfoRef = React.useRef(null);
+  React.useEffect(() => {
+    if (pathname !== "" && pathname !== location.pathname) {
+      context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+        name,
+        pathname: location.pathname
+      });
+      context.f();
+    }
+    setPathname(location.pathname);
+  }, [location]);
+  React.useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps
+      };
+      renderDom.current = rootRef.current;
+      context.LoggerInstance.log(
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps
+      );
+      providerReturn.render(renderProps);
+    });
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        var _a, _b;
+        if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+          context.LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current }
+          );
+          (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            dom: renderDom.current
+          });
+        }
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
+};
+RemoteApp["__APP_VERSION__"] = "0.0.1";
+function createRemoteComponent(lazyComponent, info) {
+  return (props) => {
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    const routerContextVal = React.useContext(reactRouterDom.UNSAFE_RouteContext);
+    let basename = "/";
+    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+      basename = routerContextVal.matches[0].pathnameBase;
+    }
+    const LazyComponent = React.useMemo(() => {
+      return React.lazy(async () => {
+        context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+          basename,
+          lazyComponent,
+          exportName,
+          props
+        });
+        const m2 = await lazyComponent();
+        const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent loadRemote info >>>`,
+          { basename, name: moduleName, module: m2, exportName, props }
+        );
+        const exportFn = m2[exportName];
+        if (exportName in m2 && typeof exportFn === "function") {
+          return {
+            default: () => /* @__PURE__ */ React.createElement(
+              RemoteApp,
+              {
+                name: moduleName,
+                ...info,
+                ...props,
+                providerInfo: exportFn,
+                basename
+              }
+            )
+          };
+        }
+        throw Error("module not found");
+      });
+    }, [exportName, basename, props.memoryRoute]);
+    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: props.fallback }, /* @__PURE__ */ React.createElement(LazyComponent, null));
+  };
+}
+var client = {};
+var m = require$$0;
+if (process.env.NODE_ENV === "production") {
+  client.createRoot = m.createRoot;
+  client.hydrateRoot = m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  client.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  client.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  return () => {
+    const rootMap = /* @__PURE__ */ new Map();
+    const RawComponent = (info) => {
+      const { appInfo, propsInfo } = info;
+      const { name, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+    };
+    return {
+      render(info) {
+        context.LoggerInstance.log(`createBridgeComponent render Info`, info);
+        const root = client.createRoot(info.dom);
+        rootMap.set(info.dom, root);
+        const { name, basename, memoryRoute, ...propsInfo } = info;
+        root.render(
+          /* @__PURE__ */ React.createElement(
+            RawComponent,
+            {
+              propsInfo,
+              appInfo: {
+                name,
+                basename,
+                memoryRoute
+              }
+            }
+          )
+        );
+      },
+      destroy(info) {
+        context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
+          dom: info.dom
+        });
+        const root = rootMap.get(info.dom);
+        root == null ? void 0 : root.unmount();
+      },
+      rawComponent: bridgeInfo.rootComponent,
+      __BRIDGE_FN__: (_args) => {
+      }
+    };
+  };
+}
+exports.createBridgeComponent = createBridgeComponent;
+exports.createRemoteComponent = createRemoteComponent;

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { default as default_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
+    render(info: RenderFnParams & any): void;
+    destroy(info: {
+        dom: HTMLElement;
+    }): void;
+    rawComponent: default_2.ComponentType<T>;
+    __BRIDGE_FN__: (_args: T) => void;
+};
+
+export declare function createRemoteComponent<T, E extends keyof T>(lazyComponent: () => Promise<T>, info?: {
+    export?: E;
+}): (props: {
+    basename?: ProviderParams['basename'];
+    memoryRoute?: ProviderParams['memoryRoute'];
+    fallback: ReactNode;
+} & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;
+
+declare type ProviderFnParams<T> = {
+    rootComponent: default_2.ComponentType<T>;
+};
+
+export declare interface ProviderParams {
+    name?: string;
+    basename?: string;
+    memoryRoute?: {
+        entryPath: string;
+    };
+}
+
+export declare interface RenderFnParams extends ProviderParams {
+    dom: HTMLElement;
+}
+
+export { }