@sigil-dev/compiler 0.7.6 → 0.8.0

package/src/babel/jsx/utils.ts

@@ -6,12 +6,16 @@ export const ATTR_MAP: Record<string, string> = {
 };
 
 export function containsSignal(
-    expr: t.Expression,
+    expr: t.Expression | t.Node,
     signals: Set<string>,
 ): boolean {
+    if (!expr) return false;
     if (t.isIdentifier(expr)) return signals.has(expr.name);
     if (t.isCallExpression(expr)) {
-        return containsSignal(expr.callee as t.Expression, signals);
+        return (
+            containsSignal(expr.callee as t.Expression, signals) ||
+            expr.arguments.some((a) => containsSignal(a as t.Expression, signals))
+        );
     }
     if (t.isBinaryExpression(expr)) {
         return (
@@ -39,7 +43,47 @@ export function containsSignal(
         return containsSignal(expr.argument as t.Expression, signals);
     }
     if (t.isTemplateLiteral(expr)) {
-        return expr.expressions.some(e => containsSignal(e as t.Expression, signals));
+        return expr.expressions.some((e) =>
+            containsSignal(e as t.Expression, signals),
+        );
+    }
+    // ── additions ──
+    if (t.isArrayExpression(expr)) {
+        return expr.elements.some(
+            (e) => e !== null && containsSignal(e as t.Expression, signals),
+        );
+    }
+    if (t.isObjectExpression(expr)) {
+        return expr.properties.some((p) => {
+            if (t.isObjectProperty(p)) return containsSignal(p.value as t.Expression, signals);
+            if (t.isSpreadElement(p)) return containsSignal(p.argument, signals);
+            return false;
+        });
+    }
+    if (t.isSequenceExpression(expr)) {
+        return expr.expressions.some((e) => containsSignal(e, signals));
+    }
+    if (t.isAssignmentExpression(expr)) {
+        return containsSignal(expr.right, signals);
+    }
+    if (t.isSpreadElement(expr)) {
+        return containsSignal(expr.argument, signals);
+    }
+    // ArrowFunction/Function — don't traverse, signals inside are captured
+    // not reactive at the call site (onclick={() => count()} is fine as-is)
+    if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
+        return false;
+    }
+    // Babel represents ?. as distinct node types not in t.is* guards
+    if ((expr as any).type === "OptionalMemberExpression") {
+        return containsSignal((expr as any).object, signals);
+    }
+    if ((expr as any).type === "OptionalCallExpression") {
+        const n = expr as any;
+        return (
+            containsSignal(n.callee, signals) ||
+            n.arguments.some((a: t.Node) => containsSignal(a, signals))
+        );
     }
     return false;
 }

package/src/babel/util/bind.ts

@@ -1,126 +1,139 @@
-import { types as t } from "@babel/core";
-
-const BIND_EVENT: Record<string, string> = {
-	value: "input",
-	checked: "change",
-	innerHTML: "input",
-	textContent: "input",
-	group: "change",
-};
-
-export function buildBind(
-  varName: string,
-  bindProp: string,
-  attr: t.JSXAttribute,
-  statements: t.Statement[],
-): void {
-  const signal = (attr.value as t.JSXExpressionContainer)
-    .expression as t.CallExpression; // already text()
-
-  const signalId = signal.callee as t.Identifier; // text — for .set()
-
-  const event = BIND_EVENT[bindProp] ?? "input";
-
-  // createEffect(() => _el.prop = text())
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(t.identifier("createEffect"), [
-        t.arrowFunctionExpression(
-          [],
-          t.blockStatement([
-            t.expressionStatement(
-              t.assignmentExpression(
-                "=",
-                t.memberExpression(t.identifier(varName), t.identifier(bindProp)),
-                signal,
-              ),
-            ),
-          ]),
-        ),
-      ]),
-    ),
-  );
-
-  // addEventListener(event, e => text.set(e.target.prop))
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(
-        t.memberExpression(t.identifier(varName), t.identifier("addEventListener")),
-        [
-          t.stringLiteral(event),
-          t.arrowFunctionExpression(
-            [t.identifier("e")],
-            t.callExpression(
-              t.memberExpression(signalId, t.identifier("set")),
-              [
-                t.memberExpression(
-                  t.memberExpression(t.identifier("e"), t.identifier("target")),
-                  t.identifier(bindProp),
-                ),
-              ],
-            ),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-export function buildProxyBind(
-  varName: string,
-  bindProp: string,
-  attr: t.JSXAttribute,
-  statements: t.Statement[],
-  signal: t.MemberExpression, // already form().name
-): void {
-  const event = BIND_EVENT[bindProp] ?? "input";
-
-  // createEffect(() => el.prop = form().name)
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(t.identifier("createEffect"), [
-        t.arrowFunctionExpression(
-          [],
-          t.blockStatement([
-            t.expressionStatement(
-              t.assignmentExpression(
-                "=",
-                t.memberExpression(t.identifier(varName), t.identifier(bindProp)),
-                signal,
-              ),
-            ),
-          ]),
-        ),
-      ]),
-    ),
-  );
-
-  // addEventListener(event, e => { form().name = e.target.prop })
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(
-        t.memberExpression(t.identifier(varName), t.identifier("addEventListener")),
-        [
-          t.stringLiteral(event),
-          t.arrowFunctionExpression(
-            [t.identifier("e")],
-            t.blockStatement([
-              t.expressionStatement(
-                t.assignmentExpression(
-                  "=",
-                  signal as unknown as t.LVal, // form().name — valid LVal
-                  t.memberExpression(
-                    t.memberExpression(t.identifier("e"), t.identifier("target")),
-                    t.identifier(bindProp),
-                  ),
-                ),
-              ),
-            ]),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-
+import { types as t } from "@babel/core";
+
+const BIND_EVENT: Record<string, string> = {
+	value: "input",
+	checked: "change",
+	innerHTML: "input",
+	textContent: "input",
+	group: "change",
+};
+
+export function buildBind(
+	varName: string,
+	bindProp: string,
+	attr: t.JSXAttribute,
+	statements: t.Statement[],
+): void {
+	const signal = (attr.value as t.JSXExpressionContainer)
+		.expression as t.CallExpression; // already text()
+
+	const signalId = signal.callee as t.Identifier; // text — for .set()
+
+	const event = BIND_EVENT[bindProp] ?? "input";
+
+	// createEffect(() => _el.prop = text())
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier(bindProp),
+								),
+								signal,
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
+
+	// addEventListener(event, e => text.set(e.target.prop))
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(
+				t.memberExpression(
+					t.identifier(varName),
+					t.identifier("addEventListener"),
+				),
+				[
+					t.stringLiteral(event),
+					t.arrowFunctionExpression(
+						[t.identifier("e")],
+						t.callExpression(
+							t.memberExpression(signalId, t.identifier("set")),
+							[
+								t.memberExpression(
+									t.memberExpression(t.identifier("e"), t.identifier("target")),
+									t.identifier(bindProp),
+								),
+							],
+						),
+					),
+				],
+			),
+		),
+	);
+}
+
+export function buildProxyBind(
+	varName: string,
+	bindProp: string,
+	attr: t.JSXAttribute,
+	statements: t.Statement[],
+	signal: t.MemberExpression, // already form().name
+): void {
+	const event = BIND_EVENT[bindProp] ?? "input";
+
+	// createEffect(() => el.prop = form().name)
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier(bindProp),
+								),
+								signal,
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
+
+	// addEventListener(event, e => { form().name = e.target.prop })
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(
+				t.memberExpression(
+					t.identifier(varName),
+					t.identifier("addEventListener"),
+				),
+				[
+					t.stringLiteral(event),
+					t.arrowFunctionExpression(
+						[t.identifier("e")],
+						t.blockStatement([
+							t.expressionStatement(
+								t.assignmentExpression(
+									"=",
+									signal as unknown as t.LVal, // form().name — valid LVal
+									t.memberExpression(
+										t.memberExpression(
+											t.identifier("e"),
+											t.identifier("target"),
+										),
+										t.identifier(bindProp),
+									),
+								),
+							),
+						]),
+					),
+				],
+			),
+		),
+	);
+}

package/src/babel/util/css.ts

@@ -1,151 +1,151 @@
-import { createHash } from "crypto";
-
-/**
- * Compute a deterministic hash from a file path.
- * Same file always gets same hash. Different files always get different hashes.
- * 's' prefix for Sigil.
- */
-export function computeHash(filePath: string): string {
-	return "s" + createHash("md5").update(filePath).digest("hex").slice(0, 8);
-}
-
-/**
- * Scope CSS by rewriting selectors with hash.
- * :global(.selector) escapes scoping (passed through unchanged).
- */
-export function scopeCSS(css: string, hash: string): string {
-	let result = "";
-	let i = 0;
-
-	while (i < css.length) {
-		// Skip comments
-		if (css[i] === "/" && css[i + 1] === "*") {
-			const end = css.indexOf("*/", i + 2);
-			if (end === -1) {
-				result += css.slice(i);
-				break;
-			}
-			result += css.slice(i, end + 2);
-			i = end + 2;
-			continue;
-		}
-
-		// Skip string literals
-		if (css[i] === '"' || css[i] === "'") {
-			const quote = css[i];
-			let j = i + 1;
-			while (j < css.length && css[j] !== quote) {
-				if (css[j] === "\\") j++;
-				j++;
-			}
-			result += css.slice(i, j + 1);
-			i = j + 1;
-			continue;
-		}
-
-		// Find next { or end of string
-		if (css[i] === "{") {
-			// Find the matching }
-			let depth = 1;
-			let j = i + 1;
-			while (j < css.length && depth > 0) {
-				if (css[j] === "{") depth++;
-				else if (css[j] === "}") depth--;
-				j++;
-			}
-
-			// The block content (inside { }) - recurse into it
-			const blockContent = css.slice(i + 1, j - 1);
-			const scopedBlock = scopeCSS(blockContent, hash);
-
-			// Find where the selector starts (look back from {)
-			let selectorEnd = i;
-			let k = i - 1;
-			// Skip whitespace before {
-			while (k >= 0 && css[k] === " ") k--;
-			selectorEnd = k + 1;
-
-			// Find start of selector (look back for } or ; or start of string)
-			let selectorStart = selectorEnd;
-			k = selectorEnd - 1;
-			while (k >= 0) {
-				if (css[k] === "}" || css[k] === ";") {
-					selectorStart = k + 1;
-					break;
-				}
-				if (k === 0) {
-					selectorStart = 0;
-					break;
-				}
-				k--;
-			}
-
-			const selector = css.slice(selectorStart, selectorEnd).trim();
-
-			if (selector) {
-				// Rewrite selector with hash
-				result += css.slice(0, selectorStart);
-				result += rewriteSelector(selector, hash);
-				result += " {";
-				result += scopedBlock;
-				result += "}";
-			} else {
-				// No selector found, just output the block
-				result += css.slice(0, i);
-				result += " {";
-				result += scopedBlock;
-				result += "}";
-			}
-
-			i = j;
-			continue;
-		}
-
-		result += css[i];
-		i++;
-	}
-
-	return result;
-}
-
-/**
- * Rewrite a selector (or comma-separated list) by appending hash to each part.
- * Handles :global() by passing through unchanged.
- */
-function rewriteSelector(selector: string, hash: string): string {
-	// First, extract all :global() blocks and replace with placeholders
-	const globals: string[] = [];
-	let processed = selector;
-
-	// Find :global(...) with nested parens
-	while (processed.includes(":global(")) {
-		const start = processed.indexOf(":global(");
-		let depth = 1;
-		let j = start + 7; // Skip ':global('
-		while (j < processed.length && depth > 0) {
-			if (processed[j] === "(") depth++;
-			else if (processed[j] === ")") depth--;
-			j++;
-		}
-		const globalContent = processed.slice(start + 7, j - 1); // Content inside :global()
-		const placeholder = `__GLOBAL_${globals.length}__`;
-		globals.push(globalContent);
-		processed = processed.slice(0, start) + placeholder + processed.slice(j);
-	}
-
-	// Now split by comma (safe - no commas inside :global())
-	const parts = processed.split(",").map((part) => {
-		const trimmed = part.trim();
-		if (!trimmed) return trimmed;
-
-		// Check for placeholder
-		const globalMatch = trimmed.match(/^__GLOBAL_(\d+)__$/);
-		if (globalMatch) {
-			return globals[parseInt(globalMatch[1]!)];
-		}
-
-		return trimmed + "." + hash;
-	});
-
-	return parts.join(", ");
-}
+import { createHash } from "crypto";
+
+/**
+ * Compute a deterministic hash from a file path.
+ * Same file always gets same hash. Different files always get different hashes.
+ * 's' prefix for Sigil.
+ */
+export function computeHash(filePath: string): string {
+	return "s" + createHash("md5").update(filePath).digest("hex").slice(0, 8);
+}
+
+/**
+ * Scope CSS by rewriting selectors with hash.
+ * :global(.selector) escapes scoping (passed through unchanged).
+ */
+export function scopeCSS(css: string, hash: string): string {
+	let result = "";
+	let i = 0;
+
+	while (i < css.length) {
+		// Skip comments
+		if (css[i] === "/" && css[i + 1] === "*") {
+			const end = css.indexOf("*/", i + 2);
+			if (end === -1) {
+				result += css.slice(i);
+				break;
+			}
+			result += css.slice(i, end + 2);
+			i = end + 2;
+			continue;
+		}
+
+		// Skip string literals
+		if (css[i] === '"' || css[i] === "'") {
+			const quote = css[i];
+			let j = i + 1;
+			while (j < css.length && css[j] !== quote) {
+				if (css[j] === "\\") j++;
+				j++;
+			}
+			result += css.slice(i, j + 1);
+			i = j + 1;
+			continue;
+		}
+
+		// Find next { or end of string
+		if (css[i] === "{") {
+			// Find the matching }
+			let depth = 1;
+			let j = i + 1;
+			while (j < css.length && depth > 0) {
+				if (css[j] === "{") depth++;
+				else if (css[j] === "}") depth--;
+				j++;
+			}
+
+			// The block content (inside { }) - recurse into it
+			const blockContent = css.slice(i + 1, j - 1);
+			const scopedBlock = scopeCSS(blockContent, hash);
+
+			// Find where the selector starts (look back from {)
+			let selectorEnd = i;
+			let k = i - 1;
+			// Skip whitespace before {
+			while (k >= 0 && css[k] === " ") k--;
+			selectorEnd = k + 1;
+
+			// Find start of selector (look back for } or ; or start of string)
+			let selectorStart = selectorEnd;
+			k = selectorEnd - 1;
+			while (k >= 0) {
+				if (css[k] === "}" || css[k] === ";") {
+					selectorStart = k + 1;
+					break;
+				}
+				if (k === 0) {
+					selectorStart = 0;
+					break;
+				}
+				k--;
+			}
+
+			const selector = css.slice(selectorStart, selectorEnd).trim();
+
+			if (selector) {
+				// Rewrite selector with hash
+				result += css.slice(0, selectorStart);
+				result += rewriteSelector(selector, hash);
+				result += " {";
+				result += scopedBlock;
+				result += "}";
+			} else {
+				// No selector found, just output the block
+				result += css.slice(0, i);
+				result += " {";
+				result += scopedBlock;
+				result += "}";
+			}
+
+			i = j;
+			continue;
+		}
+
+		result += css[i];
+		i++;
+	}
+
+	return result;
+}
+
+/**
+ * Rewrite a selector (or comma-separated list) by appending hash to each part.
+ * Handles :global() by passing through unchanged.
+ */
+function rewriteSelector(selector: string, hash: string): string {
+	// First, extract all :global() blocks and replace with placeholders
+	const globals: string[] = [];
+	let processed = selector;
+
+	// Find :global(...) with nested parens
+	while (processed.includes(":global(")) {
+		const start = processed.indexOf(":global(");
+		let depth = 1;
+		let j = start + 7; // Skip ':global('
+		while (j < processed.length && depth > 0) {
+			if (processed[j] === "(") depth++;
+			else if (processed[j] === ")") depth--;
+			j++;
+		}
+		const globalContent = processed.slice(start + 7, j - 1); // Content inside :global()
+		const placeholder = `__GLOBAL_${globals.length}__`;
+		globals.push(globalContent);
+		processed = processed.slice(0, start) + placeholder + processed.slice(j);
+	}
+
+	// Now split by comma (safe - no commas inside :global())
+	const parts = processed.split(",").map((part) => {
+		const trimmed = part.trim();
+		if (!trimmed) return trimmed;
+
+		// Check for placeholder
+		const globalMatch = trimmed.match(/^__GLOBAL_(\d+)__$/);
+		if (globalMatch) {
+			return globals[parseInt(globalMatch[1]!)];
+		}
+
+		return trimmed + "." + hash;
+	});
+
+	return parts.join(", ");
+}