@sigil-dev/compiler 0.7.5 → 0.7.7

package/src/babel/index.ts

@@ -6,8 +6,9 @@ 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";
+import { getMacro } from "./util/helpers.ts";
+import { MAGIC } from "./util/magic.ts";
 
 const SSR_HELPERS = template.statements.ast(`
     const __SAFE = Symbol.for('sigil.safe');
@@ -32,34 +33,34 @@ const SSR_HELPERS = template.statements.ast(`
  * 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);
-        }
-    }
+	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";
+	hash?: string;
+	mode?: "dom" | "ssr" | "hydrate";
 }
 
 export default function sigilPlugin(): PluginObject {
@@ -70,200 +71,410 @@ export default function sigilPlugin(): PluginObject {
 	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";
+	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;
-                    }
+					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",
+					);
 
-                },
-                exit(path, state) {
-                    warnDeadReactivity(path, signals, storeSignals, state.filename);
+					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;
 
-                    // Only inject runtime import if this file actually used sigil transforms
-                    if (!didTransform || isSSR) return;
+					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");
 
-                    const hasRuntime = path.node.body.some(
-                        n => t.isImportDeclaration(n) && n.source.value === "@sigil-dev/runtime"
-                    );
-                    if (hasRuntime) return;
+				// 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;
+				};
 
-                    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;
+				// 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 (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;
-                }
+						if (obj === "$state" && prop === "snapshot") {
+							didTransform = true;
+							path.get("callee").replaceWith(t.identifier(MAGIC.snapshot));
+							return;
+						}
 
-                const statements: t.Statement[] = [];
-                const genId = (() => { let i = 0; return () => `_el${i++}`; })();
+						if (obj === "$effect" && prop === "tracking") {
+							didTransform = true;
+							path.get("callee").replaceWith(t.identifier(MAGIC.tracking));
+							return;
+						}
 
-                const root = processElement(
-                    path.node, statements, genId, signals, scopedHash,
-                    isHydrate,
-                    isHydrate ? "__nodes" : undefined,
-                );
+						if (obj === "$effect" && prop === "pre") {
+							didTransform = true;
+							path
+								.get("callee")
+								.replaceWith(t.identifier(MAGIC.createEffectPre));
+							return;
+						}
+					}
+				}
 
-                const body: t.Statement[] = [];
+				// 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;
+							}
+						}
+					}
+				}
 
-                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"), [])
-                            )
-                        ])
-                    );
-                }
+				// 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;
+				}
 
-                body.push(...statements);
-                body.push(t.returnStatement(t.identifier(root)));
+				// 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;
+				}
 
-                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 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 root = processFragment(
-                    path.node, statements, genId, signals, scopedHash,
-                    isHydrate,
-                    isHydrate ? "__nodes" : undefined,
-                );
+				const body: t.Statement[] = [];
 
-                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"), []),
+							),
+						]),
+					);
+				}
 
-                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)));
 
-                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;
+				}
 
-                path.replaceWith(
-                    t.callExpression(
-                        t.arrowFunctionExpression([], t.blockStatement(body)),
-                        []
-                    )
-                );
-            },
-        },
-    };
+				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)),
+						[],
+					),
+				);
+			},
+		},
+	};
 }