@sigil-dev/compiler 0.7.5 → 0.7.6

package/src/babel/index.ts

@@ -1,269 +1,430 @@
-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 { 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 hasRuntime = path.node.body.some(
-                        n => t.isImportDeclaration(n) && n.source.value === "@sigil-dev/runtime"
-                    );
-                    if (hasRuntime) return;
-
-                    path.unshiftContainer("body", t.importDeclaration(
-                        [
-                            t.importSpecifier(t.identifier("createSignal"), t.identifier("createSignal")),
-                            t.importSpecifier(t.identifier("createEffect"), t.identifier("createEffect")),
-                            t.importSpecifier(t.identifier("createMemo"), t.identifier("createMemo")),
-                            t.importSpecifier(t.identifier("reconcile"), t.identifier("reconcile")),
-                            t.importSpecifier(t.identifier("claim"), t.identifier("claim")),
-                            t.importSpecifier(t.identifier("claimText"), t.identifier("claimText")),
-                            t.importSpecifier(t.identifier("claimComment"), t.identifier("claimComment")),
-                            t.importSpecifier(t.identifier("hydrateKeyedList"), t.identifier("hydrateKeyedList")),
-                            t.importSpecifier(t.identifier("insert"), t.identifier("insert")),
-                            t.importSpecifier(t.identifier("getHydrationNodes"), t.identifier("getHydrationNodes")),
-                            t.importSpecifier(t.identifier("pushHydrationNodes"), t.identifier("pushHydrationNodes")),
-                            t.importSpecifier(t.identifier("popHydrationNodes"), t.identifier("popHydrationNodes")),
-                        ],
-                        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") {
-                        isSSR
-                            ? handleStateSSR(path, declarator, init)
-                            : handleState(path, declarator, init, signals);
-                        if (name === "$store" && varName) {
-                            storeSignals.add(varName);
-                        }
-                    } else if (name === "$derived") {
-                        isSSR
-                            ? handleDerivedSSR(path, declarator, init)
-                            : handleDerived(path, declarator, init, signals);
-                    }
-                }
-            },
-            ExpressionStatement(path) {
-                if (isSSR) {
-                    // drop $effect entirely in SSR
-                    const expr = path.get("expression");
-                    if (expr.isCallExpression()) {
-                        const callee = expr.get("callee");
-                        if (callee.isIdentifier() && callee.node.name === "$effect") {
-                            didTransform = true;
-                            path.remove();
-                        }
-                    }
-                    return;
-                }
-                handleEffect(path);
-            },
-            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 { 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)),
+                        []
+                    )
+                );
+            },
+        },
+    };
+}