@sigil-dev/compiler 0.7.6 → 0.8.0

package/src/babel/index.ts

@@ -1,430 +1,480 @@
-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 { getMacro } from "./util/helpers.ts";
-import { MAGIC } from "./util/magic.ts";
-import { warnDeadReactivity } from "./util/dead-code.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";
-}
-
-export default function sigilPlugin(): PluginObject {
-	const signals = new Set<string>();
-	const storeSignals = new Set<string>();
-	let scopedHash: string | undefined;
-	let isSSR = false;
-	let isHydrate = false;
-	let didTransform = 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";
-
-                    if (isSSR) {
-                        path.unshiftContainer("body", SSR_HELPERS);
-                        return;
-                    }
-
-
-
-                },
-                exit(path, state) {
-                    warnDeadReactivity(path, signals, storeSignals, state.filename);
-
-                    // 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",
-                    ];
-
-                    const runtimeImport = path.node.body.find(
-                        (n): n is t.ImportDeclaration => t.isImportDeclaration(n) && n.source.value === "@sigil-dev/runtime"
-                    );
-
-                    if (runtimeImport) {
-                        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);
-						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;
-                                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)),
-                                        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;
-                    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)),
-                        []
-                    )
-                );
-            },
-        },
-    };
-}
+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";
+}
+
+export default function sigilPlugin(): PluginObject {
+	const signals = new Set<string>();
+	const storeSignals = new Set<string>();
+	let scopedHash: string | undefined;
+	let isSSR = false;
+	let isHydrate = false;
+	let didTransform = 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";
+
+					if (isSSR) {
+						path.unshiftContainer("body", SSR_HELPERS);
+						return;
+					}
+				},
+				exit(path, state) {
+					warnDeadReactivity(path, signals, storeSignals, state.filename);
+
+					// 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",
+					];
+					console.log(
+						"[sigil exit] didTransform:",
+						didTransform,
+						"withEffectScope in required:",
+						requiredSpecifiers.includes("withEffectScope"),
+					);
+					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);
+						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;
+								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)),
+										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;
+					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)),
+						[],
+					),
+				);
+			},
+		},
+	};
+}