@sigil-dev/compiler 0.9.7 → 0.9.11

package/src/babel/util/css.ts

@@ -10,142 +10,199 @@ export function computeHash(filePath: string): string {
 }
 
 /**
- * Scope CSS by rewriting selectors with hash.
- * :global(.selector) escapes scoping (passed through unchanged).
+ * Scope CSS by adding the file's hash class to every selector.
+ *
+ * - Each selector gets the class on its last compound, before any pseudo
+ *   part: `.list .item:hover` → `.list .item.sX:hover`, so the rule only
+ *   matches elements this file rendered.
+ * - `:global(…)` is left unscoped.
+ * - Grouping at-rules (@media, @supports, @container, @layer, @scope) are
+ *   scoped inside; others with a block (@keyframes, @font-face, …) pass
+ *   through, as do statements like @import.
+ * - Nested rules are scoped too; declarations are never touched.
  */
 export function scopeCSS(css: string, hash: string): string {
-	let result = "";
+	let out = "";
+	let emitted = 0; // css[0..emitted) is already in `out`
+	let start = 0; // where the current statement began
 	let i = 0;
-
 	while (i < css.length) {
-		// Skip comments
-		if (css[i] === "/" && css[i + 1] === "*") {
+		const c = css[i];
+		if (c === "/" && css[i + 1] === "*") {
 			const end = css.indexOf("*/", i + 2);
-			if (end === -1) {
-				result += css.slice(i);
-				break;
-			}
-			result += css.slice(i, end + 2);
-			i = end + 2;
+			i = end === -1 ? css.length : end + 2;
 			continue;
 		}
-
-		// Skip string literals
-		if (css[i] === '"' || css[i] === "'") {
-			const quote = css[i];
-			let j = i + 1;
-			while (j < css.length && css[j] !== quote) {
-				if (css[j] === "\\") j++;
-				j++;
-			}
-			result += css.slice(i, j + 1);
-			i = j + 1;
+		if (c === '"' || c === "'") {
+			i = skipString(css, i);
 			continue;
 		}
+		if (c === ";" || c === "}") {
+			i++;
+			start = i;
+			continue;
+		}
+		if (c !== "{") {
+			i++;
+			continue;
+		}
+		const close = matchingBrace(css, i);
+		const prelude = css.slice(start, i);
+		const lead = /^(?:\s|\/\*[\s\S]*?\*\/)*/.exec(prelude)![0];
+		const head = prelude.slice(lead.length).trim();
+		const body = css.slice(i + 1, close);
+		let block: string;
+		if (head.startsWith("@")) {
+			block = `${head} {${PASSTHROUGH_AT.test(head) ? body : scopeCSS(body, hash)}}`;
+		} else {
+			block = `${rewriteSelector(head, hash)} {${scopeCSS(body, hash)}}`;
+		}
+		out += css.slice(emitted, start) + lead + block;
+		i = close + 1;
+		emitted = i;
+		start = i;
+	}
+	return out + css.slice(emitted);
+}
 
-		// Find next { or end of string
-		if (css[i] === "{") {
-			// Find the matching }
-			let depth = 1;
-			let j = i + 1;
-			while (j < css.length && depth > 0) {
-				if (css[j] === "{") depth++;
-				else if (css[j] === "}") depth--;
-				j++;
-			}
-
-			// The block content (inside { }) - recurse into it
-			const blockContent = css.slice(i + 1, j - 1);
-			const scopedBlock = scopeCSS(blockContent, hash);
-
-			// Find where the selector starts (look back from {)
-			let selectorEnd = i;
-			let k = i - 1;
-			// Skip whitespace before {
-			while (k >= 0 && css[k] === " ") k--;
-			selectorEnd = k + 1;
-
-			// Find start of selector (look back for } or ; or start of string)
-			let selectorStart = selectorEnd;
-			k = selectorEnd - 1;
-			while (k >= 0) {
-				if (css[k] === "}" || css[k] === ";") {
-					selectorStart = k + 1;
-					break;
-				}
-				if (k === 0) {
-					selectorStart = 0;
-					break;
-				}
-				k--;
-			}
+const PASSTHROUGH_AT =
+	/^@(?:-webkit-)?(?:keyframes|font-face|page|property|counter-style|font-feature-values|font-palette-values|view-transition)\b/i;
 
-			const selector = css.slice(selectorStart, selectorEnd).trim();
+function skipString(css: string, i: number): number {
+	const quote = css[i];
+	let j = i + 1;
+	while (j < css.length && css[j] !== quote) {
+		if (css[j] === "\\") j++;
+		j++;
+	}
+	return j + 1;
+}
 
-			if (selector) {
-				// Rewrite selector with hash
-				result += css.slice(0, selectorStart);
-				result += rewriteSelector(selector, hash);
-				result += " {";
-				result += scopedBlock;
-				result += "}";
-			} else {
-				// No selector found, just output the block
-				result += css.slice(0, i);
-				result += " {";
-				result += scopedBlock;
-				result += "}";
-			}
+/** Index of the `}` that closes the `{` at `open` (or the end of input). */
+function matchingBrace(css: string, open: number): number {
+	let depth = 0;
+	for (let j = open; j < css.length; j++) {
+		const c = css[j];
+		if (c === "/" && css[j + 1] === "*") {
+			const end = css.indexOf("*/", j + 2);
+			if (end === -1) return css.length;
+			j = end + 1;
+		} else if (c === '"' || c === "'") {
+			j = skipString(css, j) - 1;
+		} else if (c === "{") depth++;
+		else if (c === "}" && --depth === 0) return j;
+	}
+	return css.length;
+}
 
-			i = j;
-			continue;
+/** Split on `sep` characters that sit outside (), [] and strings. */
+function splitTop(text: string, isSep: (c: string) => boolean): string[] {
+	const parts: string[] = [];
+	let depth = 0;
+	let from = 0;
+	for (let j = 0; j < text.length; j++) {
+		const c = text[j]!;
+		if (c === "(" || c === "[") depth++;
+		else if (c === ")" || c === "]") depth--;
+		else if (c === '"' || c === "'") j = skipString(text, j) - 1;
+		else if (depth === 0 && isSep(c)) {
+			parts.push(text.slice(from, j));
+			from = j + 1;
 		}
-
-		result += css[i];
-		i++;
 	}
+	parts.push(text.slice(from));
+	return parts;
+}
 
-	return result;
+/** `.item:hover::after` → `.item.sX:hover::after` */
+function scopeCompound(compound: string, hash: string): string {
+	let depth = 0;
+	for (let j = 0; j < compound.length; j++) {
+		const c = compound[j];
+		if (c === "(" || c === "[") depth++;
+		else if (c === ")" || c === "]") depth--;
+		else if (c === ":" && depth === 0) {
+			return `${compound.slice(0, j)}.${hash}${compound.slice(j)}`;
+		}
+	}
+	return `${compound}.${hash}`;
 }
 
 /**
- * Rewrite a selector (or comma-separated list) by appending hash to each part.
- * Handles :global() by passing through unchanged.
+ * Rewrite a selector list: each selector gets the hash on its last compound
+ * that isn't `:global(…)`.
  */
 function rewriteSelector(selector: string, hash: string): string {
-	// First, extract all :global() blocks and replace with placeholders
-	const globals: string[] = [];
-	let processed = selector;
-
-	// Find :global(...) with nested parens
-	while (processed.includes(":global(")) {
-		const start = processed.indexOf(":global(");
-		let depth = 1;
-		let j = start + 7; // Skip ':global('
-		while (j < processed.length && depth > 0) {
-			if (processed[j] === "(") depth++;
-			else if (processed[j] === ")") depth--;
-			j++;
-		}
-		const globalContent = processed.slice(start + 7, j - 1); // Content inside :global()
-		const placeholder = `__GLOBAL_${globals.length}__`;
-		globals.push(globalContent);
-		processed = processed.slice(0, start) + placeholder + processed.slice(j);
-	}
-
-	// Now split by comma (safe - no commas inside :global())
-	const parts = processed.split(",").map((part) => {
-		const trimmed = part.trim();
-		if (!trimmed) return trimmed;
+	return splitTop(selector, (c) => c === ",")
+		.map((part) => {
+			const trimmed = part.trim();
+			if (!trimmed) return trimmed;
+			// compounds and the combinators between them, in order
+			const tokens = trimmed.replace(/\s*([>+~])\s*/g, " $1 ").split(/(\s+)/);
+			const isCompound = (t: string) => t.trim() !== "" && !/^[>+~]$/.test(t);
+			const isGlobal = (t: string) => /^:global\(/.test(t);
+			for (let k = tokens.length - 1; k >= 0; k--) {
+				const t = tokens[k]!;
+				if (isCompound(t) && !isGlobal(t)) {
+					tokens[k] = scopeCompound(t, hash);
+					break;
+				}
+			}
+			return tokens
+				.map((t) => (isGlobal(t) ? t.slice(8, -1) : t))
+				.join("")
+				.replace(/ ([>+~]) /g, " $1 ");
+		})
+		.join(", ");
+}
 
-		// Check for placeholder
-		const globalMatch = trimmed.match(/^__GLOBAL_(\d+)__$/);
-		if (globalMatch) {
-			return globals[parseInt(globalMatch[1]!, 10)];
-		}
+const STYLE_BLOCK_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
 
-		return `${trimmed}.${hash}`;
+/**
+ * Take a component file's (.tsx/.jsx) `<style>` blocks out of its source. Returns the
+ * source without them (the JSX parser would read CSS braces as expressions)
+ * and the scoped CSS of all blocks, or null when the file has none.
+ */
+export function extractStyles(
+	source: string,
+	hash: string,
+	filename: string,
+): { code: string; css: string | null } {
+	// only component files have style blocks; a .ts file that merely
+	// mentions a <style> tag in a string must come through untouched
+	if (!/\.[jt]sx$/.test(filename)) return { code: source, css: null };
+	const blocks: string[] = [];
+	const code = source.replace(STYLE_BLOCK_RE, (_, css: string) => {
+		blocks.push(css.trim());
+		return "";
 	});
+	return {
+		code,
+		css: blocks.length ? scopeCSS(blocks.join("\n"), hash) : null,
+	};
+}
+
+/**
+ * Browser build: add the file's CSS to <head> once, when the module first
+ * loads. A server-rendered page already has it (see serverStyleSnippet), so
+ * the id check makes this a no-op there.
+ */
+export function clientStyleSnippet(hash: string, css: string): string {
+	return `if (typeof document !== "undefined" && !document.getElementById("sigil-${hash}")) {
+	const __sigilStyle = document.createElement("style");
+	__sigilStyle.id = "sigil-${hash}";
+	__sigilStyle.textContent = ${JSON.stringify(css)};
+	document.head.appendChild(__sigilStyle);
+}
+`;
+}
 
-	return parts.join(", ");
+/**
+ * Server build: record the file's CSS by hash. The renderer puts a
+ * <style id="sigil-HASH"> in the page's <head> for every scope class the
+ * rendered HTML uses, so pages are styled before any script runs.
+ */
+export function serverStyleSnippet(hash: string, css: string): string {
+	return `(globalThis.__sigil_css__ ??= new Map()).set(${JSON.stringify(hash)}, ${JSON.stringify(css)});
+`;
 }

package/src/babel/util/props.ts

@@ -0,0 +1,256 @@
+import { type NodePath, types as t } from "@babel/core";
+
+/**
+ * Names of props objects in the file being compiled (reset per file by the
+ * plugin). Children code uses it to tell `{title}`, a prop that may hold
+ * nodes, from `{count}`, which is always text.
+ */
+export const propObjects = new Set<string>();
+
+/**
+ * Values imported from the project's own modules (relative or alias paths),
+ * reset per file. `cart.items.length` where `cart` is an exported `$store`
+ * must update like local state; the store's proxy tracks the read, so the
+ * compiler only has to give the expression an effect. Components (PascalCase)
+ * and type imports aren't included, and neither are calls: `format(x)` may
+ * return nodes and keeps its old handling.
+ */
+export const importRoots = new Set<string>();
+
+export function collectImportRoots(program: NodePath<t.Program>): void {
+	importRoots.clear();
+	for (const node of program.node.body) {
+		if (!t.isImportDeclaration(node) || node.importKind === "type") continue;
+		if (!/^[./$~@]/.test(node.source.value)) continue;
+		// @scope/package imports are npm packages, not project modules
+		if (
+			/^@[^/]+\/[^/]/.test(node.source.value) &&
+			!node.source.value.startsWith("@/")
+		)
+			continue;
+		for (const spec of node.specifiers) {
+			if (t.isImportSpecifier(spec) && spec.importKind === "type") continue;
+			const name = spec.local.name;
+			if (/^[A-Z]/.test(name)) continue;
+			importRoots.add(name);
+		}
+	}
+}
+
+function rootName(expr: t.Node): string | null {
+	let node = expr;
+	while (t.isMemberExpression(node)) node = node.object;
+	return t.isIdentifier(node) ? node.name : null;
+}
+
+/** `cart.items.length` where `cart` is imported from the project. */
+export function isImportRead(expr: t.Node): boolean {
+	if (!t.isMemberExpression(expr)) return false;
+	const root = rootName(expr);
+	return root !== null && importRoots.has(root);
+}
+
+/** `readStore(count)`, inserted by `rewriteImportReads`. */
+export function isStoreRead(expr: t.Node): boolean {
+	return (
+		t.isCallExpression(expr) &&
+		t.isIdentifier(expr.callee, { name: "readStore" }) &&
+		expr.arguments.length === 1 &&
+		t.isIdentifier(expr.arguments[0]) &&
+		importRoots.has(expr.arguments[0].name)
+	);
+}
+
+/**
+ * Wrap bare reads of project imports in `readStore(…)`.
+ *
+ * An exported `$store` holding a primitive reaches other modules as its
+ * signal getter, since the compiler only rewrites reads in the declaring
+ * file. `readStore` calls a signal and returns anything else unchanged, so
+ * `{count}` and `count * 2` see the number and track it. Callees, member
+ * objects (object stores forward member reads already), JSX tags, exports
+ * and types are left alone. Returns whether anything changed.
+ */
+export function rewriteImportReads(program: NodePath<t.Program>): boolean {
+	if (importRoots.size === 0) return false;
+	let changed = false;
+	program.traverse({
+		Identifier(path) {
+			const name = path.node.name;
+			if (!importRoots.has(name)) return;
+			if (!path.isReferencedIdentifier()) return;
+			const binding = path.scope.getBinding(name);
+			if (binding?.kind !== "module") return;
+			const parent = path.parent;
+			if (
+				(t.isCallExpression(parent) || t.isNewExpression(parent)) &&
+				parent.callee === path.node
+			)
+				return;
+			if (t.isMemberExpression(parent) && parent.object === path.node) return;
+			if (t.isOptionalMemberExpression(parent) && parent.object === path.node)
+				return;
+			if (t.isTaggedTemplateExpression(parent)) return;
+			if (t.isExportSpecifier(parent)) return;
+			if (path.findParent((p) => p.isTSType())) return;
+			if (t.isCallExpression(parent) && isStoreRead(parent)) return;
+			path.replaceWith(
+				t.callExpression(t.identifier("readStore"), [t.identifier(name)]),
+			);
+			path.skip();
+			changed = true;
+		},
+	});
+	return changed;
+}
+
+/**
+ * A read whose value may be text or nodes and may change: `props.title`,
+ * `_props.item.name`, or a member read on an imported store.
+ */
+export function isPropRead(expr: t.Node): boolean {
+	if (isStoreRead(expr)) return true;
+	const root = rootName(expr);
+	if (root === null) return false;
+	return propObjects.has(root) || isImportRead(expr);
+}
+
+type Fn =
+	| t.ArrowFunctionExpression
+	| t.FunctionExpression
+	| t.FunctionDeclaration;
+
+interface Prop {
+	key: string;
+	local: string;
+	fallback?: t.Expression;
+}
+
+/**
+ * Keep destructured props live.
+ *
+ * `({ title }) => <h1>{title}</h1>` reads `title` once, when the component is
+ * called, so a prop the caller passes as a getter (see element.ts) would
+ * freeze at its first value. This rewrites the pattern into reads through the
+ * props object, `(_props) => <h1>{_props.title}</h1>`, and registers
+ * `_props` as reactive so JSX that reads it gets an effect.
+ *
+ * A plain `(props) =>` parameter needs no rewrite, only the registration.
+ *
+ * Only simple patterns are rewritten: `{ a, b: c, d = 1 }`. Anything else (a
+ * rest element, nested patterns, computed keys, a prop reassigned in the body,
+ * a prop used as a JSX tag) is left as it was, with the old read-once
+ * behaviour.
+ */
+export function liftDestructuredProps(
+	program: NodePath<t.Program>,
+	reactive: Set<string>,
+): void {
+	program.traverse({
+		"ArrowFunctionExpression|FunctionExpression|FunctionDeclaration"(
+			path: NodePath<Fn>,
+		) {
+			const param = path.node.params[0];
+			if (!param || !isComponent(path) || !returnsJsx(path)) return;
+			// `(props) => <p>{props.title}</p>` is already a live read
+			if (t.isIdentifier(param)) {
+				reactive.add(param.name);
+				propObjects.add(param.name);
+				return;
+			}
+			if (!t.isObjectPattern(param)) return;
+
+			const props: Prop[] = [];
+			for (const p of param.properties) {
+				if (!t.isObjectProperty(p) || p.computed || !t.isIdentifier(p.key))
+					return;
+				if (t.isIdentifier(p.value)) {
+					props.push({ key: p.key.name, local: p.value.name });
+				} else if (
+					t.isAssignmentPattern(p.value) &&
+					t.isIdentifier(p.value.left)
+				) {
+					props.push({
+						key: p.key.name,
+						local: p.value.left.name,
+						fallback: p.value.right,
+					});
+				} else return;
+			}
+
+			const bindings = props.map((p) => path.scope.getBinding(p.local));
+			for (const b of bindings) {
+				if (!b?.constant) return;
+				if (b.referencePaths.some((r) => r.isJSXIdentifier())) return;
+			}
+
+			const propsId = path.scope.generateUidIdentifier("props");
+			if (param.typeAnnotation) propsId.typeAnnotation = param.typeAnnotation;
+
+			props.forEach((prop, i) => {
+				for (const ref of bindings[i]!.referencePaths) {
+					const read = () =>
+						t.memberExpression(
+							t.identifier(propsId.name),
+							t.identifier(prop.key),
+						);
+					const value = prop.fallback
+						? t.conditionalExpression(
+								t.binaryExpression("===", read(), t.identifier("undefined")),
+								t.cloneNode(prop.fallback),
+								read(),
+							)
+						: read();
+					const parent = ref.parentPath;
+					if (parent?.isObjectProperty() && parent.node.shorthand) {
+						parent.node.shorthand = false;
+					}
+					ref.replaceWith(value);
+				}
+			});
+
+			path.node.params[0] = propsId;
+			path.scope.crawl();
+			reactive.add(propsId.name);
+			propObjects.add(propsId.name);
+		},
+	});
+}
+
+/**
+ * Components are PascalCase functions (`function Card`, `const Card = …`) or
+ * a module's default export (route components are often anonymous). A
+ * lowercase callback such as `items.map((item) => <li>…</li>)` is not one;
+ * list rows get their own item reactivity in keyed-list.ts.
+ */
+function isComponent(path: NodePath<Fn>): boolean {
+	const pascal = (name?: string) => !!name && /^[A-Z]/.test(name);
+	if (path.isFunctionDeclaration()) {
+		return (
+			pascal(path.node.id?.name) || path.parentPath.isExportDefaultDeclaration()
+		);
+	}
+	const parent = path.parentPath;
+	if (parent.isExportDefaultDeclaration()) return true;
+	if (parent.isVariableDeclarator() && t.isIdentifier(parent.node.id)) {
+		return pascal(parent.node.id.name);
+	}
+	if (path.isFunctionExpression() && pascal(path.node.id?.name)) return true;
+	return false;
+}
+
+/** A function whose own body (not a nested function) produces JSX. */
+function returnsJsx(path: NodePath<Fn>): boolean {
+	let found = false;
+	path.traverse({
+		JSXElement(p) {
+			if (p.getFunctionParent() === path) found = true;
+			p.skip();
+		},
+		JSXFragment(p) {
+			if (p.getFunctionParent() === path) found = true;
+			p.skip();
+		},
+	});
+	return found;
+}

package/src/bun-plugin.ts

@@ -1,13 +1,20 @@
 import { transformSync } from "@babel/core";
 import type { BunPlugin } from "bun";
 import sigilPlugin from "./babel/index.ts";
-import { computeHash, scopeCSS } from "./babel/util/css.ts";
+import {
+	clientStyleSnippet,
+	computeHash,
+	extractStyles,
+	serverStyleSnippet,
+} from "./babel/util/css.ts";
 
-const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
 const STYLE_TEST_RE = /<style[^>]*>[\s\S]*?<\/style>/i;
 const SOURCE_RE = /\.[jt]sx?$/;
 const JSX_RE = /\.[jt]sx$/;
-const SIGIL_MACRO_RE = /\$(?:state|store|derived|effect)\s*\(/;
+// any macro, including $state.raw(…), $effect.pre(…) and $store<T>(…)
+const SIGIL_MACRO_RE = /\$(?:state|store|derived|effect|inspect|debug)\b/;
+// a project import: reads of an imported store need the compiler too
+const PROJECT_IMPORT_RE = /\bfrom\s*["'](?:\.{1,2}\/|\$|~\/|@\/)/;
 
 function normalizePath(path: string): string {
 	return path.replace(/\\/g, "/");
@@ -29,6 +36,7 @@ function shouldTransformSource(path: string, code: string): boolean {
 	return (
 		JSX_RE.test(normalized) ||
 		SIGIL_MACRO_RE.test(code) ||
+		PROJECT_IMPORT_RE.test(code) ||
 		STYLE_TEST_RE.test(code)
 	);
 }
@@ -60,30 +68,33 @@ export function sigil(options?: {
 				if (!shouldTransformSource(path, code)) return undefined;
 				// console.log("[bun-plugin] intercepting:", path);
 				const hash = computeHash(path);
-				let scopedCSS = "";
-				code = code.replace(STYLE_RE, (_, css) => {
-					scopedCSS = scopeCSS(css.trim(), hash);
-					return "";
-				});
+				const styles = extractStyles(code, hash, path);
+				code = styles.code;
+				const scopedCSS = styles.css;
 				const res = transformSync(code, {
 					parserOpts: {
 						//@ts-expect-error holy shut up
 						plugins: [["typescript", { isTSX: true }], "jsx"],
 					},
 					plugins: [
-						[sigilPlugin, { hash, mode: options?.mode, dev: options?.dev }],
+						[
+							sigilPlugin,
+							// scope classes only where there is scoped CSS to match
+							{
+								hash: scopedCSS ? hash : undefined,
+								mode: options?.mode,
+								dev: options?.dev,
+							},
+						],
 					],
 					filename: path,
 				});
 				let out = transpiler.transformSync(res?.code ?? "");
-				if (scopedCSS && options?.mode !== "ssr") {
-					out = `
-if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
-    const __style = document.createElement('style');
-    __style.id = 'sigil-${hash}';
-    __style.textContent = ${JSON.stringify(scopedCSS)};
-    document.head.appendChild(__style);
-}${out}`;
+				if (scopedCSS) {
+					out =
+						(options?.mode === "ssr"
+							? serverStyleSnippet(hash, scopedCSS)
+							: clientStyleSnippet(hash, scopedCSS)) + out;
 				}
 				return { contents: out, loader: "js" };
 			});

package/src/vite/index.ts

@@ -30,7 +30,10 @@ export function sigil(options?: {
 			const hash = computeHash(id);
 			const mode = options?.hydrate ? ("hydrate" as const) : undefined;
 			const res = transformSync(codeWithoutStyle, {
-				plugins: ["@babel/plugin-syntax-jsx", [sigilPlugin, { hash, mode }]],
+				plugins: [
+					"@babel/plugin-syntax-jsx",
+					[sigilPlugin, { hash: scopedCSS ? hash : undefined, mode }],
+				],
 				filename: id,
 			});
 			if (!res) return;