@module-federation/devtools 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

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

@@ -0,0 +1,505 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Layers,
+  Network,
+  Package2,
+  Repeat,
+  Search,
+  Server
+} from "lucide-react";
+import {
+  Card,
+  Tag,
+  Table,
+  Input,
+  Select,
+  Collapse,
+  Popover,
+  Button
+} from "@arco-design/web-react";
+import {
+  normalizeShareData,
+  computeShareStats,
+  getFilterOptions,
+  groupByProviderScopePackage,
+  findPackageProvider
+} from "./share-utils";
+import FocusResultDisplay from "./FocusResultDisplay";
+const ALL_VALUE = "__all__";
+function loadedStatusLabel(status) {
+  if (status === "loaded") {
+    return "Loaded";
+  }
+  if (status === "loading") {
+    return "Loading";
+  }
+  return "Not Loaded";
+}
+function SharedDepsExplorer({
+  shareData: shareDataProp
+}) {
+  const [normalized, setNormalized] = useState([]);
+  const [loadingState, setLoadingState] = useState("idle");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [selectedProvider, setSelectedProvider] = useState("");
+  const [selectedPackage, setSelectedPackage] = useState("");
+  const [selectedVersion, setSelectedVersion] = useState("");
+  const [searchText, setSearchText] = useState("");
+  const [chartScope, setChartScope] = useState("default");
+  const [focusPackage, setFocusPackage] = useState("react");
+  const [focusVersion, setFocusVersion] = useState("");
+  useEffect(() => {
+    let cancelled = false;
+    function bootstrap() {
+      return __async(this, null, function* () {
+        if (shareDataProp && Object.keys(shareDataProp).length > 0) {
+          const versions = normalizeShareData(shareDataProp);
+          if (!cancelled) {
+            setNormalized(versions);
+            setLoadingState("idle");
+            setErrorMessage(null);
+          }
+          return;
+        }
+        if (!cancelled) {
+          setLoadingState("idle");
+          setErrorMessage(null);
+        }
+      });
+    }
+    bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [shareDataProp]);
+  const stats = useMemo(() => computeShareStats(normalized), [normalized]);
+  const filterOptions = useMemo(
+    () => getFilterOptions(normalized),
+    [normalized]
+  );
+  useEffect(() => {
+    const { scopes } = filterOptions;
+    if (!scopes.length) {
+      return;
+    }
+    if (!scopes.includes(chartScope)) {
+      if (scopes.includes("default")) {
+        setChartScope("default");
+      } else {
+        setChartScope(scopes[0]);
+      }
+    }
+  }, [filterOptions.scopes, chartScope]);
+  const filteredVersions = useMemo(() => {
+    const keyword = searchText.trim().toLowerCase();
+    return normalized.filter((v) => {
+      if (selectedProvider && v.from !== selectedProvider) {
+        return false;
+      }
+      if (selectedPackage && v.packageName !== selectedPackage) {
+        return false;
+      }
+      if (selectedVersion && v.version !== selectedVersion) {
+        return false;
+      }
+      if (keyword && !v.packageName.toLowerCase().includes(keyword)) {
+        return false;
+      }
+      return true;
+    });
+  }, [
+    normalized,
+    selectedProvider,
+    selectedPackage,
+    selectedVersion,
+    searchText
+  ]);
+  const tree = useMemo(
+    () => groupByProviderScopePackage(filteredVersions),
+    [filteredVersions]
+  );
+  const versionsForSelectedPackage = useMemo(() => {
+    if (!selectedPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === selectedPackage) {
+        set.add(v.version);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, selectedPackage]);
+  const focusVersionsForPackage = useMemo(() => {
+    if (!focusPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === focusPackage) {
+        set.add(v.version);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, focusPackage]);
+  const focusResult = useMemo(() => {
+    if (!focusPackage) {
+      return null;
+    }
+    return findPackageProvider(
+      normalized,
+      focusPackage,
+      focusVersion || void 0
+    );
+  }, [normalized, focusPackage, focusVersion]);
+  const hasData = normalized.length > 0;
+  const columns = [
+    {
+      title: "Package / Version",
+      width: "28%",
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-[11px] text-zinc-800", children: item.packageName }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 text-[11px] text-zinc-500", children: [
+          "v",
+          item.version
+        ] })
+      ] })
+    },
+    {
+      title: "Provider / Scope",
+      width: "20%",
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("span", { className: "truncate", title: item.from, children: [
+          "Provider: ",
+          item.from
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-zinc-500", children: [
+          "scope: ",
+          item.scope
+        ] })
+      ] })
+    },
+    {
+      title: "Status",
+      width: "22%",
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ jsx(
+          Tag,
+          {
+            size: "small",
+            className: `w-16 flex items-center justify-center loaded-status-tag`,
+            children: loadedStatusLabel(item.loadedStatus)
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1 text-[10px] text-zinc-500", children: [
+          item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "singleton" }),
+          item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "eager" }),
+          item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "strictVersion" }),
+          item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: "scale-90 origin-left", children: [
+            "req: ",
+            item.shareConfig.requiredVersion
+          ] })
+        ] })
+      ] })
+    },
+    {
+      title: "Consumers",
+      width: "18%",
+      render: (_, item) => /* @__PURE__ */ jsx(
+        Popover,
+        {
+          trigger: "click",
+          position: "right",
+          content: /* @__PURE__ */ jsxs("div", { className: "w-72", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium", children: "Consumer List" }),
+            item.useIn.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500", children: "No applications are consuming this shared dependency version." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-[11px] text-zinc-700", children: item.useIn.map((c) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+              /* @__PURE__ */ jsx("span", { className: "break-all", children: c })
+            ] }, c)) })
+          ] }),
+          children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              item.useIn.length || 0,
+              " Apps"
+            ] })
+          ] }) })
+        }
+      )
+    },
+    {
+      title: "Strategy",
+      width: "12%",
+      render: (_, item) => {
+        var _a;
+        return /* @__PURE__ */ jsx(Tag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : "-" });
+      }
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-4 px-3 py-4 md:px-4 md:py-6 max-w-5xl`, children: [
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500", children: "Module Federation · Shared Dependencies" }),
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight text-zinc-900", children: "Overview of Shared Dependencies Usage" })
+    ] }),
+    /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Number of Providers" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Server, { className: "h-5 w-5 text-zinc-400" }),
+            /* @__PURE__ */ jsx("span", { children: stats.totalProviders })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500", children: "Number of applications/build versions exposing shared dependencies." })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Share Scope / Package" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-zinc-400" }),
+            /* @__PURE__ */ jsx("span", { children: stats.totalScopes }),
+            /* @__PURE__ */ jsx("span", { className: "text-base text-zinc-400", children: "scope" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-zinc-500 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate mr-2", children: "Shared spaces under Scope dimension." }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx(Box, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              stats.totalPackages,
+              " packages"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Version Loading & Reuse" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Package2, { className: "h-5 w-5 text-zinc-400" }),
+            /* @__PURE__ */ jsx("span", { children: stats.totalVersions })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 text-xs text-zinc-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 loaded-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { children: "Loaded" }),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.loadedCount })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 reused-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(Repeat, { className: "h-3 w-3 mr-1" }),
+            /* @__PURE__ */ jsx("span", { children: "Reused" }),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.reusedCount })
+          ] }) })
+        ] }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: "rounded-xl shadow-sm border-zinc-200",
+        title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "h-4 w-4 text-zinc-500" }),
+          "Who provides the current shared: '",
+          focusPackage,
+          "'?"
+        ] }),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 mb-3 p-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  showSearch: true,
+                  value: focusPackage,
+                  onChange: (value) => {
+                    setFocusPackage(value);
+                    setFocusVersion("");
+                  },
+                  placeholder: "Select Shared Dependency Package Name",
+                  className: "w-full",
+                  children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version (Optional, inferred if empty)" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  showSearch: true,
+                  value: focusVersion || ALL_VALUE,
+                  onChange: (value) => setFocusVersion(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Versions",
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ jsx(Select.Option, { value: ALL_VALUE, children: "All Versions" }),
+                    focusVersionsForPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-zinc-200 bg-zinc-50 px-3 py-2 text-xs", children: /* @__PURE__ */ jsx(
+            FocusResultDisplay,
+            {
+              focusResult,
+              hasData,
+              loadedStatusLabel
+            }
+          ) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: "rounded-xl shadow-sm border-zinc-200",
+        title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-zinc-500" }),
+          "Filter / Search"
+        ] }),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Provider" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: selectedProvider || void 0,
+                  onChange: (value) => setSelectedProvider(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Providers",
+                  className: "w-full",
+                  allowClear: true,
+                  children: filterOptions.providers.map((p) => /* @__PURE__ */ jsx(Select.Option, { value: p, children: p }, p))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: selectedPackage || void 0,
+                  onChange: (value) => setSelectedPackage(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Packages",
+                  className: "w-full",
+                  allowClear: true,
+                  children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: selectedVersion || void 0,
+                  onChange: (value) => setSelectedVersion(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Versions",
+                  className: "w-full",
+                  disabled: !selectedPackage,
+                  allowClear: true,
+                  children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 p-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name Keyword (Fuzzy Match)" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  prefix: /* @__PURE__ */ jsx(Search, { className: "text-zinc-400 h-3.5 w-3.5" }),
+                  className: "text-xs",
+                  placeholder: "e.g., react / axios",
+                  value: searchText,
+                  onChange: (val) => setSearchText(val)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-end justify-end gap-2 text-xs text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
+              "Currently Matched Versions:",
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: filteredVersions.length })
+            ] }) })
+          ] }),
+          !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: "py-4 text-xs text-zinc-500", children: "Parsing shared dependency data..." }),
+          loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: "py-3 text-xs text-red-600", children: [
+            "Failed to load shared dependency data:",
+            " ",
+            errorMessage != null ? errorMessage : "Unknown Error"
+          ] }),
+          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ jsx("div", { className: "py-3 text-xs text-zinc-500", children: "No matching shared dependency versions under current filter conditions, try relaxing the filter conditions." }),
+          hasData && Object.keys(tree).length > 0 && /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", style: { border: 0 }, children: /* @__PURE__ */ jsx(Collapse, { children: Object.entries(tree).map(([provider, scopes]) => /* @__PURE__ */ jsx(
+            Collapse.Item,
+            {
+              name: provider,
+              header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1 text-left", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
+                  /* @__PURE__ */ jsx(Server, { className: "h-3.5 w-3.5 text-zinc-500" }),
+                  /* @__PURE__ */ jsx("span", { children: provider })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-[10px] text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
+                  "Scope Count: ",
+                  Object.keys(scopes).length
+                ] }) })
+              ] }),
+              children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(scopes).map(([scopeName, packages]) => {
+                const list = Object.values(packages).flat();
+                return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-zinc-600", children: [
+                    /* @__PURE__ */ jsx(Layers, { className: "h-3 w-3 text-zinc-500" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Scope: ",
+                      scopeName
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-zinc-200 bg-zinc-50/40", children: /* @__PURE__ */ jsx(
+                    Table,
+                    {
+                      columns,
+                      data: list,
+                      pagination: false,
+                      rowKey: "id",
+                      border: false,
+                      size: "small"
+                    }
+                  ) })
+                ] }, scopeName);
+              }) })
+            },
+            provider
+          )) }) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+var SharedDepsExplorer_default = SharedDepsExplorer;
+export {
+  SharedDepsExplorer_default as default
+};