@saywright/vite 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,478 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { parse } from "@babel/parser";
+import MagicString from "magic-string";
+/** Attribute names injected by the Vite plugin at compile time. */
+var SRC_ATTR = "data-ds-src";
+var NAME_ATTR = "data-ds-name";
+//#endregion
+//#region src/annotate.ts
+/**
+* Compile-time JSX annotation. Every JSX element gets
+*   data-ds-src="relative/file.tsx:line:col" data-ds-name="Component"
+* inserted right after its tag name, before any other attribute. Because the
+* attributes come first, a component that spreads its props onto its root DOM
+* node (`<button {...rest}>`) ends up showing the *instance* site, which is
+* where a prop change belongs.
+*/
+var SKIP_COMPONENTS = /* @__PURE__ */ new Set([
+	"Fragment",
+	"React.Fragment",
+	"StrictMode",
+	"React.StrictMode",
+	"Suspense",
+	"React.Suspense",
+	"Profiler",
+	"React.Profiler",
+	"Activity",
+	"React.Activity"
+]);
+/** SVG primitives are noise for pointing; the <svg> root is still annotated. */
+var SVG_INNER = /* @__PURE__ */ new Set([
+	"path",
+	"g",
+	"circle",
+	"rect",
+	"line",
+	"polyline",
+	"polygon",
+	"ellipse",
+	"defs",
+	"use",
+	"lineargradient",
+	"radialgradient",
+	"stop",
+	"clippath",
+	"mask",
+	"pattern",
+	"symbol",
+	"text",
+	"tspan",
+	"filter",
+	"title",
+	"desc",
+	"marker",
+	"foreignobject"
+]);
+var SKIP_KEYS = /* @__PURE__ */ new Set([
+	"loc",
+	"start",
+	"end",
+	"extra",
+	"range",
+	"comments",
+	"leadingComments",
+	"trailingComments",
+	"innerComments",
+	"tokens"
+]);
+function walk(node, visit) {
+	if (!node || typeof node !== "object") return;
+	if (Array.isArray(node)) {
+		for (const child of node) walk(child, visit);
+		return;
+	}
+	const n = node;
+	if (typeof n.type === "string") visit(n);
+	for (const key of Object.keys(n)) {
+		if (SKIP_KEYS.has(key)) continue;
+		const value = n[key];
+		if (value && typeof value === "object") walk(value, visit);
+	}
+}
+function jsxName(name) {
+	if (!name) return null;
+	if (name.type === "JSXIdentifier") return String(name.name);
+	if (name.type === "JSXMemberExpression") {
+		const object = jsxName(name.object);
+		const property = jsxName(name.property);
+		return object && property ? `${object}.${property}` : null;
+	}
+	return null;
+}
+function shouldAnnotate(name) {
+	if (SKIP_COMPONENTS.has(name)) return false;
+	if (name.endsWith(".Provider") || name.endsWith(".Consumer")) return false;
+	if (SVG_INNER.has(name.toLowerCase()) && name === name.toLowerCase()) return false;
+	return true;
+}
+function annotate(code, file, relPath) {
+	if (!code.includes("<")) return null;
+	let ast;
+	try {
+		ast = parse(code, {
+			sourceType: "module",
+			plugins: ["jsx", "typescript"],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+	const s = new MagicString(code);
+	let count = 0;
+	const safePath = relPath.replace(/"/g, "");
+	walk(ast, (node) => {
+		if (node.type !== "JSXOpeningElement") return;
+		const nameNode = node.name;
+		const name = jsxName(nameNode);
+		if (!name || !shouldAnnotate(name)) return;
+		if ((node.attributes ?? []).some((a) => a.type === "JSXAttribute" && a.name?.type === "JSXIdentifier" && a.name.name === "data-ds-src")) return;
+		const loc = node.loc;
+		if (!loc) return;
+		const insertAt = (node.typeArguments ?? node.typeParameters)?.end ?? nameNode.end;
+		if (typeof insertAt !== "number") return;
+		s.appendLeft(insertAt, ` ${SRC_ATTR}="${safePath}:${loc.start.line}:${loc.start.column + 1}" ${NAME_ATTR}="${name}"`);
+		count++;
+	});
+	if (!count) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({
+			hires: "boundary",
+			source: file,
+			includeContent: true
+		}),
+		count
+	};
+}
+//#endregion
+//#region src/batch.ts
+/**
+* Changes that land at once. The studio writes a change's files one after another, and the dev server would send the
+* page an update for each as it sees them: a page that runs the first file's new code with the second's old code can
+* break ("Cannot read properties of undefined"). While the studio writes several files it asks for the page's updates
+* to be held; once every file it named has been seen (or after a few seconds, if it never finishes), they are sent as
+* one update, which the page applies all together.
+*/
+/** Held at most this long: a studio that stopped halfway doesn't leave the page without updates. */
+var HOLD_MS = 4e3;
+/** Once every file has been seen, how long the dev server must have been quiet before the updates go. */
+var SETTLE_MS = 60;
+/** One spelling for a file, however it was named (a link in the path, Windows' separators). */
+function same(file) {
+	const abs = path.resolve(file);
+	try {
+		return fs.realpathSync.native(abs);
+	} catch {
+		try {
+			return path.join(fs.realpathSync.native(path.dirname(abs)), path.basename(abs));
+		} catch {
+			return abs;
+		}
+	}
+}
+var UpdateHold = class {
+	held = [];
+	waiting = /* @__PURE__ */ new Set();
+	holding = false;
+	lastHeld = 0;
+	limit = null;
+	settle = null;
+	send;
+	constructor(server) {
+		const ws = server.ws;
+		const original = ws.send;
+		this.send = (payload) => original.call(ws, payload);
+		ws.send = (...args) => {
+			const payload = typeof args[0] === "string" ? {
+				type: "custom",
+				event: args[0],
+				data: args[1]
+			} : args[0];
+			if (this.holding && [
+				"update",
+				"full-reload",
+				"prune",
+				"error"
+			].includes(payload?.type)) {
+				this.held.push(payload);
+				this.lastHeld = Date.now();
+				return;
+			}
+			original.apply(ws, args);
+		};
+		for (const event of [
+			"add",
+			"change",
+			"unlink"
+		]) server.watcher.on(event, (file) => this.seen(file));
+	}
+	/** Hold the page's updates until these files have all changed (or `ms` have passed). */
+	hold(files, ms = HOLD_MS) {
+		for (const f of files) this.waiting.add(same(f));
+		this.holding = true;
+		if (this.limit) clearTimeout(this.limit);
+		this.limit = setTimeout(() => this.release(), ms);
+		if (!this.waiting.size) this.settled();
+	}
+	seen(file) {
+		if (!this.holding || !this.waiting.delete(same(file))) return;
+		if (!this.waiting.size) this.settled();
+	}
+	/** Every file has been seen: the dev server works out each one's update in a moment, then they go. */
+	settled() {
+		if (this.settle) clearTimeout(this.settle);
+		this.settle = setTimeout(() => {
+			this.settle = null;
+			if (Date.now() - this.lastHeld < SETTLE_MS) this.settled();
+			else this.release();
+		}, SETTLE_MS);
+	}
+	/** Send what was held, as one: a reload if any file needs one, else every update together. */
+	release() {
+		if (this.limit) clearTimeout(this.limit);
+		if (this.settle) clearTimeout(this.settle);
+		this.limit = this.settle = null;
+		this.holding = false;
+		this.waiting.clear();
+		const held = this.held;
+		this.held = [];
+		for (const payload of merged(held)) this.send(payload);
+	}
+};
+/** Held updates as the page should get them: at most one reload, or one update with all of them, then the rest in order. */
+function merged(held) {
+	const reloads = held.filter((p) => p.type === "full-reload");
+	if (reloads.length) return [reloads.length === 1 ? reloads[0] : {
+		type: "full-reload",
+		path: "*"
+	}];
+	const updates = /* @__PURE__ */ new Map();
+	for (const p of held) for (const u of p.updates ?? []) updates.set(`${u.type}\n${u.path}\n${u.acceptedPath}`, u);
+	const rest = held.filter((p) => p.type !== "update");
+	return [...updates.size ? [{
+		type: "update",
+		updates: [...updates.values()]
+	}] : [], ...rest];
+}
+//#endregion
+//#region src/workspace.ts
+/**
+* The workspace (monorepo) an app belongs to. npm, yarn and pnpm workspaces, Lerna, Nx, Turborepo and Rush keep an
+* app's components in sibling packages (apps/web next to packages/ui), so the plugin annotates those files too and
+* the studio reads and edits them, by paths relative to the app's folder ("../packages/ui/Button.tsx").
+*/
+/** Files that make a folder a workspace root, with the package folders they list (null: every folder below). */
+function members(dir) {
+	const ws = readJson(path.join(dir, "package.json"))?.workspaces;
+	if (Array.isArray(ws)) return ws;
+	if (ws && Array.isArray(ws.packages)) return ws.packages;
+	const pnpm = read(path.join(dir, "pnpm-workspace.yaml"));
+	if (pnpm !== null) return yamlList(pnpm, "packages");
+	const lerna = readJson(path.join(dir, "lerna.json"));
+	if (lerna) return Array.isArray(lerna.packages) ? lerna.packages : ["packages/*"];
+	if ([
+		"nx.json",
+		"turbo.json",
+		"rush.json"
+	].some((f) => fs.existsSync(path.join(dir, f)))) return null;
+}
+function read(file) {
+	try {
+		return fs.readFileSync(file, "utf8");
+	} catch {
+		return null;
+	}
+}
+function readJson(file) {
+	const text = read(file);
+	if (text === null) return null;
+	try {
+		return JSON.parse(text);
+	} catch {
+		return null;
+	}
+}
+/** The items of a top-level list in a small YAML file ("packages:\n  - 'apps/*'"). */
+function yamlList(text, key) {
+	const out = [];
+	let inList = false;
+	for (const line of text.split(/\r?\n/)) if (new RegExp(`^${key}\\s*:`).test(line)) inList = true;
+	else if (inList && /^\s*-\s*/.test(line)) out.push(line.replace(/^\s*-\s*/, "").replace(/\s+#.*$/, "").trim().replace(/^['"]|['"]$/g, ""));
+	else if (inList && /^\S/.test(line)) break;
+	return out;
+}
+/** A workspace's package pattern ("packages/*", "apps/**") → a test on a folder path relative to the workspace. */
+function globRe(glob) {
+	const body = glob.replace(/^\.\//, "").replace(/\/+$/, "").split(/(\*\*\/?|\*)/).map((part) => part === "**/" ? "(?:.*/)?" : part === "**" ? ".*" : part === "*" ? "[^/]*" : part.replace(/[.+?^${}()|[\]\\]/g, "\\$&")).join("");
+	return new RegExp(`^${body}$`);
+}
+/** Whether a package folder (relative to the workspace) is one the workspace lists. */
+function isMember(rel, globs) {
+	const included = globs.filter((g) => !g.startsWith("!"));
+	const excluded = globs.filter((g) => g.startsWith("!")).map((g) => globRe(g.slice(1)));
+	return included.some((g) => globRe(g).test(rel)) && !excluded.some((re) => re.test(rel));
+}
+/**
+* The root of the workspace whose package `dir` is in (or `dir` itself when it is the root), or null when it is in
+* none. A package below a workspace root that the workspace doesn't list (a copy, a fixture) is in none.
+*/
+function workspaceRoot(dir) {
+	const start = path.resolve(dir);
+	let pkg = null;
+	for (let cur = start;;) {
+		pkg ??= fs.existsSync(path.join(cur, "package.json")) ? cur : null;
+		const globs = members(cur);
+		if (globs !== void 0) {
+			if (cur === start || cur === pkg) return cur;
+			const rel = path.relative(cur, pkg ?? start).split(path.sep).join("/");
+			return globs === null || isMember(rel, globs) ? cur : null;
+		}
+		const up = path.dirname(cur);
+		if (up === cur) return null;
+		cur = up;
+	}
+}
+/** Whether `file` is inside `dir` (both absolute). */
+function isInside(dir, file) {
+	const rel = path.relative(dir, file);
+	return !!rel && !rel.startsWith("..") && !path.isAbsolute(rel);
+}
+//#endregion
+//#region src/index.ts
+/**
+* @saywright/vite — add to a Vite + React app to make it pointable from
+* Saywright. Dev server only; production builds are untouched.
+*
+*   import saywright from '@saywright/vite';
+*   export default defineConfig({ plugins: [saywright(), react()] });
+*/
+var cached = null;
+/** The bridge script, read again when it has been rebuilt (updating Saywright doesn't need an app restart). */
+function readBridge() {
+	const here = path.dirname(fileURLToPath(import.meta.url));
+	for (const file of [path.join(here, "bridge.js"), path.join(here, "../dist/bridge.js")]) {
+		let mtime;
+		try {
+			mtime = fs.statSync(file).mtimeMs;
+		} catch {
+			continue;
+		}
+		if (cached?.file !== file || cached.mtime !== mtime) cached = {
+			file,
+			mtime,
+			code: fs.readFileSync(file, "utf8")
+		};
+		return cached.code;
+	}
+	return "console.warn(\"[saywright] bridge.js missing: run `npm run build:plugin`.\")";
+}
+function saywright(options = {}) {
+	const include = options.include ?? /\.[jt]sx$/;
+	const exclude = options.exclude ?? /[\\/]node_modules[\\/]/;
+	let root = process.cwd();
+	let scope = root;
+	let studio = options.studio ?? process.env.SAYWRIGHT_STUDIO_URL ?? null;
+	return {
+		name: "saywright",
+		apply: "serve",
+		enforce: "pre",
+		configResolved(config) {
+			root = config.root;
+			scope = workspaceRoot(root) ?? root;
+		},
+		transform(code, id) {
+			const file = id.split("?")[0];
+			if (!include.test(file) || exclude.test(file) || /[\\/]node_modules[\\/]/.test(file) || file.startsWith("\0")) return null;
+			const rel = path.relative(root, file).split(path.sep).join("/");
+			if (!rel || path.isAbsolute(rel) || !isInside(scope, file)) return null;
+			const out = annotate(code, file, rel);
+			return out ? {
+				code: out.code,
+				map: out.map
+			} : null;
+		},
+		transformIndexHtml() {
+			return [{
+				tag: "script",
+				children: `window.__SAYWRIGHT__=${JSON.stringify({
+					origins: options.studioOrigins ?? [],
+					studio,
+					widget: options.widget ?? true
+				})}`,
+				injectTo: "head-prepend"
+			}, {
+				tag: "script",
+				attrs: {
+					type: "module",
+					src: "/__saywright/bridge.js"
+				},
+				injectTo: "head-prepend"
+			}];
+		},
+		configureServer(server) {
+			server.middlewares.use("/__saywright/bridge.js", (_req, res) => {
+				res.setHeader("Content-Type", "text/javascript; charset=utf-8");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(readBridge());
+			});
+			server.middlewares.use("/__saywright/info", (_req, res) => {
+				res.setHeader("Content-Type", "application/json");
+				res.end(JSON.stringify({
+					root,
+					version: 1,
+					studio
+				}));
+			});
+			server.middlewares.use("/__saywright/studio", (req, res) => {
+				if (req.method !== "POST") {
+					res.statusCode = 405;
+					return res.end();
+				}
+				if (req.headers.origin) {
+					res.statusCode = 403;
+					return res.end();
+				}
+				let body = "";
+				req.on("data", (c) => (body += c.toString()).length > 2e3 && req.destroy());
+				req.on("end", () => {
+					try {
+						const url = new URL(JSON.parse(body).url);
+						if (!/^https?:$/.test(url.protocol) || !/^(localhost|127\.0\.0\.1|\[::1\])$/.test(url.hostname)) throw new Error("local only");
+						if (!options.studio) studio = url.origin;
+						res.setHeader("Content-Type", "application/json");
+						res.end(JSON.stringify({ ok: true }));
+					} catch {
+						res.statusCode = 400;
+						res.end();
+					}
+				});
+			});
+			let hold = null;
+			server.middlewares.use("/__saywright/hold", (req, res) => {
+				if (req.method !== "POST") {
+					res.statusCode = 405;
+					return res.end();
+				}
+				if (req.headers.origin) {
+					res.statusCode = 403;
+					return res.end();
+				}
+				let body = "";
+				req.on("data", (c) => (body += c.toString()).length > 2e5 && req.destroy());
+				req.on("end", () => {
+					try {
+						const files = JSON.parse(body).files;
+						if (!Array.isArray(files) || !files.length || files.length > 500 || !files.every((f) => typeof f === "string" && path.isAbsolute(f))) throw new Error("files");
+						const ours = files.filter((f) => isInside(scope, f));
+						if (ours.length) {
+							hold ??= new UpdateHold(server);
+							hold.hold(ours);
+						}
+						res.setHeader("Content-Type", "application/json");
+						res.end(JSON.stringify({
+							ok: true,
+							held: ours.length > 0
+						}));
+					} catch {
+						res.statusCode = 400;
+						res.end();
+					}
+				});
+			});
+		}
+	};
+}
+//#endregion
+export { saywright as default, saywright };