@sigil-dev/compiler 0.9.10 → 0.9.12

package/src/babel/jsx/ssr.ts

@@ -1,38 +1,7 @@
 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",
-]);
+import { jsxText } from "./utils";
 
 const VOID_ELEMENTS = new Set([
 	"area",
@@ -60,94 +29,89 @@ function escape(expr: t.Expression): t.CallExpression {
 	return t.callExpression(t.identifier("__e"), [expr]);
 }
 
+/** Compile-time HTML escaping for static JSX text and attribute strings. */
+function escapeText(s: string): string {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s: string): string {
+	return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
 // builds a template literal from alternating string parts and expressions
 function buildTemplate(parts: Array<string | t.Expression>): t.TemplateLiteral {
 	const quasis: t.TemplateElement[] = [];
 	const exprs: t.Expression[] = [];
 	let current = "";
+	// raw must be valid template source: a backslash, backtick or ${ in
+	// the page text would otherwise end or corrupt the literal
+	const element = (cooked: string, tail = false) =>
+		t.templateElement(
+			{ raw: cooked.replace(/\\|`|\$\{/g, (m) => `\\${m}`), cooked },
+			tail,
+		);
 
 	for (const part of parts) {
 		if (typeof part === "string") {
 			current += part;
 		} else {
-			quasis.push(t.templateElement({ raw: current, cooked: current }));
+			quasis.push(element(current));
 			current = "";
 			exprs.push(part);
 		}
 	}
-	quasis.push(t.templateElement({ raw: current, cooked: current }, true));
+	quasis.push(element(current, true));
 	return t.templateLiteral(quasis, exprs);
 }
 
 /**
- * <Component /> is always JSX so its always safe to render as is
- * but the compiler can also register its own safe variables, like:
- * ```ts
- * const rendered = <Component foo="bar" />
- * return <div>{rendered}</div>
- * ```
- * @param expr
- * @param safeIdents
- * @returns
+ * Children of an element, component or fragment as HTML parts. `raw` is for
+ * <script>: its text is code, so it is neither escaped nor marked for
+ * hydration (see processElementSSR).
  */
-/*
-function isSSRSafe(expr: t.Expression, safeIdents: Set<string>): boolean {
-    // direct JSX - compiled to HTML string by this very plugin
-    if (t.isJSXElement(expr) || t.isJSXFragment(expr)) return true;
-
-    // component call - returns HTML string by convention
-    if (
-        t.isCallExpression(expr) &&
-        t.isIdentifier(expr.callee) &&
-        /^[A-Z]/.test(expr.callee.name)
-    ) return true;
-
-    // registered by compiler (e.g. children)
-    if (t.isIdentifier(expr)) {
-        // if sigil as a compiler doesnt have an insane CVE
-        // this will always be true
-        if (expr.name === "children") return true;
-        return safeIdents.has(expr.name);
-    }
-
-    // condition && <JSX> — right side produces HTML
-    if (t.isLogicalExpression(expr))
-        return isSSRSafe(expr.right as t.Expression, safeIdents);
-
-    // condition ? <JSX> : <JSX> — both branches must be checked
-    if (t.isConditionalExpression(expr)) {
-        return (
-            isSSRSafe(expr.consequent as t.Expression, safeIdents) ||
-            isSSRSafe(expr.alternate as t.Expression, safeIdents)
-        );
-    }
-    if (
-        t.isCallExpression(expr) &&
-        t.isMemberExpression(expr.callee) &&
-        t.isIdentifier(expr.callee.property) &&
-        expr.callee.property.name === "map"
-    ) {
-        const cb = expr.arguments[0];
-        if (t.isArrowFunctionExpression(cb) || t.isFunctionExpression(cb)) {
-            const body = cb.body;
-            if (t.isJSXElement(body) || t.isJSXFragment(body)) return true;
-            if (t.isBlockStatement(body)) {
-                for (const stmt of body.body) {
-                    if (
-                        t.isReturnStatement(stmt) &&
-                        stmt.argument &&
-                        (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument))
-                    ) return true;
-                }
-            }
-        }
-    }
-    return false;
+function childrenSSR(
+	children: t.JSXElement["children"],
+	signals: Set<string>,
+	hash: string | undefined,
+	raw?: string,
+): Array<string | t.Expression> {
+	const parts: Array<string | t.Expression> = [];
+	for (const child of children) {
+		if (t.isJSXText(child)) {
+			const text = jsxText(child);
+			if (text !== null) parts.push(raw ? text : escapeText(text));
+			continue;
+		}
+		let node: t.Node = child;
+		if (t.isJSXExpressionContainer(child)) {
+			if (t.isJSXEmptyExpression(child.expression)) continue;
+			node = child.expression;
+		}
+		if (t.isJSXElement(node)) {
+			parts.push(processElementSSR(node, signals, hash));
+		} else if (t.isJSXFragment(node)) {
+			parts.push(processFragmentSSR(node, signals, hash));
+		} else if (raw) {
+			parts.push(
+				t.callExpression(t.identifier("__r"), [
+					node as t.Expression,
+					t.stringLiteral(raw),
+				]),
+			);
+		} else if (!t.isJSXSpreadChild(node)) {
+			// Delimit dynamic text segments so SSR produces separate text
+			// nodes that the hydrate compiler can claim individually.
+			parts.push("<!--g-->");
+			parts.push(escape(node as t.Expression));
+			parts.push("<!--/g-->");
+		}
+	}
+	return parts;
 }
-*/
+
 export function processElementSSR(
 	node: t.JSXElement,
 	signals: Set<string>,
+	hash?: string,
 ): t.TemplateLiteral {
 	const tagName = getTagName(node.openingElement.name);
 	const isComponent = /^[A-Z]/.test(tagName);
@@ -160,85 +124,73 @@ export function processElementSSR(
 				[],
 			);
 		}
-		return processComponentSSR(node, tagName, signals);
+		return processComponentSSR(node, tagName, signals, hash);
 	}
 	let dangerousHTML: t.Expression | null = null;
+	// <textarea value> is its content; <select value> picks an <option>
+	let textareaValue: t.Expression | null = null;
+	let selectValue: t.Expression | null = null;
+	let hasClass = false;
 	const parts: Array<string | t.Expression> = [];
 	parts.push(`<${tagName}`);
 
-	// attributes
 	for (const attr of node.openingElement.attributes) {
-		if (!t.isJSXAttribute(attr)) continue;
+		if (t.isJSXSpreadAttribute(attr)) {
+			parts.push(t.callExpression(t.identifier("__s"), [attr.argument]));
+			continue;
+		}
 
 		// namespaced attributes are client-only directives
 		// (transition:/in:/out:/bind:) — SSR drops them entirely
 		if (t.isJSXNamespacedName(attr.name)) continue;
 
-		const attrName = (attr.name as t.JSXIdentifier).name;
+		const attrName = attr.name.name;
+		// drop event handlers and client-only props
+		if (/^on[A-Z]/.test(attrName)) continue;
+		if (attrName === "use" || /^bind[A-Z]/.test(attrName)) continue;
+
+		const value: t.Expression | null = t.isStringLiteral(attr.value)
+			? attr.value
+			: t.isJSXExpressionContainer(attr.value) &&
+					!t.isJSXEmptyExpression(attr.value.expression)
+				? attr.value.expression
+				: null;
 
 		if (attrName === "innerHTML") {
-			if (t.isJSXExpressionContainer(attr.value)) {
-				dangerousHTML = attr.value.expression as t.Expression;
-			}
+			dangerousHTML = value;
 			continue; // don't output as attribute
 		}
-		// drop event handlers
-		if (attrName.startsWith("on")) continue;
-		// drop client-only props
-		if (attrName === "use") continue;
-		if (attrName.startsWith("bind")) continue;
+		if (tagName === "textarea" && attrName === "value") {
+			textareaValue = value;
+			continue;
+		}
+		if (tagName === "select" && attrName === "value") {
+			selectValue = value;
+			continue;
+		}
 
 		const domAttr = ATTR_MAP_SSR[attrName] ?? attrName;
-
-		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.
+		const isClass = domAttr === "class" && !!hash;
+		if (domAttr === "class") hasClass = true;
+
+		if (attr.value === null) {
+			// bare attribute: <input disabled>, <script defer>
+			parts.push(` ${domAttr}`);
+		} else if (t.isStringLiteral(attr.value)) {
+			const v = escapeAttr(attr.value.value);
+			parts.push(` ${domAttr}="${isClass ? `${v} ${hash}` : v}"`);
+		} else if (value && isClass) {
+			parts.push(` class="`, escape(value), ` ${hash}"`);
+		} else if (value) {
 			parts.push(
-				t.callExpression(t.identifier("__b"), [
+				t.callExpression(t.identifier("__a"), [
 					t.stringLiteral(domAttr),
-					attr.value.expression as t.Expression,
+					value,
 				]),
 			);
-		} else if (t.isJSXExpressionContainer(attr.value)) {
-			const expr = attr.value.expression as t.Expression;
-			if (
-				attrName === "style" &&
-				t.isObjectExpression(expr) &&
-				expr.properties.every((prop) => t.isObjectProperty(prop))
-			) {
-				// style={{ key: value, ... }} — serialize to real "key:value;"
-				// CSS text instead of the generic String(expr) path below, which
-				// would stringify the object itself to the literal "[object Object]"
-				parts.push(` style="`);
-				for (const prop of expr.properties as t.ObjectProperty[]) {
-					const key = t.isIdentifier(prop.key)
-						? prop.key.name
-						: t.isStringLiteral(prop.key)
-							? prop.key.value
-							: null;
-					if (key === null) continue;
-					const cssKey = key.replace(
-						/[A-Z]/g,
-						(letter) => `-${letter.toLowerCase()}`,
-					);
-					parts.push(`${cssKey}:`);
-					parts.push(escape(prop.value as t.Expression));
-					parts.push(";");
-				}
-				parts.push(`"`);
-			} else {
-				parts.push(` ${domAttr}="`);
-				parts.push(escape(expr));
-				parts.push(`"`);
-			}
 		}
 	}
+	if (hash && !hasClass) parts.push(` class="${hash}"`);
 
 	if (VOID_ELEMENTS.has(tagName)) {
 		parts.push(">");
@@ -249,52 +201,29 @@ export function processElementSSR(
 
 	if (dangerousHTML) {
 		parts.push(dangerousHTML);
-		parts.push(`</${tagName}>`);
-		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;
+	} else if (textareaValue) {
+		parts.push(escape(textareaValue));
+	} else {
+		// <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 children = childrenSSR(
+			node.children,
+			signals,
+			hash,
+			tagName === "script" ? tagName : undefined,
+		);
+		if (selectValue) {
 			parts.push(
-				t.callExpression(t.identifier("__r"), [
-					child.expression as t.Expression,
-					t.stringLiteral(tagName),
+				t.callExpression(t.identifier("__sel"), [
+					buildTemplate(children),
+					selectValue,
 				]),
 			);
-			continue;
-		}
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			parts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			parts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			parts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				parts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				parts.push(processFragmentSSR(expr, signals));
-			} else {
-				// Delimit dynamic text segments so SSR produces separate text
-				// nodes that the hydrate compiler can claim individually.
-				parts.push("<!--g-->");
-				parts.push(escape(expr));
-				parts.push("<!--/g-->");
-			}
+		} else {
+			parts.push(...children);
 		}
 	}
 
@@ -306,11 +235,15 @@ function processComponentSSR(
 	node: t.JSXElement,
 	tagName: string,
 	signals: Set<string>,
+	hash: string | undefined,
 ): t.TemplateLiteral {
 	const props = t.objectExpression([]);
 
 	for (const attr of node.openingElement.attributes) {
-		if (!t.isJSXAttribute(attr)) continue;
+		if (t.isJSXSpreadAttribute(attr)) {
+			props.properties.push(t.spreadElement(attr.argument));
+			continue;
+		}
 		const attrName = (attr.name as t.JSXIdentifier).name;
 		// data-key is a framework-internal attribute for HTML elements only; skip for components
 		if (attrName === "data-key" || attrName === "key") continue;
@@ -318,7 +251,9 @@ function processComponentSSR(
 		const propKey = /[^a-zA-Z_$0-9]/.test(attrName)
 			? t.stringLiteral(attrName)
 			: t.identifier(attrName);
-		if (t.isStringLiteral(attr.value)) {
+		if (attr.value === null) {
+			props.properties.push(t.objectProperty(propKey, t.booleanLiteral(true)));
+		} else if (t.isStringLiteral(attr.value)) {
 			props.properties.push(t.objectProperty(propKey, attr.value));
 		} else if (t.isJSXExpressionContainer(attr.value)) {
 			props.properties.push(
@@ -327,33 +262,7 @@ function processComponentSSR(
 		}
 	}
 
-	// children as string
-	const childParts: Array<string | t.Expression> = [];
-	for (const child of node.children) {
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			childParts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			childParts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			childParts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				childParts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				childParts.push(processFragmentSSR(expr, signals));
-			} else {
-				childParts.push("<!--g-->");
-				childParts.push(escape(expr));
-				childParts.push("<!--/g-->");
-			}
-		}
-	}
-
+	const childParts = childrenSSR(node.children, signals, hash);
 	if (childParts.length > 0) {
 		props.properties.push(
 			t.objectProperty(
@@ -381,33 +290,7 @@ function processComponentSSR(
 export function processFragmentSSR(
 	node: t.JSXFragment,
 	signals: Set<string>,
+	hash?: string,
 ): t.TemplateLiteral {
-	const parts: Array<string | t.Expression> = [];
-
-	for (const child of node.children) {
-		if (t.isJSXText(child)) {
-			const text = child.value;
-			if (!text.trim()) continue;
-			const normalized = text.replace(/\s*\n\s*/g, " ");
-			parts.push(normalized);
-		} else if (t.isJSXElement(child)) {
-			parts.push(processElementSSR(child, signals));
-		} else if (t.isJSXFragment(child)) {
-			parts.push(processFragmentSSR(child, signals));
-		} else if (t.isJSXExpressionContainer(child)) {
-			if (t.isJSXEmptyExpression(child.expression)) continue;
-			const expr = child.expression as t.Expression;
-			if (t.isJSXElement(expr)) {
-				parts.push(processElementSSR(expr, signals));
-			} else if (t.isJSXFragment(expr)) {
-				parts.push(processFragmentSSR(expr, signals));
-			} else {
-				parts.push("<!--g-->");
-				parts.push(escape(expr));
-				parts.push("<!--/g-->");
-			}
-		}
-	}
-
-	return buildTemplate(parts);
+	return buildTemplate(childrenSSR(node.children, signals, hash));
 }

package/src/babel/jsx/utils.ts

@@ -1,4 +1,5 @@
 import { types as t } from "@babel/core";
+import { isImportRead, isStoreRead } from "../util/props.ts";
 
 export const ATTR_MAP: Record<string, string> = {
 	class: "className",
@@ -8,15 +9,19 @@ export const ATTR_MAP: Record<string, string> = {
 export function containsSignal(
 	expr: t.Expression | t.Node,
 	signals: Set<string>,
+	asCallee = false,
 ): boolean {
 	if (!expr) return false;
 	if (t.isIdentifier(expr)) return signals.has(expr.name);
 	if (t.isCallExpression(expr)) {
+		if (isStoreRead(expr)) return true;
 		return (
-			containsSignal(expr.callee as t.Expression, signals) ||
+			containsSignal(expr.callee as t.Expression, signals, true) ||
 			expr.arguments.some((a) => containsSignal(a as t.Expression, signals))
 		);
 	}
+	// a read on an imported store; `utils.format` as a callee is not one
+	if (!asCallee && isImportRead(expr)) return true;
 	if (t.isBinaryExpression(expr)) {
 		return (
 			containsSignal(expr.left as t.Expression, signals) ||
@@ -177,3 +182,44 @@ export function buildHydrationScope(
 		]),
 	);
 }
+
+/**
+ * The text a JSXText child renders, or null when nothing is left. This is
+ * the standard JSX whitespace rule (React and Babel use it too): whitespace
+ * touching a line break is dropped, lines that are only whitespace vanish,
+ * and the remaining lines join with one space. Whitespace that doesn't touch
+ * a line break is kept, so `Hello <b>big</b> world` keeps both spaces.
+ *
+ * Every mode (ssr, hydrate, dom) must go through this: if they disagree,
+ * server HTML and client-rendered pages show different text.
+ */
+export function jsxText(child: t.JSXText): string | null {
+	const lines = child.value.split(/\r\n|\n|\r/);
+	let lastNonEmpty = 0;
+	for (let i = 0; i < lines.length; i++) {
+		if (/[^ \t]/.test(lines[i] as string)) lastNonEmpty = i;
+	}
+	let out = "";
+	for (let i = 0; i < lines.length; i++) {
+		let line = (lines[i] as string).replace(/\t/g, " ");
+		if (i !== 0) line = line.replace(/^ +/, "");
+		if (i !== lines.length - 1) line = line.replace(/ +$/, "");
+		if (!line) continue;
+		out += i === lastNonEmpty ? line : `${line} `;
+	}
+	return out || null;
+}
+
+/** JSX that runs when the expression is evaluated (not inside a function). */
+export function hasJSX(expr: t.Node): boolean {
+	if (t.isJSXElement(expr) || t.isJSXFragment(expr)) return true;
+	if (t.isConditionalExpression(expr))
+		return hasJSX(expr.consequent) || hasJSX(expr.alternate);
+	if (t.isLogicalExpression(expr))
+		return hasJSX(expr.left) || hasJSX(expr.right);
+	if (t.isParenthesizedExpression(expr) || t.isTSAsExpression(expr))
+		return hasJSX(expr.expression);
+	if (t.isArrayExpression(expr))
+		return expr.elements.some((e) => e !== null && hasJSX(e));
+	return false;
+}

package/src/babel/util/bind.ts

@@ -6,6 +6,10 @@ const BIND_EVENT: Record<string, string> = {
 	innerHTML: "input",
 	textContent: "input",
 	group: "change",
+	// element state that isn't form input changes on its own event
+	scrollTop: "scroll",
+	scrollLeft: "scroll",
+	open: "toggle",
 };
 
 export function buildBind(