@module-federation/bridge-react 0.0.0-next-20241226090607 → 0.0.0-next-20241230030326

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241226090607
+## 0.0.0-next-20241230030326
+
+### Patch Changes
+
+- 4102786: feat: support basename passed by remote module props
+- Updated dependencies [835b09c]
+- Updated dependencies [4fd33fb]
+  - @module-federation/sdk@0.0.0-next-20241230030326
+  - @module-federation/bridge-shared@0.0.0-next-20241230030326
+
+## 0.8.6
 
 ### Patch Changes
 
 - 85e7482: fix(bridge-react): change all logs from info to debug in all bridge packages
-  - @module-federation/sdk@0.0.0-next-20241226090607
-  - @module-federation/bridge-shared@0.0.0-next-20241226090607
+  - @module-federation/sdk@0.8.6
+  - @module-federation/bridge-shared@0.8.6
 
 ## 0.8.5
 

package/dist/{context-CUbFnlO5.js → context-BgBVJ06L.js}

@@ -27,19 +27,21 @@ var supportColor = () => {
   if (typeof supportsSubstitutions !== "undefined") {
     return supportsSubstitutions;
   }
+  const originalConsoleLog = console.log;
   try {
     const testString = "color test";
     const css = "color: red;";
-    const originalConsoleLog = console.log;
+    supportsSubstitutions = false;
     console.log = (...args) => {
       if (args[0] === `%c${testString}` && args[1] === css) {
         supportsSubstitutions = true;
       }
     };
     console.log(`%c${testString}`, css);
-    console.log = originalConsoleLog;
   } catch (e) {
     supportsSubstitutions = false;
+  } finally {
+    console.log = originalConsoleLog;
   }
   return supportsSubstitutions;
 };
@@ -69,8 +71,18 @@ formatter("gray");
 function getLabel(type, logType, labels) {
   let label = [""];
   if ("label" in logType) {
-    label = [labels[type] || logType.label || ""];
-    label = bold(logType.color ? logType.color(label) : label[0]);
+    const labelText = type !== "log" ? labels[type] : void 0;
+    label = [labelText || logType.label || ""];
+    if (logType.color) {
+      const colorResult = logType.color(label[0]);
+      if (Array.isArray(colorResult) && colorResult.length === 2) {
+        label = bold([colorResult[0], colorResult[1]]);
+      } else {
+        label = bold(colorResult[0] || "");
+      }
+    } else {
+      label = bold(label[0]);
+    }
   }
   label = label.filter(Boolean);
   return label;
@@ -78,9 +90,9 @@ function getLabel(type, logType, labels) {
 function finalLog(label, text, args, message) {
   if (label.length) {
     if (Array.isArray(message)) {
-      console.log(...label, ...message);
+      console.log(...label, ...message, ...args);
     } else {
-      console.log(...label, text);
+      console.log(...label, text, ...args);
     }
   } else {
     Array.isArray(message) ? console.log(...message) : console.log(text, ...args);
@@ -96,9 +108,20 @@ var LOG_LEVEL = {
 var errorStackRegExp = /at\s.*:\d+:\d+[\s\)]*$/;
 var anonymousErrorStackRegExp = /at\s.*\(<anonymous>\)$/;
 var isErrorStackMessage = (message) => errorStackRegExp.test(message) || anonymousErrorStackRegExp.test(message);
+function validateOptions(options) {
+  const validatedOptions = { ...options };
+  if (options.labels && typeof options.labels !== "object") {
+    throw new Error("Labels must be an object");
+  }
+  if (options.level && typeof options.level !== "string") {
+    throw new Error("Level must be a string");
+  }
+  return validatedOptions;
+}
 var createLogger$1 = (options = {}, { getLabel: getLabel2, handleError, finalLog: finalLog2, greet, LOG_TYPES: LOG_TYPES2 }) => {
-  let maxLevel = options.level || "log";
-  let customLabels = options.labels || {};
+  const validatedOptions = validateOptions(options);
+  let maxLevel = validatedOptions.level || "log";
+  let customLabels = validatedOptions.labels || {};
   let log = (type, message, ...args) => {
     if (LOG_LEVEL[LOG_TYPES2[type].level] > LOG_LEVEL[maxLevel]) {
       return;

package/dist/{context-BcJ-YlNr.cjs → context-DS0wRSh7.cjs}

@@ -28,19 +28,21 @@ var supportColor = () => {
   if (typeof supportsSubstitutions !== "undefined") {
     return supportsSubstitutions;
   }
+  const originalConsoleLog = console.log;
   try {
     const testString = "color test";
     const css = "color: red;";
-    const originalConsoleLog = console.log;
+    supportsSubstitutions = false;
     console.log = (...args) => {
       if (args[0] === `%c${testString}` && args[1] === css) {
         supportsSubstitutions = true;
       }
     };
     console.log(`%c${testString}`, css);
-    console.log = originalConsoleLog;
   } catch (e) {
     supportsSubstitutions = false;
+  } finally {
+    console.log = originalConsoleLog;
   }
   return supportsSubstitutions;
 };
@@ -70,8 +72,18 @@ formatter("gray");
 function getLabel(type, logType, labels) {
   let label = [""];
   if ("label" in logType) {
-    label = [labels[type] || logType.label || ""];
-    label = bold(logType.color ? logType.color(label) : label[0]);
+    const labelText = type !== "log" ? labels[type] : void 0;
+    label = [labelText || logType.label || ""];
+    if (logType.color) {
+      const colorResult = logType.color(label[0]);
+      if (Array.isArray(colorResult) && colorResult.length === 2) {
+        label = bold([colorResult[0], colorResult[1]]);
+      } else {
+        label = bold(colorResult[0] || "");
+      }
+    } else {
+      label = bold(label[0]);
+    }
   }
   label = label.filter(Boolean);
   return label;
@@ -79,9 +91,9 @@ function getLabel(type, logType, labels) {
 function finalLog(label, text, args, message) {
   if (label.length) {
     if (Array.isArray(message)) {
-      console.log(...label, ...message);
+      console.log(...label, ...message, ...args);
     } else {
-      console.log(...label, text);
+      console.log(...label, text, ...args);
     }
   } else {
     Array.isArray(message) ? console.log(...message) : console.log(text, ...args);
@@ -97,9 +109,20 @@ var LOG_LEVEL = {
 var errorStackRegExp = /at\s.*:\d+:\d+[\s\)]*$/;
 var anonymousErrorStackRegExp = /at\s.*\(<anonymous>\)$/;
 var isErrorStackMessage = (message) => errorStackRegExp.test(message) || anonymousErrorStackRegExp.test(message);
+function validateOptions(options) {
+  const validatedOptions = { ...options };
+  if (options.labels && typeof options.labels !== "object") {
+    throw new Error("Labels must be an object");
+  }
+  if (options.level && typeof options.level !== "string") {
+    throw new Error("Level must be a string");
+  }
+  return validatedOptions;
+}
 var createLogger$1 = (options = {}, { getLabel: getLabel2, handleError, finalLog: finalLog2, greet, LOG_TYPES: LOG_TYPES2 }) => {
-  let maxLevel = options.level || "log";
-  let customLabels = options.labels || {};
+  const validatedOptions = validateOptions(options);
+  let maxLevel = validatedOptions.level || "log";
+  let customLabels = validatedOptions.labels || {};
   let log = (type, message, ...args) => {
     if (LOG_LEVEL[LOG_TYPES2[type].level] > LOG_LEVEL[maxLevel]) {
       return;

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-BcJ-YlNr.cjs");
+const context = require("./context-DS0wRSh7.cjs");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
 const ReactDOM = require("react-dom");
@@ -212,12 +212,15 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.5";
+  RemoteApp2["__APP_VERSION__"] = "0.8.6";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
     var _a;
+    if (props == null ? void 0 : props.basename) {
+      return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename: props.basename, ref });
+    }
     let enableDispathPopstate = false;
     let routerContextVal;
     try {

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { createContext, Component, createElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-CUbFnlO5.js";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BgBVJ06L.js";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
 import ReactDOM from "react-dom";
@@ -193,12 +193,15 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       }
     );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.8.5";
+  RemoteApp2["__APP_VERSION__"] = "0.8.6";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
   const Component2 = 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 {

package/dist/router-v5.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const context = require("./context-BcJ-YlNr.cjs");
+const context = require("./context-DS0wRSh7.cjs");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v5.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
 export * from "react-router-dom/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router-v6.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
-const context = require("./context-BcJ-YlNr.cjs");
+const context = require("./context-DS0wRSh7.cjs");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v6.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
 export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-BcJ-YlNr.cjs");
+const context = require("./context-DS0wRSh7.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BgBVJ06L.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241226090607",
+  "version": "0.0.0-next-20241230030326",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20241226090607",
-    "@module-federation/sdk": "0.0.0-next-20241226090607"
+    "@module-federation/bridge-shared": "0.0.0-next-20241230030326",
+    "@module-federation/sdk": "0.0.0-next-20241230030326"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,7 +68,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20241226090607"
+    "@module-federation/runtime": "0.0.0-next-20241230030326"
   },
   "scripts": {
     "dev": "vite",

package/src/remote/index.tsx

@@ -158,6 +158,11 @@ export function withRouterData<
   WrappedComponent: React.ComponentType<P & ExtraDataProps>,
 ): React.FC<Omit<P, keyof ExtraDataProps>> {
   const Component = forwardRef(function (props: any, ref) {
+    if (props?.basename) {
+      return (
+        <WrappedComponent {...props} basename={props.basename} ref={ref} />
+      );
+    }
     let enableDispathPopstate = false;
     let routerContextVal: any;
     try {