@fragments-sdk/cli 0.7.17 → 0.8.0

package/dist/{chunk-QLTLLQBI.js → chunk-2JIKCJX3.js}

@@ -4,7 +4,7 @@ import {
   generateRegistry,
   loadFragmentFile,
   parseFragmentFile
-} from "./chunk-57OW43NL.js";
+} from "./chunk-CJEGT3WD.js";
 import {
   discoverBlockFiles,
   discoverComponentFiles,
@@ -23,12 +23,14 @@ import {
   getGrade
 } from "./chunk-YMPGYEWK.js";
 import {
+  classifyComplexity,
   compileBlock,
-  parseTokenFile
-} from "./chunk-WLXFE6XW.js";
+  parseTokenFile,
+  resolvePerformanceConfig
+} from "./chunk-NGIMCIK2.js";
 import {
   fragmentDefinitionSchema
-} from "./chunk-7CRC46HV.js";
+} from "./chunk-GOVI6COW.js";
 import {
   BRAND,
   DEFAULTS
@@ -598,8 +600,8 @@ async function validateSnippets(config, configDir, options = {}) {
 
 // src/build.ts
 import { readFile as readFile2, writeFile, mkdir } from "fs/promises";
-import { resolve as resolve4, join as join4 } from "path";
-import { existsSync as existsSync5 } from "fs";
+import { resolve as resolve5, join as join5 } from "path";
+import { existsSync as existsSync6 } from "fs";
 
 // src/core/token-resolver.ts
 import { resolve, dirname, basename } from "path";
@@ -1384,6 +1386,252 @@ function findComponentIndex(componentDir, componentName) {
 
 // src/build.ts
 import { serializeGraph } from "@fragments-sdk/context/graph";
+
+// src/core/bundle-measurer.ts
+import { build } from "esbuild";
+import { gzipSync } from "zlib";
+import { resolve as resolve4, dirname as dirname3, join as join4, basename as basename3 } from "path";
+import { existsSync as existsSync5 } from "fs";
+function resolveEntryPoint(fragmentFilePath, configDir) {
+  const absPath = resolve4(configDir, fragmentFilePath);
+  const dir = dirname3(absPath);
+  const candidates = ["index.tsx", "index.ts", "index.jsx", "index.js"];
+  for (const candidate of candidates) {
+    const path = join4(dir, candidate);
+    if (existsSync5(path)) return path;
+  }
+  return null;
+}
+function labelForPath(filePath) {
+  const lastNmIdx = filePath.lastIndexOf("node_modules/");
+  if (lastNmIdx >= 0) {
+    const afterNm = filePath.slice(lastNmIdx + "node_modules/".length);
+    if (afterNm.startsWith("@")) {
+      const parts = afterNm.split("/");
+      return parts.slice(0, 2).join("/");
+    }
+    return afterNm.split("/")[0];
+  }
+  const componentsIdx = filePath.indexOf("components/");
+  if (componentsIdx >= 0) {
+    const afterComponents = filePath.slice(componentsIdx + "components/".length);
+    const componentName = afterComponents.split("/")[0];
+    return componentName;
+  }
+  const srcIdx = filePath.indexOf("src/");
+  if (srcIdx >= 0) return filePath.slice(srcIdx);
+  return filePath;
+}
+function groupImportsByDirectDep(metafile, entryPoint) {
+  const inputs = metafile.inputs;
+  const outputKey = Object.keys(metafile.outputs)[0];
+  const outputMeta = outputKey ? metafile.outputs[outputKey] : void 0;
+  if (!outputMeta?.inputs) return [];
+  const bytesMap = /* @__PURE__ */ new Map();
+  for (const [path, info] of Object.entries(outputMeta.inputs)) {
+    if (info.bytesInOutput > 0) {
+      bytesMap.set(path, info.bytesInOutput);
+    }
+  }
+  let entryKey;
+  for (const key of Object.keys(inputs)) {
+    if (key === entryPoint || entryPoint.endsWith(key) || key.endsWith(basename3(entryPoint))) {
+      const entryDir = dirname3(entryPoint);
+      if (key.includes(basename3(entryDir))) {
+        entryKey = key;
+        break;
+      }
+    }
+  }
+  if (!entryKey) {
+    const entryBasename = basename3(dirname3(entryPoint));
+    for (const key of Object.keys(inputs)) {
+      if (key.includes(`/${entryBasename}/index.`)) {
+        entryKey = key;
+        break;
+      }
+    }
+  }
+  if (!entryKey || !inputs[entryKey]) {
+    return groupByPackage(bytesMap);
+  }
+  const directImports = inputs[entryKey].imports.map((imp) => imp.path).filter((p) => inputs[p]);
+  const claimed = /* @__PURE__ */ new Set();
+  claimed.add(entryKey);
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const directPath of directImports) {
+    if (claimed.has(directPath)) continue;
+    const queue = [directPath];
+    const reachable = /* @__PURE__ */ new Set();
+    while (queue.length > 0) {
+      const current = queue.pop();
+      if (reachable.has(current) || claimed.has(current)) continue;
+      reachable.add(current);
+      claimed.add(current);
+      const entry = inputs[current];
+      if (entry?.imports) {
+        for (const imp of entry.imports) {
+          if (inputs[imp.path] && !claimed.has(imp.path)) {
+            queue.push(imp.path);
+          }
+        }
+      }
+    }
+    let totalBytes = 0;
+    for (const path of reachable) {
+      totalBytes += bytesMap.get(path) ?? 0;
+    }
+    if (totalBytes > 0) {
+      const label = labelForPath(directPath);
+      const existing = groupMap.get(label);
+      if (existing) {
+        existing.bytes += totalBytes;
+      } else {
+        const entry = { path: label, bytes: totalBytes };
+        groupMap.set(label, entry);
+      }
+    }
+  }
+  const entryLabel = labelForPath(entryKey);
+  const selfLabel = entryLabel + " (self)";
+  let selfBytes = bytesMap.get(entryKey) ?? 0;
+  const siblingGroup = groupMap.get(entryLabel);
+  if (siblingGroup) {
+    selfBytes += siblingGroup.bytes;
+    groupMap.delete(entryLabel);
+  }
+  if (selfBytes > 0) {
+    groupMap.set(selfLabel, { path: selfLabel, bytes: selfBytes });
+  }
+  let unclaimedBytes = 0;
+  for (const [path, bytes] of bytesMap) {
+    if (!claimed.has(path)) unclaimedBytes += bytes;
+  }
+  if (unclaimedBytes > 0) {
+    groupMap.set("(other)", { path: "(other)", bytes: unclaimedBytes });
+  }
+  return [...groupMap.values()].sort((a, b) => b.bytes - a.bytes);
+}
+function groupByPackage(bytesMap) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [path, bytes] of bytesMap) {
+    const label = labelForPath(path);
+    const key = label.includes("/") && !label.startsWith("components/") ? label.split("/").slice(0, label.startsWith("@") ? 2 : 1).join("/") : label;
+    groups.set(key, (groups.get(key) ?? 0) + bytes);
+  }
+  return [...groups.entries()].map(([path, bytes]) => ({ path, bytes })).sort((a, b) => b.bytes - a.bytes);
+}
+async function measureSingleComponent(entryPoint, name) {
+  const result = await build({
+    entryPoints: [entryPoint],
+    bundle: true,
+    write: false,
+    minify: true,
+    metafile: true,
+    format: "esm",
+    target: "es2020",
+    platform: "browser",
+    treeShaking: true,
+    external: [
+      "react",
+      "react-dom",
+      "react/jsx-runtime",
+      "react/jsx-dev-runtime",
+      // Optional peer deps — excluded from measurement
+      "recharts",
+      "shiki",
+      "react-day-picker",
+      "@tanstack/react-table",
+      "date-fns",
+      "@base-ui-components/*",
+      "@base-ui/react/*"
+    ],
+    loader: {
+      ".scss": "empty",
+      ".css": "empty",
+      ".svg": "empty",
+      ".png": "empty",
+      ".jpg": "empty",
+      ".gif": "empty",
+      ".woff": "empty",
+      ".woff2": "empty",
+      ".ttf": "empty",
+      ".eot": "empty"
+    },
+    logLevel: "silent"
+  });
+  const output = result.outputFiles[0];
+  const rawBytes = output.contents.byteLength;
+  const gzipBytes = gzipSync(output.contents).byteLength;
+  const imports = result.metafile ? groupImportsByDirectDep(result.metafile, entryPoint) : void 0;
+  return { name, rawBytes, gzipBytes, imports };
+}
+async function measureBundleSizes(fragments, configDir, options = {}) {
+  const concurrency = options.concurrency ?? 4;
+  const measurements = /* @__PURE__ */ new Map();
+  const errors = [];
+  const start = Date.now();
+  const entries = [];
+  for (const [name, fragment] of Object.entries(fragments)) {
+    const entryPoint = resolveEntryPoint(fragment.filePath, configDir);
+    if (entryPoint) {
+      entries.push({ name, entryPoint });
+    } else {
+      errors.push({
+        name,
+        error: `Could not resolve entry point from ${fragment.filePath}`
+      });
+    }
+  }
+  let completed = 0;
+  for (let i = 0; i < entries.length; i += concurrency) {
+    const batch = entries.slice(i, i + concurrency);
+    const results = await Promise.allSettled(
+      batch.map(
+        ({ name, entryPoint }) => measureSingleComponent(entryPoint, name)
+      )
+    );
+    for (let j = 0; j < results.length; j++) {
+      const result = results[j];
+      const { name } = batch[j];
+      completed++;
+      if (result.status === "fulfilled") {
+        measurements.set(name, result.value);
+      } else {
+        errors.push({
+          name,
+          error: result.reason instanceof Error ? result.reason.message : String(result.reason)
+        });
+      }
+      options.onProgress?.(completed, entries.length, name);
+    }
+  }
+  return {
+    measurements,
+    errors,
+    elapsed: Date.now() - start
+  };
+}
+function toPerformanceData(measurement, config, contractBudget) {
+  const budget = contractBudget ?? config.budgets.bundleSize;
+  const budgetPercent = Math.round(measurement.gzipBytes / budget * 100);
+  const imports = measurement.imports?.slice(0, 10).map((imp) => ({
+    path: imp.path,
+    bytes: imp.bytes,
+    percent: Math.round(imp.bytes / measurement.rawBytes * 100)
+  }));
+  return {
+    bundleSize: measurement.gzipBytes,
+    rawSize: measurement.rawBytes,
+    complexity: classifyComplexity(measurement.gzipBytes),
+    budgetPercent,
+    overBudget: budgetPercent > 100,
+    measuredAt: (/* @__PURE__ */ new Date()).toISOString(),
+    ...imports && imports.length > 0 ? { imports } : {}
+  };
+}
+
+// src/build.ts
 function normalizeParsedProps(parsedProps) {
   return Object.fromEntries(
     Object.entries(parsedProps).map(([name, prop]) => [
@@ -1593,7 +1841,7 @@ async function buildFragments(config, configDir) {
           (t) => t.value && (t.value.includes("#{") || t.value.includes("$"))
         );
         if (unresolved.length > 0 && tokenFiles.length > 0) {
-          const tokensDir = resolve4(configDir, tokenFiles[0].relativePath, "..");
+          const tokensDir = resolve5(configDir, tokenFiles[0].relativePath, "..");
           const sassResolved = await resolveTokensWithSass(
             unresolved,
             tokensDir
@@ -1615,15 +1863,15 @@ async function buildFragments(config, configDir) {
   } catch {
   }
   let packageName;
-  const pkgJsonPath = resolve4(configDir, "package.json");
-  if (existsSync5(pkgJsonPath)) {
+  const pkgJsonPath = resolve5(configDir, "package.json");
+  if (existsSync6(pkgJsonPath)) {
     try {
       const pkg = JSON.parse(await readFile2(pkgJsonPath, "utf-8"));
       if (pkg.name) packageName = pkg.name;
     } catch {
     }
   }
-  const componentDir = resolve4(configDir, "src", "components");
+  const componentDir = resolve5(configDir, "src", "components");
   let graphData;
   try {
     const graphResult = await buildComponentGraph(fragments, blocks, componentDir);
@@ -1654,6 +1902,43 @@ async function buildFragments(config, configDir) {
       warning: `Graph extraction failed: ${error instanceof Error ? error.message : String(error)}`
     });
   }
+  let performanceSummary;
+  if (config.performance) {
+    try {
+      const perfConfig = resolvePerformanceConfig(config.performance);
+      const perfResult = await measureBundleSizes(fragments, configDir, {
+        perfConfig
+      });
+      const tiers = { lightweight: 0, moderate: 0, heavy: 0 };
+      let overBudgetCount = 0;
+      for (const [name, measurement] of perfResult.measurements) {
+        const fragment = fragments[name];
+        const contractBudget = fragment?.contract?.performanceBudget;
+        const perfData = toPerformanceData(measurement, perfConfig, contractBudget);
+        fragment.performance = perfData;
+        tiers[perfData.complexity]++;
+        if (perfData.overBudget) overBudgetCount++;
+      }
+      performanceSummary = {
+        preset: perfConfig.preset,
+        budget: perfConfig.budgets.bundleSize,
+        total: perfResult.measurements.size,
+        overBudget: overBudgetCount,
+        tiers
+      };
+      for (const err of perfResult.errors) {
+        warnings.push({
+          file: "performance",
+          warning: `Could not measure ${err.name}: ${err.error}`
+        });
+      }
+    } catch (error) {
+      warnings.push({
+        file: "performance",
+        warning: `Performance measurement failed: ${error instanceof Error ? error.message : String(error)}`
+      });
+    }
+  }
   const output = {
     version: "1.0.0",
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -1661,9 +1946,10 @@ async function buildFragments(config, configDir) {
     fragments,
     ...Object.keys(blocks).length > 0 && { blocks },
     ...tokens && { tokens },
-    ...graphData && { graph: graphData }
+    ...graphData && { graph: graphData },
+    ...performanceSummary && { performanceSummary }
   };
-  const outputPath = resolve4(configDir, config.outFile ?? BRAND.outFile);
+  const outputPath = resolve5(configDir, config.outFile ?? BRAND.outFile);
   await writeFile(outputPath, JSON.stringify(output));
   return {
     success: errors.length === 0,
@@ -1674,8 +1960,8 @@ async function buildFragments(config, configDir) {
   };
 }
 async function buildFragmentsDir(config, configDir) {
-  const fragmentsDir = join4(configDir, BRAND.dataDir);
-  const componentsDir = join4(fragmentsDir, BRAND.componentsDir);
+  const fragmentsDir = join5(configDir, BRAND.dataDir);
+  const componentsDir = join5(fragmentsDir, BRAND.componentsDir);
   await mkdir(fragmentsDir, { recursive: true });
   await mkdir(componentsDir, { recursive: true });
   const registryResult = await generateRegistry({
@@ -1687,9 +1973,9 @@ async function buildFragmentsDir(config, configDir) {
   });
   const errors = [...registryResult.errors];
   const warnings = [...registryResult.warnings];
-  const indexPath = join4(fragmentsDir, "index.json");
+  const indexPath = join5(fragmentsDir, "index.json");
   await writeFile(indexPath, JSON.stringify(registryResult.index, null, 2));
-  const registryPath = join4(fragmentsDir, BRAND.registryFile);
+  const registryPath = join5(fragmentsDir, BRAND.registryFile);
   await writeFile(registryPath, JSON.stringify(registryResult.registry, null, 2));
   const contextResult = generateContextMd(registryResult.registry, {
     format: "markdown",
@@ -1701,7 +1987,7 @@ async function buildFragmentsDir(config, configDir) {
       code: false
     }
   });
-  const contextPath = join4(fragmentsDir, BRAND.contextFile);
+  const contextPath = join5(fragmentsDir, BRAND.contextFile);
   await writeFile(contextPath, contextResult.content);
   return {
     success: errors.length === 0,
@@ -2054,9 +2340,9 @@ ${BRAND.name} Diff
 }
 
 // src/analyze.ts
-import { existsSync as existsSync6 } from "fs";
+import { existsSync as existsSync7 } from "fs";
 import { readFile as readFile3, writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
-import { join as join5, dirname as dirname3 } from "path";
+import { join as join6, dirname as dirname4 } from "path";
 import pc3 from "picocolors";
 async function runAnalyzeCommand(config, configDir, options = {}) {
   const format = options.format ?? "html";
@@ -2064,8 +2350,8 @@ async function runAnalyzeCommand(config, configDir, options = {}) {
   console.log(pc3.cyan(`
 ${BRAND.name} Analyzer
 `));
-  const fragmentsPath = join5(configDir, config.outFile ?? "fragments.json");
-  if (!existsSync6(fragmentsPath)) {
+  const fragmentsPath = join6(configDir, config.outFile ?? "fragments.json");
+  if (!existsSync7(fragmentsPath)) {
     console.log(pc3.red(`\u2717 No fragments.json found. Run \`${BRAND.cliCommand} build\` first.
 `));
     return {
@@ -2081,7 +2367,7 @@ ${BRAND.name} Analyzer
   let outputPath;
   if (format === "html" || format === "json") {
     outputPath = options.output ?? getDefaultOutputPath(format, configDir);
-    await mkdir2(dirname3(outputPath), { recursive: true });
+    await mkdir2(dirname4(outputPath), { recursive: true });
     if (format === "html") {
       const html = generateHtmlReport(analytics);
       await writeFile2(outputPath, html);
@@ -2160,7 +2446,7 @@ function colorizeScore(score) {
 }
 function getDefaultOutputPath(format, configDir) {
   const filename = format === "html" ? "fragments-report.html" : "fragments-report.json";
-  return join5(configDir, filename);
+  return join6(configDir, filename);
 }
 async function openInBrowser(path) {
   const { platform } = await import("os");
@@ -2223,10 +2509,12 @@ export {
   validateCoverage,
   validateAll,
   validateSnippets,
+  measureBundleSizes,
+  toPerformanceData,
   buildFragments,
   buildFragmentsDir,
   runScreenshotCommand,
   runDiffCommand,
   runAnalyzeCommand
 };
-//# sourceMappingURL=chunk-QLTLLQBI.js.map
+//# sourceMappingURL=chunk-2JIKCJX3.js.map