chore: update refs audit

2026-08-28 21:27:13 +05:00
parent 0d95acba89
commit 795c03ac87
7 changed files with 4519 additions and 4242 deletions
@@ -1,11 +1,12 @@
-// Стиль-аудит: снимает design-токены (light/dark) и дерево вычисленных стилей
-// нашей preview-страницы и refs-html страницы, сравнивает и пишет отчёт.
-// Запуск: pnpm audit  (опции: --ours <url> --ref <file> --no-serve --route <path>)
+// Стиль-аудит: для каждого preview-маршрута снимает design-токены (light/dark)
+// и дерево вычисленных стилей нашей страницы и соответствующей refs-html
+// страницы, сравнивает и пишет сводный отчёт.
+// Запуск: pnpm audit  (опции: --route <path> --ref <file> --no-serve --ours <url>)
 import { chromium } from "playwright";
 import { spawn } from "node:child_process";
-import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { readFileSync, writeFileSync, mkdirSync, readdirSync } from "node:fs";
 import { pathToFileURL } from "node:url";
-import { resolve } from "node:path";
+import { resolve, join } from "node:path";

 const args = (() => {
 	const a = {};
@@ -21,9 +22,7 @@ const args = (() => {

 const WEB = process.cwd();
 const PORT = 5179;
-const ROUTE = args.route || "/preview/demo";
-const OURS = args.ours || `http://127.0.0.1:${PORT}${ROUTE}`;
-const REF = args.ref || resolve(WEB, "../refs-html/demo.html");
+const REFS_DIR = resolve(WEB, "../refs-html");

 const FIELDS = [
 	"fontFamily",
@@ -41,6 +40,104 @@ const FIELDS = [
 	"gap",
 ];

+// Динамические сегменты: явный список значений + сопоставление id → файл рефа
+// (id инструмента в registry.ts не совпадает с именем refs-html-файла).
+const DYNAMIC = {
+	"tools/[id]": {
+		ids: ["linear-gradient-png", "remove-background-png"],
+		refFor: (id) =>
+			id === "linear-gradient-png"
+				? "gradient.html"
+				: id === "remove-background-png"
+					? "background-remover.html"
+					: null,
+	},
+};
+
+// Маршруты, которые не с чем сравнивать (нет релевантного рефа). Например,
+// `/preview` (индекс/воркспейс) в нашем приложении — своя страница, а
+// `refs-html/index.html` — это зеркало demo из Next-рефа, не его реф.
+const EXCLUDE = new Set(["/preview"]);
+
+const refNameFor = (route) => {
+	if (route === "/preview") return "index.html";
+	const last = route.split("/").filter(Boolean).pop();
+	return `${last}.html`;
+};
+
+function discoverRoutes() {
+	const base = resolve(WEB, "src/routes/preview");
+	const out = [];
+	const walk = (dir) => {
+		let ents;
+		try {
+			ents = readdirSync(dir, { withFileTypes: true });
+		} catch {
+			return;
+		}
+		for (const e of ents) {
+			const p = join(dir, e.name);
+			if (e.isDirectory()) walk(p);
+			else if (e.name === "+page.svelte") {
+				const rel = p.slice(base.length).replace(/\\/g, "/");
+				const parts = rel.split("/").filter(Boolean);
+				parts.pop(); // +page.svelte
+				out.push(parts.length ? `/preview/${parts.join("/")}` : "/preview");
+			}
+		}
+	};
+	walk(base);
+	return out;
+}
+
+function buildTargets() {
+	if (args.route) {
+		const ref = args.ref || refNameFor(args.route);
+		return [{ route: args.route, ref }];
+	}
+	const targets = [];
+	const seen = new Set();
+	const add = (route, ref) => {
+		if (!ref || seen.has(route)) return;
+		if (!refExists(ref)) {
+			console.warn(`[audit] ref not found, skipped: ${route} -> ${ref}`);
+			return;
+		}
+		seen.add(route);
+		targets.push({ route, ref });
+	};
+	for (const route of discoverRoutes()) {
+		if (route.includes("[")) continue; // динамика — ниже
+		if (EXCLUDE.has(route)) {
+			console.log(`[audit] excluded (no relevant ref): ${route}`);
+			continue;
+		}
+		add(route, refNameFor(route));
+	}
+	for (const [seg, cfg] of Object.entries(DYNAMIC)) {
+		for (const id of cfg.ids) {
+			add(`/preview/${seg.replace("[id]", id)}`, cfg.refFor(id));
+		}
+	}
+	// Рефы без маршрута — просто сообщаем, не падаем.
+	const routed = new Set(targets.map((t) => t.ref));
+	for (const f of refsList()) {
+		if (!routed.has(f)) console.warn(`[audit] ref без маршрута: ${f}`);
+	}
+	return targets;
+}
+
+function refsList() {
+	try {
+		return readdirSync(REFS_DIR).filter((f) => f.endsWith(".html"));
+	} catch {
+		return [];
+	}
+}
+function refExists(name) {
+	return refsList().includes(name);
+}
+
 const waitFor = async (url, ms = 60000) => {
 	const t = Date.now();
 	while (Date.now() - t < ms) {
@@ -133,7 +230,156 @@ const snapshot = (page, url) =>
 		return { tokensLight, tokensDark, tree: walk(document.body, "body") };
 	}, url);

+const TOK_NOISE = /^(--tw-|--lightningcss-|--default-)/;
+
+function diffPair(ours, ref) {
+	const tokDiff = (a, b) => {
+		const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+		const rows = [];
+		for (const k of keys) {
+			if (TOK_NOISE.test(k)) continue;
+			const av = a[k] ?? "—";
+			const bv = b[k] ?? "—";
+			if (av !== bv) rows.push({ key: k, ours: av, ref: bv });
+		}
+		return rows;
+	};
+	const tokenDiffs = {
+		light: tokDiff(ours.tokensLight, ref.tokensLight),
+		dark: tokDiff(ours.tokensDark, ref.tokensDark),
+	};
+
+	const byText = (tree) => {
+		const m = new Map();
+		for (const e of tree) if (e.text) if (!m.has(e.text)) m.set(e.text, e);
+		return m;
+	};
+	const txtO = byText(ours.tree);
+	const txtR = byText(ref.tree);
+	const onlyOurs = [];
+	const onlyRef = [];
+	const elementDiffs = [];
+	for (const [k, o] of txtO) {
+		const r = txtR.get(k);
+		if (!r) {
+			onlyOurs.push(k);
+			continue;
+		}
+		const deltas = {};
+		for (const f of FIELDS) {
+			const ov = (o.style[f] ?? "").toString();
+			const rv = (r.style[f] ?? "").toString();
+			if (ov !== rv) deltas[f] = { ours: ov, ref: rv };
+		}
+		const dr = o.rect;
+		const rr = r.rect;
+		if (
+			Math.abs(dr.x - rr.x) > 2 ||
+			Math.abs(dr.y - rr.y) > 2 ||
+			Math.abs(dr.w - rr.w) > 2 ||
+			Math.abs(dr.h - rr.h) > 2
+		)
+			deltas.rect = { ours: dr, ref: rr };
+		if (Object.keys(deltas).length)
+			elementDiffs.push({ path: o.path, tag: o.tag, text: k, deltas });
+	}
+	for (const [k] of txtR) if (!txtO.has(k)) onlyRef.push(k);
+
+	return {
+		tokenDiffs,
+		elementDiffs,
+		onlyOurs: onlyOurs.slice(0, 60),
+		onlyRef: onlyRef.slice(0, 60),
+		counts: {
+			tokenLight: tokenDiffs.light.length,
+			tokenDark: tokenDiffs.dark.length,
+			elements: elementDiffs.length,
+			onlyOurs: onlyOurs.length,
+			onlyRef: onlyRef.length,
+		},
+	};
+}
+
+async function auditOne(page, target) {
+	const oursUrl = args.ours || `http://127.0.0.1:${PORT}${target.route}`;
+	const refUrl = pathToFileURL(resolve(REFS_DIR, target.ref)).href;
+
+	await page.goto(oursUrl, { waitUntil: "load" });
+	await page.evaluate(() => document.fonts.ready);
+	await page.waitForTimeout(300);
+	const ours = await snapshot(page, oursUrl);
+
+	await page.goto(refUrl, { waitUntil: "load" });
+	await page.evaluate(() => document.fonts.ready);
+	await page.waitForTimeout(300);
+	const ref = await snapshot(page, refUrl);
+
+	const diff = diffPair(ours, ref);
+	return { route: target.route, ref: target.ref, ...diff };
+}
+
+function toMarkdown(reports) {
+	const tokTable = (rows) =>
+		rows.length
+			? `| token | ours | ref |\n|---|---|---|\n` +
+				rows.map((r) => `| \`${r.key}\` | ${r.ours} | ${r.ref} |`).join("\n")
+			: "_все совпадают_";
+	const elBlock = (el) => {
+		const d = Object.entries(el.deltas)
+			.map(([k, v]) => {
+				if (k === "rect") {
+					const f = (r) => `${r.x},${r.y} ${r.w}x${r.h}`;
+					return `    - **rect**: \`${f(v.ours)}\` → \`${f(v.ref)}\``;
+				}
+				return `    - **${k}**: \`${v.ours}\` → \`${v.ref}\``;
+			})
+			.join("\n");
+		return `### \`${el.path}\`${el.text ? ` — "${el.text}"` : ""}\n${d}`;
+	};
+	const summary =
+		`# Style audit (multi-route)\n\n_${new Date().toISOString()}_\n\n` +
+		`## Сводка\n\n| route | ref | tokL | tokD | els | onlyOurs | onlyRef |\n|---|---|---|---|---|---|---|\n` +
+		reports
+			.map(
+				(r) =>
+					`| \`${r.route}\` | ${r.ref} | ${r.counts.tokenLight} | ${r.counts.tokenDark} | ${r.counts.elements} | ${r.counts.onlyOurs} | ${r.counts.onlyRef} |`,
+			)
+			.join("\n");
+	const sections = reports
+		.map((r) => {
+			const sorted = [...r.elementDiffs].sort(
+				(x, y) => Object.keys(y.deltas).length - Object.keys(x.deltas).length,
+			);
+			const els = sorted.length
+				? sorted.slice(0, 100).map(elBlock).join("\n\n")
+				: "_расхождений нет_";
+			return (
+				`\n\n## ${r.route}  (vs ${r.ref})\n\n` +
+				`- Токены light: **${r.counts.tokenLight}**, dark: **${r.counts.tokenDark}**\n` +
+				`- Элементы: **${r.counts.elements}**, только у нас: ${r.counts.onlyOurs}, только в рефе: ${r.counts.onlyRef}\n\n` +
+				`### Токены — Light\n\n${tokTable(r.tokenDiffs.light)}\n\n` +
+				`### Токены — Dark\n\n${tokTable(r.tokenDiffs.dark)}\n\n` +
+				`### Расхождения элементов (топ ${Math.min(100, sorted.length)})\n\n${els}\n\n` +
+				`### Только у нас\n\n` +
+				(r.onlyOurs.length ? r.onlyOurs.map((p) => `- \`${p}\``).join("\n") : "_—_") +
+				`\n\n### Только в рефе\n\n` +
+				(r.onlyRef.length ? r.onlyRef.map((p) => `- \`${p}\``).join("\n") : "_—_")
+			);
+		})
+		.join("\n");
+	return summary + sections + "\n";
+}
+
 async function main() {
+	const targets = buildTargets();
+	if (!targets.length) {
+		console.error("no audit targets (refs-html/*.html missing?)");
+		process.exit(1);
+	}
+	console.log(
+		`[audit] targets: ${targets.map((t) => t.route).join(", ")}`,
+	);
+
 	let server;
 	if (!args.noServe) {
 		const bin = process.platform === "win32" ? "pnpm.cmd" : "pnpm";
@@ -143,7 +389,7 @@ async function main() {
 			shell: true,
 			detached: process.platform !== "win32",
 		});
-		await waitFor(OURS);
+		await waitFor(args.ours || `http://127.0.0.1:${PORT}${targets[0].route}`);
 	}

 	const browser = await chromium.launch();
@@ -151,104 +397,21 @@ async function main() {
 		viewport: { width: 1440, height: 900 },
 		deviceScaleFactor: 1,
 	});
+	const reports = [];
 	try {
-		await page.goto(OURS, { waitUntil: "load" });
-		await page.evaluate(() => document.fonts.ready);
-		await page.waitForTimeout(400);
-		const ours = await snapshot(page, OURS);
-
-		await page.goto(pathToFileURL(REF).href, { waitUntil: "load" });
-		await page.evaluate(() => document.fonts.ready);
-		await page.waitForTimeout(400);
-		const ref = await snapshot(page, pathToFileURL(REF).href);
-
-		// token diff (игнорируем служебный мусор Tailwind/lightningcss — он
-		// ref-only и не относится к нашим смысловым токенам)
-		const TOK_NOISE = /^(--tw-|--lightningcss-|--default-)/;
-		const tokDiff = (a, b) => {
-			const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
-			const rows = [];
-			for (const k of keys) {
-				if (TOK_NOISE.test(k)) continue;
-				const av = a[k] ?? "—";
-				const bv = b[k] ?? "—";
-				if (av !== bv) rows.push({ key: k, ours: av, ref: bv });
-			}
-			return rows;
-		};
-		const tokenDiffs = {
-			light: tokDiff(ours.tokensLight, ref.tokensLight),
-			dark: tokDiff(ours.tokensDark, ref.tokensDark),
-		};
-
-		// element diff: совпадающие по тексту элементы (структуры разные,
-		// поэтому nth-child-пути не совпадают — матчим по видимому тексту)
-		const byText = (tree) => {
-			const m = new Map();
-			for (const e of tree) if (e.text) if (!m.has(e.text)) m.set(e.text, e);
-			return m;
-		};
-		const txtO = byText(ours.tree);
-		const txtR = byText(ref.tree);
-		const onlyOurs = [];
-		const onlyRef = [];
-		const elementDiffs = [];
-		for (const [k, o] of txtO) {
-			const r = txtR.get(k);
-			if (!r) {
-				onlyOurs.push(k);
-				continue;
-			}
-			const deltas = {};
-			for (const f of FIELDS) {
-				const ov = (o.style[f] ?? "").toString();
-				const rv = (r.style[f] ?? "").toString();
-				if (ov !== rv) deltas[f] = { ours: ov, ref: rv };
-			}
-			const dr = o.rect;
-			const rr = r.rect;
-			if (
-				Math.abs(dr.x - rr.x) > 2 ||
-				Math.abs(dr.y - rr.y) > 2 ||
-				Math.abs(dr.w - rr.w) > 2 ||
-				Math.abs(dr.h - rr.h) > 2
-			)
-				deltas.rect = { ours: dr, ref: rr };
-			if (Object.keys(deltas).length)
-				elementDiffs.push({ path: o.path, tag: o.tag, text: k, deltas });
+		for (const target of targets) {
+			const rep = await auditOne(page, target);
+			reports.push(rep);
+			console.log(
+				`[audit] ${rep.route}: tokL=${rep.counts.tokenLight} tokD=${rep.counts.tokenDark} els=${rep.counts.elements} onlyOurs=${rep.counts.onlyOurs} onlyRef=${rep.counts.onlyRef}`,
+			);
 		}
-		for (const [k] of txtR) if (!txtO.has(k)) onlyRef.push(k);
-
-		const report = {
-			generatedAt: new Date().toISOString(),
-			ours: OURS,
-			ref: REF,
-			tokenDiffs,
-			elementDiffs,
-			onlyOurs: onlyOurs.slice(0, 60),
-			onlyRef: onlyRef.slice(0, 60),
-			counts: {
-				tokenLight: tokenDiffs.light.length,
-				tokenDark: tokenDiffs.dark.length,
-				elements: elementDiffs.length,
-				onlyOurs: onlyOurs.length,
-				onlyRef: onlyRef.length,
-			},
-		};
-
 		mkdirSync(resolve(WEB, "audit"), { recursive: true });
 		writeFileSync(
 			resolve(WEB, "audit/audit-report.json"),
-			JSON.stringify(report, null, 2),
-		);
-		writeFileSync(
-			resolve(WEB, "audit/audit-report.md"),
-			toMarkdown(report, ours, ref),
-		);
-		console.log(
-			`audit done: tokens light/dark=${tokenDiffs.light.length}/${tokenDiffs.dark.length}, ` +
-				`elements=${elementDiffs.length}, onlyOurs=${onlyOurs.length}, onlyRef=${onlyRef.length}`,
+			JSON.stringify({ generatedAt: new Date().toISOString(), reports }, null, 2),
 		);
+		writeFileSync(resolve(WEB, "audit/audit-report.md"), toMarkdown(reports));
 		console.log(`report: web/audit/audit-report.md`);
 	} finally {
 		await browser.close();
@@ -264,51 +427,6 @@ async function main() {
 	}
 }

-function toMarkdown(report, ours, ref) {
-	const tokTable = (rows, a, b) =>
-		rows.length
-			? `| token | ours | ref |\n|---|---|---|\n` +
-				rows.map((r) => `| \`${r.key}\` | ${r.ours} | ${r.ref} |`).join("\n")
-			: "_все совпадают_";
-	const sorted = [...report.elementDiffs].sort(
-		(x, y) => Object.keys(y.deltas).length - Object.keys(x.deltas).length,
-	);
-	const elRows = sorted
-		.slice(0, 100)
-		.map((e) => {
-			const d = Object.entries(e.deltas)
-				.map(([k, v]) => {
-					if (k === "rect") {
-						const f = (r) => `${r.x},${r.y} ${r.w}x${r.h}`;
-						return `    - **rect**: \`${f(v.ours)}\` → \`${f(v.ref)}\``;
-					}
-					return `    - **${k}**: \`${v.ours}\` → \`${v.ref}\``;
-				})
-				.join("\n");
-			return `### \`${e.path}\`${e.text ? ` — "${e.text}"` : ""}\n${d}`;
-		})
-		.join("\n\n");
-	return (
-		`# Style audit: ${report.ours}\n\nvs ${report.ref}\n\n_${report.generatedAt}_\n\n` +
-		`## Сводка\n\n- Токены light: **${report.counts.tokenLight}** расх.\n` +
-		`- Токены dark: **${report.counts.tokenDark}** расх.\n` +
-		`- Элементы (стиль/геометрия): **${report.counts.elements}** расх.\n` +
-		`- Только у нас: ${report.counts.onlyOurs}, только в рефе: ${report.counts.onlyRef}\n\n` +
-		`## Токены — Light\n\n${tokTable(report.tokenDiffs.light)}\n\n` +
-		`## Токены — Dark\n\n${tokTable(report.tokenDiffs.dark)}\n\n` +
-		`## Расхождения элементов (топ ${Math.min(100, sorted.length)})\n\n${elRows}\n\n` +
-		`## Только у нас (структурно)\n\n` +
-		(report.onlyOurs.length
-			? report.onlyOurs.map((p) => `- \`${p}\``).join("\n")
-			: "_—_") +
-		`\n\n## Только в рефе (структурно)\n\n` +
-		(report.onlyRef.length
-			? report.onlyRef.map((p) => `- \`${p}\``).join("\n")
-			: "_—_") +
-		`\n`
-	);
-}
-
 main().catch((e) => {
 	console.error(e);
 	process.exit(1);