@pathscale/rsbuild-plugin-ui-css-purge 0.9.2 → 0.9.4

package/src/generate-manifest.ts

@@ -1,223 +1,468 @@
 /**
- * Lib-side database generator.
+ * Lib-side purge database generator.
  *
- * Reads all `*.classes.ts` files from @pathscale/ui's component tree
- * and produces a `purge-manifest.json` that the consumer-side plugin uses
- * to build safelists.
+ * Reads all `*.classes.ts` files from @pathscale/ui's component tree and
+ * produces a versioned `purge-manifest.json` database consumed by the postbuild
+ * purge script.
  *
  * Usage:  bun run src/generate-manifest.ts <path-to-ui-src/components>
  * Output: purge-manifest.json in cwd (or pass --out <path>)
  */
 
 import { Glob } from "bun";
-import path from "path";
+import postcss from "postcss";
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
 type ClassValue = string | readonly string[];
 
-interface ComponentManifest {
-  classes: {
-    always: string[];
-    byProp: Record<string, string[] | Record<string, string[]>>;
-  };
-  attrs?: Record<string, Record<string, string>>;
-  deps?: string[];
+interface ComponentPurgeRecord {
+	key: string;
+	component: string;
+	part?: string;
+	classes: {
+		always: string[];
+		byProp: Record<string, string[] | Record<string, string[]>>;
+	};
+	attrs?: Record<string, Record<string, string>>;
+	attributeSelectors: string[];
+	selectors: string[];
+	cssVars: {
+		declared: string[];
+		referenced: string[];
+	};
+	keyframes: {
+		declared: string[];
+		referenced: string[];
+	};
+	deps?: string[];
 }
 
-type PurgeManifest = Record<string, ComponentManifest>;
+interface PurgeDatabaseV2 {
+	version: 2;
+	components: Record<string, ComponentPurgeRecord>;
+	shared: {
+		selectors: { selector: string; components: string[] }[];
+		cssVars: Record<string, { declaredBy: string[]; referencedBy: string[] }>;
+		keyframes: Record<string, { declaredBy: string[]; referencedBy: string[] }>;
+	};
+}
+
+interface ClassWalkResult {
+	classes: ComponentPurgeRecord["classes"];
+	attrs?: Record<string, Record<string, string>>;
+}
+
+interface CssFacts {
+	selectors: string[];
+	attributeSelectors: string[];
+	cssVars: {
+		declared: string[];
+		referenced: string[];
+	};
+	keyframes: {
+		declared: string[];
+		referenced: string[];
+	};
+}
 
 // ── Tailwind utility filter ───────────────────────────────────────────────────
 
-/** Matches Tailwind utility class prefixes — these should NOT appear in the manifest. */
-const twPattern = /^(-?)(flex|grid|gap|items|justify|self|place|order|col|row|auto|basis|grow|shrink|space|overflow|relative|absolute|fixed|sticky|static|block|inline|hidden|visible|invisible|z|inset|top|right|bottom|left|float|clear|isolate|object|aspect|container|columns|break|box|display|table|caption|border|rounded|outline|ring|shadow|opacity|mix|bg|from|via|to|text|font|leading|tracking|indent|align|whitespace|word|hyphens|content|list|decoration|underline|overline|line|no-underline|uppercase|lowercase|capitalize|normal|italic|not-italic|antialiased|subpixel|truncate|w|h|min|max|p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|size|scroll|snap|touch|select|resize|cursor|caret|pointer|will|appearance|accent|transition|duration|delay|ease|animate|scale|rotate|translate|skew|transform|origin|filter|blur|brightness|contrast|drop|grayscale|hue|invert|saturate|sepia|backdrop|sr|forced|print|motion|lg|md|sm|xl|2xl|dark|hover|focus|active|disabled|first|last|odd|even|group|peer)($|[-:\[.])/;
+/** Matches Tailwind utility class prefixes — these should NOT appear as owned component classes. */
+const twPattern =
+	/^(-?)(flex|grid|gap|items|justify|self|place|order|col|row|auto|basis|grow|shrink|space|overflow|relative|absolute|fixed|sticky|static|block|inline|hidden|visible|invisible|z|inset|top|right|bottom|left|float|clear|isolate|object|aspect|container|columns|break|box|display|table|caption|border|rounded|outline|ring|shadow|opacity|mix|bg|from|via|to|text|font|leading|tracking|indent|align|whitespace|word|hyphens|content|list|decoration|underline|overline|line|no-underline|uppercase|lowercase|capitalize|normal|italic|not-italic|antialiased|subpixel|truncate|w|h|min|max|p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|size|scroll|snap|touch|select|resize|cursor|caret|pointer|will|appearance|accent|transition|duration|delay|ease|animate|scale|rotate|translate|skew|transform|origin|filter|blur|brightness|contrast|drop|grayscale|hue|invert|saturate|sepia|backdrop|sr|forced|print|motion|lg|md|sm|xl|2xl|dark|hover|focus|active|disabled|first|last|odd|even|group|peer)($|[-:\[.])/;
 
 function isTailwindUtility(cls: string): boolean {
-  return twPattern.test(cls);
+	return twPattern.test(cls);
 }
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
-/** Flatten a class value (string, string[], or nested object) into an array of individual class names, filtering out Tailwind utilities. */
-function flattenClasses(val: ClassValue): string[] {
-  let classes: string[];
-  if (typeof val === "string") {
-    classes = val.split(/\s+/).filter(Boolean);
-  } else if (Array.isArray(val)) {
-    classes = val.flatMap((s) => typeof s === "string" ? s.split(/\s+/).filter(Boolean) : flattenClasses(s));
-  } else if (val !== null && typeof val === "object") {
-    classes = Object.values(val).flatMap((v) => flattenClasses(v as ClassValue));
-  } else {
-    return [];
-  }
-  return classes.filter((cls) => !isTailwindUtility(cls));
-}
-
-/** Check if a value is a plain object (not array, not null). */
+/** Flatten a class value into individual non-Tailwind component class names. */
+function flattenClasses(val: unknown): string[] {
+	let classes: string[];
+	if (typeof val === "string") {
+		classes = val.split(/\s+/).filter(Boolean);
+	} else if (Array.isArray(val)) {
+		classes = val.flatMap((s) => flattenClasses(s));
+	} else if (val !== null && typeof val === "object") {
+		classes = Object.values(val).flatMap((v) => flattenClasses(v));
+	} else {
+		return [];
+	}
+	return [...new Set(classes.filter((cls) => !isTailwindUtility(cls)))];
+}
+
 function isRecord(v: unknown): v is Record<string, unknown> {
-  return v !== null && typeof v === "object" && !Array.isArray(v);
+	return v !== null && typeof v === "object" && !Array.isArray(v);
 }
 
-/**
- * Walk a single CLASSES object (one component or one part of a compound component)
- * and produce the manifest entry.
- */
-function walkClassesObject(obj: Record<string, unknown>): ComponentManifest {
-  const always: string[] = [];
-  const byProp: Record<string, string[] | Record<string, string[]>> = {};
-  let attrs: Record<string, Record<string, string>> | undefined;
-
-  for (const [slot, value] of Object.entries(obj)) {
-    if (slot === "base") {
-      always.push(...flattenClasses(value as ClassValue));
-    } else if (slot === "attrs") {
-      if (isRecord(value)) {
-        attrs = {};
-        for (const [propName, attrMap] of Object.entries(value)) {
-          if (isRecord(attrMap)) {
-            attrs[propName] = attrMap as Record<string, string>;
-          }
-        }
-      }
-    } else if (slot === "flag") {
-      if (isRecord(value)) {
-        for (const [propName, classVal] of Object.entries(value)) {
-          byProp[propName] = flattenClasses(classVal as ClassValue);
-        }
-      }
-    } else if (isRecord(value)) {
-      const enumMap: Record<string, string[]> = {};
-      for (const [enumKey, classVal] of Object.entries(value)) {
-        enumMap[enumKey] = flattenClasses(classVal as ClassValue);
-      }
-      byProp[slot] = enumMap;
-    }
-  }
-
-  const manifest: ComponentManifest = { classes: { always, byProp } };
-  if (attrs && Object.keys(attrs).length > 0) {
-    manifest.attrs = attrs;
-  }
-  return manifest;
+function kebabToPascal(s: string): string {
+	return s
+		.split("-")
+		.filter(Boolean)
+		.map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+		.join("");
 }
 
-/**
- * Detect whether CLASSES is compound (top-level keys are part names like Root, Item)
- * or flat (top-level keys are slots like base, variant, flag).
- */
-const KNOWN_SLOTS = new Set(["base", "variant", "size", "flag", "color", "attrs"]);
+function joinPath(base: string, rel: string): string {
+	return `${base.replace(/\/+$/, "")}/${rel.replace(/^\/+/, "")}`;
+}
+
+function dirname(filePath: string): string {
+	const parts = filePath.split(/[\\/]/);
+	parts.pop();
+	return parts.length === 0 ? "." : parts.join("/");
+}
+
+function basename(filePath: string, suffix = ""): string {
+	const name = filePath.split(/[\\/]/).pop() ?? filePath;
+	return suffix && name.endsWith(suffix) ? name.slice(0, -suffix.length) : name;
+}
+
+function resolvePath(filePath: string): string {
+	if (filePath.startsWith("/")) return filePath;
+	return joinPath(process.cwd(), filePath);
+}
+
+function canonicalComponentFromRelPath(relPath: string): string {
+	const stem = basename(relPath, ".classes.ts");
+	const dir = dirname(relPath);
+	const dirParts = dir === "." ? [] : dir.split(/[\\/]/).filter(Boolean);
+	const source =
+		stem === "classes" && dirParts.length > 0
+			? (dirParts.at(-1) ?? stem)
+			: stem;
+	return kebabToPascal(source);
+}
+
+function walkClassesObject(obj: Record<string, unknown>): ClassWalkResult {
+	const always: string[] = [];
+	const byProp: Record<string, string[] | Record<string, string[]>> = {};
+	let attrs: Record<string, Record<string, string>> | undefined;
+
+	for (const [slot, value] of Object.entries(obj)) {
+		if (slot === "base") {
+			always.push(...flattenClasses(value));
+		} else if (slot === "attrs") {
+			if (isRecord(value)) {
+				attrs = {};
+				for (const [propName, attrMap] of Object.entries(value)) {
+					if (isRecord(attrMap))
+						attrs[propName] = attrMap as Record<string, string>;
+				}
+			}
+		} else if (slot === "flag") {
+			if (isRecord(value)) {
+				for (const [propName, classVal] of Object.entries(value)) {
+					byProp[propName] = flattenClasses(classVal);
+				}
+			}
+		} else if (isRecord(value)) {
+			const enumMap: Record<string, string[]> = {};
+			for (const [enumKey, classVal] of Object.entries(value)) {
+				enumMap[enumKey] = flattenClasses(classVal);
+			}
+			byProp[slot] = enumMap;
+		}
+	}
+
+	return { classes: { always: [...new Set(always)], byProp }, attrs };
+}
+
+const KNOWN_SLOTS = new Set([
+	"base",
+	"variant",
+	"size",
+	"flag",
+	"color",
+	"tone",
+	"attrs",
+]);
 
 function isCompound(obj: Record<string, unknown>): boolean {
-  for (const key of Object.keys(obj)) {
-    if (KNOWN_SLOTS.has(key)) return false;
-  }
-  return true;
+	for (const key of Object.keys(obj)) {
+		if (KNOWN_SLOTS.has(key)) return false;
+	}
+	return true;
+}
+
+function emptyCssFacts(): CssFacts {
+	return {
+		selectors: [],
+		attributeSelectors: [],
+		cssVars: { declared: [], referenced: [] },
+		keyframes: { declared: [], referenced: [] },
+	};
+}
+
+async function scanCssFacts(componentDir: string): Promise<CssFacts> {
+	const facts = emptyCssFacts();
+	const glob = new Glob("**/*.css");
+
+	for await (const relPath of glob.scan({ cwd: componentDir })) {
+		const css = await Bun.file(joinPath(componentDir, relPath)).text();
+		const root = postcss.parse(css);
+
+		root.walkRules((rule) => {
+			for (const selector of rule.selectors) {
+				facts.selectors.push(selector);
+				for (const attr of extractAttrsFromSelector(selector)) {
+					facts.attributeSelectors.push(attr);
+				}
+			}
+		});
+
+		root.walkDecls((decl) => {
+			if (decl.prop.startsWith("--")) facts.cssVars.declared.push(decl.prop);
+			for (const ref of decl.value.matchAll(/var\(\s*(--[a-zA-Z0-9_-]+)/g)) {
+				facts.cssVars.referenced.push(ref[1]);
+			}
+			if (/^animation(-name)?$/.test(decl.prop)) {
+				for (const part of decl.value.split(",")) {
+					const name = part.trim().split(/\s+/)[0];
+					if (name && !["none", "initial", "inherit", "unset"].includes(name)) {
+						facts.keyframes.referenced.push(name);
+					}
+				}
+			}
+		});
+
+		root.walkAtRules("keyframes", (atRule) => {
+			facts.keyframes.declared.push(atRule.params.trim());
+		});
+	}
+
+	return {
+		selectors: [...new Set(facts.selectors)].sort(),
+		attributeSelectors: [...new Set(facts.attributeSelectors)].sort(),
+		cssVars: {
+			declared: [...new Set(facts.cssVars.declared)].sort(),
+			referenced: [...new Set(facts.cssVars.referenced)].sort(),
+		},
+		keyframes: {
+			declared: [...new Set(facts.keyframes.declared)].sort(),
+			referenced: [...new Set(facts.keyframes.referenced)].sort(),
+		},
+	};
+}
+
+function extractAttrsFromSelector(selector: string): string[] {
+	const matches = selector.matchAll(
+		/\[(data-[a-zA-Z0-9_-]+|aria-[a-zA-Z0-9_-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]+)))?\]/g,
+	);
+	return [...matches].map((m) => {
+		const value = m[2] ?? m[3] ?? m[4];
+		return value === undefined ? `[${m[1]}]` : `[${m[1]}="${value.trim()}"]`;
+	});
+}
+
+function createRecord(
+	key: string,
+	component: string,
+	part: string | undefined,
+	classFacts: ClassWalkResult,
+	cssFacts: CssFacts,
+): ComponentPurgeRecord {
+	const record: ComponentPurgeRecord = {
+		key,
+		component,
+		part,
+		classes: classFacts.classes,
+		attributeSelectors: cssFacts.attributeSelectors,
+		selectors: cssFacts.selectors,
+		cssVars: cssFacts.cssVars,
+		keyframes: cssFacts.keyframes,
+	};
+	if (classFacts.attrs && Object.keys(classFacts.attrs).length > 0) {
+		record.attrs = classFacts.attrs;
+	}
+	return record;
+}
+
+function updateShared(db: PurgeDatabaseV2) {
+	const selectorOwners = new Map<string, Set<string>>();
+
+	for (const [key, record] of Object.entries(db.components)) {
+		for (const selector of record.selectors) {
+			const owners = selectorOwners.get(selector) ?? new Set<string>();
+			owners.add(key);
+			selectorOwners.set(selector, owners);
+		}
+
+		for (const varName of record.cssVars.declared) {
+			const entry = db.shared.cssVars[varName] ?? {
+				declaredBy: [],
+				referencedBy: [],
+			};
+			entry.declaredBy.push(key);
+			db.shared.cssVars[varName] = entry;
+		}
+		for (const varName of record.cssVars.referenced) {
+			const entry = db.shared.cssVars[varName] ?? {
+				declaredBy: [],
+				referencedBy: [],
+			};
+			entry.referencedBy.push(key);
+			db.shared.cssVars[varName] = entry;
+		}
+
+		for (const name of record.keyframes.declared) {
+			const entry = db.shared.keyframes[name] ?? {
+				declaredBy: [],
+				referencedBy: [],
+			};
+			entry.declaredBy.push(key);
+			db.shared.keyframes[name] = entry;
+		}
+		for (const name of record.keyframes.referenced) {
+			const entry = db.shared.keyframes[name] ?? {
+				declaredBy: [],
+				referencedBy: [],
+			};
+			entry.referencedBy.push(key);
+			db.shared.keyframes[name] = entry;
+		}
+	}
+
+	db.shared.selectors = [...selectorOwners.entries()]
+		.map(([selector, owners]) => ({ selector, components: [...owners].sort() }))
+		.sort((a, b) => a.selector.localeCompare(b.selector));
+
+	for (const entry of Object.values(db.shared.cssVars)) {
+		entry.declaredBy = [...new Set(entry.declaredBy)].sort();
+		entry.referencedBy = [...new Set(entry.referencedBy)].sort();
+	}
+	for (const entry of Object.values(db.shared.keyframes)) {
+		entry.declaredBy = [...new Set(entry.declaredBy)].sort();
+		entry.referencedBy = [...new Set(entry.referencedBy)].sort();
+	}
 }
 
 // ── Main ───────────────────────────────────────────────────────────────────────
 
 async function main() {
-  const args = process.argv.slice(2);
-  let componentsDir = args[0];
-  let outPath = "purge-manifest.json";
-
-  const outIdx = args.indexOf("--out");
-  if (outIdx !== -1 && args[outIdx + 1]) {
-    outPath = args[outIdx + 1];
-  }
-
-  if (!componentsDir) {
-    console.error("Usage: bun run src/generate-manifest.ts <path-to-components-dir> [--out <path>]");
-    process.exit(1);
-  }
-
-  componentsDir = path.resolve(componentsDir);
-  console.log(`Scanning ${componentsDir} for *.classes.ts files…`);
-
-  const manifest: PurgeManifest = {};
-  const glob = new Glob("**/*.classes.ts");
-
-  for await (const relPath of glob.scan({ cwd: componentsDir })) {
-    const fullPath = path.join(componentsDir, relPath);
-
-    const mod = await import(fullPath);
-    const CLASSES = mod.CLASSES;
-
-    if (!CLASSES || typeof CLASSES !== "object") {
-      console.warn(`  SKIP ${relPath} — no CLASSES export found`);
-      continue;
-    }
-
-    const fileName = path.basename(relPath, ".classes.ts");
-
-    if (isCompound(CLASSES as Record<string, unknown>)) {
-      for (const [partName, partObj] of Object.entries(CLASSES as Record<string, unknown>)) {
-        if (isRecord(partObj)) {
-          const entryName = `${fileName}.${partName}`;
-          manifest[entryName] = walkClassesObject(partObj as Record<string, unknown>);
-          console.log(`  ✓ ${entryName}`);
-        }
-      }
-    } else {
-      manifest[fileName] = walkClassesObject(CLASSES as Record<string, unknown>);
-      console.log(`  ✓ ${fileName}`);
-    }
-  }
-
-  // ── Scan inter-component dependencies ──────────────────────────────────────
-  const { readdirSync } = await import("fs");
-  const dirs = readdirSync(componentsDir, { withFileTypes: true })
-    .filter((d: any) => d.isDirectory())
-    .map((d: any) => d.name);
-
-  function kebabToPascal(s: string): string {
-    return s.split("-").map((p: string) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
-  }
-
-  const dirToPascal = new Map<string, string>();
-  for (const dir of dirs) {
-    dirToPascal.set(dir, kebabToPascal(dir));
-  }
-
-  const importRegex = /from\s+["']\.\.\/([^/"']+)/g;
-  const depGlob = new Glob("**/*.{tsx,ts,js,mjs}");
-
-  for (const dir of dirs) {
-    const pascal = dirToPascal.get(dir)!;
-    const componentDeps = new Set<string>();
-    const scanDir = path.join(componentsDir, dir);
-
-    for await (const relFile of depGlob.scan({ cwd: scanDir })) {
-      const fullFile = path.join(scanDir, relFile);
-      const code = await Bun.file(fullFile).text();
-
-      for (const match of code.matchAll(importRegex)) {
-        const depDir = match[1];
-        if (depDir === "types" || depDir === "utils" || depDir === "..") continue;
-        const depPascal = dirToPascal.get(depDir);
-        if (depPascal && depPascal !== pascal) {
-          componentDeps.add(depPascal);
-        }
-      }
-    }
-
-    if (componentDeps.size > 0) {
-      const depsArray = [...componentDeps].sort();
-      // Attach deps to the base component entry (or all compound parts)
-      for (const key of Object.keys(manifest)) {
-        if (key === pascal || key.startsWith(`${pascal}.`)) {
-          manifest[key].deps = depsArray;
-        }
-      }
-      console.log(`  → ${pascal} deps: ${depsArray.join(", ")}`);
-    }
-  }
-
-  const json = JSON.stringify(manifest, null, 2);
-  await Bun.write(outPath, json);
-  console.log(`\nWrote ${outPath} (${Object.keys(manifest).length} entries, ${json.length} bytes)`);
+	const args = process.argv.slice(2);
+	let componentsDir = args[0];
+	let outPath = "purge-manifest.json";
+
+	const outIdx = args.indexOf("--out");
+	if (outIdx !== -1 && args[outIdx + 1]) {
+		outPath = args[outIdx + 1];
+	}
+
+	if (!componentsDir) {
+		console.error(
+			"Usage: bun run src/generate-manifest.ts <path-to-components-dir> [--out <path>]",
+		);
+		process.exit(1);
+	}
+
+	componentsDir = resolvePath(componentsDir);
+	console.log(`Scanning ${componentsDir} for *.classes.ts files...`);
+
+	const db: PurgeDatabaseV2 = {
+		version: 2,
+		components: {},
+		shared: {
+			selectors: [],
+			cssVars: {},
+			keyframes: {},
+		},
+	};
+	const glob = new Glob("**/*.classes.ts");
+
+	for await (const relPath of glob.scan({ cwd: componentsDir })) {
+		const fullPath = joinPath(componentsDir, relPath);
+		const mod = await import(fullPath);
+		const classesExport = mod.CLASSES;
+
+		if (!classesExport || typeof classesExport !== "object") {
+			console.warn(`  SKIP ${relPath} - no CLASSES export found`);
+			continue;
+		}
+
+		const component = canonicalComponentFromRelPath(relPath);
+		const componentDir = dirname(fullPath);
+		const cssFacts = await scanCssFacts(componentDir);
+
+		if (isCompound(classesExport as Record<string, unknown>)) {
+			for (const [partName, partObj] of Object.entries(
+				classesExport as Record<string, unknown>,
+			)) {
+				if (isRecord(partObj)) {
+					const key = `${component}.${partName}`;
+					db.components[key] = createRecord(
+						key,
+						component,
+						partName,
+						walkClassesObject(partObj),
+						cssFacts,
+					);
+					console.log(`  ok ${key}`);
+				}
+			}
+		} else {
+			db.components[component] = createRecord(
+				component,
+				component,
+				undefined,
+				walkClassesObject(classesExport as Record<string, unknown>),
+				cssFacts,
+			);
+			console.log(`  ok ${component}`);
+		}
+	}
+
+	await attachDependencies(componentsDir, db);
+	updateShared(db);
+
+	const json = JSON.stringify(db, null, 2);
+	await Bun.write(outPath, json);
+	console.log(
+		`\nWrote ${outPath} (${Object.keys(db.components).length} records, ${json.length} bytes)`,
+	);
+}
+
+async function attachDependencies(componentsDir: string, db: PurgeDatabaseV2) {
+	const dirs = new Set<string>();
+	const classesGlob = new Glob("*/*.classes.ts");
+	for await (const relPath of classesGlob.scan({ cwd: componentsDir })) {
+		dirs.add(relPath.split(/[\\/]/)[0]);
+	}
+	const dirToPascal = new Map(
+		[...dirs].map((dir) => [dir, kebabToPascal(dir)]),
+	);
+	const importRegex = /from\s+["']\.\.\/([^/"']+)/g;
+	const depGlob = new Glob("**/*.{tsx,ts,js,mjs}");
+
+	for (const dir of dirs) {
+		const component = dirToPascal.get(dir);
+		if (!component) continue;
+		const componentDeps = new Set<string>();
+		const scanDir = joinPath(componentsDir, dir);
+
+		for await (const relFile of depGlob.scan({ cwd: scanDir })) {
+			const code = await Bun.file(joinPath(scanDir, relFile)).text();
+			for (const match of code.matchAll(importRegex)) {
+				const depDir = match[1];
+				if (depDir === "types" || depDir === "utils" || depDir === "..")
+					continue;
+				const dep = dirToPascal.get(depDir);
+				if (dep && dep !== component) componentDeps.add(dep);
+			}
+		}
+
+		if (componentDeps.size > 0) {
+			const deps = [...componentDeps].sort();
+			for (const record of Object.values(db.components)) {
+				if (record.component === component) record.deps = deps;
+			}
+			console.log(`  deps ${component}: ${deps.join(", ")}`);
+		}
+	}
 }
 
 if (import.meta.main) {
-  main();
+	main();
 }