@sigil-dev/compiler 0.9.1 → 0.9.3

package/src/babel/util/css.ts

@@ -1,151 +1,151 @@
-import { createHash } from "node:crypto";
-
-/**
- * Compute a deterministic hash from a file path.
- * Same file always gets same hash. Different files always get different hashes.
- * 's' prefix for Sigil.
- */
-export function computeHash(filePath: string): string {
-	return `s${createHash("md5").update(filePath).digest("hex").slice(0, 8)}`;
-}
-
-/**
- * Scope CSS by rewriting selectors with hash.
- * :global(.selector) escapes scoping (passed through unchanged).
- */
-export function scopeCSS(css: string, hash: string): string {
-	let result = "";
-	let i = 0;
-
-	while (i < css.length) {
-		// Skip comments
-		if (css[i] === "/" && 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;
-			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;
-			continue;
-		}
-
-		// 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 selector = css.slice(selectorStart, selectorEnd).trim();
-
-			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 += "}";
-			}
-
-			i = j;
-			continue;
-		}
-
-		result += css[i];
-		i++;
-	}
-
-	return result;
-}
-
-/**
- * Rewrite a selector (or comma-separated list) by appending hash to each part.
- * Handles :global() by passing through unchanged.
- */
-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;
-
-		// Check for placeholder
-		const globalMatch = trimmed.match(/^__GLOBAL_(\d+)__$/);
-		if (globalMatch) {
-			return globals[parseInt(globalMatch[1]!, 10)];
-		}
-
-		return `${trimmed}.${hash}`;
-	});
-
-	return parts.join(", ");
-}
+import { createHash } from "node:crypto";
+
+/**
+ * Compute a deterministic hash from a file path.
+ * Same file always gets same hash. Different files always get different hashes.
+ * 's' prefix for Sigil.
+ */
+export function computeHash(filePath: string): string {
+	return `s${createHash("md5").update(filePath).digest("hex").slice(0, 8)}`;
+}
+
+/**
+ * Scope CSS by rewriting selectors with hash.
+ * :global(.selector) escapes scoping (passed through unchanged).
+ */
+export function scopeCSS(css: string, hash: string): string {
+	let result = "";
+	let i = 0;
+
+	while (i < css.length) {
+		// Skip comments
+		if (css[i] === "/" && 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;
+			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;
+			continue;
+		}
+
+		// 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 selector = css.slice(selectorStart, selectorEnd).trim();
+
+			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 += "}";
+			}
+
+			i = j;
+			continue;
+		}
+
+		result += css[i];
+		i++;
+	}
+
+	return result;
+}
+
+/**
+ * Rewrite a selector (or comma-separated list) by appending hash to each part.
+ * Handles :global() by passing through unchanged.
+ */
+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;
+
+		// Check for placeholder
+		const globalMatch = trimmed.match(/^__GLOBAL_(\d+)__$/);
+		if (globalMatch) {
+			return globals[parseInt(globalMatch[1]!, 10)];
+		}
+
+		return `${trimmed}.${hash}`;
+	});
+
+	return parts.join(", ");
+}

package/src/babel/util/dead-code.ts

@@ -1,28 +1,28 @@
-import { type NodePath, types as t } from "@babel/core";
-
-export function warnDeadReactivity(
-	path: NodePath,
-	signals: Set<string>,
-	storeSignals: Set<string>,
-	filename?: string,
-): void {
-	const used = new Set<string>();
-
-	path.traverse({
-		CallExpression(innerPath: any) {
-			if (t.isIdentifier(innerPath.node.callee)) {
-				used.add(innerPath.node.callee.name);
-			}
-		},
-	});
-
-	for (const name of signals) {
-		if (storeSignals.has(name)) continue; // exported, used across files
-		if (!used.has(name)) {
-			const tag = filename ? `[${filename}]` : "[sigil]";
-			console.warn(
-				`${tag} unused reactive declaration: "${name}" is declared with $state or $derived but never read.`,
-			);
-		}
-	}
-}
+import { type NodePath, types as t } from "@babel/core";
+
+export function warnDeadReactivity(
+	path: NodePath,
+	signals: Set<string>,
+	storeSignals: Set<string>,
+	filename?: string,
+): void {
+	const used = new Set<string>();
+
+	path.traverse({
+		CallExpression(innerPath: any) {
+			if (t.isIdentifier(innerPath.node.callee)) {
+				used.add(innerPath.node.callee.name);
+			}
+		},
+	});
+
+	for (const name of signals) {
+		if (storeSignals.has(name)) continue; // exported, used across files
+		if (!used.has(name)) {
+			const tag = filename ? `[${filename}]` : "[sigil]";
+			console.warn(
+				`${tag} unused reactive declaration: "${name}" is declared with $state or $derived but never read.`,
+			);
+		}
+	}
+}

package/src/babel/util/helpers.ts

@@ -1,46 +1,46 @@
-import type { NodePath } from "@babel/core";
-import { types as t } from "@babel/core";
-
-export function getMacro(declarator: NodePath<t.VariableDeclarator>) {
-	const init = declarator.get("init");
-	if (!init.isCallExpression()) return null;
-	const callee = init.get("callee");
-
-	// Handle identifier: $state(x), $derived(x)
-	if (callee.isIdentifier()) {
-		return { name: callee.node.name, init };
-	}
-
-	// Handle member expression: $state.raw(x), $state.snapshot(x)
-	if (callee.isMemberExpression()) {
-		const object = callee.get("object");
-		const property = callee.get("property");
-		if (object.isIdentifier() && property.isIdentifier()) {
-			return { name: `${object.node.name}.${property.node.name}`, init };
-		}
-	}
-
-	return null;
-}
-
-export function getTagName(
-	name: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName,
-): string {
-	if (t.isJSXIdentifier(name)) {
-		return name.name;
-	}
-
-	if (t.isJSXMemberExpression(name)) {
-		const object = t.isJSXIdentifier(name.object)
-			? name.object.name
-			: getTagName(name.object);
-
-		return `${object}.${name.property.name}`;
-	}
-
-	if (t.isJSXNamespacedName(name)) {
-		return `${name.namespace.name}:${name.name.name}`;
-	}
-
-	throw new Error("Unknown JSX name type");
-}
+import type { NodePath } from "@babel/core";
+import { types as t } from "@babel/core";
+
+export function getMacro(declarator: NodePath<t.VariableDeclarator>) {
+	const init = declarator.get("init");
+	if (!init.isCallExpression()) return null;
+	const callee = init.get("callee");
+
+	// Handle identifier: $state(x), $derived(x)
+	if (callee.isIdentifier()) {
+		return { name: callee.node.name, init };
+	}
+
+	// Handle member expression: $state.raw(x), $state.snapshot(x)
+	if (callee.isMemberExpression()) {
+		const object = callee.get("object");
+		const property = callee.get("property");
+		if (object.isIdentifier() && property.isIdentifier()) {
+			return { name: `${object.node.name}.${property.node.name}`, init };
+		}
+	}
+
+	return null;
+}
+
+export function getTagName(
+	name: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName,
+): string {
+	if (t.isJSXIdentifier(name)) {
+		return name.name;
+	}
+
+	if (t.isJSXMemberExpression(name)) {
+		const object = t.isJSXIdentifier(name.object)
+			? name.object.name
+			: getTagName(name.object);
+
+		return `${object}.${name.property.name}`;
+	}
+
+	if (t.isJSXNamespacedName(name)) {
+		return `${name.namespace.name}:${name.name.name}`;
+	}
+
+	throw new Error("Unknown JSX name type");
+}

package/src/babel/util/magic.ts

@@ -1,11 +1,11 @@
-export const MAGIC = {
-	createSignal: "createSignal",
-	createRawSignal: "createRawSignal",
-	createMemo: "createMemo",
-	createEffect: "createEffect",
-	createEffectPre: "createEffectPre",
-	createInspectEffect: "createInspectEffect",
-	withEffectScope: "withEffectScope",
-	tracking: "tracking",
-	snapshot: "snapshot",
-} as const;
+export const MAGIC = {
+	createSignal: "createSignal",
+	createRawSignal: "createRawSignal",
+	createMemo: "createMemo",
+	createEffect: "createEffect",
+	createEffectPre: "createEffectPre",
+	createInspectEffect: "createInspectEffect",
+	withEffectScope: "withEffectScope",
+	tracking: "tracking",
+	snapshot: "snapshot",
+} as const;

package/src/bun-plugin.ts

@@ -1,90 +1,92 @@
-import { transformSync } from "@babel/core";
-import type { BunPlugin } from "bun";
-import sigilPlugin from "./babel/index.ts";
-import { computeHash, scopeCSS } 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*\(/;
-
-function normalizePath(path: string): string {
-	return path.replace(/\\/g, "/");
-}
-
-function shouldTransform(path: string): boolean {
-	const normalized = normalizePath(path);
-	if (!SOURCE_RE.test(normalized)) return false;
-	if (normalized.includes("/.grimoire/")) return false;
-	if (normalized.includes("/node_modules/")) return false;
-	if (normalized.includes("/packages/runtime/")) return false;
-	if (normalized.includes("/packages/grimoire/")) return false;
-	if (normalized.includes("/packages/compiler/")) return false;
-	return true;
-}
-
-function shouldTransformSource(path: string, code: string): boolean {
-	const normalized = normalizePath(path);
-	return (
-		JSX_RE.test(normalized) ||
-		SIGIL_MACRO_RE.test(code) ||
-		STYLE_TEST_RE.test(code)
-	);
-}
-
-export function sigil(options?: {
-	mode?: "dom" | "ssr" | "hydrate";
-	dev?: boolean;
-}): BunPlugin {
-	return {
-		name: "sigil",
-		setup(build) {
-			const transpiler = new Bun.Transpiler({ loader: "tsx" });
-
-			// This is required for both linking errors,
-			// and for a bug in the bundler, which was reported in https://github.com/oven-sh/bun/issues/13897
-			// 2 YEARS AGO and apparently fixed in https://github.com/oven-sh/bun/pull/15119. It wasnt
-			build.onResolve({ filter: /^@sigil-dev\/runtime($|\/)/ }, (args) => {
-				try {
-					const resolved = Bun.resolveSync(args.path, process.cwd());
-					return { path: resolved.replaceAll("\\", "/") };
-				} catch {
-					return undefined;
-				}
-			});
-
-			build.onLoad({ filter: SOURCE_RE }, async ({ path }) => {
-				if (!shouldTransform(path)) return undefined;
-				let code = await Bun.file(path).text();
-				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 res = transformSync(code, {
-					parserOpts: {
-						//@ts-expect-error holy shut up
-						plugins: [["typescript", { isTSX: true }], "jsx"],
-					},
-					plugins: [[sigilPlugin, { hash, 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}`;
-				}
-				return { contents: out, loader: "js" };
-			});
-		},
-	};
-}
+import { transformSync } from "@babel/core";
+import type { BunPlugin } from "bun";
+import sigilPlugin from "./babel/index.ts";
+import { computeHash, scopeCSS } 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*\(/;
+
+function normalizePath(path: string): string {
+	return path.replace(/\\/g, "/");
+}
+
+function shouldTransform(path: string): boolean {
+	const normalized = normalizePath(path);
+	if (!SOURCE_RE.test(normalized)) return false;
+	if (normalized.includes("/.grimoire/")) return false;
+	if (normalized.includes("/node_modules/")) return false;
+	if (normalized.includes("/packages/runtime/")) return false;
+	if (normalized.includes("/packages/grimoire/")) return false;
+	if (normalized.includes("/packages/compiler/")) return false;
+	return true;
+}
+
+function shouldTransformSource(path: string, code: string): boolean {
+	const normalized = normalizePath(path);
+	return (
+		JSX_RE.test(normalized) ||
+		SIGIL_MACRO_RE.test(code) ||
+		STYLE_TEST_RE.test(code)
+	);
+}
+
+export function sigil(options?: {
+	mode?: "dom" | "ssr" | "hydrate";
+	dev?: boolean;
+}): BunPlugin {
+	return {
+		name: "sigil",
+		setup(build) {
+			const transpiler = new Bun.Transpiler({ loader: "tsx" });
+
+			// This is required for both linking errors,
+			// and for a bug in the bundler, which was reported in https://github.com/oven-sh/bun/issues/13897
+			// 2 YEARS AGO and apparently fixed in https://github.com/oven-sh/bun/pull/15119. It wasnt
+			build.onResolve({ filter: /^@sigil-dev\/runtime($|\/)/ }, (args) => {
+				try {
+					const resolved = Bun.resolveSync(args.path, process.cwd());
+					return { path: resolved.replaceAll("\\", "/") };
+				} catch {
+					return undefined;
+				}
+			});
+
+			build.onLoad({ filter: SOURCE_RE }, async ({ path }) => {
+				if (!shouldTransform(path)) return undefined;
+				let code = await Bun.file(path).text();
+				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 res = transformSync(code, {
+					parserOpts: {
+						//@ts-expect-error holy shut up
+						plugins: [["typescript", { isTSX: true }], "jsx"],
+					},
+					plugins: [
+						[sigilPlugin, { hash, 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}`;
+				}
+				return { contents: out, loader: "js" };
+			});
+		},
+	};
+}