@module-federation/devtools 0.22.1 → 0.23.0

package/dist/es/component/ModuleInfo/index.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Empty, Select, Tag, Table } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import styles from "./index.module";
 const renderValue = (value) => {
   if (value === void 0 || value === null) {
@@ -43,6 +44,7 @@ const renderValue = (value) => {
   return /* @__PURE__ */ jsx("span", { className: styles.valueText, children: String(value) });
 };
 const RemotesTable = ({ data }) => {
+  const { t } = useTranslation();
   if (!data || Object.keys(data).length === 0) {
     return null;
   }
@@ -54,10 +56,13 @@ const RemotesTable = ({ data }) => {
     scmVersion: val.scmVersion || val.buildVersion || "-"
   }));
   const columns = [
-    { title: "Name", dataIndex: "name" },
-    { title: "Type", dataIndex: "type" },
-    { title: "Version", dataIndex: "version" },
-    { title: "SCM Version", dataIndex: "scmVersion" }
+    { title: t("moduleInfo.tables.remotes.name"), dataIndex: "name" },
+    { title: t("moduleInfo.tables.remotes.type"), dataIndex: "type" },
+    { title: t("moduleInfo.tables.remotes.version"), dataIndex: "version" },
+    {
+      title: t("moduleInfo.tables.remotes.scmVersion"),
+      dataIndex: "scmVersion"
+    }
   ];
   return /* @__PURE__ */ jsx(
     Table,
@@ -72,6 +77,7 @@ const RemotesTable = ({ data }) => {
   );
 };
 const ExposesTable = ({ data }) => {
+  const { t } = useTranslation();
   if (!Array.isArray(data) || data.length === 0) {
     return null;
   }
@@ -79,12 +85,15 @@ const ExposesTable = ({ data }) => {
     key: index,
     name: item.name || item.moduleName || item.expose || "-",
     path: item.path || item.file || "-",
-    shared: Array.isArray(item.requires) ? item.requires.join(", ") : item.requires || "None"
+    shared: Array.isArray(item.requires) ? item.requires.join(", ") : item.requires || t("moduleInfo.tables.exposes.noShared")
   }));
   const columns = [
-    { title: "Module Name", dataIndex: "name" },
-    { title: "File Path", dataIndex: "path" },
-    { title: "Shared Dependencies", dataIndex: "shared" }
+    { title: t("moduleInfo.tables.exposes.moduleName"), dataIndex: "name" },
+    { title: t("moduleInfo.tables.exposes.filePath"), dataIndex: "path" },
+    {
+      title: t("moduleInfo.tables.exposes.sharedDependencies"),
+      dataIndex: "shared"
+    }
   ];
   return /* @__PURE__ */ jsx(
     Table,
@@ -99,6 +108,7 @@ const ExposesTable = ({ data }) => {
   );
 };
 const ConsumersTable = ({ data }) => {
+  const { t } = useTranslation();
   if (!Array.isArray(data) || data.length === 0) {
     return null;
   }
@@ -112,12 +122,15 @@ const ConsumersTable = ({ data }) => {
     time: item.time || "-"
   }));
   const columns = [
-    { title: "Consumer Name", dataIndex: "name" },
-    { title: "Consumer Type", dataIndex: "type" },
-    { title: "Consumer Version", dataIndex: "version" },
-    { title: "Consumed Module Name", dataIndex: "moduleName" },
-    { title: "Used In", dataIndex: "usedIn" },
-    { title: "Time", dataIndex: "time" }
+    { title: t("moduleInfo.tables.consumers.name"), dataIndex: "name" },
+    { title: t("moduleInfo.tables.consumers.type"), dataIndex: "type" },
+    { title: t("moduleInfo.tables.consumers.version"), dataIndex: "version" },
+    {
+      title: t("moduleInfo.tables.consumers.moduleName"),
+      dataIndex: "moduleName"
+    },
+    { title: t("moduleInfo.tables.consumers.usedIn"), dataIndex: "usedIn" },
+    { title: t("moduleInfo.tables.consumers.time"), dataIndex: "time" }
   ];
   return /* @__PURE__ */ jsx(
     Table,
@@ -134,20 +147,30 @@ const ConsumersTable = ({ data }) => {
 const SharedTable = ({
   data
 }) => {
+  const { t } = useTranslation();
   if (!data || Array.isArray(data) && data.length === 0) {
     return null;
   }
-  const dataSource = Object.entries(data).map(([key, val]) => ({
-    key,
-    name: val.sharedName,
-    version: val.version || "-"
-  }));
+  const dataSource = Object.entries(data).map(([key, val]) => {
+    var _a, _b, _c;
+    return {
+      key,
+      name: val.sharedName,
+      version: val.version || "-",
+      requiredVersion: (_a = val.shareConfig) == null ? void 0 : _a.requiredVersion,
+      singleton: (_b = val.shareConfig) == null ? void 0 : _b.singleton,
+      eager: (_c = val.shareConfig) == null ? void 0 : _c.eager
+    };
+  });
   const columns = [
-    { title: "Dependency Name", dataIndex: "name" },
-    { title: "Version", dataIndex: "version" },
-    { title: "Required Version", dataIndex: "requiredVersion" },
-    { title: "Singleton", dataIndex: "singleton" },
-    { title: "Eager", dataIndex: "eager" }
+    { title: t("moduleInfo.tables.shared.dependencyName"), dataIndex: "name" },
+    { title: t("moduleInfo.tables.shared.version"), dataIndex: "version" },
+    {
+      title: t("moduleInfo.tables.shared.requiredVersion"),
+      dataIndex: "requiredVersion"
+    },
+    { title: t("moduleInfo.tables.shared.singleton"), dataIndex: "singleton" },
+    { title: t("moduleInfo.tables.shared.eager"), dataIndex: "eager" }
   ];
   return /* @__PURE__ */ jsx(
     Table,
@@ -169,49 +192,50 @@ const extractDetailSections = (moduleSnapshot) => {
   const remoteEntry = moduleSnapshot.remoteEntry || moduleSnapshot.entry || moduleSnapshot.version;
   if (remoteEntry) {
     sections.push({
-      label: "Remote Entry",
+      key: "remoteEntry",
       value: remoteEntry
     });
   }
   if (moduleSnapshot.version) {
     sections.push({
-      label: "Version",
+      key: "version",
       value: moduleSnapshot.version
     });
   }
   if (moduleSnapshot.consumerList) {
     sections.push({
-      label: "Consumers",
+      key: "consumers",
       value: moduleSnapshot.consumerList
     });
   }
   if (moduleSnapshot.modules) {
     sections.push({
-      label: "Exposes",
+      key: "exposes",
       value: moduleSnapshot.modules
     });
   }
   if (moduleSnapshot.remotesInfo) {
     sections.push({
-      label: "Remotes",
+      key: "remotes",
       value: moduleSnapshot.remotesInfo
     });
   }
   if (moduleSnapshot.shared) {
     sections.push({
-      label: "Shared",
+      key: "shared",
       value: moduleSnapshot.shared
     });
   }
   if (!sections.length) {
     sections.push({
-      label: "Snapshot",
+      key: "snapshot",
       value: moduleSnapshot
     });
   }
   return sections;
 };
 const Home = (props) => {
+  const { t } = useTranslation();
   const { moduleInfo, selectedModuleId, onSelectModule } = props;
   const moduleEntries = useMemo(
     () => Object.entries(moduleInfo || {}).filter(([key]) => key !== "extendInfos"),
@@ -229,21 +253,21 @@ const Home = (props) => {
     [currentSnapshot]
   );
   if (!moduleEntries.length || !currentModuleId) {
-    return /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx(Empty, { description: "No ModuleInfo Detected" }) });
+    return /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx(Empty, { description: t("moduleInfo.empty.noModuleInfo") }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: styles.home, children: [
     /* @__PURE__ */ jsx(
       Select,
       {
         className: styles.moduleSelect,
-        placeholder: "Select MF module",
+        placeholder: t("moduleInfo.selector.placeholder"),
         style: { width: "100%" },
         allowClear: true,
         showSearch: true,
         autoWidth: true,
         onChange: onSelectModule,
         children: moduleEntries.map(([moduleId, snapshot]) => /* @__PURE__ */ jsxs(Select.Option, { value: moduleId, children: [
-          snapshot && "remotesInfo" in snapshot && Object.keys(snapshot.remotesInfo).length ? /* @__PURE__ */ jsx(Tag, { color: "pinkpurple", children: "Consumer" }) : /* @__PURE__ */ jsx(Tag, { color: "cyan", children: "Provider" }),
+          snapshot && "remotesInfo" in snapshot && Object.keys(snapshot.remotesInfo).length ? /* @__PURE__ */ jsx(Tag, { color: "pinkpurple", children: t("moduleInfo.selector.consumerTag") }) : /* @__PURE__ */ jsx(Tag, { color: "cyan", children: t("moduleInfo.selector.providerTag") }),
           " ",
           moduleId
         ] }, moduleId))
@@ -256,17 +280,17 @@ const Home = (props) => {
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: styles.detailBody, children: detailSections.map((section) => {
         let content;
-        switch (section.label) {
-          case "Remotes":
+        switch (section.key) {
+          case "remotes":
             content = /* @__PURE__ */ jsx(RemotesTable, { data: section.value });
             break;
-          case "Exposes":
+          case "exposes":
             content = /* @__PURE__ */ jsx(ExposesTable, { data: section.value });
             break;
-          case "Consumers":
+          case "consumers":
             content = /* @__PURE__ */ jsx(ConsumersTable, { data: section.value });
             break;
-          case "Shared":
+          case "shared":
             content = /* @__PURE__ */ jsx(SharedTable, { data: section.value });
             break;
           default:
@@ -276,9 +300,9 @@ const Home = (props) => {
           return null;
         }
         return /* @__PURE__ */ jsxs("div", { className: styles.detailRow, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.detailLabel, children: section.label }),
+          /* @__PURE__ */ jsx("div", { className: styles.detailLabel, children: t(`moduleInfo.detail.${section.key}`) }),
           /* @__PURE__ */ jsx("div", { className: styles.detailValue, children: content })
-        ] }, section.label);
+        ] }, section.key);
       }) })
     ] }) })
   ] });

package/dist/es/component/ModuleInfo/index_module.css

@@ -17,8 +17,8 @@
   max-width: 40%;
   padding: 12px;
   border-radius: 16px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
-  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  background: var(--color-bg-2, rgba(255, 255, 255, 0.9));
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -30,7 +30,7 @@
   border-radius: 12px;
   padding: 10px 12px;
   background: rgba(243, 244, 246, 0.4);
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   font-size: 13px;
   text-align: left;
   cursor: pointer;
@@ -62,8 +62,8 @@
   min-height: 0;
   padding: 16px 20px;
   border-radius: 20px;
-  border: 1px solid rgba(228, 228, 231, 0.5);
-  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--color-border-2, rgba(228, 228, 231, 0.5));
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
 }
 
 .detailHeader_cde89 {
@@ -76,8 +76,9 @@
 .detailTitle_cde89 {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   word-break: break-word;
+  margin-right: 10px;
 }
 
 .detailBody_cde89 {
@@ -102,12 +103,12 @@
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .detailValue_cde89 {
   font-size: 13px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .valueText_cde89 {
@@ -126,7 +127,7 @@
   background: rgba(243, 244, 246, 0.4);
   border: 1px solid rgba(96, 165, 250, 0.3);
   font-size: 11px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -139,7 +140,7 @@
   background: rgba(243, 244, 246, 0.4);
   border: 1px solid rgba(96, 165, 250, 0.3);
   font-size: 12px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   overflow-x: auto;
 }
 
@@ -150,7 +151,7 @@
   justify-content: center;
   border-radius: 18px;
   border: 1px dashed rgba(96, 165, 250, 0.3);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-2, rgba(255, 255, 255, 0.9));
 }
 
 @media (max-width: 960px) {

package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tag } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import styles from "./FocusResultDisplay.module";
 const FocusResultDisplay = ({
   focusResult,
   hasData,
   loadedStatusLabel
 }) => {
+  const { t } = useTranslation();
   if (focusResult) {
     return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
@@ -17,15 +19,15 @@ const FocusResultDisplay = ({
         /* @__PURE__ */ jsx(Tag, { size: "small", className: "loaded-status-tag", children: loadedStatusLabel(focusResult.status) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles.providers, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.label, children: "Provider: " }),
+        /* @__PURE__ */ jsx("span", { className: styles.label, children: t("sharedDeps.focusResult.providerLabel") }),
         focusResult.providers.map((p) => /* @__PURE__ */ jsx("span", { className: styles.providerTag, children: p }, p))
       ] })
     ] });
   }
   if (hasData) {
-    return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: "No version matching the criteria was found in the current shared data. Please check if the package name / version is correct." });
+    return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: t("sharedDeps.messages.noFocusMatch") });
   }
-  return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: "No shared dependency data loaded yet." });
+  return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: t("sharedDeps.messages.noData") });
 };
 var FocusResultDisplay_default = FocusResultDisplay;
 export {

package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css

@@ -22,24 +22,24 @@
   align-items: center;
   gap: 4px;
   font-size: 11px;
-  color: #374151; /* text-zinc-700 */
+  color: var(--color-text-1, #374151); /* text-zinc-700 */
 }
 
 .label_ee3c9 {
-  color: #71717a; /* text-zinc-500 */
+  color: var(--color-text-2, #71717a); /* text-zinc-500 */
 }
 
 .providerTag_ee3c9 {
   border-radius: 4px;
-  background-color: white;
+  background-color: var(--color-bg-1, #ffffff);
   padding: 2px 6px;
   font-weight: 500;
-  color: #27272a; /* text-zinc-800 */
+  color: var(--color-text-1, #27272a); /* text-zinc-800 */
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .emptyText_ee3c9 {
   font-size: 11px;
-  color: #71717a; /* text-zinc-500 */
+  color: var(--color-text-2, #71717a); /* text-zinc-500 */
   margin: 0;
 }