webview-preview 0.0.0-stage → 1.0.0

package/src/page/mock.mjs

@@ -0,0 +1,117 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+const METHODS = new Set(["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]);
+const RESPONSE_KEYS = new Set(["status", "json", "body", "headers", "delayMs"]);
+export const REQUESTS_KEY = "__webviewPreviewRequests";
+
+const globToRegExp = pattern => {
+	const source = pattern
+		.split(/(\*\*|\*)/)
+		.map(part => part === "**" ? ".*" : part === "*" ? "[^/]*" : part.replace(/[.+?^${}()|[\]\\]/g, "\\$&"))
+		.join("");
+	return `^${source}$`;
+}
+
+const parseKey = key => {
+	const [first, ...rest] = key.trim().split(/\s+/);
+	const hasMethod = METHODS.has(first.toUpperCase()) && rest.length > 0;
+	const pattern = hasMethod ? rest.join(" ") : key.trim();
+	return {
+		method: hasMethod ? first.toUpperCase() : null,
+		pattern,
+		regex: globToRegExp(pattern),
+		isFullUrl: /^https?:\/\//i.test(pattern),
+		withQuery: pattern.includes("?")
+	}
+}
+
+const parseResponse = (key, response) => {
+	if (!response || typeof response !== "object") throw new Error(`mock "${key}" must be an object like { json: … } or { status: 500 }`);
+	const unknown = Object.keys(response).filter(name => !RESPONSE_KEYS.has(name));
+	if (unknown.length) throw new Error(`mock "${key}": unknown field ${unknown.join(", ")}; use ${[...RESPONSE_KEYS].join(", ")}`);
+	if ("json" in response && "body" in response) throw new Error(`mock "${key}": use json or body, not both`);
+	const isJson = "json" in response;
+	return {
+		status: response.status ?? 200,
+		body: isJson ? JSON.stringify(response.json) : String(response.body ?? ""),
+		headers: { ...(isJson ? { "content-type": "application/json" } : {}), ...(response.headers ?? {}) },
+		delayMs: response.delayMs ?? 0
+	}
+}
+
+export const loadMockFile = async file => {
+	if (!existsSync(file)) throw new Error(`mock file not found: ${file}`);
+	if (file.endsWith(".json")) return JSON.parse(readFileSync(file, "utf8"));
+	const module = await import(pathToFileURL(file).href);
+	return module.default ?? module;
+}
+
+export const compileMock = mocks => Object.entries(Object.assign({}, ...mocks.filter(Boolean)))
+	.map(([key, response]) => ({ key, ...parseKey(key), ...parseResponse(key, response) }));
+
+export const resolveMockFiles = async (files, baseDir) => Promise.all(
+	[].concat(files ?? []).map(file => loadMockFile(path.resolve(baseDir, file)))
+);
+
+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 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;
+			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;
+		requests.push(method + " " + shown + (rule ? " -> mock " + rule.status : " -> network"));
+	}
+	const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+	const originalFetch = window.fetch.bind(window);
+	window.fetch = async (input, init) => {
+		const url = typeof input === "string" || input instanceof URL ? String(input) : input.url;
+		const method = String(init && init.method || input && input.method || "GET").toUpperCase();
+		const rule = find(method, url);
+		record(method, url, rule);
+		if (!rule) return originalFetch(input, init);
+		if (rule.delayMs) await wait(rule.delayMs);
+		return new Response(rule.status === 204 || rule.status === 304 ? null : rule.body, { status: rule.status, headers: rule.headers });
+	}
+
+	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.__webviewPreview = { method: String(method).toUpperCase(), url: String(url) }
+		return originalOpen.call(this, method, url, ...rest);
+	}
+	
+	XMLHttpRequest.prototype.send = function (body) {
+		const info = this.__webviewPreview;
+		const rule = info && find(info.method, info.url);
+		if (info) record(info.method, info.url, rule);
+		if (!rule) return originalSend.call(this, body);
+		const xhr = this;
+		const headers = Object.fromEntries(Object.entries(rule.headers).map(([name, value]) => [name.toLowerCase(), String(value)]));
+		setTimeout(() => {
+			define(xhr, "readyState", 4);
+			define(xhr, "status", rule.status);
+			define(xhr, "statusText", "");
+			define(xhr, "responseURL", new URL(info.url, location.href).href);
+			define(xhr, "responseText", rule.body);
+			define(xhr, "response", xhr.responseType === "json" ? (rule.body ? JSON.parse(rule.body) : null) : rule.body);
+			define(xhr, "getResponseHeader", name => headers[String(name).toLowerCase()] ?? null);
+			define(xhr, "getAllResponseHeaders", () => Object.entries(headers).map(([name, value]) => name + ": " + value).join("\\r\\n"));
+			xhr.dispatchEvent(new Event("readystatechange"));
+			xhr.dispatchEvent(new ProgressEvent("load"));
+			xhr.dispatchEvent(new ProgressEvent("loadend"));
+		}, rule.delayMs);
+	}
+})();`;

package/src/page/source.mjs

@@ -0,0 +1,55 @@
+const ANY_API = Symbol.for("webview-preview.anyApi");
+
+export const anyApi = (members = {}) => ({ [ANY_API]: true, members });
+
+const asExpression = source => {
+	try {
+		new Function(`return (${source})`);
+		return source;
+	} catch {
+		return source.startsWith("async ") ? `async function ${source.slice(6)}` : `function ${source}`;
+	}
+}
+
+export const toSource = (value, name = "value") => {
+	if (typeof value === "function") return `(${asExpression(value.toString())})`;
+	if (value === undefined) return "undefined";
+	if (Array.isArray(value)) return `[${value.map((item, index) => toSource(item, `${name}[${index}]`)).join(", ")}]`;
+	if (value && typeof value === "object") {
+		if (value[ANY_API]) return `__webviewPreviewAny(${toSource(value.members, name)}, ${JSON.stringify(name)})`;
+		const entries = Object.entries(value).map(([key, item]) => `${JSON.stringify(key)}: ${toSource(item, `${name}.${key}`)}`);
+		return `{ ${entries.join(", ")} }`;
+	}
+	return JSON.stringify(value);
+}
+
+export const RECORD_FUNCTION = `call => (window.__webviewPreviewRequests = window.__webviewPreviewRequests || []).push(call)`;
+
+export const ANY_FUNCTION = `(members, name) => {
+	const record = ${RECORD_FUNCTION};
+	const settled = () => new Proxy(function () {}, {
+		get: (_, key) => key === "then" ? resolve => resolve(null) : key === Symbol.toPrimitive ? () => "" : settled(),
+		apply: () => settled()
+	});
+
+	const node = path => new Proxy(function () {}, {
+		get: (_, key) => {
+			if (typeof key === "symbol") return key === Symbol.toPrimitive ? () => "" : undefined;
+			if (key === "then" || key === "toJSON") return undefined;
+			if (path === name && Object.prototype.hasOwnProperty.call(members, key)) {
+				const member = members[key];
+				if (typeof member !== "function") return member;
+				return (...args) => {
+					record("call " + path + "." + key + " -> stub");
+					return member(...args);
+				}
+			}
+			return node(path + "." + key);
+		},
+		apply: () => {
+			record("call " + path + " -> default");
+			return settled();
+		}
+	});
+	return node(name);
+}`;

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/clean.mjs

@@ -0,0 +1,36 @@
+import { existsSync, readdirSync, rmSync, statSync } from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { loadConfig } from "#src/core/config.mjs";
+
+const DURATION = /^(\d+)(m|h|d)$/;
+const UNIT_MS = {
+	m: 60_000,
+	h: 3_600_000,
+	d: 86_400_000
+}
+
+const parseDuration = value => {
+	const match = DURATION.exec(String(value));
+	if (!match) throw new Error(`--older-than needs a duration like 30m, 2h or 7d, got "${value}"`);
+	return Number(match[1]) * UNIT_MS[match[2]];
+}
+
+export const cleanSnapshots = async (options = {}) => {
+	const config = options.config === false ? {} : await loadConfig(options.config);
+	const baseDir = config.configDir ?? process.cwd();
+	const out = path.resolve(baseDir, options.out ?? config.out ?? ".webview-preview");
+	const baseline = path.resolve(baseDir, options.baseline ?? config.baseline ?? "webview-preview-baseline");
+	const protectedDirs = [path.parse(out).root, os.homedir(), process.cwd(), baseDir, baseline].map(dir => path.resolve(dir));
+	if (protectedDirs.includes(out)) throw new Error(`refusing to clean ${out}: point "out" at a folder used only for snapshots`);
+	if (!existsSync(out)) return { removed: [], out }
+
+	const maxAge = options.olderThan ? parseDuration(options.olderThan) : 0;
+	const now = Date.now();
+	const removed = readdirSync(out)
+		.filter(name => name.toLowerCase().endsWith(".png"))
+		.map(name => path.join(out, name))
+		.filter(file => statSync(file).isFile() && now - statSync(file).mtimeMs >= maxAge);
+	if (!options.dryRun) for (const file of removed) rmSync(file);
+	return { removed, out }
+}

package/src/snapshots/compare.mjs

@@ -0,0 +1,72 @@
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import path from "node:path";
+import { readPng, writePng } from "#src/snapshots/png.mjs";
+
+export const diffImages = (actual, expected, tolerance) => {
+	if (actual.width !== expected.width || actual.height !== expected.height) {
+		return { differentPixels: Math.max(actual.width * actual.height, expected.width * expected.height), sizeMismatch: true }
+	}
+
+	const total = actual.width * actual.height;
+	const diff = Buffer.alloc(total * 4);
+	let differentPixels = 0;
+	for (let index = 0; index < total; index += 1) {
+		const offset = index * 4;
+		let isDifferent = false;
+		for (let channel = 0; channel < 4; channel += 1) {
+			if (Math.abs(actual.rgba[offset + channel] - expected.rgba[offset + channel]) > tolerance) {
+				isDifferent = true;
+				break;
+			}
+		}
+
+		if (isDifferent) {
+			differentPixels += 1;
+			diff[offset] = 255;
+			diff[offset + 1] = 0;
+			diff[offset + 2] = 0;
+		} else {
+			const grey = Math.round((actual.rgba[offset] + actual.rgba[offset + 1] + actual.rgba[offset + 2]) / 3);
+			diff[offset] = diff[offset + 1] = diff[offset + 2] = 128 + (grey >> 2);
+		}
+		diff[offset + 3] = 255;
+	}
+	return { differentPixels, total, diff: { width: actual.width, height: actual.height, rgba: diff } }
+}
+
+export const compareSnapshots = ({ saved, baselineDir, updateBaseline, tolerance, maxDiffPixels, log }) => {
+	mkdirSync(baselineDir, { recursive: true });
+	let failed = false;
+	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}`);
+			continue;
+		}
+		
+		const result = diffImages(readPng(file), readPng(baseline), tolerance);
+		if (result.sizeMismatch) {
+			failed = true;
+			log.error(`compare ${name}: size changed, baseline ${baseline}`);
+			continue;
+		}
+		if (result.differentPixels === 0) {
+			log.info(`compare ${name}: 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) {
+			failed = true;
+			log.error(message);
+		} else {
+			log.info(`${message} (within maxDiffPixels ${maxDiffPixels})`);
+		}
+	}
+	return failed;
+}

package/src/snapshots/png.mjs

@@ -0,0 +1,119 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import zlib from "node:zlib";
+
+const SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+const CHANNELS = { 0: 1, 2: 3, 4: 2, 6: 4 }
+
+const paeth = (left, up, upLeft) => {
+	const estimate = left + up - upLeft;
+	const toLeft = Math.abs(estimate - left);
+	const toUp = Math.abs(estimate - up);
+	const toUpLeft = Math.abs(estimate - upLeft);
+	if (toLeft <= toUp && toLeft <= toUpLeft) return left;
+	return toUp <= toUpLeft ? up : upLeft;
+}
+
+export const readPng = file => {
+	const data = readFileSync(file);
+	if (!data.subarray(0, 8).equals(SIGNATURE)) throw new Error(`${file} is not a PNG`);
+	let offset = 8;
+	let header = null;
+	const chunks = [];
+	while (offset < data.length) {
+		const length = data.readUInt32BE(offset);
+		const type = data.toString("ascii", offset + 4, offset + 8);
+		const body = data.subarray(offset + 8, offset + 8 + length);
+		if (type === "IHDR") {
+			header = {
+				width: body.readUInt32BE(0),
+				height: body.readUInt32BE(4),
+				bitDepth: body[8],
+				colorType: body[9],
+				interlace: body[12]
+			}
+		} else if (type === "IDAT") {
+			chunks.push(body);
+		} else if (type === "IEND") {
+			break;
+		}
+		offset += length + 12;
+	}
+
+	if (!header) throw new Error(`${file}: no IHDR`);
+	const channels = CHANNELS[header.colorType];
+	if (header.bitDepth !== 8 || !channels || header.interlace !== 0) {
+		throw new Error(`${file}: only 8-bit, non-interlaced grey/RGB/RGBA PNGs are supported`);
+	}
+
+	const raw = zlib.inflateSync(Buffer.concat(chunks));
+	const { width, height } = header;
+	const stride = width * channels;
+	const pixels = Buffer.alloc(stride * height);
+	for (let y = 0; y < height; y += 1) {
+		const filter = raw[y * (stride + 1)];
+		const line = raw.subarray(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+		const row = y * stride;
+		for (let x = 0; x < stride; x += 1) {
+			const left = x >= channels ? pixels[row + x - channels] : 0;
+			const up = y > 0 ? pixels[row - stride + x] : 0;
+			const upLeft = y > 0 && x >= channels ? pixels[row - stride + x - channels] : 0;
+			const predictor = filter === 1 ? left : filter === 2 ? up : filter === 3 ? (left + up) >> 1 : filter === 4 ? paeth(left, up, upLeft) : 0;
+			pixels[row + x] = (line[x] + predictor) & 255;
+		}
+	}
+
+	const rgba = Buffer.alloc(width * height * 4);
+	for (let index = 0; index < width * height; index += 1) {
+		const source = index * channels;
+		const target = index * 4;
+		if (channels >= 3) {
+			rgba[target] = pixels[source];
+			rgba[target + 1] = pixels[source + 1];
+			rgba[target + 2] = pixels[source + 2];
+		} else {
+			rgba[target] = rgba[target + 1] = rgba[target + 2] = pixels[source];
+		}
+		rgba[target + 3] = channels === 4 ? pixels[source + 3] : channels === 2 ? pixels[source + 1] : 255;
+	}
+	return { width, height, rgba }
+}
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, index) => {
+	let value = index;
+	for (let bit = 0; bit < 8; bit += 1) value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
+	return value >>> 0;
+});
+
+const crc32 = buffer => {
+	let value = 0xffffffff;
+	for (const byte of buffer) value = CRC_TABLE[(value ^ byte) & 255] ^ (value >>> 8);
+	return (value ^ 0xffffffff) >>> 0;
+}
+
+const chunk = (type, body) => {
+	const length = Buffer.alloc(4);
+	length.writeUInt32BE(body.length);
+	const typed = Buffer.concat([Buffer.from(type, "ascii"), body]);
+	const crc = Buffer.alloc(4);
+	crc.writeUInt32BE(crc32(typed));
+	return Buffer.concat([length, typed, crc]);
+}
+
+export const writePng = (file, { width, height, rgba }) => {
+	const header = Buffer.alloc(13);
+	header.writeUInt32BE(width, 0);
+	header.writeUInt32BE(height, 4);
+	header[8] = 8;
+	header[9] = 6;
+	const raw = Buffer.alloc((width * 4 + 1) * height);
+	for (let y = 0; y < height; y += 1) {
+		rgba.copy(raw, y * (width * 4 + 1) + 1, y * width * 4, (y + 1) * width * 4);
+	}
+	
+	writeFileSync(file, Buffer.concat([
+		SIGNATURE,
+		chunk("IHDR", header),
+		chunk("IDAT", zlib.deflateSync(raw)),
+		chunk("IEND", Buffer.alloc(0))
+	]));
+}