@sigil-dev/compiler 0.9.2 → 0.9.4

package/src/babel/index.ts

@@ -1,589 +1,599 @@
-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 '';
-        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",
-                        "insert",
-                        "getHydrationNodes",
-                        "pushHydrationNodes",
-                        "popHydrationNodes",
-                        "snapshot",
-                        "tracking",
-                        "createEffectPre",
-                        "createInspectEffect",
-                        "withEffectScope",
-                        ...(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 __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 '';
+        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",
+						"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;
+						}
+					}
+				}
+			},
+		},
+	};
+}