@module-federation/devtools 0.22.0 → 0.22.1

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

@@ -0,0 +1,289 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Empty, Select, Tag, Table } from "@arco-design/web-react";
+import styles from "./index.module";
+const renderValue = (value) => {
+  if (value === void 0 || value === null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    if (!value.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: styles.pillGroup, children: value.map((item, index) => /* @__PURE__ */ jsx("span", { className: styles.pill, children: typeof item === "string" ? item : JSON.stringify(item) }, index)) });
+  }
+  if (typeof value === "object") {
+    if (Object.keys(value).length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: Object.entries(value).map(([key, val]) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col border-b border-zinc-100 pb-2 last:border-0 last:pb-0",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-700 text-xs mb-1", children: key }),
+          /* @__PURE__ */ jsx("div", { className: "text-zinc-600 text-xs break-all font-mono bg-zinc-50 p-2 rounded border border-zinc-100", children: (() => {
+            if (Array.isArray(val)) {
+              return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: val.map((item, idx) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "border-b border-zinc-200 last:border-0 pb-1 last:pb-0",
+                  children: typeof item === "object" ? JSON.stringify(item) : String(item)
+                },
+                idx
+              )) });
+            }
+            return typeof val === "object" ? JSON.stringify(val) : String(val);
+          })() })
+        ]
+      },
+      key
+    )) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: styles.valueText, children: String(value) });
+};
+const RemotesTable = ({ data }) => {
+  if (!data || Object.keys(data).length === 0) {
+    return null;
+  }
+  const dataSource = Object.entries(data).map(([key, val]) => ({
+    key,
+    name: key,
+    type: val.type || val.remoteType || "-",
+    version: val.version || val.matchedVersion || "-",
+    scmVersion: val.scmVersion || val.buildVersion || "-"
+  }));
+  const columns = [
+    { title: "Name", dataIndex: "name" },
+    { title: "Type", dataIndex: "type" },
+    { title: "Version", dataIndex: "version" },
+    { title: "SCM Version", dataIndex: "scmVersion" }
+  ];
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns,
+      data: dataSource,
+      pagination: false,
+      border: false,
+      rowKey: "key",
+      className: "bg-zinc-50 rounded border border-zinc-200"
+    }
+  );
+};
+const ExposesTable = ({ data }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  const dataSource = data.map((item, index) => ({
+    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"
+  }));
+  const columns = [
+    { title: "Module Name", dataIndex: "name" },
+    { title: "File Path", dataIndex: "path" },
+    { title: "Shared Dependencies", dataIndex: "shared" }
+  ];
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns,
+      data: dataSource,
+      pagination: false,
+      border: false,
+      rowKey: "key",
+      className: "bg-zinc-50 rounded border border-zinc-200"
+    }
+  );
+};
+const ConsumersTable = ({ data }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  const dataSource = data.map((item, index) => ({
+    key: index,
+    name: item.name || item.consumerName || "-",
+    type: item.type || "-",
+    version: item.version || "-",
+    moduleName: item.moduleName || "-",
+    usedIn: Array.isArray(item.usedIn) ? item.usedIn.join(", ") : item.usedIn || "-",
+    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" }
+  ];
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns,
+      data: dataSource,
+      pagination: false,
+      border: false,
+      rowKey: "key",
+      className: "bg-zinc-50 rounded border border-zinc-200"
+    }
+  );
+};
+const SharedTable = ({
+  data
+}) => {
+  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 columns = [
+    { title: "Dependency Name", dataIndex: "name" },
+    { title: "Version", dataIndex: "version" },
+    { title: "Required Version", dataIndex: "requiredVersion" },
+    { title: "Singleton", dataIndex: "singleton" },
+    { title: "Eager", dataIndex: "eager" }
+  ];
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columns,
+      data: dataSource,
+      pagination: false,
+      border: false,
+      rowKey: "key",
+      className: "bg-zinc-50 rounded border border-zinc-200"
+    }
+  );
+};
+const extractDetailSections = (moduleSnapshot) => {
+  if (!moduleSnapshot) {
+    return [];
+  }
+  const sections = [];
+  const remoteEntry = moduleSnapshot.remoteEntry || moduleSnapshot.entry || moduleSnapshot.version;
+  if (remoteEntry) {
+    sections.push({
+      label: "Remote Entry",
+      value: remoteEntry
+    });
+  }
+  if (moduleSnapshot.version) {
+    sections.push({
+      label: "Version",
+      value: moduleSnapshot.version
+    });
+  }
+  if (moduleSnapshot.consumerList) {
+    sections.push({
+      label: "Consumers",
+      value: moduleSnapshot.consumerList
+    });
+  }
+  if (moduleSnapshot.modules) {
+    sections.push({
+      label: "Exposes",
+      value: moduleSnapshot.modules
+    });
+  }
+  if (moduleSnapshot.remotesInfo) {
+    sections.push({
+      label: "Remotes",
+      value: moduleSnapshot.remotesInfo
+    });
+  }
+  if (moduleSnapshot.shared) {
+    sections.push({
+      label: "Shared",
+      value: moduleSnapshot.shared
+    });
+  }
+  if (!sections.length) {
+    sections.push({
+      label: "Snapshot",
+      value: moduleSnapshot
+    });
+  }
+  return sections;
+};
+const Home = (props) => {
+  const { moduleInfo, selectedModuleId, onSelectModule } = props;
+  const moduleEntries = useMemo(
+    () => Object.entries(moduleInfo || {}).filter(([key]) => key !== "extendInfos"),
+    [moduleInfo]
+  );
+  const [currentModuleId, currentSnapshot] = useMemo(() => {
+    if (!moduleEntries.length) {
+      return [null, null];
+    }
+    const entry = moduleEntries.find(([moduleId]) => moduleId === selectedModuleId) || moduleEntries[0];
+    return entry;
+  }, [moduleEntries, selectedModuleId]);
+  const detailSections = useMemo(
+    () => extractDetailSections(currentSnapshot),
+    [currentSnapshot]
+  );
+  if (!moduleEntries.length || !currentModuleId) {
+    return /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx(Empty, { description: "No ModuleInfo Detected" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.home, children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        className: styles.moduleSelect,
+        placeholder: "Select MF module",
+        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" }),
+          " ",
+          moduleId
+        ] }, moduleId))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.moduleSelector, children: /* @__PURE__ */ jsxs("div", { className: styles.moduleDetail, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.detailHeader, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: styles.detailTitle, children: currentModuleId }),
+        currentSnapshot && "remotesInfo" in currentSnapshot && Object.keys(currentSnapshot.remotesInfo).length ? /* @__PURE__ */ jsx(Tag, { color: "pinkpurple", children: "Consumer" }) : /* @__PURE__ */ jsx(Tag, { color: "cyan", children: "Provider" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.detailBody, children: detailSections.map((section) => {
+        let content;
+        switch (section.label) {
+          case "Remotes":
+            content = /* @__PURE__ */ jsx(RemotesTable, { data: section.value });
+            break;
+          case "Exposes":
+            content = /* @__PURE__ */ jsx(ExposesTable, { data: section.value });
+            break;
+          case "Consumers":
+            content = /* @__PURE__ */ jsx(ConsumersTable, { data: section.value });
+            break;
+          case "Shared":
+            content = /* @__PURE__ */ jsx(SharedTable, { data: section.value });
+            break;
+          default:
+            content = renderValue(section.value);
+        }
+        if (!content) {
+          return null;
+        }
+        return /* @__PURE__ */ jsxs("div", { className: styles.detailRow, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.detailLabel, children: section.label }),
+          /* @__PURE__ */ jsx("div", { className: styles.detailValue, children: content })
+        ] }, section.label);
+      }) })
+    ] }) })
+  ] });
+};
+var ModuleInfo_default = Home;
+export {
+  ModuleInfo_default as default
+};

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "home": "home_cde89", "moduleSelector": "moduleSelector_cde89", "moduleList": "moduleList_cde89", "moduleItem": "moduleItem_cde89", "moduleItemActive": "moduleItemActive_cde89", "moduleName": "moduleName_cde89", "moduleDetail": "moduleDetail_cde89", "detailHeader": "detailHeader_cde89", "detailTitle": "detailTitle_cde89", "detailBody": "detailBody_cde89", "detailRow": "detailRow_cde89", "detailLabel": "detailLabel_cde89", "detailValue": "detailValue_cde89", "valueText": "valueText_cde89", "pillGroup": "pillGroup_cde89", "pill": "pill_cde89", "jsonBlock": "jsonBlock_cde89", "emptyState": "emptyState_cde89" };
+export {
+  index_module_default as default
+};

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

@@ -0,0 +1,183 @@
+.home_cde89 {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+}
+
+.moduleSelector_cde89 {
+  display: flex;
+  gap: clamp(12px, 2vw, 20px);
+  flex: 1 1;
+  min-height: 0;
+}
+
+.moduleList_cde89 {
+  width: clamp(220px, 28%, 320px);
+  max-width: 40%;
+  padding: 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+
+.moduleItem_cde89 {
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(243, 244, 246, 0.4);
+  color: #1f2937;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.moduleItem_cde89:hover {
+  border-color: rgba(34, 197, 94, 0.5);
+  background: rgba(243, 244, 246, 0.6);
+}
+
+.moduleItemActive_cde89 {
+  border-color: rgba(34, 197, 94, 0.6);
+  background: rgba(243, 244, 246, 0.8);
+  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.2);
+}
+
+.moduleName_cde89 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.moduleDetail_cde89 {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  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);
+}
+
+.detailHeader_cde89 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.detailTitle_cde89 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  word-break: break-word;
+}
+
+.detailBody_cde89 {
+  flex: 1 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detailRow_cde89 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(243, 244, 246, 0.4);
+  border: 1px solid rgba(228, 228, 231, 0.5);
+}
+
+.detailLabel_cde89 {
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #4b5563;
+}
+
+.detailValue_cde89 {
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.valueText_cde89 {
+  word-break: break-word;
+}
+
+.pillGroup_cde89 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pill_cde89 {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(243, 244, 246, 0.4);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  font-size: 11px;
+  color: #1f2937;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.jsonBlock_cde89 {
+  margin: 0;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(243, 244, 246, 0.4);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  font-size: 12px;
+  color: #1f2937;
+  overflow-x: auto;
+}
+
+.emptyState_cde89 {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  border: 1px dashed rgba(96, 165, 250, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+@media (max-width: 960px) {
+  .moduleSelector_cde89 {
+    flex-direction: column;
+  }
+  .moduleList_cde89 {
+    width: 100%;
+    max-width: none;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding: 10px;
+  }
+  .moduleItem_cde89 {
+    min-width: 180px;
+  }
+  .moduleDetail_cde89 {
+    width: 100%;
+    padding: 14px 18px;
+  }
+}
+@media (max-width: 640px) {
+  .moduleItem_cde89 {
+    min-width: 150px;
+  }
+  .detailRow_cde89 {
+    padding: 10px;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tag } from "@arco-design/web-react";
+import styles from "./FocusResultDisplay.module";
+const FocusResultDisplay = ({
+  focusResult,
+  hasData,
+  loadedStatusLabel
+}) => {
+  if (focusResult) {
+    return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.packageInfo, children: [
+          focusResult.packageName,
+          "@",
+          focusResult.version
+        ] }),
+        /* @__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: " }),
+        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: "No shared dependency data loaded yet." });
+};
+var FocusResultDisplay_default = FocusResultDisplay;
+export {
+  FocusResultDisplay_default as default
+};

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

@@ -0,0 +1,5 @@
+import "./FocusResultDisplay_module.css";
+var FocusResultDisplay_module_default = { "container": "container_ee3c9", "header": "header_ee3c9", "packageInfo": "packageInfo_ee3c9", "providers": "providers_ee3c9", "label": "label_ee3c9", "providerTag": "providerTag_ee3c9", "emptyText": "emptyText_ee3c9" };
+export {
+  FocusResultDisplay_module_default as default
+};

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

@@ -0,0 +1,45 @@
+.container_ee3c9 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header_ee3c9 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.packageInfo_ee3c9 {
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.providers_ee3c9 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #374151; /* text-zinc-700 */
+}
+
+.label_ee3c9 {
+  color: #71717a; /* text-zinc-500 */
+}
+
+.providerTag_ee3c9 {
+  border-radius: 4px;
+  background-color: white;
+  padding: 2px 6px;
+  font-weight: 500;
+  color: #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 */
+  margin: 0;
+}