@module-federation/bridge-react 0.19.1 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @module-federation/bridge-react
 
+## 0.21.0
+
+### Minor Changes
+
+- d225658: feat: Add React Router v7 Support to Module Federation Bridge
+
+### Patch Changes
+
+- Updated dependencies [d1e90a4]
+  - @module-federation/sdk@0.21.0
+  - @module-federation/bridge-shared@0.21.0
+
+## 0.20.0
+
+### Patch Changes
+
+- 0008621: test(bridge-react): stabilize async assertions for bridge tests
+- Updated dependencies [37346d4]
+- Updated dependencies [639a83b]
+  - @module-federation/sdk@0.20.0
+  - @module-federation/bridge-shared@0.20.0
+
 ## 0.19.1
 
 ### Patch Changes

package/__tests__/bridge.spec.tsx

@@ -7,7 +7,7 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { createContainer, getHtml, sleep } from './util';
+import { createContainer, getHtml } from './util';
 
 describe('bridge', () => {
   let containerInfo: ReturnType<typeof createContainer>;
@@ -31,9 +31,13 @@ describe('bridge', () => {
       dom: containerInfo?.container,
     });
 
-    await sleep(200);
-    expect(document.querySelector('#container')!.innerHTML).toContain(
-      '<div>life cycle render</div>',
+    await waitFor(
+      () => {
+        expect(document.querySelector('#container')?.innerHTML).toContain(
+          '<div>life cycle render</div>',
+        );
+      },
+      { timeout: 2000 },
     );
 
     lifeCycle.destroy({
@@ -41,7 +45,14 @@ describe('bridge', () => {
       moduleName: 'test',
     });
 
-    expect(document.querySelector('#container')!.innerHTML).toContain('');
+    await waitFor(
+      () => {
+        expect(
+          (document.querySelector('#container')?.innerHTML || '').trim(),
+        ).toBe('');
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('createRemoteAppComponent', async () => {
@@ -66,9 +77,13 @@ describe('bridge', () => {
     );
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render');
-    expect(getHtml(container)).toMatch('hello world');
+    await waitFor(
+      () => {
+        expect(getHtml(container)).toMatch('life cycle render');
+        expect(getHtml(container)).toMatch('hello world');
+      },
+      { timeout: 2000 },
+    );
   });
 
   it('createRemoteAppComponent and obtain ref property', async () => {
@@ -97,10 +112,14 @@ describe('bridge', () => {
     );
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render');
-    expect(getHtml(container)).toMatch('hello world');
-    expect(ref.current).not.toBeNull();
+    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 () => {
@@ -131,7 +150,11 @@ describe('bridge', () => {
     const { container } = render(<RemoteComponent />);
     expect(getHtml(container)).toMatch('loading');
 
-    await sleep(200);
-    expect(renderMock).toHaveBeenCalledTimes(1);
+    await waitFor(
+      () => {
+        expect(renderMock).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 2000 },
+    );
   });
 });

package/dist/{bridge-base-Ds850AOx.js → bridge-base-B2malZDo.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index = require("./index-eN2xRRXs.js");
+const index = require("./index-DRSBaSu3.js");
 const plugin = require("./plugin.cjs.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -156,7 +156,7 @@ function createBaseBridgeComponent({
           ...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 rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(
+        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React__namespace.createElement(
           ErrorBoundary,
           {
             FallbackComponent: fallback
@@ -166,16 +166,18 @@ function createBaseBridgeComponent({
             {
               appInfo: {
                 moduleName,
-                basename,
+                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)
@@ -201,7 +203,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            index.LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }

package/dist/{bridge-base-BwHtOqw_.mjs → bridge-base-DRFFglgm.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-rAO0Wr0M.mjs";
+import { L as LoggerInstance, R as RouterContext } from "./index-DyQNwY2M.mjs";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -139,7 +139,7 @@ function createBaseBridgeComponent({
           ...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 rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(
+        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React.createElement(
           ErrorBoundary,
           {
             FallbackComponent: fallback
@@ -149,16 +149,18 @@ function createBaseBridgeComponent({
             {
               appInfo: {
                 moduleName,
-                basename,
+                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)
@@ -184,7 +186,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }

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

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-vIpCrZmn.js");
-const index_esm = require("./index.esm-Ju4RY-yW.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

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

@@ -1,5 +1,5 @@
-import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-VSOJTX_o.mjs";
-import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CtI0uQUR.mjs";
+import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-Bx_8GGd-.mjs";
+import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CPwSeCvw.mjs";
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyUtils = require("./utils-vIpCrZmn.js");
-const prefetch = require("./prefetch-HjsWsmMr.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const prefetch = require("./prefetch-C8kORtvg.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
-import { x as DATA_FETCH_FUNCTION } from "./utils-VSOJTX_o.mjs";
-import { C, b, e, h, c, d, r } from "./utils-VSOJTX_o.mjs";
-import { d as dataFetchFunction } from "./prefetch-DtZwviM-.mjs";
-import { i, p } from "./prefetch-DtZwviM-.mjs";
+import { x as DATA_FETCH_FUNCTION } from "./utils-Bx_8GGd-.mjs";
+import { C, b, e, h, c, d, r } from "./utils-Bx_8GGd-.mjs";
+import { d as dataFetchFunction } from "./prefetch-Cxo6GKct.mjs";
+import { i, p } from "./prefetch-Cxo6GKct.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/{index-eN2xRRXs.js → index-DRSBaSu3.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index_esm = require("./index.esm-Ju4RY-yW.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 const RouterContext = React.createContext(null);
 const LoggerInstance = index_esm.createLogger(
   "[ Module Federation Bridge React ]"

package/dist/{index-rAO0Wr0M.mjs → index-DyQNwY2M.mjs}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { c as createLogger } from "./index.esm-CtI0uQUR.mjs";
+import { c as createLogger } from "./index.esm-CPwSeCvw.mjs";
 const RouterContext = React__default.createContext(null);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"

package/dist/index.cjs.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-Ds850AOx.js");
+const bridgeBase = require("./bridge-base-B2malZDo.js");
 const ReactDOM = require("react-dom");
+const index = require("./index-DRSBaSu3.js");
 const React = require("react");
-const index = require("./index-eN2xRRXs.js");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-vtpWwn-P.js");
-const lazyUtils = require("./utils-vIpCrZmn.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-B-nqmULm.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-HjsWsmMr.js");
+const prefetch = require("./prefetch-C8kORtvg.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -39,7 +39,7 @@ function createReact16Or17Root(container) {
         );
       }
       if (isReact18) {
-        console.warn(
+        index.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'`
         );
       }

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-BwHtOqw_.mjs";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-DRFFglgm.mjs";
 import ReactDOM from "react-dom";
+import { L as LoggerInstance, p as pathJoin, g as getRootDomDefaultClassName } from "./index-DyQNwY2M.mjs";
 import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
-import { p as pathJoin, L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-rAO0Wr0M.mjs";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
-import { b, a, c, l } from "./lazy-load-component-plugin-Dmzr-hGo.mjs";
-import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-VSOJTX_o.mjs";
+import { b, a, c, l } from "./lazy-load-component-plugin-D_--Azke.mjs";
+import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-Bx_8GGd-.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-DtZwviM-.mjs";
+import { p } from "./prefetch-Cxo6GKct.mjs";
 function createReact16Or17Root(container) {
   return {
     render(children) {
@@ -20,7 +20,7 @@ function createReact16Or17Root(container) {
         );
       }
       if (isReact18) {
-        console.warn(
+        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'`
         );
       }

package/dist/{index.esm-Ju4RY-yW.js → index.esm-BWaKho-8.js}

@@ -1,14 +1,4 @@
 "use strict";
-function _extends() {
-  _extends = Object.assign || function assign(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 const MANIFEST_EXT = ".json";
 const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
 const SEPARATOR = ":";
@@ -52,40 +42,120 @@ const composeKeyWithSeparator = function(...args) {
 const warn = (msg) => {
   console.warn(`${LOG_CATEGORY}: ${msg}`);
 };
-let Logger = class Logger2 {
+const PREFIX = "[ Module Federation ]";
+const DEFAULT_DELEGATE = console;
+const LOGGER_STACK_SKIP_TOKENS = [
+  "logger.ts",
+  "logger.js",
+  "captureStackTrace",
+  "Logger.emit",
+  "Logger.log",
+  "Logger.info",
+  "Logger.warn",
+  "Logger.error",
+  "Logger.debug"
+];
+function captureStackTrace() {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return void 0;
+    }
+    const [, ...rawLines] = stack.split("\n");
+    const filtered = rawLines.filter((line) => !LOGGER_STACK_SKIP_TOKENS.some((token) => line.includes(token)));
+    if (!filtered.length) {
+      return void 0;
+    }
+    const stackPreview = filtered.slice(0, 5).join("\n");
+    return `Stack trace:
+${stackPreview}`;
+  } catch {
+    return void 0;
+  }
+}
+class Logger {
+  constructor(prefix, delegate = DEFAULT_DELEGATE) {
+    this.prefix = prefix;
+    this.delegate = delegate ?? DEFAULT_DELEGATE;
+  }
   setPrefix(prefix) {
     this.prefix = prefix;
   }
+  setDelegate(delegate) {
+    this.delegate = delegate ?? DEFAULT_DELEGATE;
+  }
+  emit(method, args) {
+    const delegate = this.delegate;
+    const debugMode = isDebugMode();
+    const stackTrace = debugMode ? captureStackTrace() : void 0;
+    const enrichedArgs = stackTrace ? [...args, stackTrace] : args;
+    const order = (() => {
+      switch (method) {
+        case "log":
+          return ["log", "info"];
+        case "info":
+          return ["info", "log"];
+        case "warn":
+          return ["warn", "info", "log"];
+        case "error":
+          return ["error", "warn", "log"];
+        case "debug":
+        default:
+          return ["debug", "log"];
+      }
+    })();
+    for (const candidate of order) {
+      const handler = delegate[candidate];
+      if (typeof handler === "function") {
+        handler.call(delegate, this.prefix, ...enrichedArgs);
+        return;
+      }
+    }
+    for (const candidate of order) {
+      const handler = DEFAULT_DELEGATE[candidate];
+      if (typeof handler === "function") {
+        handler.call(DEFAULT_DELEGATE, this.prefix, ...enrichedArgs);
+        return;
+      }
+    }
+  }
   log(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("log", args);
   }
   warn(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("warn", args);
   }
   error(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("error", args);
   }
   success(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("info", args);
   }
   info(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("info", args);
   }
   ready(...args) {
-    console.log(this.prefix, ...args);
+    this.emit("info", args);
   }
   debug(...args) {
     if (isDebugMode()) {
-      console.log(this.prefix, ...args);
+      this.emit("debug", args);
     }
   }
-  constructor(prefix) {
-    this.prefix = prefix;
-  }
-};
+}
 function createLogger(prefix) {
   return new Logger(prefix);
 }
+function createInfrastructureLogger(prefix) {
+  const infrastructureLogger = new Logger(prefix);
+  Object.defineProperty(infrastructureLogger, "__mf_infrastructure_logger__", {
+    value: true,
+    enumerable: false,
+    configurable: false
+  });
+  return infrastructureLogger;
+}
+createInfrastructureLogger(PREFIX);
 async function safeWrapper(callback, disableWarn) {
   try {
     const res2 = await callback();
@@ -185,10 +255,7 @@ function createScript(info) {
   timeoutId = setTimeout(() => {
     onScriptComplete(null, new Error(`Remote script "${info.url}" time-outed.`));
   }, timeout);
-  return {
-    script: script2,
-    needAttach
-  };
+  return { script: script2, needAttach };
 }
 function createLink(info) {
   let link = null;
@@ -250,10 +317,7 @@ function createLink(info) {
   };
   link.onerror = onLinkComplete.bind(null, link.onerror);
   link.onload = onLinkComplete.bind(null, link.onload);
-  return {
-    link,
-    needAttach
-  };
+  return { link, needAttach };
 }
 function loadScript(url2, info) {
   const { attrs: attrs2 = {}, createScriptHook } = info;
@@ -262,9 +326,10 @@ function loadScript(url2, info) {
       url: url2,
       cb: resolve,
       onErrorCallback: reject,
-      attrs: _extends({
-        fetchpriority: "high"
-      }, attrs2),
+      attrs: {
+        fetchpriority: "high",
+        ...attrs2
+      },
       createScriptHook,
       needDeleteScript: true
     });
@@ -325,27 +390,24 @@ const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "we
     return typeof fetch === "undefined" ? loadNodeFetch() : fetch;
   };
   const handleScriptFetch = async (f, urlObj) => {
+    var _a;
     try {
-      var _vm_constants;
       const res = await f(urlObj.href);
       const data = await res.text();
       const [path, vm] = await Promise.all([
         importNodeModule("path"),
         importNodeModule("vm")
       ]);
-      const scriptContext = {
-        exports: {},
-        module: {
-          exports: {}
-        }
-      };
+      const scriptContext = { exports: {}, module: { exports: {} } };
       const urlDirname = urlObj.pathname.split("/").slice(0, -1).join("/");
       const filename = path.basename(urlObj.pathname);
-      var _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER;
       const script = new vm.Script(`(function(exports, module, require, __dirname, __filename) {${data}
 })`, {
         filename,
-        importModuleDynamically: (_vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER = (_vm_constants = vm.constants) == null ? void 0 : _vm_constants.USE_MAIN_CONTEXT_DEFAULT_LOADER) != null ? _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER : importNodeModule
+        importModuleDynamically: (
+          //@ts-ignore
+          ((_a = vm.constants) == null ? void 0 : _a.USE_MAIN_CONTEXT_DEFAULT_LOADER) ?? importNodeModule
+        )
       });
       script.runInThisContext()(scriptContext.exports, scriptContext.module, eval("require"), urlDirname, filename);
       const exportedInterface = scriptContext.module.exports || scriptContext.exports;
@@ -381,11 +443,11 @@ const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "we
 const loadScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url2, info) => {
   return new Promise((resolve, reject) => {
     createScriptNode(url2, (error, scriptContext2) => {
+      var _a, _b;
       if (error) {
         reject(error);
       } else {
-        var _info_attrs, _info_attrs1;
-        const remoteEntryKey = (info == null ? void 0 : (_info_attrs = info.attrs) == null ? void 0 : _info_attrs["globalName"]) || `__FEDERATION_${info == null ? void 0 : (_info_attrs1 = info.attrs) == null ? void 0 : _info_attrs1["name"]}:custom__`;
+        const remoteEntryKey = ((_a = info == null ? void 0 : info.attrs) == null ? void 0 : _a["globalName"]) || `__FEDERATION_${(_b = info == null ? void 0 : info.attrs) == null ? void 0 : _b["name"]}:custom__`;
         const entryExports = globalThis[remoteEntryKey] = scriptContext2;
         resolve(entryExports);
       }
@@ -399,8 +461,8 @@ async function loadModule(url2, options) {
   if (esmModuleCache.has(url2)) {
     return esmModuleCache.get(url2);
   }
-  const { fetch: fetch1, vm: vm2 } = options;
-  const response = await fetch1(url2);
+  const { fetch: fetch2, vm: vm2 } = options;
+  const response = await fetch2(url2);
   const code = await response.text();
   const module2 = new vm2.SourceTextModule(code, {
     // @ts-ignore