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

package/dist/index.es.js

@@ -0,0 +1,276 @@
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-29j7dZKh.mjs";
+import ReactDOM from "react-dom";
+import { L as LoggerInstance, p as pathJoin, g as getRootDomDefaultClassName } from "./index-Dm-M9ouh.mjs";
+import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
+import * as ReactRouterDOM from "react-router-dom";
+import { federationRuntime } from "./plugin.es.js";
+import { b, a, c, l } from "./lazy-load-component-plugin-ijw36GA0.mjs";
+import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-BTpxHmva.mjs";
+import { callDataFetch } from "./data-fetch-utils.es.js";
+import { p } from "./prefetch-DjeoxOeZ.mjs";
+function createReact16Or17Root(container) {
+  return {
+    render(children) {
+      const reactVersion = ReactDOM.version || "";
+      const isReact18 = reactVersion.startsWith("18");
+      const isReact19 = reactVersion.startsWith("19");
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. Please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v19'`
+        );
+      }
+      if (isReact18) {
+        LoggerInstance.warn(
+          `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
+        );
+      }
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    createRoot: createReact16Or17Root,
+    ...bridgeInfo
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
+function e2() {
+  const t = new PopStateEvent("popstate", { state: window.history.state });
+  window.dispatchEvent(t);
+}
+const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const {
+    moduleName,
+    memoryRoute,
+    basename,
+    providerInfo,
+    className,
+    style,
+    fallback,
+    loading,
+    ...resProps
+  } = props;
+  const instance = federationRuntime.instance;
+  const rootRef = ref && "current" in ref ? ref : useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef(null);
+  const [initialized, setInitialized] = useState(false);
+  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+  useEffect(() => {
+    if (initialized) return;
+    const providerReturn = providerInfo();
+    providerInfoRef.current = providerReturn;
+    setInitialized(true);
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent destroy >>>`,
+          { moduleName, basename, dom: renderDom.current }
+        );
+        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
+          moduleName,
+          dom: renderDom.current
+        });
+        (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+      }
+    };
+  }, [moduleName]);
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!initialized || !providerInfoRef.current) return;
+    let renderProps = {
+      moduleName,
+      dom: rootRef.current,
+      basename,
+      memoryRoute,
+      fallback,
+      ...resProps
+    };
+    renderDom.current = rootRef.current;
+    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(renderProps)) || {};
+    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+    providerInfoRef.current.render(renderProps);
+    (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
+  }, [initialized, ...Object.values(props)]);
+  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ""}`;
+  return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
+});
+function withRouterData(WrappedComponent) {
+  const Component = forwardRef(function(props, ref) {
+    var _a;
+    if (props == null ? void 0 : props.basename) {
+      return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
+    }
+    let enableDispathPopstate = false;
+    let routerContextVal;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } catch {
+      enableDispathPopstate = false;
+    }
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = pathJoin(basename, pathnameBase || "/");
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+        }
+        if (match) {
+          basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
+        }
+      }
+    }
+    LoggerInstance.debug(`createRemoteAppComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM.useLocation();
+      const [pathname, setPathname] = useState(location.pathname);
+      useEffect(() => {
+        if (pathname !== "" && pathname !== location.pathname) {
+          LoggerInstance.debug(
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
+            {
+              name: props.name,
+              pathname: location.pathname
+            }
+          );
+          e2();
+        }
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
+  });
+  return forwardRef(function(props, ref) {
+    return /* @__PURE__ */ React__default.createElement(Component, { ...props, ref });
+  });
+}
+const RemoteApp = withRouterData(RemoteAppWrapper);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React__default.lazy(async () => {
+    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m = await info.loader();
+      const moduleName = m && m[Symbol.for("mf_module_id")];
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m, exportName }
+      );
+      const exportFn = m[exportName];
+      if (exportName in m && typeof exportFn === "function") {
+        const RemoteAppComponent = forwardRef((props, ref) => {
+          return /* @__PURE__ */ React__default.createElement(
+            RemoteApp,
+            {
+              moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              fallback: info.fallback,
+              loading: info.loading,
+              ref,
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+function createRemoteAppComponent(info) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return forwardRef((props, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      ErrorBoundary,
+      {
+        FallbackComponent: info.fallback
+      },
+      /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref }))
+    );
+  });
+}
+function createRemoteComponent(info) {
+  LoggerInstance.warn(
+    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
+  );
+  return createRemoteAppComponent(info);
+}
+export {
+  C as CacheSize,
+  b2 as CacheTime,
+  E as ERROR_TYPE,
+  b as autoFetchDataPlugin,
+  e as cache,
+  callDataFetch,
+  h as clearStore,
+  a as collectSSRAssets,
+  c2 as configureCache,
+  createBridgeComponent,
+  c as createLazyComponent,
+  createRemoteAppComponent,
+  createRemoteComponent,
+  d as generateKey,
+  l as lazyLoadComponentPlugin,
+  p as prefetch,
+  r as revalidateTag,
+  s as setSSREnv
+};