webview-preview 0.0.1 → 1.1.0

package/src/page/tauri.mjs

@@ -0,0 +1,95 @@
+import { ANY_FUNCTION, RECORD_FUNCTION, toSource } from "#src/page/source.mjs";
+
+const DEFAULT_COMMANDS = {
+	"plugin:app|version": "0.0.0",
+	"plugin:app|name": "app",
+	"plugin:app|tauri_version": "2.0.0",
+	"plugin:window|is_maximized": false,
+	"plugin:window|is_minimized": false,
+	"plugin:window|is_fullscreen": false,
+	"plugin:window|is_focused": true,
+	"plugin:window|is_visible": true,
+	"plugin:window|is_decorated": true,
+	"plugin:window|is_resizable": true,
+	"plugin:window|scale_factor": () => window.devicePixelRatio,
+	"plugin:window|inner_size": () => ({ width: window.innerWidth, height: window.innerHeight }),
+	"plugin:window|outer_size": () => ({ width: window.innerWidth, height: window.innerHeight })
+}
+
+export const resolveTauri = (fromConfig, fromOptions) => {
+	const pick = value => value === true ? {} : value && typeof value === "object" ? value : null;
+	const config = pick(fromConfig);
+	const options = pick(fromOptions);
+	if (!config && !options) return null;
+	return {
+		label: options?.label ?? config?.label ?? "main",
+		commands: { ...config?.commands, ...options?.commands }
+	}
+}
+
+export const tauriScript = ({ label, commands }) => `(() => {
+	const __webviewPreviewAny = ${ANY_FUNCTION};
+	const record = ${RECORD_FUNCTION};
+	const commands = Object.assign(${toSource(DEFAULT_COMMANDS)}, ${toSource(commands, "tauri")});
+	const callbacks = new Map();
+	const listeners = new Map();
+	let nextId = 1;
+
+	const transformCallback = (callback, once = false) => {
+		const id = nextId++;
+		callbacks.set(id, data => {
+			if (once) callbacks.delete(id);
+			return callback && callback(data);
+		});
+		return id;
+	}
+
+	const runCallback = (id, data) => {
+		const callback = callbacks.get(id);
+		if (callback) callback(data);
+	}
+
+	const removeListener = (event, id) => {
+		callbacks.delete(id);
+		const ids = listeners.get(event);
+		if (ids && ids.includes(id)) ids.splice(ids.indexOf(id), 1);
+	}
+
+	const emit = (event, payload) => {
+		for (const id of [...(listeners.get(event) || [])]) runCallback(id, { event, id, payload });
+	}
+
+	const events = {
+		"plugin:event|listen": ({ event, handler }) => {
+			if (!listeners.has(event)) listeners.set(event, []);
+			listeners.get(event).push(handler);
+			return handler;
+		},
+		"plugin:event|unlisten": ({ event, eventId }) => removeListener(event, eventId),
+		"plugin:event|emit": ({ event, payload }) => emit(event, payload),
+		"plugin:event|emit_to": ({ event, payload }) => emit(event, payload)
+	}
+
+	const invoke = async (command, args = {}) => {
+		if (events[command]) return events[command](args) ?? null;
+		const isKnown = Object.prototype.hasOwnProperty.call(commands, command);
+		record("invoke " + command + (isKnown ? " -> stub" : " -> null"));
+		if (!isKnown) return null;
+		const answer = commands[command];
+		return typeof answer === "function" ? answer(args) : answer;
+	}
+
+	window.__TAURI_INTERNALS__ = {
+		invoke,
+		transformCallback,
+		unregisterCallback: id => callbacks.delete(id),
+		runCallback,
+		callbacks,
+		convertFileSrc: (path, protocol = "asset") => protocol + "://localhost/" + encodeURIComponent(path),
+		metadata: { currentWindow: { label: ${JSON.stringify(label)} }, currentWebview: { windowLabel: ${JSON.stringify(label)}, label: ${JSON.stringify(label)} } },
+		plugins: { path: { sep: "/", delimiter: ":" } }
+	}
+	window.__TAURI_EVENT_PLUGIN_INTERNALS__ = { unregisterListener: removeListener }
+	window.isTauri = true;
+	window.__webviewPreview = Object.assign(window.__webviewPreview || {}, { emit });
+})();`;

package/src/snapshots/compare.mjs

@@ -37,12 +37,14 @@ 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);
 		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,10 +52,12 @@ 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;
 		}
 
@@ -61,12 +65,16 @@ export const compareSnapshots = ({ saved, baselineDir, updateBaseline, tolerance
 		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;
+}