@sigil-dev/compiler 0.9.6 → 0.9.10

package/src/babel/jsx/fragment.ts

@@ -1,259 +1,259 @@
-import { types as t } from "@babel/core";
-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";
-
-/**
- * Process a JSX fragment (<>...</>).
- * In DOM mode: creates a DocumentFragment and appends all children to it.
- * In hydrate mode (inside element): children claim from parent's node pool; no fragment created.
- * In hydrate mode (top-level, no parentVar): creates a DocumentFragment so the IIFE returns
- *   a valid node for SPA navigation (slot.replaceChildren). SSR hydration ignores the return value.
- */
-export function processFragment(
-	node: t.JSXFragment,
-	statements: t.Statement[],
-	genId: () => string,
-	signals: Set<string>,
-	hash?: string,
-	hydrate?: boolean,
-	nodesVar?: string,
-	parentVar?: string,
-): string {
-	const varName = genId();
-	const currentNodesVar = nodesVar ?? "__nodes";
-
-	// Where to append children in DOM / SPA mode:
-	//   DOM mode            → varName (the DocumentFragment)
-	//   hydrate inside elem → parentVar (the real parent element)
-	//   hydrate top-level   → varName (a DocumentFragment we create below)
-	const effectiveParent = hydrate ? (parentVar ?? varName) : varName;
-
-	// Create a DocumentFragment when:
-	//   - DOM mode: always (it IS the container)
-	//   - Hydrate top-level (no parentVar): needed so the IIFE can return a real node for SPA nav
-	//     (SSR hydration ignores the return value, so an empty fragment is harmless)
-	if (!hydrate || !parentVar) {
-		statements.push(
-			t.variableDeclaration("const", [
-				t.variableDeclarator(
-					t.identifier(varName),
-					t.callExpression(
-						t.memberExpression(
-							t.identifier("document"),
-							t.identifier("createDocumentFragment"),
-						),
-						[],
-					),
-				),
-			]),
-		);
-	}
-
-	// Process each child and append to fragment (or claim in hydrate mode)
-	for (const child of node.children) {
-		if (t.isJSXElement(child)) {
-			const childVar = processElement(
-				child,
-				statements,
-				genId,
-				signals,
-				hash,
-				hydrate,
-				currentNodesVar,
-				hydrate ? effectiveParent : undefined,
-			);
-			if (!hydrate) {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(t.identifier(varName), t.identifier("append")),
-							[t.identifier(childVar)],
-						),
-					),
-				);
-			}
-		} else if (t.isJSXText(child)) {
-			const text = child.value.trim();
-			if (!text) 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.
-				const poolLen = t.memberExpression(
-					t.identifier(currentNodesVar),
-					t.identifier("length"),
-				);
-				statements.push(
-					t.ifStatement(
-						t.binaryExpression("===", poolLen, t.numericLiteral(0)),
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(effectiveParent),
-									t.identifier("append"),
-								),
-								[
-									t.callExpression(
-										t.memberExpression(
-											t.identifier("document"),
-											t.identifier("createTextNode"),
-										),
-										[t.stringLiteral(text)],
-									),
-								],
-							),
-						),
-					),
-				);
-			} else {
-				statements.push(
-					t.expressionStatement(
-						t.callExpression(
-							t.memberExpression(t.identifier(varName), t.identifier("append")),
-							[
-								t.callExpression(
-									t.memberExpression(
-										t.identifier("document"),
-										t.identifier("createTextNode"),
-									),
-									[t.stringLiteral(text)],
-								),
-							],
-						),
-					),
-				);
-			}
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				const childVar = processElement(
-					expr,
-					statements,
-					genId,
-					signals,
-					hash,
-					hydrate,
-					currentNodesVar,
-					hydrate ? effectiveParent : undefined,
-				);
-				if (!hydrate) {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(varName),
-									t.identifier("append"),
-								),
-								[t.identifier(childVar)],
-							),
-						),
-					);
-				}
-			} else if (t.isJSXFragment(expr)) {
-				const childVar = processFragment(
-					expr,
-					statements,
-					genId,
-					signals,
-					hash,
-					hydrate,
-					currentNodesVar,
-					hydrate ? effectiveParent : undefined,
-				);
-				if (!hydrate) {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(varName),
-									t.identifier("append"),
-								),
-								[t.identifier(childVar)],
-							),
-						),
-					);
-				}
-			} else if (containsSignal(expr, signals)) {
-				if (isPrimitive(expr)) {
-					buildTextNode(
-						varName,
-						expr,
-						statements,
-						genId,
-						hydrate,
-						currentNodesVar,
-						hydrate ? effectiveParent : undefined,
-					);
-				} else {
-					// Check for keyed list pattern
-					const keyed = findKeyedMapExpr(expr, signals);
-					if (keyed) {
-						buildKeyedList(
-							varName,
-							keyed,
-							statements,
-							genId,
-							signals,
-							processElement,
-							hash,
-							hydrate,
-							currentNodesVar,
-							hydrate ? effectiveParent : undefined,
-						);
-					} else {
-						buildAnchorMount(
-							varName,
-							expr,
-							statements,
-							genId,
-							hydrate,
-							currentNodesVar,
-							hydrate ? effectiveParent : undefined,
-						);
-					}
-				}
-			} else {
-				if (hydrate) {
-					// Non-reactive expression in hydrate fragment: consume the
-					// <!--g-->…<!--/g--> run and hydrate its content. Kept lazy so
-					// the value claims from the slot, not the enclosing pool;
-					// empty pool (SPA nav) inserts fresh.
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(t.identifier("hydrateSlot"), [
-								t.identifier(currentNodesVar),
-								t.identifier(effectiveParent),
-								t.arrowFunctionExpression([], expr),
-							]),
-						),
-					);
-				} else {
-					statements.push(
-						t.expressionStatement(
-							t.callExpression(
-								t.memberExpression(
-									t.identifier(varName),
-									t.identifier("append"),
-								),
-								[
-									t.callExpression(
-										t.memberExpression(
-											t.identifier("document"),
-											t.identifier("createTextNode"),
-										),
-										[expr],
-									),
-								],
-							),
-						),
-					);
-				}
-			}
-		}
-	}
-
-	return varName;
-}
+import { types as t } from "@babel/core";
+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";
+
+/**
+ * Process a JSX fragment (<>...</>).
+ * In DOM mode: creates a DocumentFragment and appends all children to it.
+ * In hydrate mode (inside element): children claim from parent's node pool; no fragment created.
+ * In hydrate mode (top-level, no parentVar): creates a DocumentFragment so the IIFE returns
+ *   a valid node for SPA navigation (slot.replaceChildren). SSR hydration ignores the return value.
+ */
+export function processFragment(
+	node: t.JSXFragment,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): string {
+	const varName = genId();
+	const currentNodesVar = nodesVar ?? "__nodes";
+
+	// Where to append children in DOM / SPA mode:
+	//   DOM mode            → varName (the DocumentFragment)
+	//   hydrate inside elem → parentVar (the real parent element)
+	//   hydrate top-level   → varName (a DocumentFragment we create below)
+	const effectiveParent = hydrate ? (parentVar ?? varName) : varName;
+
+	// Create a DocumentFragment when:
+	//   - DOM mode: always (it IS the container)
+	//   - Hydrate top-level (no parentVar): needed so the IIFE can return a real node for SPA nav
+	//     (SSR hydration ignores the return value, so an empty fragment is harmless)
+	if (!hydrate || !parentVar) {
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(varName),
+					t.callExpression(
+						t.memberExpression(
+							t.identifier("document"),
+							t.identifier("createDocumentFragment"),
+						),
+						[],
+					),
+				),
+			]),
+		);
+	}
+
+	// Process each child and append to fragment (or claim in hydrate mode)
+	for (const child of node.children) {
+		if (t.isJSXElement(child)) {
+			const childVar = processElement(
+				child,
+				statements,
+				genId,
+				signals,
+				hash,
+				hydrate,
+				currentNodesVar,
+				hydrate ? effectiveParent : undefined,
+			);
+			if (!hydrate) {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier(varName), t.identifier("append")),
+							[t.identifier(childVar)],
+						),
+					),
+				);
+			}
+		} else if (t.isJSXText(child)) {
+			const text = child.value.trim();
+			if (!text) 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.
+				const poolLen = t.memberExpression(
+					t.identifier(currentNodesVar),
+					t.identifier("length"),
+				);
+				statements.push(
+					t.ifStatement(
+						t.binaryExpression("===", poolLen, t.numericLiteral(0)),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(effectiveParent),
+									t.identifier("append"),
+								),
+								[
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("document"),
+											t.identifier("createTextNode"),
+										),
+										[t.stringLiteral(text)],
+									),
+								],
+							),
+						),
+					),
+				);
+			} else {
+				statements.push(
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier(varName), t.identifier("append")),
+							[
+								t.callExpression(
+									t.memberExpression(
+										t.identifier("document"),
+										t.identifier("createTextNode"),
+									),
+									[t.stringLiteral(text)],
+								),
+							],
+						),
+					),
+				);
+			}
+		} else if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr)) {
+				const childVar = processElement(
+					expr,
+					statements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					currentNodesVar,
+					hydrate ? effectiveParent : undefined,
+				);
+				if (!hydrate) {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[t.identifier(childVar)],
+							),
+						),
+					);
+				}
+			} else if (t.isJSXFragment(expr)) {
+				const childVar = processFragment(
+					expr,
+					statements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					currentNodesVar,
+					hydrate ? effectiveParent : undefined,
+				);
+				if (!hydrate) {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[t.identifier(childVar)],
+							),
+						),
+					);
+				}
+			} else if (containsSignal(expr, signals)) {
+				if (isPrimitive(expr)) {
+					buildTextNode(
+						varName,
+						expr,
+						statements,
+						genId,
+						hydrate,
+						currentNodesVar,
+						hydrate ? effectiveParent : undefined,
+					);
+				} else {
+					// Check for keyed list pattern
+					const keyed = findKeyedMapExpr(expr, signals);
+					if (keyed) {
+						buildKeyedList(
+							varName,
+							keyed,
+							statements,
+							genId,
+							signals,
+							processElement,
+							hash,
+							hydrate,
+							currentNodesVar,
+							hydrate ? effectiveParent : undefined,
+						);
+					} else {
+						buildAnchorMount(
+							varName,
+							expr,
+							statements,
+							genId,
+							hydrate,
+							currentNodesVar,
+							hydrate ? effectiveParent : undefined,
+						);
+					}
+				}
+			} else {
+				if (hydrate) {
+					// Non-reactive expression in hydrate fragment: consume the
+					// <!--g-->…<!--/g--> run and hydrate its content. Kept lazy so
+					// the value claims from the slot, not the enclosing pool;
+					// empty pool (SPA nav) inserts fresh.
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(t.identifier("hydrateSlot"), [
+								t.identifier(currentNodesVar),
+								t.identifier(effectiveParent),
+								t.arrowFunctionExpression([], expr),
+							]),
+						),
+					);
+				} else {
+					statements.push(
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier("append"),
+								),
+								[
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("document"),
+											t.identifier("createTextNode"),
+										),
+										[expr],
+									),
+								],
+							),
+						),
+					);
+				}
+			}
+		}
+	}
+
+	return varName;
+}

package/src/babel/jsx/ssr.ts

@@ -2,6 +2,38 @@ import { types as t } from "@babel/core";
 import { isGlobalComponent } from "../handlers/dom/globals";
 import { getTagName } from "../util/helpers";
 
+/**
+ * Attributes that are on by presence alone: checked="" and even
+ * checked="false" both mean checked, so these can't go through the generic
+ * name="value" path.
+ */
+const BOOLEAN_ATTRS = new Set([
+	"allowfullscreen",
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected",
+]);
+
 const VOID_ELEMENTS = new Set([
 	"area",
 	"base",
@@ -160,6 +192,19 @@ export function processElementSSR(
 
 		if (t.isStringLiteral(attr.value)) {
 			parts.push(` ${domAttr}="${attr.value.value}"`);
+		} else if (
+			t.isJSXExpressionContainer(attr.value) &&
+			BOOLEAN_ATTRS.has(domAttr.toLowerCase())
+		) {
+			// __b: true → bare name, false/null/undefined → omitted, anything
+			// else keeps its value (hidden="until-found"). The generic path
+			// below rendered checked={false} as checked="", i.e. checked.
+			parts.push(
+				t.callExpression(t.identifier("__b"), [
+					t.stringLiteral(domAttr),
+					attr.value.expression as t.Expression,
+				]),
+			);
 		} else if (t.isJSXExpressionContainer(attr.value)) {
 			const expr = attr.value.expression as t.Expression;
 			if (
@@ -208,8 +253,25 @@ export function processElementSSR(
 		return buildTemplate(parts);
 	}
 
+	// <script> holds raw text: HTML escaping would corrupt the code (&& →
+	// &amp;&amp;), and <!--g--> markers are just text inside it, not comments,
+	// so there is nothing for hydration to find. __r only guards against the
+	// code closing its own element. (<style> never gets here: scoped style
+	// blocks are stripped from the source before compiling.)
+	const rawText = tagName === "script";
+
 	// children
 	for (const child of node.children) {
+		if (rawText && t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			parts.push(
+				t.callExpression(t.identifier("__r"), [
+					child.expression as t.Expression,
+					t.stringLiteral(tagName),
+				]),
+			);
+			continue;
+		}
 		if (t.isJSXText(child)) {
 			const text = child.value;
 			if (!text.trim()) continue;