webview-preview 1.0.0 → 1.1.1

package/src/page/console.mjs

@@ -0,0 +1,84 @@
+import { ASSERT_MARKER, FOCUS_MARKER } from "#src/core/steps.mjs";
+
+export const CONSOLE_KEY = "__webviewPreviewConsole";
+const MARKER = "__webviewPreviewConsole:";
+
+export const consoleScript = () => `(() => {
+	const entries = window.${CONSOLE_KEY} = window.${CONSOLE_KEY} || [];
+	const text = value => {
+		if (value instanceof Error) {
+			const head = value.name + ": " + value.message;
+			const stack = String(value.stack || "");
+			const frame = stack.split("\\n").find(line => line && !line.startsWith(head)) || "";
+			return frame ? head + " — " + frame.trim() : head;
+		}
+		if (typeof value === "string") return value;
+		try {
+			return JSON.stringify(value);
+		} catch {
+			return String(value);
+		}
+	}
+	const add = (kind, message) => {
+		const last = entries[entries.length - 1];
+		if (last && last.kind === kind && last.message === message) last.count += 1;
+		else entries.push({ kind, message: message.slice(0, 2000), count: 1 });
+	}
+	const originalError = console.error;
+	console.error = (...args) => {
+		add("console.error", args.map(text).join(" "));
+		return originalError.apply(console, args);
+	}
+	window.addEventListener("error", event => {
+		const where = event.filename ? " (" + event.filename.replace(location.origin, "") + ":" + event.lineno + ")" : "";
+		add("uncaught", event.error ? text(event.error) : event.message + where);
+	});
+	window.addEventListener("unhandledrejection", event => add("unhandled rejection", text(event.reason)));
+})();`;
+
+export const consoleStep = { kind: "print", value: `"${MARKER}" + JSON.stringify(window.${CONSOLE_KEY} || [])`, isInternal: true }
+
+export const watchOutput = log => {
+	const entries = [];
+	let failedAsserts = 0;
+	let focus = null;
+	const printFocus = () => {
+		const { presses, items } = focus;
+		const firstPath = items[0]?.path;
+		const loopAt = items.findIndex((item, index) => index > 0 && item.path !== undefined && item.path === firstPath);
+		const shown = loopAt === -1 ? items : items.slice(0, loopAt);
+		log.info(`focus order (Tab ×${presses}):`);
+		shown.forEach((item, index) => log.info(`  ${index + 1}. ${item.label ?? "(nothing focused)"}`));
+		if (loopAt !== -1) log.info(`  → back to 1 after ${loopAt} stop${loopAt === 1 ? "" : "s"}`);
+	}
+	const info = message => {
+		if (typeof message !== "string") return log.info(message);
+		if (message.startsWith(MARKER)) {
+			entries.push(...JSON.parse(message.slice(MARKER.length)));
+			return;
+		}
+		
+		if (message.startsWith(FOCUS_MARKER)) {
+			const [type, value, path] = JSON.parse(message.slice(FOCUS_MARKER.length));
+			if (type === "start") focus = { presses: value, items: [] }
+			else if (type === "item" && focus) focus.items.push({ label: value, path });
+			else if (type === "end" && focus) {
+				printFocus();
+				focus = null;
+			}
+			return;
+		}
+		if (message.startsWith(ASSERT_MARKER)) {
+			const [expression, problem] = JSON.parse(message.slice(ASSERT_MARKER.length));
+			if (problem === null) return log.info(`assert ok: ${expression}`);
+			failedAsserts += 1;
+			return log.error(`assert failed: ${expression} — ${problem}`);
+		}
+		log.info(message);
+	}
+	const report = () => {
+		for (const { kind, message, count } of entries) log.error(`${kind}: ${message}${count > 1 ? ` (×${count})` : ""}`);
+		return { consoleErrors: entries.length, failedAsserts }
+	}
+	return { log: { ...log, info }, report }
+}

package/src/page/mock.mjs

@@ -58,18 +58,19 @@ export const resolveMockFiles = async (files, baseDir) => Promise.all(
 export const mockScript = rules => `(() => {
 	const rules = ${JSON.stringify(rules)}.map(rule => ({ ...rule, regex: new RegExp(rule.regex) }));
 	const requests = window.${REQUESTS_KEY} = window.${REQUESTS_KEY} || [];
+	const pathOf = address => address.protocol === "file:" ? address.pathname.replace(/^\\/[A-Za-z]:/, "") : address.pathname;
 	const find = (method, url) => {
 		const address = new URL(url, location.href);
 		return rules.find(rule => {
 			if (rule.method && rule.method !== method) return false;
-			const base = rule.isFullUrl ? address.origin + address.pathname : address.pathname;
+			const base = rule.isFullUrl ? address.origin + address.pathname : pathOf(address);
 			return rule.regex.test(rule.withQuery ? base + address.search : base);
 		});
 	}
 	
 	const record = (method, url, rule) => {
 		const address = new URL(url, location.href);
-		const shown = address.origin === location.origin ? address.pathname + address.search : address.href;
+		const shown = address.origin === location.origin ? pathOf(address) + address.search : address.href;
 		requests.push(method + " " + shown + (rule ? " -> mock " + rule.status : " -> network"));
 	}
 	const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

package/src/page/network.mjs

@@ -0,0 +1,79 @@
+import { REQUESTS_KEY } from "#src/page/mock.mjs";
+
+export const NETWORK_STEPS = new Set(["offline", "online", "latency"]);
+
+export const checkLatency = value => {
+	if (value === undefined) return 0;
+	if (!/^\d+$/.test(String(value))) throw new Error(`latency needs milliseconds, got "${value}"`);
+	return Number(value);
+}
+
+export const networkStep = (kind, value, step) => {
+	if (kind === "latency" && !/^\d+$/.test(value)) throw new Error(`latency needs milliseconds, got "${step}"`);
+	if (kind !== "latency" && value) throw new Error(`${kind} takes no value, got "${step}"`);
+	const state = kind === "latency" ? { latencyMs: Number(value) } : { isOffline: kind === "offline" }
+	return { kind: "js", value: `window.__webviewPreview.network(${JSON.stringify(state)})` }
+}
+
+export const networkScript = ({ isOffline, latencyMs }) => `(() => {
+	const state = { isOffline: ${!!isOffline}, latencyMs: ${latencyMs} }
+	const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+	const record = (method, url) => {
+		const requests = window.${REQUESTS_KEY};
+		if (!requests) return;
+		const address = new URL(url, location.href);
+		const shown = address.origin === location.origin ? address.pathname + address.search : address.href;
+		requests.push(method + " " + shown + " -> offline");
+	}
+
+	const onLine = Object.getOwnPropertyDescriptor(Navigator.prototype, "onLine");
+	Object.defineProperty(Navigator.prototype, "onLine", {
+		configurable: true,
+		get() {
+			return state.isOffline ? false : onLine.get.call(this);
+		}
+	});
+
+	const network = next => {
+		const wasOffline = state.isOffline;
+		Object.assign(state, next);
+		if (wasOffline !== state.isOffline) window.dispatchEvent(new Event(state.isOffline ? "offline" : "online"));
+	}
+
+	const originalFetch = window.fetch;
+	window.fetch = async function (input, init) {
+		if (state.latencyMs) await wait(state.latencyMs);
+		if (state.isOffline) {
+			const url = typeof input === "string" || input instanceof URL ? String(input) : input.url;
+			record(String(init && init.method || input && input.method || "GET").toUpperCase(), url);
+			throw new TypeError("Failed to fetch");
+		}
+		return originalFetch.call(this, input, init);
+	}
+
+	const define = (target, name, value) => Object.defineProperty(target, name, { value, configurable: true });
+	const originalOpen = XMLHttpRequest.prototype.open;
+	const originalSend = XMLHttpRequest.prototype.send;
+	XMLHttpRequest.prototype.open = function (method, url, ...rest) {
+		this.__webviewPreviewNetwork = { method: String(method).toUpperCase(), url: String(url) }
+		return originalOpen.call(this, method, url, ...rest);
+	}
+
+	XMLHttpRequest.prototype.send = function (body) {
+		const xhr = this;
+		const info = xhr.__webviewPreviewNetwork;
+		const send = () => {
+			if (!state.isOffline) return originalSend.call(xhr, body);
+			if (info) record(info.method, info.url);
+			define(xhr, "readyState", 4);
+			define(xhr, "status", 0);
+			xhr.dispatchEvent(new Event("readystatechange"));
+			xhr.dispatchEvent(new ProgressEvent("error"));
+			xhr.dispatchEvent(new ProgressEvent("loadend"));
+		}
+		if (state.latencyMs || state.isOffline) setTimeout(send, state.latencyMs);
+		else send();
+	}
+
+	window.__webviewPreview = Object.assign(window.__webviewPreview || {}, { network });
+})();`;

package/src/snapshots/compare.mjs

@@ -1,4 +1,4 @@
-import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, rmSync } from "node:fs";
 import path from "node:path";
 import { readPng, writePng } from "#src/snapshots/png.mjs";
 
@@ -37,12 +37,16 @@ export const diffImages = (actual, expected, tolerance) => {
 export const compareSnapshots = ({ saved, baselineDir, updateBaseline, tolerance, maxDiffPixels, log }) => {
 	mkdirSync(baselineDir, { recursive: true });
 	let failed = false;
+	const results = [];
 	for (const file of saved) {
 		const name = path.basename(file);
 		const baseline = path.join(baselineDir, name);
+		const diffFile = file.replace(/\.png$/, ".diff.png");
+		rmSync(diffFile, { force: true });
 		if (updateBaseline || !existsSync(baseline)) {
 			copyFileSync(file, baseline);
 			log.info(`compare ${name}: ${updateBaseline ? "baseline updated" : "new baseline"} → ${baseline}`);
+			results.push({ file, baseline, status: updateBaseline ? "baseline updated" : "new baseline" });
 			continue;
 		}
 		
@@ -50,23 +54,28 @@ export const compareSnapshots = ({ saved, baselineDir, updateBaseline, tolerance
 		if (result.sizeMismatch) {
 			failed = true;
 			log.error(`compare ${name}: size changed, baseline ${baseline}`);
+			results.push({ file, baseline, status: "size changed", isFailed: true });
 			continue;
 		}
 		if (result.differentPixels === 0) {
 			log.info(`compare ${name}: same`);
+			results.push({ file, baseline, status: "same" });
 			continue;
 		}
 
-		const diffFile = file.replace(/\.png$/, ".diff.png");
 		writePng(diffFile, result.diff);
 		const share = ((result.differentPixels / result.total) * 100).toFixed(2);
 		const message = `compare ${name}: ${result.differentPixels} px differ (${share}%) → ${diffFile}`;
-		if (result.differentPixels > maxDiffPixels) {
+		const isFailed = result.differentPixels > maxDiffPixels;
+		
+		if (isFailed) {
 			failed = true;
 			log.error(message);
 		} else {
 			log.info(`${message} (within maxDiffPixels ${maxDiffPixels})`);
 		}
+
+		results.push({ file, baseline, diffFile, status: `${result.differentPixels} px differ (${share}%)`, isFailed });
 	}
-	return failed;
+	return { failed, results }
 }

package/src/snapshots/film.mjs

@@ -0,0 +1,51 @@
+import { rmSync } from "node:fs";
+import { clipRect } from "#src/core/steps.mjs";
+import { readPng, writePng } from "#src/snapshots/png.mjs";
+
+const COLUMNS = 5;
+const GAP = 4;
+const GAP_COLOR = [128, 128, 128, 255];
+
+const unionRect = rects => {
+	const left = Math.min(...rects.map(rect => rect.x));
+	const top = Math.min(...rects.map(rect => rect.y));
+	const right = Math.max(...rects.map(rect => rect.x + rect.width));
+	const bottom = Math.max(...rects.map(rect => rect.y + rect.height));
+	return { x: left, y: top, width: right - left, height: bottom - top }
+}
+
+const cropArea = ({ frames, viewport }, margin) => {
+	const rects = frames.map(frame => frame.rect).filter(rect => rect && rect.width > 0 && rect.height > 0);
+	if (!rects.length) return { x: 0, y: 0, ...viewport }
+	return clipRect(unionRect(rects), margin, viewport);
+}
+
+export const stitchFilm = (film, margin) => {
+	const images = film.frames.map(frame => readPng(frame.file));
+	const area = cropArea(film, margin);
+	const left = Math.round(area.x * film.scale);
+	const top = Math.round(area.y * film.scale);
+	const width = Math.min(Math.round(area.width * film.scale), ...images.map(image => image.width - left));
+	const height = Math.min(Math.round(area.height * film.scale), ...images.map(image => image.height - top));
+	const columns = Math.min(COLUMNS, images.length);
+	const rows = Math.ceil(images.length / columns);
+	const sheet = {
+		width: columns * width + (columns - 1) * GAP,
+		height: rows * height + (rows - 1) * GAP
+	}
+	const rgba = Buffer.alloc(sheet.width * sheet.height * 4);
+	for (let offset = 0; offset < rgba.length; offset += 4) rgba.set(GAP_COLOR, offset);
+
+	images.forEach((image, index) => {
+		const x = (index % columns) * (width + GAP);
+		const y = Math.floor(index / columns) * (height + GAP);
+		for (let row = 0; row < height; row += 1) {
+			const from = ((top + row) * image.width + left) * 4;
+			image.rgba.copy(rgba, ((y + row) * sheet.width + x) * 4, from, from + width * 4);
+		}
+	});
+
+	writePng(film.file, { ...sheet, rgba });
+	for (const frame of film.frames) rmSync(frame.file, { force: true });
+	return `film ${film.name}: ${images.length} frames at ${film.frames.map(frame => frame.time).join(" ")} ms, ${columns} per row`;
+}

package/src/snapshots/report.mjs

@@ -0,0 +1,71 @@
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+
+const escape = value => String(value)
+	.replace(/&/g, "&")
+	.replace(/</g, "&lt;")
+	.replace(/>/g, "&gt;")
+	.replace(/"/g, "&quot;");
+
+const STYLE = `
+	:root { color-scheme: light dark; --bg: #f6f6f7; --panel: #fff; --text: #1d1d1f; --muted: #6e6e73; --line: #d9d9de; --ok: #1a7f37; --bad: #cf222e; --code: #efeff2 }
+	@media (prefers-color-scheme: dark) { :root { --bg: #111113; --panel: #1b1b1e; --text: #ededf0; --muted: #9a9aa2; --line: #2e2e33; --ok: #3fb950; --bad: #f85149; --code: #232327 } }
+	* { box-sizing: border-box }
+	body { margin: 0; padding: 24px 16px 48px; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, sans-serif }
+	main { max-width: 1400px; margin: 0 auto }
+	h1 { font-size: 20px; margin: 0 0 4px }
+	h2 { font-size: 15px; margin: 0 }
+	.meta { color: var(--muted); margin: 0 0 20px; overflow-wrap: anywhere }
+	.status { font-weight: 600 }
+	.ok { color: var(--ok) }
+	.bad { color: var(--bad) }
+	pre { background: var(--code); padding: 12px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, monospace; margin: 0 0 24px }
+	pre .bad { color: var(--bad) }
+	section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 0 0 16px }
+	section header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 12px }
+	.images { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
+	figure { margin: 0 }
+	figcaption { color: var(--muted); font-size: 12px; margin: 0 0 4px }
+	img { display: block; max-width: 100%; border: 1px solid var(--line); background: repeating-conic-gradient(#8882 0 25%, transparent 0 50%) 0 0 / 16px 16px }
+	a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }
+`;
+
+const figure = (caption, file, out) => {
+	const href = escape(path.relative(out, file).split(path.sep).join("/"));
+	return `<figure><figcaption>${escape(caption)}</figcaption><a href="${href}"><img src="${href}" alt="${escape(caption)}" loading="lazy"></a></figure>`;
+}
+
+const snapshotSection = (file, compared, out) => {
+	const images = compared?.baseline && compared.status !== "new baseline" && compared.status !== "baseline updated"
+		? [figure("baseline", compared.baseline, out), figure("this run", file, out), ...(compared.diffFile ? [figure("difference (red)", compared.diffFile, out)] : [])]
+		: [figure("this run", file, out)];
+	const status = compared ? `<span class="status ${compared.isFailed ? "bad" : "ok"}">${escape(compared.status)}</span>` : "";
+	return `<section><header><h2>${escape(path.basename(file))}</h2>${status}</header><div class="images">${images.join("")}</div></section>`;
+}
+
+export const writeReport = ({ out, url, engine, sizes, lines, saved, compared = [], failed }) => {
+	const file = path.join(out, "report.html");
+	const byFile = new Map(compared.map(result => [result.file, result]));
+	const changed = compared.filter(result => result.isFailed).length;
+	const log = lines.map(([kind, text]) => kind === "error" ? `<span class="bad">${escape(text)}</span>` : escape(text)).join("\n");
+	const html = `<!doctype html>
+		<html lang="en">
+		<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>webview-preview report</title>
+		<style>${STYLE}</style>
+		</head>
+		<body>
+		<main>
+		<h1>webview-preview report <span class="status ${failed ? "bad" : "ok"}">${failed ? "failed" : "passed"}</span></h1>
+		<p class="meta">${escape(url)} · ${escape(engine)} · ${escape(sizes.join(", "))} · ${saved.length} snapshot(s)${compared.length ? ` · ${changed} changed` : ""} · ${escape(new Date().toLocaleString())}</p>
+		${log ? `<pre>${log}</pre>` : ""}
+		${saved.map(snapshot => snapshotSection(snapshot, byFile.get(snapshot), out)).join("\n")}
+		</main>
+		</body>
+		</html>
+	`;
+	writeFileSync(file, html);
+	return file;
+}