webview-preview 0.0.1 → 1.1.0

package/src/index.d.ts

@@ -6,13 +6,21 @@ export type Step =
 	| `wait:${number}`
 	| `waitfor:${string}`
 	| `measure:${string}`
+	| `assert:${string}`
+	| "focusorder"
+	| `focusorder:${number}`
+	| `film:${string}:${number}`
+	| "offline"
+	| "online"
+	| `latency:${number}`
 	| `snap:${string}`
 	| `print:${string}`
 	| `resize:${number}x${number}`
 	| `key:${string}`
 	| `type:${string}`
 	| `hover:${string}`
-	| `click:${string}`;
+	| `click:${string}`
+	| `macro:${string}`;
 
 export interface ServerOptions {
 	command: string;
@@ -26,7 +34,13 @@ export interface PreviewConfig {
 	baseUrl?: string;
 	server?: ServerOptions;
 	engine?: Engine;
-	size?: `${number}x${number}`;
+	size?: Size | Size[] | string;
+	colorScheme?: "light" | "dark";
+	reducedMotion?: boolean;
+	offline?: boolean;
+	latency?: number;
+	watch?: string | string[];
+	report?: boolean;
 	out?: string;
 	prefix?: string;
 	scale?: number;
@@ -42,6 +56,22 @@ export interface PreviewConfig {
 	baseline?: string;
 	maxDiffPixels?: number;
 	compareTolerance?: number;
+	tauri?: boolean | TauriStub;
+	globals?: Record<string, unknown>;
+	locale?: string;
+	macros?: Record<string, Step[] | string[]>;
+	failOnError?: boolean;
+}
+
+export type Size = `${number}x${number}`;
+
+export interface TauriStub {
+	commands?: Record<string, unknown | ((args: Record<string, unknown>) => unknown)>;
+	label?: string;
+}
+
+export interface AnyApi {
+	readonly members: Record<string, unknown>;
 }
 
 export interface MockResponse {
@@ -66,7 +96,11 @@ export interface PreviewOptions extends PreviewConfig {
 export interface PreviewResult {
 	engine: Exclude<Engine, "auto">;
 	url: string;
+	sizes: string[];
 	saved: string[];
+	consoleErrors: number;
+	failedAsserts: number;
+	report?: string;
 	failed: boolean;
 }
 
@@ -74,7 +108,9 @@ export declare const ENGINES: Engine[];
 export declare const REQUESTS_KEY: "__webviewPreviewRequests";
 export declare function resolveUrl(target: string, baseUrl?: string): string;
 export declare function preview(options?: PreviewOptions): Promise<PreviewResult>;
+export declare function watchPreview(options?: PreviewOptions, onRun?: (result: PreviewResult) => void): Promise<() => void>;
 export declare function defineConfig(config: PreviewConfig): PreviewConfig;
+export declare function anyApi(members?: Record<string, unknown>): AnyApi;
 export interface CleanOptions {
 	config?: string | false;
 	out?: string;

package/src/index.mjs

@@ -1,16 +1,24 @@
-import { mkdirSync } from "node:fs";
+import { existsSync, mkdirSync } from "node:fs";
 import path from "node:path";
 import { compareSnapshots } from "#src/snapshots/compare.mjs";
+import { stitchFilm } from "#src/snapshots/film.mjs";
+import { writeReport } from "#src/snapshots/report.mjs";
 import { loadConfig } from "#src/core/config.mjs";
 import { resolveEngine, runEngine } from "#src/engines/index.mjs";
-import { resolveInit } from "#src/page/init.mjs";
+import { consoleScript, consoleStep, watchOutput } from "#src/page/console.mjs";
+import { checkLocale, globalsScript, localeScript } from "#src/page/globals.mjs";
+import { resolveInit, wrapInit } from "#src/page/init.mjs";
 import { compileMock, mockScript, resolveMockFiles } from "#src/page/mock.mjs";
 import { startServer } from "#src/core/server.mjs";
-import { parseSize, parseSteps } from "#src/core/steps.mjs";
+import { watchFiles } from "#src/core/watch.mjs";
+import { expandMacros, parseSize, parseSteps } from "#src/core/steps.mjs";
+import { checkLatency, networkScript } from "#src/page/network.mjs";
+import { resolveTauri, tauriScript } from "#src/page/tauri.mjs";
 
 export { ENGINES } from "#src/engines/index.mjs";
 export { REQUESTS_KEY } from "#src/page/mock.mjs";
 export { cleanSnapshots } from "#src/snapshots/clean.mjs";
+export { anyApi } from "#src/page/source.mjs";
 
 const DEFAULTS = { engine: "auto", size: "1200x650", out: ".webview-preview", steps: ["snap:page"] }
 const ABSOLUTE_URL = /^[a-z][a-z\d+.-]*:/i;
@@ -23,7 +31,23 @@ const consoleLog = {
 export const resolveUrl = (target, baseUrl) => {
 	if (ABSOLUTE_URL.test(target)) return target;
 	if (!baseUrl) throw new Error(`"${target}" is not a full URL; set baseUrl to open routes`);
-	return `${baseUrl}${target.startsWith("/") ? target : `/${target}`}`;
+	const route = target.startsWith("/") ? target : `/${target}`;
+	return baseUrl.endsWith("/") ? `${baseUrl}${route.slice(1)}` : `${baseUrl}${route}`;
+}
+
+const COLOR_SCHEMES = ["light", "dark"];
+
+const parseSizes = value => {
+	const sizes = [].concat(value).flatMap(item => String(item).split(",")).map(item => item.trim()).filter(Boolean);
+	if (!sizes.length) throw new Error("size needs at least one WxH");
+	for (const size of sizes) parseSize(size);
+	return sizes;
+}
+
+const checkColorScheme = value => {
+	if (value === undefined) return undefined;
+	if (!COLOR_SCHEMES.includes(value)) throw new Error(`colorScheme must be ${COLOR_SCHEMES.join(" or ")}, got "${value}"`);
+	return value;
 }
 
 export const preview = async (options = {}) => {
@@ -31,51 +55,172 @@ export const preview = async (options = {}) => {
 	const merged = { ...DEFAULTS, ...config, ...Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined)) }
 	const baseDir = config.configDir ?? process.cwd();
 	const engine = resolveEngine(merged.engine);
-	const steps = parseSteps(merged.steps.length ? merged.steps : DEFAULTS.steps);
+	const macros = { ...config.macros, ...options.macros }
+	const steps = parseSteps(expandMacros(merged.steps.length ? merged.steps : DEFAULTS.steps, macros));
 	const out = path.resolve(baseDir, merged.out);
 	const url = resolveUrl(merged.target ?? merged.url ?? "/", merged.baseUrl);
-	parseSize(merged.size);
+	const sizes = parseSizes(merged.size);
+	const snapMargin = Number(merged.snapMargin ?? 8);
+	const colorScheme = checkColorScheme(merged.colorScheme);
 	const mockFiles = await resolveMockFiles(options.mockFile, process.cwd());
 	const hasMock = config.mock !== undefined || options.mock !== undefined || mockFiles.length > 0
 		|| !!(options.logRequests ?? config.logRequests);
 	const mockRules = compileMock([config.mock, ...mockFiles, options.mock]);
-	const init = (hasMock ? [mockScript(mockRules)] : []).concat(resolveInit([
-		{ entries: config.init, baseDir },
-		{ entries: options.init, baseDir: process.cwd() },
-		{ entries: options.initFile && [].concat(options.initFile).map(file => ({ file })), baseDir: process.cwd() }
-	], baseDir));
+	const locale = merged.locale === undefined ? undefined : checkLocale(String(merged.locale));
+	const tauri = resolveTauri(config.tauri, options.tauri);
+	const globals = { ...config.globals, ...options.globals }
+	const network = { isOffline: !!merged.offline, latencyMs: checkLatency(merged.latency) }
+	const checked = stubs => stubs.filter(Boolean).map(stub => {
+		try {
+			new Function(stub.source);
+		} catch (error) {
+			throw new Error(`${stub.label}: the generated script does not parse (${error.message}); check the functions in your config`);
+		}
+		return wrapInit(stub);
+	});
+	const init = [
+		...checked([
+			{ label: "console", source: consoleScript() },
+			locale && { label: "locale", source: localeScript(locale) },
+			tauri && { label: "tauri", source: tauriScript(tauri) },
+			Object.keys(globals).length && { label: "globals", source: globalsScript(globals) }
+		]),
+		...checked([hasMock && { label: "mock", source: mockScript(mockRules) }]),
+		...checked([{ label: "network", source: networkScript(network) }]),
+		...resolveInit([
+			{ entries: config.init, baseDir },
+			{ entries: options.init, baseDir: process.cwd() },
+			{ entries: options.initFile && [].concat(options.initFile).map(file => ({ file })), baseDir: process.cwd() }
+		], baseDir)
+	];
 	mkdirSync(out, { recursive: true });
 
+	const baseLog = merged.log ?? consoleLog;
+	const lines = [];
+	const log = {
+		info: message => {
+			lines.push(["info", message]);
+			baseLog.info(message);
+		},
+		error: message => {
+			lines.push(["error", message]);
+			baseLog.error(message);
+		}
+	}
+	const output = watchOutput(log);
 	const server = merged.server && { cwd: baseDir, ...merged.server }
 	const stopServer = await startServer(server);
 	try {
-		const result = await runEngine(engine, {
-			url,
-			steps,
-			init,
-			size: merged.size,
-			out,
-			prefix: merged.prefix ?? `${engine}-`,
-			scale: merged.scale === undefined ? undefined : Number(merged.scale),
-			snapMargin: Number(merged.snapMargin ?? 8),
-			isHeaded: !!merged.headed,
-			isStorageKept: !!merged.keepStorage,
-			waitForTimeoutMs: Number(merged.waitTimeout ?? 10000),
-			log: merged.log ?? consoleLog
-		});
+		const prefix = merged.prefix ?? `${engine}-`;
+		const result = { saved: [], failed: false }
+		for (const size of sizes) {
+			if (sizes.length > 1) output.log.info(`size ${size}`);
+			const run = await runEngine(engine, {
+				url,
+				steps: [...steps, consoleStep],
+				init,
+				size,
+				locale,
+				colorScheme,
+				isMotionReduced: !!merged.reducedMotion,
+				out,
+				prefix: sizes.length > 1 ? `${prefix}${size}-` : prefix,
+				scale: merged.scale === undefined ? undefined : Number(merged.scale),
+				snapMargin,
+				isHeaded: !!merged.headed,
+				isStorageKept: !!merged.keepStorage,
+				waitForTimeoutMs: Number(merged.waitTimeout ?? 10000),
+				log: output.log
+			});
+			result.saved.push(...run.saved);
+			for (const film of run.films ?? []) {
+				try {
+					output.log.info(stitchFilm(film, snapMargin));
+					result.saved.push(film.file);
+				} catch (error) {
+					output.log.error(`film:${film.name} failed: ${error.message}`);
+					result.failed = true;
+				}
+			}
+			result.failed ||= run.failed;
+		}
+		
+		const { consoleErrors, failedAsserts } = output.report();
 		const shouldCompare = !!(merged.compare || merged.updateBaseline);
-		const compareFailed = shouldCompare && compareSnapshots({
+		const compared = shouldCompare ? compareSnapshots({
 			saved: result.saved,
 			baselineDir: path.resolve(baseDir, merged.baseline ?? "webview-preview-baseline"),
 			updateBaseline: !!merged.updateBaseline,
 			tolerance: Number(merged.compareTolerance ?? 2),
 			maxDiffPixels: Number(merged.maxDiffPixels ?? 0),
-			log: merged.log ?? consoleLog
-		});
-		return { engine, url, ...result, failed: result.failed || compareFailed }
+			log
+		}) : { failed: false, results: [] }
+		const consoleFailed = !!merged.failOnError && consoleErrors > 0;
+		const failed = result.failed || compared.failed || consoleFailed || failedAsserts > 0;
+		const report = merged.report
+			? writeReport({ out, url, engine, sizes, lines, saved: result.saved, compared: compared.results, failed })
+			: undefined;
+		if (report) baseLog.info(`report → ${report}`);
+		return { engine, url, sizes, ...result, consoleErrors, failedAsserts, report, failed }
 	} finally {
 		stopServer();
 	}
 }
 
+export const watchPreview = async (options = {}, onRun = () => {}) => {
+	const config = options.config === false ? {} : await loadConfig(options.config);
+	const baseDir = config.configDir ?? process.cwd();
+	const log = options.log ?? consoleLog;
+	const entries = [].concat(options.watch ?? config.watch ?? (existsSync(path.join(baseDir, "src")) ? "src" : "."));
+	const folders = entries.map(entry => path.resolve(baseDir, entry));
+	const isConfigWatched = !config.configFile || folders.some(folder => config.configFile === folder || config.configFile.startsWith(folder + path.sep));
+	const targets = isConfigWatched ? folders : [...folders, config.configFile];
+	const ignore = [
+		path.resolve(baseDir, options.out ?? config.out ?? DEFAULTS.out),
+		path.resolve(baseDir, options.baseline ?? config.baseline ?? "webview-preview-baseline")
+	];
+	const server = options.server ?? config.server;
+	const stopServer = await startServer(server && { cwd: baseDir, ...server });
+	let isRunning = false;
+	let next = null;
+
+	const run = async reason => {
+		if (isRunning) {
+			next = reason;
+			return;
+		}
+		isRunning = true;
+		log.info(reason);
+		try {
+			onRun(await preview(options));
+		} catch (error) {
+			log.error(`webview-preview: ${error.message}`);
+		}
+		isRunning = false;
+		if (next) {
+			const queued = next;
+			next = null;
+			await run(queued);
+		}
+	}
+
+	let stopWatching;
+	try {
+		stopWatching = watchFiles({
+			targets,
+			ignore,
+			onChange: file => run(`\nchanged ${path.relative(baseDir, file) || file}, running again`)
+		});
+	} catch (error) {
+		stopServer();
+		throw error;
+	}
+	
+	await run(`watching ${targets.map(target => path.relative(baseDir, target) || ".").join(", ")}; Ctrl+C to stop`);
+	return () => {
+		stopWatching();
+		stopServer();
+	}
+}
+
 export const defineConfig = config => config;

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

@@ -0,0 +1,37 @@
+import { ANY_FUNCTION, toSource } from "#src/page/source.mjs";
+
+const GLOBAL_PATH = /^(window\.)?[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*)*$/;
+const LOCALE = /^[a-z]{2,3}(-[A-Za-z\d]{2,8})*$/i;
+
+export const globalsScript = globals => {
+	const entries = Object.entries(globals).map(([path, value]) => {
+		if (!GLOBAL_PATH.test(path)) throw new Error(`globals: "${path}" must be a dotted path like window.api or window.go.main`);
+		const name = path.startsWith("window.") ? path : `window.${path}`;
+		return `assign(${JSON.stringify(name)}, ${toSource(value, name)});`;
+	});
+	return `(() => {
+	const __webviewPreviewAny = ${ANY_FUNCTION};
+	const assign = (path, value) => {
+		const parts = path.split(".").slice(1);
+		const last = parts.pop();
+		let target = window;
+		for (const part of parts) {
+			if (target[part] === undefined || target[part] === null) target[part] = {};
+			target = target[part];
+		}
+		target[last] = value;
+	}
+	${entries.join("\n\t")}
+})();`;
+}
+
+export const checkLocale = locale => {
+	if (!LOCALE.test(locale)) throw new Error(`locale must look like en-US or ru, got "${locale}"`);
+	return locale;
+}
+
+export const localeScript = locale => `(() => {
+	const language = ${JSON.stringify(checkLocale(locale))};
+	Object.defineProperty(Navigator.prototype, "language", { get: () => language, configurable: true });
+	Object.defineProperty(Navigator.prototype, "languages", { get: () => [language], configurable: true });
+})();`;

package/src/page/init.mjs

@@ -15,7 +15,7 @@ const readEntry = (entry, baseDir, index) => {
 	throw new Error(`init entries must be code strings or { file: "path" }, got ${JSON.stringify(entry)}`);
 }
 
-const wrap = ({ label, source }) => `{
+export const wrapInit = ({ label, source }) => `{
 	try {
 		${source}
 	} catch (error) {
@@ -25,7 +25,7 @@ const wrap = ({ label, source }) => `{
 
 export const resolveInit = (groups, baseDir) => groups
 	.flatMap(group => toList(group.entries).map(entry => ({ entry, baseDir: group.baseDir })))
-	.map(({ entry, baseDir: dir }, index) => wrap(readEntry(entry, dir ?? baseDir, index)));
+	.map(({ entry, baseDir: dir }, index) => wrapInit(readEntry(entry, dir ?? baseDir, index)));
 
 export const reportInitErrors = (json, log) => {
 	for (const message of JSON.parse(json || "[]")) log.error(`init failed: ${message}`);

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/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);
+}`;