@module-federation/devtools 0.22.0 → 0.23.0

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

@@ -0,0 +1,467 @@
+.container_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 12px;
+  max-width: 1024px;
+}
+
+@media (min-width: 768px) {
+  .container_967de {
+    padding: 24px 16px;
+  }
+}
+.heroSection_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.heroSubtitle_967de {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: #71717a;
+  margin: 0;
+}
+
+.heroTitle_967de {
+  font-size: 30px;
+  line-height: 36px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #18181b;
+  margin: 0;
+}
+
+.statsGrid_967de {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 16px;
+}
+
+@media (min-width: 640px) {
+  .statsGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .statsGrid_967de {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.card_967de {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #e4e4e7;
+  background-color: white;
+}
+
+.cardWithPadding_967de {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #e4e4e7;
+  background-color: white;
+  padding: 16px;
+}
+
+.cardHeader_967de {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 8px;
+}
+
+.statSpace_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.statLabel_967de {
+  font-size: 14px;
+  color: #71717a;
+}
+
+.statValue_967de {
+  font-size: 24px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #18181b;
+}
+
+.icon_967de {
+  height: 20px;
+  width: 20px;
+  color: #a1a1aa;
+}
+
+.iconSmall_967de {
+  height: 12px;
+  width: 12px;
+}
+
+.iconMedium_967de {
+  height: 14px;
+  width: 14px;
+  color: #71717a;
+}
+
+.statDescription_967de {
+  font-size: 12px;
+  color: #71717a;
+  margin: 0;
+}
+
+.statSubtext_967de {
+  font-size: 16px;
+  color: #a1a1aa;
+  font-weight: 400;
+}
+
+.cardFooter_967de {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #71717a;
+  white-space: nowrap;
+}
+
+.truncate_967de {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mr2_967de {
+  margin-right: 8px;
+}
+
+.badgeGroup_967de {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.statusTags_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.tagRow_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tagContent_967de {
+  display: flex;
+  align-items: center;
+}
+
+.tagValue_967de {
+  font-weight: 600;
+  color: #18181b;
+  margin-left: 4px;
+}
+
+.mr1_967de {
+  margin-right: 4px;
+}
+
+.rightPanels_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panelStack_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.cardTitle_967de {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlsGrid_967de {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 8px;
+}
+
+@media (min-width: 768px) {
+  .controlsGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.inputGroup_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.inputLabel_967de {
+  font-size: 12px;
+  color: #71717a;
+}
+
+.fullWidth_967de {
+  width: 100%;
+}
+
+.resultBox_967de {
+  border-radius: 6px;
+  border: 1px dashed #e4e4e7;
+  background-color: var(--color-bg-1, #f9fafb) !important;
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.filterGrid_967de {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+@media (min-width: 768px) {
+  .filterGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .filterGrid_967de {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.padding2_967de {
+  padding: 8px;
+}
+
+.searchGrid_967de {
+  display: grid;
+  gap: 12px;
+  padding: 8px;
+}
+
+@media (min-width: 768px) {
+  .searchGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.searchInput_967de {
+  font-size: 12px;
+}
+
+.matchCount_967de {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.matchValue_967de {
+  font-weight: 600;
+  color: #18181b;
+  margin-left: 4px;
+}
+
+.loadingText_967de {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.errorText_967de {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: 12px;
+  color: #dc2626;
+}
+
+.noMatchText_967de {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.treeContainer_967de {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.collapseWrapper_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 0;
+}
+
+.providerHeader_967de {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  text-align: left;
+}
+
+.providerTitle_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.providerMeta_967de {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 10px;
+  color: #71717a;
+}
+
+.scopeList_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.scopeItem_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.scopeHeader_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #52525b;
+}
+
+.tableContainer_967de {
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid #e4e4e7;
+  background-color: rgba(249, 250, 251, 0.4);
+}
+.tableContainer_967de .arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
+  background-color: var(--color-fill-2, #f2f3f5) !important;
+}
+.arco-theme-dark .tableContainer_967de .arco-table-hover
+        .arco-table-tr:not(.arco-table-empty-row):hover
+        .arco-table-td:not(.arco-table-col-fixed-left):not(
+          .arco-table-col-fixed-right
+        ) {
+  background-color: var(--color-bg-4) !important;
+}
+
+.cellCol_967de {
+  display: flex;
+  flex-direction: column;
+}
+
+.packageName_967de {
+  word-break: break-all;
+  font-family: monospace;
+  font-size: 11px;
+  color: var(--color-neutral-10, #27272a) !important;
+}
+
+.version_967de {
+  margin-top: 4px;
+  font-size: 11px;
+  color: #71717a;
+}
+
+.cellColGap_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.scopeText_967de {
+  font-size: 11px;
+  color: #71717a;
+}
+
+.tagContainer_967de {
+  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.configTags_967de {
+  margin-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-size: 10px;
+  color: #71717a;
+}
+
+.scale90_967de {
+  transform: scale(0.9);
+  transform-origin: left;
+}
+
+.popoverContent_967de {
+  width: 288px;
+}
+
+.popoverTitle_967de {
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.consumerList_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: #374151;
+  padding-left: 0;
+  list-style: none;
+  margin: 0;
+}
+
+.consumerItem_967de {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dot_967de {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background-color: #10b981;
+}
+
+.btnContent_967de {
+  display: flex;
+  align-items: center;
+}

package/dist/es/component/SharedDepsExplorer/share-utils.js

@@ -0,0 +1,206 @@
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function computeLoadedStatus(entry) {
+  if (entry.loaded === true) {
+    return "loaded";
+  }
+  if (entry.loading) {
+    return "loading";
+  }
+  return "not-loaded";
+}
+function computeReuseStatus(entry) {
+  const useIn = Array.isArray(entry.useIn) ? entry.useIn : [];
+  const { from } = entry;
+  const reused = useIn.some((consumer) => consumer && consumer !== from);
+  return reused;
+}
+function normalizeEntry({
+  provider,
+  scope,
+  packageName,
+  versionKey,
+  entry
+}) {
+  var _a;
+  if (!isRecord(entry)) {
+    return null;
+  }
+  const sharedEntry = entry;
+  const loadedStatus = computeLoadedStatus(sharedEntry);
+  const reuseStatus = computeReuseStatus(sharedEntry);
+  const useIn = Array.isArray(sharedEntry.useIn) ? sharedEntry.useIn : [];
+  return {
+    id: `${provider}::${scope}::${packageName}::${versionKey}`,
+    provider,
+    scope,
+    packageName,
+    version: sharedEntry.version || versionKey,
+    from: sharedEntry.from,
+    useIn,
+    shareConfig: (_a = sharedEntry.shareConfig) != null ? _a : {},
+    strategy: sharedEntry.strategy,
+    loaded: sharedEntry.loaded,
+    loading: sharedEntry.loading,
+    loadedStatus,
+    reuseStatus
+  };
+}
+function normalizeShareData(raw) {
+  if (!raw || !isRecord(raw)) {
+    return [];
+  }
+  const items = [];
+  Object.entries(raw).forEach(([topKey, topValue]) => {
+    if (!isRecord(topValue)) {
+      return;
+    }
+    if (topKey === "default") {
+      const provider2 = "default";
+      const scope = "default";
+      const packagesObj = topValue;
+      Object.entries(packagesObj).forEach(([pkgName, versions]) => {
+        if (pkgName === "version" || !isRecord(versions)) {
+          return;
+        }
+        Object.entries(versions).forEach(([versionKey, entry]) => {
+          const normalized = normalizeEntry({
+            provider: provider2,
+            scope,
+            packageName: pkgName,
+            versionKey,
+            entry
+          });
+          if (normalized) {
+            items.push(normalized);
+          }
+        });
+      });
+      return;
+    }
+    const provider = topKey;
+    const scopesObj = topValue;
+    Object.entries(scopesObj).forEach(([scopeName, scopeValue]) => {
+      if (scopeName === "version" || !isRecord(scopeValue)) {
+        return;
+      }
+      const packagesObj = scopeValue;
+      Object.entries(packagesObj).forEach(([pkgName, versions]) => {
+        if (pkgName === "version" || !isRecord(versions)) {
+          return;
+        }
+        Object.entries(versions).forEach(([versionKey, entry]) => {
+          const normalized = normalizeEntry({
+            provider,
+            scope: scopeName,
+            packageName: pkgName,
+            versionKey,
+            entry
+          });
+          if (normalized) {
+            items.push(normalized);
+          }
+        });
+      });
+    });
+  });
+  return items;
+}
+function computeShareStats(versions) {
+  const providerSet = /* @__PURE__ */ new Set();
+  const scopeSet = /* @__PURE__ */ new Set();
+  const packageSet = /* @__PURE__ */ new Set();
+  let loadedCount = 0;
+  let reusedCount = 0;
+  versions.forEach((v) => {
+    providerSet.add(v.provider);
+    scopeSet.add(v.scope);
+    packageSet.add(v.packageName);
+    if (v.loadedStatus === "loaded") {
+      loadedCount += 1;
+    }
+    if (v.reuseStatus) {
+      reusedCount += 1;
+    }
+  });
+  return {
+    totalProviders: providerSet.size,
+    totalScopes: scopeSet.size,
+    totalPackages: packageSet.size,
+    totalVersions: versions.length,
+    loadedCount,
+    reusedCount
+  };
+}
+function groupByProviderScopePackage(versions) {
+  const tree = {};
+  versions.forEach((v) => {
+    if (!tree[v.provider]) {
+      tree[v.provider] = {};
+    }
+    if (!tree[v.provider][v.scope]) {
+      tree[v.provider][v.scope] = {};
+    }
+    if (!tree[v.provider][v.scope][v.packageName]) {
+      tree[v.provider][v.scope][v.packageName] = [];
+    }
+    tree[v.provider][v.scope][v.packageName].push(v);
+  });
+  return tree;
+}
+function getFilterOptions(versions) {
+  const providerSet = /* @__PURE__ */ new Set();
+  const scopeSet = /* @__PURE__ */ new Set();
+  const packageSet = /* @__PURE__ */ new Set();
+  const versionSet = /* @__PURE__ */ new Set();
+  versions.forEach((v) => {
+    providerSet.add(v.provider);
+    scopeSet.add(v.scope);
+    packageSet.add(v.packageName);
+    versionSet.add(v.version);
+  });
+  return {
+    providers: Array.from(providerSet).sort(),
+    scopes: Array.from(scopeSet).sort(),
+    packages: Array.from(packageSet).sort(),
+    versions: Array.from(versionSet).sort()
+  };
+}
+function findPackageProvider(versions, packageName, version) {
+  var _a;
+  const candidates = versions.filter(
+    (v) => v.packageName === packageName && (!version || v.version === version)
+  );
+  if (!candidates.length) {
+    return null;
+  }
+  const providers = Array.from(new Set(candidates.map((v) => v.from))).sort();
+  const hasLoaded = candidates.some((v) => v.loadedStatus === "loaded");
+  const hasLoading = !hasLoaded && candidates.some((v) => v.loadedStatus === "loading");
+  let status = "not-loaded";
+  if (hasLoaded) {
+    status = "loaded";
+  } else if (hasLoading) {
+    status = "loading";
+  }
+  return {
+    packageName,
+    version: version || ((_a = candidates[0]) == null ? void 0 : _a.version),
+    providers,
+    status
+  };
+}
+function getReusedVersions(versions) {
+  return versions.filter((v) => v.reuseStatus === true);
+}
+export {
+  computeLoadedStatus,
+  computeReuseStatus,
+  computeShareStats,
+  findPackageProvider,
+  getFilterOptions,
+  getReusedVersions,
+  groupByProviderScopePackage,
+  normalizeShareData
+};

package/dist/es/component/ThemeToggle.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@arco-design/web-react";
+import { IconMoon, IconSun } from "@arco-design/web-react/icon";
+import styles from "./ThemeToggle.module";
+const ThemeToggle = ({ theme, onToggle }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: styles.themeToggle,
+      size: "default",
+      onClick: onToggle,
+      icon: theme === "dark" ? /* @__PURE__ */ jsx(IconSun, {}) : /* @__PURE__ */ jsx(IconMoon, {})
+    }
+  );
+};
+var ThemeToggle_default = ThemeToggle;
+export {
+  ThemeToggle_default as default
+};

package/dist/es/component/ThemeToggle.module.js

@@ -0,0 +1,5 @@
+import "./ThemeToggle_module.css";
+var ThemeToggle_module_default = { "themeToggle": "themeToggle_2452c" };
+export {
+  ThemeToggle_module_default as default
+};

package/dist/es/component/ThemeToggle_module.css

@@ -0,0 +1,12 @@
+.themeToggle_2452c {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  margin: 0 6px !important;
+  padding: 0 !important;
+}
+.themeToggle_2452c:hover {
+  background-color: var(--color-fill-3, #fafafa) !important;
+}
+.arco-theme-dark .themeToggle_2452c :hover {
+  background-color: var(--color-bg-1) !important;
+}