@sigil-dev/compiler 0.9.10 → 0.9.12

package/src/babel/jsx/element.ts

@@ -6,6 +6,7 @@ import {
 	isGlobalComponent,
 } from "../handlers/dom/globals";
 import { buildBind, buildProxyBind } from "../util/bind";
+import { isPropRead } from "../util/props.ts";
 import { buildAnchorMount } from "./anchor-mount";
 import { collectChildren } from "./children";
 import { processFragment } from "./fragment";
@@ -16,7 +17,9 @@ import {
 	buildHydrationScope,
 	containsSignal,
 	getCreateElement,
+	hasJSX,
 	isPrimitive,
+	jsxText,
 } from "./utils";
 
 /**
@@ -59,6 +62,61 @@ function setPropCall(
 	]);
 }
 
+function isClaimedCall(varName: string): t.CallExpression {
+	return t.callExpression(t.identifier("isClaimed"), [t.identifier(varName)]);
+}
+
+function effect(body: t.Statement[]): t.ExpressionStatement {
+	return t.expressionStatement(
+		t.callExpression(t.identifier("createEffect"), [
+			t.arrowFunctionExpression([], t.blockStatement(body)),
+		]),
+	);
+}
+
+/** Emit fresh-element-only writes; hydration guards them with isClaimed(). */
+function pushInit(
+	varName: string,
+	init: t.Statement[],
+	statements: t.Statement[],
+	hydrate?: boolean,
+): void {
+	if (!init.length) return;
+	if (hydrate) {
+		statements.push(
+			t.ifStatement(
+				t.unaryExpression("!", isClaimedCall(varName)),
+				t.blockStatement(init),
+			),
+		);
+	} else {
+		statements.push(...init);
+	}
+}
+
+/** A <script>'s children as one string expression, or null if it has none. */
+function scriptText(node: t.JSXElement): t.Expression | null {
+	const parts: t.Expression[] = [];
+	for (const child of node.children) {
+		if (t.isJSXText(child)) {
+			const text = jsxText(child);
+			if (text !== null) parts.push(t.stringLiteral(text));
+		} else if (
+			t.isJSXExpressionContainer(child) &&
+			!t.isJSXEmptyExpression(child.expression)
+		) {
+			parts.push(
+				t.logicalExpression("??", child.expression, t.stringLiteral("")),
+			);
+		}
+	}
+	if (!parts.length) return null;
+	return parts.reduce(
+		(a, b) => t.binaryExpression("+", a, b),
+		t.stringLiteral(""),
+	);
+}
+
 /**
  * Build an object property key (identifier for valid names, string literal for dashed).
  */
@@ -123,13 +181,44 @@ export function processElement(
 			if (!t.isJSXAttribute(attr)) continue;
 			const attrName = (attr.name as t.JSXIdentifier).name;
 
-			if (t.isStringLiteral(attr.value)) {
+			if (attr.value === null) {
+				// <Comp disabled /> → { disabled: true }
+				propsObj.properties.push(
+					t.objectProperty(attrKey(attrName), t.booleanLiteral(true)),
+				);
+			} else if (t.isStringLiteral(attr.value)) {
 				propsObj.properties.push(
 					t.objectProperty(attrKey(attrName), attr.value),
 				);
 			} else if (t.isJSXExpressionContainer(attr.value)) {
 				const expr = attr.value.expression as t.Expression;
-				propsObj.properties.push(t.objectProperty(attrKey(attrName), expr));
+				// JSX in a prop (icon={<Icon />}, actions={<>…</>}) belongs
+				// wherever the component puts it, inside its own root. Built
+				// now, during hydration, it would claim from the caller's pool
+				// and could take the component's root element. Defer it like
+				// children: the component's {prop} slot runs the thunk against
+				// the right nodes.
+				if (hydrate && hasJSX(expr)) {
+					propsObj.properties.push(
+						t.objectProperty(
+							attrKey(attrName),
+							t.arrowFunctionExpression([], expr),
+						),
+					);
+				} else if (containsSignal(expr, signals)) {
+					// a prop that reads state is passed as a getter, so the
+					// component reads the current value wherever it uses it
+					propsObj.properties.push(
+						t.objectMethod(
+							"get",
+							attrKey(attrName),
+							[],
+							t.blockStatement([t.returnStatement(expr)]),
+						),
+					);
+				} else {
+					propsObj.properties.push(t.objectProperty(attrKey(attrName), expr));
+				}
 			}
 		}
 
@@ -230,18 +319,24 @@ export function processElement(
 		buildHydrationScope(varName, statements, childNodesVar);
 	}
 
+	// Attribute writes that only matter on a fresh element. When hydration
+	// claims server HTML they already happened there, and redoing them would
+	// wipe whatever a page script changed in the meantime.
+	const init: t.Statement[] = [];
+	// <select value> needs its options to exist first.
+	const initAfter: t.Statement[] = [];
+	const liveAfter: t.Statement[] = [];
+
 	// attributes
 	const seenAttrs = new Set<string>();
 	for (const attr of node.openingElement.attributes) {
 		if (t.isJSXSpreadAttribute(attr)) {
-			// {…obj} — spread onto native element
+			// {…obj}: listeners always, attributes unless hydration claimed
+			// the element (then the server already rendered them)
+			const args: t.Expression[] = [t.identifier(varName), attr.argument];
+			if (hydrate) args.push(t.unaryExpression("!", isClaimedCall(varName)));
 			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("Object.assign"), [
-						t.identifier(varName),
-						attr.argument as t.Expression,
-					]),
-				),
+				t.expressionStatement(t.callExpression(t.identifier("spread"), args)),
 			);
 			continue;
 		}
@@ -256,7 +351,8 @@ export function processElement(
 			// bindValue -> bind:value, bindChecked -> bind:checked
 			if (/^bind[A-Z]/.test(attrName)) {
 				attrNamespace = "bind";
-				attrName = attrName.slice(4).toLowerCase();
+				// bindScrollTop -> bind:scrollTop: only the first letter lowers
+				attrName = attrName.charAt(4).toLowerCase() + attrName.slice(5);
 			}
 		}
 		const realAttr = ATTR_MAP[attrName] ?? attrName;
@@ -491,9 +587,19 @@ export function processElement(
 					).name,
 				);
 
+			// bind:checked={item.done} in a list row, or {book.read} where `book`
+			// is a prop: the chain is rooted at a row item or a props object,
+			// and what it ends in is a property of a $state proxy
+			let root: t.Node = signal;
+			while (t.isMemberExpression(root)) root = root.object;
+			const isMemberOfItem =
+				t.isMemberExpression(signal) &&
+				t.isIdentifier(root) &&
+				signals.has(root.name);
+
 			if (isTopLevelSignal) {
 				buildBind(varName, bindProp, attr, statements);
-			} else if (isMemberOfSignal) {
+			} else if (isMemberOfSignal || isMemberOfItem) {
 				buildProxyBind(varName, bindProp, attr, statements, signal);
 			} else {
 				console.warn(
@@ -504,30 +610,22 @@ export function processElement(
 			}
 		} else if (attr.value === null) {
 			// bare attribute (<input disabled>, <div data-beacon>)
-			if (isDashedAttr(realAttr)) {
-				statements.push(
-					t.expressionStatement(
-						setAttrCall(varName, realAttr, t.stringLiteral("")),
-					),
-				);
-			} else {
-				statements.push(
-					t.expressionStatement(
-						setPropCall(varName, realAttr, t.booleanLiteral(true)),
-					),
-				);
-			}
-		} else if (t.isStringLiteral(attr.value)) {
-			statements.push(
+			init.push(
 				t.expressionStatement(
 					isDashedAttr(realAttr)
-						? setAttrCall(varName, realAttr, t.stringLiteral(attr.value.value))
-						: setPropCall(varName, realAttr, attr.value),
+						? setAttrCall(varName, realAttr, t.stringLiteral(""))
+						: setPropCall(varName, realAttr, t.booleanLiteral(true)),
 				),
 			);
+		} else if (t.isStringLiteral(attr.value)) {
+			const stmt = t.expressionStatement(
+				setPropCall(varName, realAttr, t.stringLiteral(attr.value.value)),
+			);
+			(tag === "select" && realAttr === "value" ? initAfter : init).push(stmt);
 		} else if (t.isJSXExpressionContainer(attr.value)) {
 			const expr = attr.value.expression as t.Expression;
-			// style={{ color: "red", fontSize: val }} — per-property assignment
+			const afterChildren = tag === "select" && realAttr === "value";
+			// style={{ color: "red", fontSize: val }} — per-property writes
 			if (attrName === "style" && t.isObjectExpression(expr)) {
 				for (const prop of expr.properties) {
 					if (!t.isObjectProperty(prop)) continue;
@@ -538,105 +636,68 @@ export function processElement(
 							: null;
 					if (!key) continue;
 					const val = prop.value as t.Expression;
-					const styleProp = t.memberExpression(
-						t.memberExpression(t.identifier(varName), t.identifier("style")),
-						t.identifier(key),
+					const write = t.expressionStatement(
+						t.callExpression(t.identifier("setStyleProp"), [
+							t.identifier(varName),
+							t.stringLiteral(key),
+							val,
+						]),
 					);
 					if (containsSignal(val, signals)) {
-						statements.push(
-							t.expressionStatement(
-								t.callExpression(t.identifier("createEffect"), [
-									t.arrowFunctionExpression(
-										[],
-										t.blockStatement([
-											t.expressionStatement(
-												t.assignmentExpression("=", styleProp, val),
-											),
-										]),
-									),
-								]),
-							),
-						);
+						statements.push(effect([write]));
 					} else {
-						statements.push(
-							t.expressionStatement(
-								t.assignmentExpression("=", styleProp, val),
-							),
-						);
+						init.push(write);
 					}
 				}
-				// done with this attribute
 			} else if (containsSignal(expr, signals)) {
 				// Dynamic class with scoped CSS: use classList.value to preserve hash
 				if (attrName === "class" && hash) {
 					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("createEffect"), [
-								t.arrowFunctionExpression(
-									[],
-									t.blockStatement([
-										t.expressionStatement(
-											t.assignmentExpression(
-												"=",
-												t.memberExpression(
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("classList"),
-													),
-													t.identifier("value"),
-												),
-												expr,
-											),
-										),
-										t.expressionStatement(
-											t.callExpression(
-												t.memberExpression(
-													t.memberExpression(
-														t.identifier(varName),
-														t.identifier("classList"),
-													),
-													t.identifier("add"),
-												),
-												[t.stringLiteral(hash)],
-											),
+						effect([
+							t.expressionStatement(
+								t.assignmentExpression(
+									"=",
+									t.memberExpression(
+										t.memberExpression(
+											t.identifier(varName),
+											t.identifier("classList"),
 										),
-									]),
+										t.identifier("value"),
+									),
+									expr,
 								),
-							]),
-						),
-					);
-				} else {
-					// createEffect(() => setAttribute/prop = expr)
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("createEffect"), [
-								t.arrowFunctionExpression(
-									[],
-									t.blockStatement([
-										t.expressionStatement(
-											isDashedAttr(realAttr)
-												? setAttrCall(varName, realAttr, expr)
-												: setPropCall(varName, realAttr, expr),
+							),
+							t.expressionStatement(
+								t.callExpression(
+									t.memberExpression(
+										t.memberExpression(
+											t.identifier(varName),
+											t.identifier("classList"),
 										),
-									]),
+										t.identifier("add"),
+									),
+									[t.stringLiteral(hash)],
 								),
-							]),
-						),
+							),
+						]),
 					);
+				} else {
+					const stmt = effect([
+						t.expressionStatement(setPropCall(varName, realAttr, expr)),
+					]);
+					(afterChildren ? liveAfter : statements).push(stmt);
 				}
 			} else {
-				// setAttribute for dashed, runtime setProp (attribute-safe on SVG) otherwise
-				statements.push(
-					t.expressionStatement(
-						isDashedAttr(realAttr)
-							? setAttrCall(varName, realAttr, expr)
-							: setPropCall(varName, realAttr, expr),
-					),
+				const stmt = t.expressionStatement(
+					setPropCall(varName, realAttr, expr),
 				);
+				(afterChildren ? initAfter : init).push(stmt);
 			}
 		}
 	}
 
+	pushInit(varName, init, statements, hydrate);
+
 	// Add scoped CSS hash to classList (if hash is present)
 	if (hash) {
 		addScopedClass(varName, hash, statements);
@@ -645,6 +706,25 @@ export function processElement(
 	// children. <script> text is already in the server HTML, raw and unmarked
 	// (see ssr.ts), so hydration has nothing to claim there: the marker search
 	// would miss and append a second copy of the code.
+	if (hydrate && tag === "script") {
+		// ...but SPA navigation creates the element fresh and needs the text.
+		const text = scriptText(node);
+		if (text) {
+			const write = [
+				t.expressionStatement(
+					t.assignmentExpression(
+						"=",
+						t.memberExpression(
+							t.identifier(varName),
+							t.identifier("textContent"),
+						),
+						text,
+					),
+				),
+			];
+			pushInit(varName, write, statements, hydrate);
+		}
+	}
 	for (const child of hydrate && tag === "script" ? [] : node.children) {
 		if (t.isJSXElement(child)) {
 			const childVar = processElement(
@@ -689,8 +769,8 @@ export function processElement(
 				);
 			}
 		} else if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
+			const text = jsxText(child);
+			if (text === null) continue;
 			if (hydrate) {
 				// SSR hydration: text already in DOM from SSR, do nothing.
 				// SPA navigation: childNodesVar pool is empty, create text node.
@@ -713,7 +793,7 @@ export function processElement(
 											t.identifier("document"),
 											t.identifier("createTextNode"),
 										),
-										[t.stringLiteral(text.replace(/\s*\n\s*/g, " "))],
+										[t.stringLiteral(text)],
 									),
 								],
 							),
@@ -789,6 +869,18 @@ export function processElement(
 						),
 					);
 				}
+			} else if (isPropRead(expr)) {
+				// a prop may hold text, nodes or a deferred child, and may be a
+				// getter over state: a live slot handles all of them
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(t.identifier("liveSlot"), [
+							hydrate ? t.identifier(childNodesVar!) : t.arrayExpression([]),
+							t.identifier(varName),
+							t.arrowFunctionExpression([], expr),
+						]),
+					),
+				);
 			} else if (containsSignal(expr, signals)) {
 				if (isPrimitive(expr)) {
 					// fast path: text node + textContent
@@ -861,5 +953,8 @@ export function processElement(
 		}
 	}
 
+	pushInit(varName, initAfter, statements, hydrate);
+	statements.push(...liveAfter);
+
 	return varName;
 }

package/src/babel/jsx/fragment.ts

@@ -1,9 +1,10 @@
 import { types as t } from "@babel/core";
+import { isPropRead } from "../util/props.ts";
 import { buildAnchorMount } from "./anchor-mount";
 import { processElement } from "./element";
 import { buildKeyedList, findKeyedMapExpr } from "./keyed-list";
 import { buildTextNode } from "./text-node";
-import { containsSignal, isPrimitive } from "./utils";
+import { containsSignal, isPrimitive, jsxText } from "./utils";
 
 /**
  * Process a JSX fragment (<>...</>).
@@ -76,8 +77,8 @@ export function processFragment(
 				);
 			}
 		} else if (t.isJSXText(child)) {
-			const text = child.value.trim();
-			if (!text) continue;
+			const text = jsxText(child);
+			if (text === null) continue;
 			if (hydrate) {
 				// SSR hydration: text already in DOM from SSR, do nothing.
 				// SPA navigation: pool is empty, create text node and append to effectiveParent.
@@ -176,6 +177,17 @@ export function processFragment(
 						),
 					);
 				}
+			} else if (isPropRead(expr)) {
+				// see element.ts: a prop may be text, nodes, a thunk, or a getter
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(t.identifier("liveSlot"), [
+							hydrate ? t.identifier(currentNodesVar) : t.arrayExpression([]),
+							t.identifier(hydrate ? effectiveParent : varName),
+							t.arrowFunctionExpression([], expr),
+						]),
+					),
+				);
 			} else if (containsSignal(expr, signals)) {
 				if (isPrimitive(expr)) {
 					buildTextNode(

package/src/babel/jsx/keyed-list.ts

@@ -107,6 +107,14 @@ export function buildKeyedList(
 		keyed.keyExpr ?? t.identifier("_i"),
 	);
 
+	// Inside a row, the item is an element of a $state array, which makes it a
+	// reactive proxy: `item.done` must update the row when it changes, and
+	// bind:checked={item.done} must write back to it. Treating the item param
+	// as a signal gives its reads effects; a primitive item costs one effect
+	// that never re-runs.
+	const rowSignals = new Set(signals);
+	rowSignals.add(keyed.itemParam.name);
+
 	// Strip key prop from JSX before processing.
 	// In SSR mode, the Babel plugin already converted key → data-key.
 	// In DOM/hydrate mode, we don't need either.
@@ -139,7 +147,7 @@ export function buildKeyedList(
 			keyed.jsxBody,
 			createNodeStmts,
 			genId,
-			signals,
+			rowSignals,
 			hash,
 			hydrate,
 			nodesVar,
@@ -274,7 +282,7 @@ export function buildKeyedList(
 		keyed.jsxBody,
 		createNodeStmts,
 		genId,
-		signals,
+		rowSignals,
 		hash,
 	);