npm - @module-federation/bridge-react - Versions diffs - 0.0.0-feat-support-bridge-react-router-v7-20251015102312 - Mend

@module-federation/bridge-react 0.0.0-feat-support-bridge-react-router-v7-20251015102312

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/CHANGELOG.md +670 -0
package/LICENSE +21 -0
package/README.md +131 -0
package/__tests__/bridge.spec.tsx +160 -0
package/__tests__/createLazyComponent.spec.tsx +209 -0
package/__tests__/prefetch.spec.ts +156 -0
package/__tests__/router.spec.tsx +82 -0
package/__tests__/setupTests.ts +8 -0
package/__tests__/util.ts +36 -0
package/dist/bridge-base-29j7dZKh.mjs +201 -0
package/dist/bridge-base-CTNdBioh.js +216 -0
package/dist/data-fetch-server-middleware.cjs.js +163 -0
package/dist/data-fetch-server-middleware.d.ts +15 -0
package/dist/data-fetch-server-middleware.es.js +164 -0
package/dist/data-fetch-utils.cjs.js +24 -0
package/dist/data-fetch-utils.d.ts +81 -0
package/dist/data-fetch-utils.es.js +26 -0
package/dist/index-Dm-M9ouh.mjs +46 -0
package/dist/index-DqCpgmgH.js +45 -0
package/dist/index.cjs.js +293 -0
package/dist/index.d.ts +274 -0
package/dist/index.es.js +276 -0
package/dist/index.esm-CzoIcLts.js +459 -0
package/dist/index.esm-JLwyxgUK.mjs +460 -0
package/dist/lazy-load-component-plugin-B4fdMQTL.js +521 -0
package/dist/lazy-load-component-plugin-ijw36GA0.mjs +522 -0
package/dist/lazy-load-component-plugin.cjs.js +6 -0
package/dist/lazy-load-component-plugin.d.ts +16 -0
package/dist/lazy-load-component-plugin.es.js +6 -0
package/dist/lazy-utils.cjs.js +24 -0
package/dist/lazy-utils.d.ts +149 -0
package/dist/lazy-utils.es.js +24 -0
package/dist/plugin.cjs.js +14 -0
package/dist/plugin.d.ts +22 -0
package/dist/plugin.es.js +14 -0
package/dist/prefetch-Bgm31z9s.js +1272 -0
package/dist/prefetch-DjeoxOeZ.mjs +1273 -0
package/dist/router-v5.cjs.js +55 -0
package/dist/router-v5.d.ts +18 -0
package/dist/router-v5.es.js +32 -0
package/dist/router-v6.cjs.js +84 -0
package/dist/router-v6.d.ts +20 -0
package/dist/router-v6.es.js +61 -0
package/dist/router-v7.cjs.js +83 -0
package/dist/router-v7.d.ts +20 -0
package/dist/router-v7.es.js +61 -0
package/dist/router.cjs.js +82 -0
package/dist/router.d.ts +20 -0
package/dist/router.es.js +60 -0
package/dist/utils-0HFFqmd4.js +2015 -0
package/dist/utils-BTpxHmva.mjs +2016 -0
package/dist/v18.cjs.js +15 -0
package/dist/v18.d.ts +114 -0
package/dist/v18.es.js +15 -0
package/dist/v19.cjs.js +15 -0
package/dist/v19.d.ts +115 -0
package/dist/v19.es.js +15 -0
package/jest.config.ts +21 -0
package/package.json +144 -0
package/project.json +23 -0
package/src/index.ts +45 -0
package/src/lazy/AwaitDataFetch.tsx +215 -0
package/src/lazy/constant.ts +30 -0
package/src/lazy/createLazyComponent.tsx +411 -0
package/src/lazy/data-fetch/cache.ts +291 -0
package/src/lazy/data-fetch/call-data-fetch.ts +13 -0
package/src/lazy/data-fetch/data-fetch-server-middleware.ts +196 -0
package/src/lazy/data-fetch/index.ts +16 -0
package/src/lazy/data-fetch/inject-data-fetch.ts +109 -0
package/src/lazy/data-fetch/prefetch.ts +112 -0
package/src/lazy/data-fetch/runtime-plugin.ts +115 -0
package/src/lazy/index.ts +35 -0
package/src/lazy/logger.ts +6 -0
package/src/lazy/types.ts +75 -0
package/src/lazy/utils.ts +372 -0
package/src/lazy/wrapNoSSR.tsx +10 -0
package/src/modern-app-env.d.ts +2 -0
package/src/plugins/lazy-load-component-plugin.spec.ts +21 -0
package/src/plugins/lazy-load-component-plugin.ts +57 -0
package/src/provider/context.tsx +4 -0
package/src/provider/plugin.ts +22 -0
package/src/provider/versions/bridge-base.tsx +127 -0
package/src/provider/versions/legacy.ts +87 -0
package/src/provider/versions/v18.ts +47 -0
package/src/provider/versions/v19.ts +48 -0
package/src/remote/component.tsx +211 -0
package/src/remote/create.tsx +103 -0
package/src/router/default.tsx +73 -0
package/src/router/v5.tsx +43 -0
package/src/router/v6.tsx +74 -0
package/src/router/v7.tsx +75 -0
package/src/types.ts +147 -0
package/src/utils/index.ts +44 -0
package/src/v18.ts +9 -0
package/src/v19.ts +9 -0
package/tsconfig.json +42 -0
package/tsconfig.node.json +11 -0
package/tsconfig.spec.json +26 -0
package/vite.config.ts +106 -0
package/vitest.config.ts +27 -0

package/__tests__/router.spec.tsx ADDED Viewed

@@ -0,0 +1,82 @@
+// Test file for router
+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/default';
+import { RouterContext } from '../src/provider/context';
+import { getHtml, getWindowImpl } from './util';
+describe('react router proxy', () => {
+  it('BrowserRouter not wraper context', async () => {
+    let { container } = render(
+      <RouterContext.Provider value={{ basename: '/test' } as any}>
+        <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={{ basename: '/test' } as any}>
+        <RouterProvider router={router} />
+      </RouterContext.Provider>,
+    );
+    expect(getHtml(container)).toMatch('home page');
+  });
+});

package/__tests__/setupTests.ts ADDED Viewed

@@ -0,0 +1,8 @@
+// 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';
+// Fix TextEncoder/TextDecoder not defined in Node.js
+import { TextEncoder, TextDecoder } from 'util';
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as any;

package/__tests__/util.ts ADDED Viewed

@@ -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/bridge-base-29j7dZKh.mjs ADDED Viewed

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { Component, createElement, createContext } from "react";
+import { L as LoggerInstance, R as RouterContext } from "./index-Dm-M9ouh.mjs";
+import { federationRuntime } from "./plugin.es.js";
+const ErrorBoundaryContext = createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback !== void 0) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+function createBaseBridgeComponent({
+  createRoot,
+  defaultRootOptions,
+  ...bridgeInfo
+}) {
+  return () => {
+    const rootMap = /* @__PURE__ */ new Map();
+    const instance = federationRuntime.instance;
+    LoggerInstance.debug(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
+    const RawComponent = (info) => {
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
+    };
+    return {
+      async render(info) {
+        var _a, _b, _c, _d, _e, _f;
+        LoggerInstance.debug(`createBridgeComponent render Info`, info);
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          fallback,
+          rootOptions,
+          ...propsInfo
+        } = info;
+        const mergedRootOptions = {
+          ...defaultRootOptions,
+          ...rootOptions
+        };
+        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 BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React.createElement(
+          ErrorBoundary,
+          {
+            FallbackComponent: fallback
+          },
+          /* @__PURE__ */ React.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename: basename2,
+                memoryRoute
+              },
+              propsInfo: {
+                ...propsInfo,
+                basename: basename2,
+                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
+              }
+            }
+          )
+        );
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(BridgeWrapper, { basename });
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(dom, root));
+        } else {
+          let root = rootMap.get(dom);
+          if (!root && createRoot) {
+            root = createRoot(dom, mergedRootOptions);
+            rootMap.set(dom, root);
+          }
+          if (root && "render" in root) {
+            root.render(rootComponentWithErrorBoundary);
+          }
+        }
+        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
+      },
+      destroy(info) {
+        var _a, _b, _c;
+        const { dom } = info;
+        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(dom);
+        if (root) {
+          if ("unmount" in root) {
+            root.unmount();
+          } else {
+            LoggerInstance.warn("Root does not have unmount method");
+          }
+          rootMap.delete(dom);
+        }
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+      }
+    };
+  };
+}
+export {
+  ErrorBoundary as E,
+  createBaseBridgeComponent as c
+};

package/dist/bridge-base-CTNdBioh.js ADDED Viewed

@@ -0,0 +1,216 @@
+"use strict";
+const React = require("react");
+const index = require("./index-DqCpgmgH.js");
+const plugin = require("./plugin.cjs.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ErrorBoundaryContext = React.createContext(null);
+const initialState = {
+  didCatch: false,
+  error: null
+};
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = React.createElement(FallbackComponent, props);
+      } else if (fallback !== void 0) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return React.createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index2) => !Object.is(item, b[index2]));
+}
+function createBaseBridgeComponent({
+  createRoot,
+  defaultRootOptions,
+  ...bridgeInfo
+}) {
+  return () => {
+    const rootMap = /* @__PURE__ */ new Map();
+    const instance = plugin.federationRuntime.instance;
+    index.LoggerInstance.debug(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
+    const RawComponent = (info) => {
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React__namespace.createElement(index.RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
+    };
+    return {
+      async render(info) {
+        var _a, _b, _c, _d, _e, _f;
+        index.LoggerInstance.debug(`createBridgeComponent render Info`, info);
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          fallback,
+          rootOptions,
+          ...propsInfo
+        } = info;
+        const mergedRootOptions = {
+          ...defaultRootOptions,
+          ...rootOptions
+        };
+        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 BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React__namespace.createElement(
+          ErrorBoundary,
+          {
+            FallbackComponent: fallback
+          },
+          /* @__PURE__ */ React__namespace.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename: basename2,
+                memoryRoute
+              },
+              propsInfo: {
+                ...propsInfo,
+                basename: basename2,
+                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
+              }
+            }
+          )
+        );
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(BridgeWrapper, { basename });
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
+          ).then((root) => rootMap.set(dom, root));
+        } else {
+          let root = rootMap.get(dom);
+          if (!root && createRoot) {
+            root = createRoot(dom, mergedRootOptions);
+            rootMap.set(dom, root);
+          }
+          if (root && "render" in root) {
+            root.render(rootComponentWithErrorBoundary);
+          }
+        }
+        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
+      },
+      destroy(info) {
+        var _a, _b, _c;
+        const { dom } = info;
+        index.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
+        const root = rootMap.get(dom);
+        if (root) {
+          if ("unmount" in root) {
+            root.unmount();
+          } else {
+            index.LoggerInstance.warn("Root does not have unmount method");
+          }
+          rootMap.delete(dom);
+        }
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+      }
+    };
+  };
+}
+exports.ErrorBoundary = ErrorBoundary;
+exports.createBaseBridgeComponent = createBaseBridgeComponent;