@sigil-dev/compiler 0.9.6 → 0.9.7

package/src/babel/index.ts

@@ -1,608 +1,614 @@
-import { type PluginObject, types as t, template } from "@babel/core";
-import { handleDerived } from "./handlers/dom/derived.ts";
-import { handleEffect } from "./handlers/dom/effect.ts";
-import { handleState } from "./handlers/dom/state.ts";
-import { handleDerivedSSR } from "./handlers/ssr/derived.ts";
-import { handleStateSSR } from "./handlers/ssr/state.ts";
-import { processElement, processFragment } from "./jsx/index.ts";
-import { processElementSSR, processFragmentSSR } from "./jsx/ssr.ts";
-import { warnDeadReactivity } from "./util/dead-code.ts";
-import { getMacro } from "./util/helpers.ts";
-import { MAGIC } from "./util/magic.ts";
-
-const SSR_HELPERS = template.statements.ast(`
-    const __SAFE = Symbol.for('sigil.safe');
-    class __H {
-        constructor(v) { this.v = v; this[__SAFE] = true; }
-        toString() { return this.v; }
-    }
-    const __h = (v) => {
-        if (v?.[__SAFE]) return v;
-        if (Array.isArray(v)) return new __H(v.map(x => x?.[__SAFE] ? x.v : __e(x)).join(''));
-        return new __H(String(v ?? ''));
-    };
-    const __e = (v) => {
-        if (v?.[__SAFE]) return v.v;
-        if (Array.isArray(v)) return v.map(x => x?.[__SAFE] ? x.v : __e(x)).join('');
-        if (v === false || v === null || v === undefined) return '';
-        if (typeof v === 'object' && v.constructor === Object) {
-            const UNITLESS = new Set(['animationIterationCount','borderImageOutset','borderImageSlice','borderImageWidth','boxFlex','boxFlexGroup','boxSnapAfterPatch','boxSupress','columnCount','columnFlex','columnFlexGrow','columns','flexGrow','flexPositive','flexShrink','flexNegative','fontWeight','gridArea','gridRow','gridRowEnd','gridRowSpan','gridRowStart','gridColumn','gridColumnEnd','gridColumnSpan','gridColumnStart','lineClamp','lineHeight','opacity','order','orphans','tabSize','widows','zIndex','zoom','fillOpacity','floodOpacity','stopOpacity','strokeDasharray','strokeDashoffset','strokeMiterlimit','strokeOpacity','strokeWidth']);
-            return Object.entries(v).map(([k, val]) => {
-                const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
-                if (typeof val === 'number' && !UNITLESS.has(k)) return prop + ':' + val + 'px';
-                return prop + ':' + val;
-            }).join(';');
-        }
-        return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-    };
-`);
-/**
- * Recursively convert key={expr} to data-key={expr} in JSX tree.
- * Needed for SSR output so hydration can map items by key.
- */
-function convertKeyToDataKey(node: t.JSXElement): void {
-	for (let i = 0; i < node.openingElement.attributes.length; i++) {
-		const attr = node.openingElement.attributes[i];
-		if (
-			t.isJSXAttribute(attr) &&
-			t.isJSXIdentifier(attr.name) &&
-			attr.name.name === "key"
-		) {
-			node.openingElement.attributes[i] = t.jsxAttribute(
-				t.jsxIdentifier("data-key"),
-				attr.value,
-			);
-		}
-	}
-	for (const child of node.children) {
-		if (t.isJSXElement(child)) {
-			convertKeyToDataKey(child);
-		} else if (
-			t.isJSXExpressionContainer(child) &&
-			t.isJSXElement(child.expression)
-		) {
-			convertKeyToDataKey(child.expression);
-		}
-	}
-}
-
-interface SigilOptions {
-	hash?: string;
-	mode?: "dom" | "ssr" | "hydrate";
-	dev?: boolean;
-}
-
-export default function sigilPlugin(): PluginObject {
-	const signals = new Set<string>();
-	const storeSignals = new Set<string>();
-	const asyncFunctions = new Map<string, any>();
-
-	let scopedHash: string | undefined;
-	let isSSR = false;
-	let isHydrate = false;
-	let didTransform = false;
-
-	let isDev = false;
-	let filename = "";
-
-	let asyncDefaultPath: any = null;
-	let _asyncDefaultRef: string | null = null;
-	let hasLoadingExport = false;
-	let hasErrorExport = false;
-
-	return {
-		name: "sigil",
-		visitor: {
-			Program: {
-				enter(path, state) {
-					signals.clear();
-					storeSignals.clear();
-					const opts = (state.opts || {}) as SigilOptions;
-					scopedHash = opts.hash;
-					didTransform = false;
-					isSSR = opts.mode === "ssr";
-					isHydrate = opts.mode === "hydrate";
-					isDev = opts.dev ?? false;
-					filename = state.filename ?? "";
-					asyncDefaultPath = null;
-					hasLoadingExport = false;
-					hasErrorExport = false;
-					_asyncDefaultRef = null;
-					asyncFunctions.clear();
-
-					if (isSSR) {
-						path.unshiftContainer("body", SSR_HELPERS);
-						return;
-					}
-				},
-				exit(path, state) {
-					warnDeadReactivity(path, signals, storeSignals, state.filename);
-
-					if (asyncDefaultPath && !isSSR) {
-						let fnNode: t.FunctionDeclaration;
-
-						if (asyncDefaultPath.isExportDefaultDeclaration()) {
-							// export default async function Page() {}
-							fnNode = asyncDefaultPath.get("declaration")
-								.node as t.FunctionDeclaration;
-						} else {
-							// async function Page() {} + export default Page
-							fnNode = asyncDefaultPath.node as t.FunctionDeclaration;
-						}
-
-						const originalName = fnNode.id?.name ?? "Component";
-						const privateName = `__${originalName}`;
-						const propsId = t.identifier("__props");
-
-						const privateFn = t.functionDeclaration(
-							t.identifier(privateName),
-							fnNode.params,
-							fnNode.body,
-							false,
-							true,
-						);
-
-						const wrapperExport = t.exportDefaultDeclaration(
-							t.functionDeclaration(
-								t.identifier(originalName),
-								[propsId],
-								t.blockStatement([
-									t.returnStatement(
-										t.callExpression(t.identifier("__asyncBoundary"), [
-											t.arrowFunctionExpression(
-												[],
-												t.callExpression(t.identifier(privateName), [propsId]),
-											),
-											hasLoadingExport
-												? t.identifier("loading")
-												: t.identifier("undefined"),
-											hasErrorExport
-												? t.identifier("error")
-												: t.identifier("undefined"),
-										]),
-									),
-								]),
-							),
-						);
-
-						asyncDefaultPath.replaceWithMultiple([privateFn, wrapperExport]);
-						didTransform = true;
-					}
-
-					// Only inject runtime import if this file actually used sigil transforms
-					if (!didTransform || isSSR) return;
-
-					const requiredSpecifiers = [
-						"createSignal",
-						"createRawSignal",
-						"createEffect",
-						"createMemo",
-						"reconcile",
-						"claim",
-						"claimText",
-						"claimComment",
-						"hydrateKeyedList",
-						"hydrateSlot",
-						"insert",
-						"applyDirective",
-						"getHydrationNodes",
-						"pushHydrationNodes",
-						"popHydrationNodes",
-						"snapshot",
-						"tracking",
-						"untrack",
-						"createRoot",
-						"createEffectPre",
-						"createInspectEffect",
-						"withEffectScope",
-						"mountTransition",
-						"removeAnimated",
-						...(asyncDefaultPath ? ["__asyncBoundary"] : []),
-					];
-					const runtimeImport = path.node.body.find(
-						(n): n is t.ImportDeclaration =>
-							t.isImportDeclaration(n) &&
-							n.source.value === "@sigil-dev/runtime",
-					);
-
-					if (runtimeImport) {
-						// console.log(
-						// 	"[sigil exit] found existing import, specifier count:",
-						// 	runtimeImport.specifiers.length,
-						// );
-						const existingNames = new Set(
-							runtimeImport.specifiers
-								.filter(t.isImportSpecifier)
-								.map((s) =>
-									t.isIdentifier(s.imported)
-										? s.imported.name
-										: (s.imported as t.StringLiteral).value,
-								),
-						);
-						for (const name of requiredSpecifiers) {
-							if (!existingNames.has(name)) {
-								runtimeImport.specifiers.push(
-									t.importSpecifier(t.identifier(name), t.identifier(name)),
-								);
-							}
-						}
-					} else {
-						path.unshiftContainer(
-							"body",
-							t.importDeclaration(
-								requiredSpecifiers.map((name) =>
-									t.importSpecifier(t.identifier(name), t.identifier(name)),
-								),
-								t.stringLiteral("@sigil-dev/runtime"),
-							),
-						);
-					}
-				},
-			},
-			VariableDeclaration(path) {
-				for (const declarator of path.get("declarations")) {
-					const macro = getMacro(declarator);
-					if (!macro) continue;
-					didTransform = true;
-					const { name, init } = macro;
-					const varName = t.isIdentifier(declarator.node.id)
-						? declarator.node.id.name
-						: null;
-
-					if (name === "$state" || name === "$store" || name === "$state.raw") {
-						if (name === "$state.raw") {
-							if (!isSSR) {
-								const args = init.node.arguments;
-								init.replaceWith(
-									t.callExpression(t.identifier(MAGIC.createRawSignal), args),
-								);
-							}
-							continue;
-						}
-						isSSR
-							? handleStateSSR(path, declarator, init, signals)
-							: handleState(path, declarator, init, signals, isDev, filename); // ← add
-						if (name === "$store" && varName) {
-							storeSignals.add(varName);
-						}
-					} else if (name === "$derived") {
-						isSSR
-							? handleDerivedSSR(path, declarator, init, signals)
-							: handleDerived(path, declarator, init, signals);
-					}
-				}
-			},
-			ExpressionStatement(path) {
-				if (isSSR) {
-					// drop $effect, $inspect, and $debug entirely in SSR
-					const expr = path.get("expression");
-					if (expr.isCallExpression()) {
-						const callee = expr.get("callee");
-						if (
-							callee.isIdentifier() &&
-							(callee.node.name === "$effect" ||
-								callee.node.name === "$inspect" ||
-								callee.node.name === "$debug")
-						) {
-							didTransform = true;
-							path.remove();
-						}
-					}
-					return;
-				}
-				handleEffect(path);
-				// Handle $debug(expr) expression statements
-				const expr = path.get("expression");
-				if (expr.isCallExpression()) {
-					const callee = expr.get("callee");
-					if (callee.isIdentifier({ name: "$debug" })) {
-						didTransform = true;
-						path.replaceWith(
-							t.ifStatement(
-								t.memberExpression(
-									t.memberExpression(
-										t.memberExpression(
-											t.identifier("import"),
-											t.identifier("meta"),
-										),
-										t.identifier("env"),
-									),
-									t.identifier("DEV"),
-								),
-								t.blockStatement([
-									t.debuggerStatement(),
-									t.expressionStatement(
-										t.callExpression(
-											t.memberExpression(
-												t.identifier("console"),
-												t.identifier("log"),
-											),
-											expr.node.arguments,
-										),
-									),
-								]),
-							),
-						);
-					}
-				}
-			},
-			CallExpression(path) {
-				if (isSSR) return;
-				const callee = path.get("callee");
-
-				// Helper: wrap signal identifiers in call expressions
-				const wrapSignal = (expr: t.Expression): t.Expression => {
-					if (t.isIdentifier(expr) && signals.has(expr.name)) {
-						return t.callExpression(expr, []);
-					}
-					return expr;
-				};
-
-				// Handle member expression callees: $state.snapshot(x), $effect.tracking(), $effect.pre(fn)
-				if (callee.isMemberExpression()) {
-					const object = callee.get("object");
-					const property = callee.get("property");
-					if (object.isIdentifier() && property.isIdentifier()) {
-						const obj = object.node.name;
-						const prop = property.node.name;
-
-						if (obj === "$state" && prop === "snapshot") {
-							didTransform = true;
-							path.get("callee").replaceWith(t.identifier(MAGIC.snapshot));
-							return;
-						}
-
-						if (obj === "$effect" && prop === "tracking") {
-							didTransform = true;
-							path.get("callee").replaceWith(t.identifier(MAGIC.tracking));
-							return;
-						}
-
-						if (obj === "$effect" && prop === "pre") {
-							didTransform = true;
-							path
-								.get("callee")
-								.replaceWith(t.identifier(MAGIC.createEffectPre));
-							return;
-						}
-					}
-				}
-
-				// Handle $inspect(count).with(cb) chain
-				if (callee.isMemberExpression()) {
-					const property = callee.get("property");
-					if (property.isIdentifier({ name: "with" })) {
-						const object = callee.get("object");
-						if (object.isCallExpression()) {
-							const innerCallee = object.get("callee");
-							if (innerCallee.isIdentifier({ name: "$inspect" })) {
-								didTransform = true;
-								//@ts-expect-error Bizzare but it works if you read LSP
-								const args = object.node.arguments.map(wrapSignal);
-								const cb = path.node.arguments[0];
-								path.replaceWith(
-									t.callExpression(t.identifier(MAGIC.createInspectEffect), [
-										t.arrowFunctionExpression([], t.arrayExpression(args)),
-										//@ts-expect-error Bizzare but it works if you read LSP
-										cb,
-									]),
-								);
-								return;
-							}
-						}
-					}
-				}
-
-				// Handle standalone $debug(...) — not as expression statement
-				if (callee.isIdentifier({ name: "$debug" })) {
-					didTransform = true;
-					path.replaceWith(
-						t.ifStatement(
-							t.memberExpression(
-								t.memberExpression(
-									t.memberExpression(
-										t.identifier("import"),
-										t.identifier("meta"),
-									),
-									t.identifier("env"),
-								),
-								t.identifier("DEV"),
-							),
-							t.blockStatement([
-								t.debuggerStatement(),
-								t.expressionStatement(
-									t.callExpression(
-										t.memberExpression(
-											t.identifier("console"),
-											t.identifier("log"),
-										),
-										path.node.arguments,
-									),
-								),
-							]),
-						),
-					);
-					return;
-				}
-
-				// Handle standalone $inspect(...)
-				if (callee.isIdentifier({ name: "$inspect" })) {
-					didTransform = true;
-					//@ts-expect-error Bizzare but it works if you read LSP
-					const args = path.node.arguments.map(wrapSignal);
-					path.replaceWith(
-						t.callExpression(t.identifier(MAGIC.createInspectEffect), [
-							t.arrowFunctionExpression([], t.arrayExpression(args)),
-						]),
-					);
-					return;
-				}
-			},
-			JSXElement(path) {
-				didTransform = true;
-				// console.log(
-				//     "[sigil] JSXElement visitor fired, parent:",
-				//     path.parentPath?.type,
-				//     "isSSR:", isSSR
-				// );
-				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
-					return;
-				if (isSSR) {
-					try {
-						convertKeyToDataKey(path.node);
-						path.replaceWith(
-							t.callExpression(t.identifier("__h"), [
-								processElementSSR(path.node, signals),
-							]),
-						);
-					} catch (e) {
-						console.error("[sigil] processElementSSR threw:", path.toString());
-						console.error(e);
-						throw e;
-					}
-					return;
-				}
-
-				const statements: t.Statement[] = [];
-				const genId = (() => {
-					let i = 0;
-					return () => `_el${i++}`;
-				})();
-
-				const root = processElement(
-					path.node,
-					statements,
-					genId,
-					signals,
-					scopedHash,
-					isHydrate,
-					isHydrate ? "__nodes" : undefined,
-				);
-
-				const body: t.Statement[] = [];
-
-				if (isHydrate) {
-					// DECLARE __nodes locally — every IIFE owns its own context
-					body.push(
-						t.variableDeclaration("const", [
-							t.variableDeclarator(
-								t.identifier("__nodes"),
-								t.callExpression(t.identifier("getHydrationNodes"), []),
-							),
-						]),
-					);
-				}
-
-				body.push(...statements);
-				body.push(t.returnStatement(t.identifier(root)));
-
-				path.replaceWith(
-					t.callExpression(
-						t.arrowFunctionExpression([], t.blockStatement(body)),
-						[],
-					),
-				);
-			},
-			JSXFragment(path) {
-				didTransform = true;
-				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
-					return;
-				if (isSSR) {
-					path.replaceWith(
-						t.callExpression(t.identifier("__h"), [
-							processFragmentSSR(path.node, signals),
-						]),
-					);
-					return;
-				}
-
-				const statements: t.Statement[] = [];
-				const genId = (() => {
-					let i = 0;
-					return () => `_el${i++}`;
-				})();
-
-				const root = processFragment(
-					path.node,
-					statements,
-					genId,
-					signals,
-					scopedHash,
-					isHydrate,
-					isHydrate ? "__nodes" : undefined,
-				);
-
-				const body: t.Statement[] = [];
-
-				if (isHydrate) {
-					// DECLARE __nodes locally — every IIFE owns its own context
-					body.push(
-						t.variableDeclaration("const", [
-							t.variableDeclarator(
-								t.identifier("__nodes"),
-								t.callExpression(t.identifier("getHydrationNodes"), []),
-							),
-						]),
-					);
-				}
-
-				body.push(...statements);
-				body.push(t.returnStatement(t.identifier(root)));
-
-				path.replaceWith(
-					t.callExpression(
-						t.arrowFunctionExpression([], t.blockStatement(body)),
-						[],
-					),
-				);
-			},
-			FunctionDeclaration(path) {
-				if (isSSR) return;
-				const node = path.node;
-				if (node.async && node.id) {
-					asyncFunctions.set(node.id.name, path);
-				}
-			},
-
-			ExportDefaultDeclaration(path) {
-				const decl = path.get("declaration");
-
-				// export default async function Page() {}
-				if (
-					(decl.isFunctionDeclaration() || decl.isFunctionExpression()) &&
-					(decl.node as any).async &&
-					!isSSR
-				) {
-					asyncDefaultPath = path;
-					return;
-				}
-
-				// export default Page
-				if (decl.isIdentifier() && !isSSR) {
-					const name = (decl.node as t.Identifier).name;
-					if (asyncFunctions.has(name)) {
-						asyncDefaultPath = asyncFunctions.get(name);
-						_asyncDefaultRef = name;
-					}
-				}
-			},
-
-			ExportNamedDeclaration(path) {
-				const decl = path.get("declaration");
-				if (decl.isFunctionDeclaration()) {
-					const name = (decl.node as t.FunctionDeclaration).id?.name;
-					if (name === "loading") hasLoadingExport = true;
-					if (name === "error") hasErrorExport = true;
-				}
-				if (decl.isVariableDeclaration()) {
-					for (const d of decl.node.declarations) {
-						if (t.isIdentifier(d.id)) {
-							if (d.id.name === "loading") hasLoadingExport = true;
-							if (d.id.name === "error") hasErrorExport = true;
-						}
-					}
-				}
-			},
-		},
-	};
-}
+import { type PluginObject, types as t, template } from "@babel/core";
+import { handleDerived } from "./handlers/dom/derived.ts";
+import { handleEffect } from "./handlers/dom/effect.ts";
+import { handleState } from "./handlers/dom/state.ts";
+import { handleDerivedSSR } from "./handlers/ssr/derived.ts";
+import { handleStateSSR } from "./handlers/ssr/state.ts";
+import { processElement, processFragment } from "./jsx/index.ts";
+import { processElementSSR, processFragmentSSR } from "./jsx/ssr.ts";
+import { warnDeadReactivity } from "./util/dead-code.ts";
+import { getMacro } from "./util/helpers.ts";
+import { MAGIC } from "./util/magic.ts";
+
+const SSR_HELPERS = template.statements.ast(`
+    const __SAFE = Symbol.for('sigil.safe');
+    class __H {
+        constructor(v) { this.v = v; this[__SAFE] = true; }
+        toString() { return this.v; }
+    }
+    const __h = (v) => {
+        if (v?.[__SAFE]) return v;
+        if (Array.isArray(v)) return new __H(v.map(x => x?.[__SAFE] ? x.v : __e(x)).join(''));
+        return new __H(String(v ?? ''));
+    };
+    const __b = (n, v) => {
+        if (v === true) return ' ' + n;
+        if (v === false || v === null || v === undefined) return '';
+        return ' ' + n + '="' + __e(v) + '"';
+    };
+    const __e = (v) => {
+        if (v?.[__SAFE]) return v.v;
+        if (Array.isArray(v)) return v.map(x => x?.[__SAFE] ? x.v : __e(x)).join('');
+        if (v === false || v === null || v === undefined) return '';
+        if (typeof v === 'object' && v.constructor === Object) {
+            const UNITLESS = new Set(['animationIterationCount','borderImageOutset','borderImageSlice','borderImageWidth','boxFlex','boxFlexGroup','boxSnapAfterPatch','boxSupress','columnCount','columnFlex','columnFlexGrow','columns','flexGrow','flexPositive','flexShrink','flexNegative','fontWeight','gridArea','gridRow','gridRowEnd','gridRowSpan','gridRowStart','gridColumn','gridColumnEnd','gridColumnSpan','gridColumnStart','lineClamp','lineHeight','opacity','order','orphans','tabSize','widows','zIndex','zoom','fillOpacity','floodOpacity','stopOpacity','strokeDasharray','strokeDashoffset','strokeMiterlimit','strokeOpacity','strokeWidth']);
+            return Object.entries(v).map(([k, val]) => {
+                const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+                if (typeof val === 'number' && !UNITLESS.has(k)) return prop + ':' + val + 'px';
+                return prop + ':' + val;
+            }).join(';');
+        }
+        return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    };
+`);
+/**
+ * Recursively convert key={expr} to data-key={expr} in JSX tree.
+ * Needed for SSR output so hydration can map items by key.
+ */
+function convertKeyToDataKey(node: t.JSXElement): void {
+	for (let i = 0; i < node.openingElement.attributes.length; i++) {
+		const attr = node.openingElement.attributes[i];
+		if (
+			t.isJSXAttribute(attr) &&
+			t.isJSXIdentifier(attr.name) &&
+			attr.name.name === "key"
+		) {
+			node.openingElement.attributes[i] = t.jsxAttribute(
+				t.jsxIdentifier("data-key"),
+				attr.value,
+			);
+		}
+	}
+	for (const child of node.children) {
+		if (t.isJSXElement(child)) {
+			convertKeyToDataKey(child);
+		} else if (
+			t.isJSXExpressionContainer(child) &&
+			t.isJSXElement(child.expression)
+		) {
+			convertKeyToDataKey(child.expression);
+		}
+	}
+}
+
+interface SigilOptions {
+	hash?: string;
+	mode?: "dom" | "ssr" | "hydrate";
+	dev?: boolean;
+}
+
+export default function sigilPlugin(): PluginObject {
+	const signals = new Set<string>();
+	const storeSignals = new Set<string>();
+	const asyncFunctions = new Map<string, any>();
+
+	let scopedHash: string | undefined;
+	let isSSR = false;
+	let isHydrate = false;
+	let didTransform = false;
+
+	let isDev = false;
+	let filename = "";
+
+	let asyncDefaultPath: any = null;
+	let _asyncDefaultRef: string | null = null;
+	let hasLoadingExport = false;
+	let hasErrorExport = false;
+
+	return {
+		name: "sigil",
+		visitor: {
+			Program: {
+				enter(path, state) {
+					signals.clear();
+					storeSignals.clear();
+					const opts = (state.opts || {}) as SigilOptions;
+					scopedHash = opts.hash;
+					didTransform = false;
+					isSSR = opts.mode === "ssr";
+					isHydrate = opts.mode === "hydrate";
+					isDev = opts.dev ?? false;
+					filename = state.filename ?? "";
+					asyncDefaultPath = null;
+					hasLoadingExport = false;
+					hasErrorExport = false;
+					_asyncDefaultRef = null;
+					asyncFunctions.clear();
+
+					if (isSSR) {
+						path.unshiftContainer("body", SSR_HELPERS);
+						return;
+					}
+				},
+				exit(path, state) {
+					warnDeadReactivity(path, signals, storeSignals, state.filename);
+
+					if (asyncDefaultPath && !isSSR) {
+						let fnNode: t.FunctionDeclaration;
+
+						if (asyncDefaultPath.isExportDefaultDeclaration()) {
+							// export default async function Page() {}
+							fnNode = asyncDefaultPath.get("declaration")
+								.node as t.FunctionDeclaration;
+						} else {
+							// async function Page() {} + export default Page
+							fnNode = asyncDefaultPath.node as t.FunctionDeclaration;
+						}
+
+						const originalName = fnNode.id?.name ?? "Component";
+						const privateName = `__${originalName}`;
+						const propsId = t.identifier("__props");
+
+						const privateFn = t.functionDeclaration(
+							t.identifier(privateName),
+							fnNode.params,
+							fnNode.body,
+							false,
+							true,
+						);
+
+						const wrapperExport = t.exportDefaultDeclaration(
+							t.functionDeclaration(
+								t.identifier(originalName),
+								[propsId],
+								t.blockStatement([
+									t.returnStatement(
+										t.callExpression(t.identifier("__asyncBoundary"), [
+											t.arrowFunctionExpression(
+												[],
+												t.callExpression(t.identifier(privateName), [propsId]),
+											),
+											hasLoadingExport
+												? t.identifier("loading")
+												: t.identifier("undefined"),
+											hasErrorExport
+												? t.identifier("error")
+												: t.identifier("undefined"),
+										]),
+									),
+								]),
+							),
+						);
+
+						asyncDefaultPath.replaceWithMultiple([privateFn, wrapperExport]);
+						didTransform = true;
+					}
+
+					// Only inject runtime import if this file actually used sigil transforms
+					if (!didTransform || isSSR) return;
+
+					const requiredSpecifiers = [
+						"createSignal",
+						"createRawSignal",
+						"createEffect",
+						"createMemo",
+						"reconcile",
+						"claim",
+						"claimText",
+						"claimComment",
+						"hydrateKeyedList",
+						"hydrateSlot",
+						"insert",
+						"applyDirective",
+						"getHydrationNodes",
+						"pushHydrationNodes",
+						"popHydrationNodes",
+						"snapshot",
+						"tracking",
+						"untrack",
+						"createRoot",
+						"createEffectPre",
+						"createInspectEffect",
+						"withEffectScope",
+						"mountTransition",
+						"removeAnimated",
+						"setProp",
+						...(asyncDefaultPath ? ["__asyncBoundary"] : []),
+					];
+					const runtimeImport = path.node.body.find(
+						(n): n is t.ImportDeclaration =>
+							t.isImportDeclaration(n) &&
+							n.source.value === "@sigil-dev/runtime",
+					);
+
+					if (runtimeImport) {
+						// console.log(
+						// 	"[sigil exit] found existing import, specifier count:",
+						// 	runtimeImport.specifiers.length,
+						// );
+						const existingNames = new Set(
+							runtimeImport.specifiers
+								.filter(t.isImportSpecifier)
+								.map((s) =>
+									t.isIdentifier(s.imported)
+										? s.imported.name
+										: (s.imported as t.StringLiteral).value,
+								),
+						);
+						for (const name of requiredSpecifiers) {
+							if (!existingNames.has(name)) {
+								runtimeImport.specifiers.push(
+									t.importSpecifier(t.identifier(name), t.identifier(name)),
+								);
+							}
+						}
+					} else {
+						path.unshiftContainer(
+							"body",
+							t.importDeclaration(
+								requiredSpecifiers.map((name) =>
+									t.importSpecifier(t.identifier(name), t.identifier(name)),
+								),
+								t.stringLiteral("@sigil-dev/runtime"),
+							),
+						);
+					}
+				},
+			},
+			VariableDeclaration(path) {
+				for (const declarator of path.get("declarations")) {
+					const macro = getMacro(declarator);
+					if (!macro) continue;
+					didTransform = true;
+					const { name, init } = macro;
+					const varName = t.isIdentifier(declarator.node.id)
+						? declarator.node.id.name
+						: null;
+
+					if (name === "$state" || name === "$store" || name === "$state.raw") {
+						if (name === "$state.raw") {
+							if (!isSSR) {
+								const args = init.node.arguments;
+								init.replaceWith(
+									t.callExpression(t.identifier(MAGIC.createRawSignal), args),
+								);
+							}
+							continue;
+						}
+						isSSR
+							? handleStateSSR(path, declarator, init, signals)
+							: handleState(path, declarator, init, signals, isDev, filename); // ← add
+						if (name === "$store" && varName) {
+							storeSignals.add(varName);
+						}
+					} else if (name === "$derived") {
+						isSSR
+							? handleDerivedSSR(path, declarator, init, signals)
+							: handleDerived(path, declarator, init, signals);
+					}
+				}
+			},
+			ExpressionStatement(path) {
+				if (isSSR) {
+					// drop $effect, $inspect, and $debug entirely in SSR
+					const expr = path.get("expression");
+					if (expr.isCallExpression()) {
+						const callee = expr.get("callee");
+						if (
+							callee.isIdentifier() &&
+							(callee.node.name === "$effect" ||
+								callee.node.name === "$inspect" ||
+								callee.node.name === "$debug")
+						) {
+							didTransform = true;
+							path.remove();
+						}
+					}
+					return;
+				}
+				handleEffect(path);
+				// Handle $debug(expr) expression statements
+				const expr = path.get("expression");
+				if (expr.isCallExpression()) {
+					const callee = expr.get("callee");
+					if (callee.isIdentifier({ name: "$debug" })) {
+						didTransform = true;
+						path.replaceWith(
+							t.ifStatement(
+								t.memberExpression(
+									t.memberExpression(
+										t.memberExpression(
+											t.identifier("import"),
+											t.identifier("meta"),
+										),
+										t.identifier("env"),
+									),
+									t.identifier("DEV"),
+								),
+								t.blockStatement([
+									t.debuggerStatement(),
+									t.expressionStatement(
+										t.callExpression(
+											t.memberExpression(
+												t.identifier("console"),
+												t.identifier("log"),
+											),
+											expr.node.arguments,
+										),
+									),
+								]),
+							),
+						);
+					}
+				}
+			},
+			CallExpression(path) {
+				if (isSSR) return;
+				const callee = path.get("callee");
+
+				// Helper: wrap signal identifiers in call expressions
+				const wrapSignal = (expr: t.Expression): t.Expression => {
+					if (t.isIdentifier(expr) && signals.has(expr.name)) {
+						return t.callExpression(expr, []);
+					}
+					return expr;
+				};
+
+				// Handle member expression callees: $state.snapshot(x), $effect.tracking(), $effect.pre(fn)
+				if (callee.isMemberExpression()) {
+					const object = callee.get("object");
+					const property = callee.get("property");
+					if (object.isIdentifier() && property.isIdentifier()) {
+						const obj = object.node.name;
+						const prop = property.node.name;
+
+						if (obj === "$state" && prop === "snapshot") {
+							didTransform = true;
+							path.get("callee").replaceWith(t.identifier(MAGIC.snapshot));
+							return;
+						}
+
+						if (obj === "$effect" && prop === "tracking") {
+							didTransform = true;
+							path.get("callee").replaceWith(t.identifier(MAGIC.tracking));
+							return;
+						}
+
+						if (obj === "$effect" && prop === "pre") {
+							didTransform = true;
+							path
+								.get("callee")
+								.replaceWith(t.identifier(MAGIC.createEffectPre));
+							return;
+						}
+					}
+				}
+
+				// Handle $inspect(count).with(cb) chain
+				if (callee.isMemberExpression()) {
+					const property = callee.get("property");
+					if (property.isIdentifier({ name: "with" })) {
+						const object = callee.get("object");
+						if (object.isCallExpression()) {
+							const innerCallee = object.get("callee");
+							if (innerCallee.isIdentifier({ name: "$inspect" })) {
+								didTransform = true;
+								//@ts-expect-error Bizzare but it works if you read LSP
+								const args = object.node.arguments.map(wrapSignal);
+								const cb = path.node.arguments[0];
+								path.replaceWith(
+									t.callExpression(t.identifier(MAGIC.createInspectEffect), [
+										t.arrowFunctionExpression([], t.arrayExpression(args)),
+										//@ts-expect-error Bizzare but it works if you read LSP
+										cb,
+									]),
+								);
+								return;
+							}
+						}
+					}
+				}
+
+				// Handle standalone $debug(...) — not as expression statement
+				if (callee.isIdentifier({ name: "$debug" })) {
+					didTransform = true;
+					path.replaceWith(
+						t.ifStatement(
+							t.memberExpression(
+								t.memberExpression(
+									t.memberExpression(
+										t.identifier("import"),
+										t.identifier("meta"),
+									),
+									t.identifier("env"),
+								),
+								t.identifier("DEV"),
+							),
+							t.blockStatement([
+								t.debuggerStatement(),
+								t.expressionStatement(
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("console"),
+											t.identifier("log"),
+										),
+										path.node.arguments,
+									),
+								),
+							]),
+						),
+					);
+					return;
+				}
+
+				// Handle standalone $inspect(...)
+				if (callee.isIdentifier({ name: "$inspect" })) {
+					didTransform = true;
+					//@ts-expect-error Bizzare but it works if you read LSP
+					const args = path.node.arguments.map(wrapSignal);
+					path.replaceWith(
+						t.callExpression(t.identifier(MAGIC.createInspectEffect), [
+							t.arrowFunctionExpression([], t.arrayExpression(args)),
+						]),
+					);
+					return;
+				}
+			},
+			JSXElement(path) {
+				didTransform = true;
+				// console.log(
+				//     "[sigil] JSXElement visitor fired, parent:",
+				//     path.parentPath?.type,
+				//     "isSSR:", isSSR
+				// );
+				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
+					return;
+				if (isSSR) {
+					try {
+						convertKeyToDataKey(path.node);
+						path.replaceWith(
+							t.callExpression(t.identifier("__h"), [
+								processElementSSR(path.node, signals),
+							]),
+						);
+					} catch (e) {
+						console.error("[sigil] processElementSSR threw:", path.toString());
+						console.error(e);
+						throw e;
+					}
+					return;
+				}
+
+				const statements: t.Statement[] = [];
+				const genId = (() => {
+					let i = 0;
+					return () => `_el${i++}`;
+				})();
+
+				const root = processElement(
+					path.node,
+					statements,
+					genId,
+					signals,
+					scopedHash,
+					isHydrate,
+					isHydrate ? "__nodes" : undefined,
+				);
+
+				const body: t.Statement[] = [];
+
+				if (isHydrate) {
+					// DECLARE __nodes locally — every IIFE owns its own context
+					body.push(
+						t.variableDeclaration("const", [
+							t.variableDeclarator(
+								t.identifier("__nodes"),
+								t.callExpression(t.identifier("getHydrationNodes"), []),
+							),
+						]),
+					);
+				}
+
+				body.push(...statements);
+				body.push(t.returnStatement(t.identifier(root)));
+
+				path.replaceWith(
+					t.callExpression(
+						t.arrowFunctionExpression([], t.blockStatement(body)),
+						[],
+					),
+				);
+			},
+			JSXFragment(path) {
+				didTransform = true;
+				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
+					return;
+				if (isSSR) {
+					path.replaceWith(
+						t.callExpression(t.identifier("__h"), [
+							processFragmentSSR(path.node, signals),
+						]),
+					);
+					return;
+				}
+
+				const statements: t.Statement[] = [];
+				const genId = (() => {
+					let i = 0;
+					return () => `_el${i++}`;
+				})();
+
+				const root = processFragment(
+					path.node,
+					statements,
+					genId,
+					signals,
+					scopedHash,
+					isHydrate,
+					isHydrate ? "__nodes" : undefined,
+				);
+
+				const body: t.Statement[] = [];
+
+				if (isHydrate) {
+					// DECLARE __nodes locally — every IIFE owns its own context
+					body.push(
+						t.variableDeclaration("const", [
+							t.variableDeclarator(
+								t.identifier("__nodes"),
+								t.callExpression(t.identifier("getHydrationNodes"), []),
+							),
+						]),
+					);
+				}
+
+				body.push(...statements);
+				body.push(t.returnStatement(t.identifier(root)));
+
+				path.replaceWith(
+					t.callExpression(
+						t.arrowFunctionExpression([], t.blockStatement(body)),
+						[],
+					),
+				);
+			},
+			FunctionDeclaration(path) {
+				if (isSSR) return;
+				const node = path.node;
+				if (node.async && node.id) {
+					asyncFunctions.set(node.id.name, path);
+				}
+			},
+
+			ExportDefaultDeclaration(path) {
+				const decl = path.get("declaration");
+
+				// export default async function Page() {}
+				if (
+					(decl.isFunctionDeclaration() || decl.isFunctionExpression()) &&
+					(decl.node as any).async &&
+					!isSSR
+				) {
+					asyncDefaultPath = path;
+					return;
+				}
+
+				// export default Page
+				if (decl.isIdentifier() && !isSSR) {
+					const name = (decl.node as t.Identifier).name;
+					if (asyncFunctions.has(name)) {
+						asyncDefaultPath = asyncFunctions.get(name);
+						_asyncDefaultRef = name;
+					}
+				}
+			},
+
+			ExportNamedDeclaration(path) {
+				const decl = path.get("declaration");
+				if (decl.isFunctionDeclaration()) {
+					const name = (decl.node as t.FunctionDeclaration).id?.name;
+					if (name === "loading") hasLoadingExport = true;
+					if (name === "error") hasErrorExport = true;
+				}
+				if (decl.isVariableDeclaration()) {
+					for (const d of decl.node.declarations) {
+						if (t.isIdentifier(d.id)) {
+							if (d.id.name === "loading") hasLoadingExport = true;
+							if (d.id.name === "error") hasErrorExport = true;
+						}
+					}
+				}
+			},
+		},
+	};
+}