@sigil-dev/compiler 0.3.0

package/src/babel/jsx/ssr.ts

@@ -0,0 +1,309 @@
+import { types as t } from "@babel/core";
+import { getTagName } from "../util/helpers";
+
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr",
+]);
+
+const ATTR_MAP_SSR: Record<string, string> = {
+	className: "class",
+	htmlFor: "for",
+};
+//biome-ignore  lint/suspicious/noShadowRestrictedNames: shut up
+function escape(expr: t.Expression): t.CallExpression {
+	return t.callExpression(t.identifier("__e"), [expr]);
+}
+
+// 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 = "";
+
+	for (const part of parts) {
+		if (typeof part === "string") {
+			current += part;
+		} else {
+			quasis.push(t.templateElement({ raw: current, cooked: current }));
+			current = "";
+			exprs.push(part);
+		}
+	}
+	quasis.push(t.templateElement({ raw: current, cooked: 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
+ */
+/*
+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;
+}
+*/
+export function processElementSSR(
+	node: t.JSXElement,
+	signals: Set<string>,
+): t.TemplateLiteral {
+	const tagName = getTagName(node.openingElement.name);
+	const isComponent = /^[A-Z]/.test(tagName);
+
+	if (isComponent) {
+		return processComponentSSR(node, tagName, signals);
+	}
+	let dangerousHTML: t.Expression | null = null;
+	const parts: Array<string | t.Expression> = [];
+	parts.push(`<${tagName}`);
+
+	// attributes
+	for (const attr of node.openingElement.attributes) {
+		if (!t.isJSXAttribute(attr)) continue;
+		const attrName = (attr.name as t.JSXIdentifier).name;
+
+		if (attrName === "innerHTML") {
+			if (t.isJSXExpressionContainer(attr.value)) {
+				dangerousHTML = attr.value.expression as t.Expression;
+			}
+			continue; // don't output as attribute
+		}
+		// drop event handlers
+		if (attrName.startsWith("on")) continue;
+		// drop bind:* - no two-way binding on server
+		if (attrName.startsWith("bind")) 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)) {
+			const expr = attr.value.expression as t.Expression;
+			parts.push(` ${domAttr}="`);
+			parts.push(escape(expr));
+			parts.push(`"`);
+		}
+	}
+
+	if (VOID_ELEMENTS.has(tagName)) {
+		parts.push(">");
+		return buildTemplate(parts);
+	}
+
+	parts.push(">");
+
+	if (dangerousHTML) {
+		parts.push(dangerousHTML);
+		parts.push(`</${tagName}>`);
+		return buildTemplate(parts);
+	}
+
+	// children
+	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 {
+				// 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-->");
+			}
+		}
+	}
+
+	parts.push(`</${tagName}>`);
+	return buildTemplate(parts);
+}
+
+function processComponentSSR(
+	node: t.JSXElement,
+	tagName: string,
+	signals: Set<string>,
+): t.TemplateLiteral {
+	const props = t.objectExpression([]);
+
+	for (const attr of node.openingElement.attributes) {
+		if (!t.isJSXAttribute(attr)) continue;
+		const attrName = (attr.name as t.JSXIdentifier).name;
+		if (t.isStringLiteral(attr.value)) {
+			props.properties.push(
+				t.objectProperty(t.identifier(attrName), attr.value),
+			);
+		} else if (t.isJSXExpressionContainer(attr.value)) {
+			props.properties.push(
+				t.objectProperty(
+					t.identifier(attrName),
+					attr.value.expression as t.Expression,
+				),
+			);
+		}
+	}
+
+	// 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-->");
+			}
+		}
+	}
+
+	if (childParts.length > 0) {
+		props.properties.push(
+			t.objectProperty(
+				t.identifier("children"),
+				t.callExpression(t.identifier("__h"), [buildTemplate(childParts)]),
+			),
+		);
+	}
+
+	// Component({ ...props }) - result is already a string
+	const call = t.callExpression(t.identifier("__h"), [
+		t.callExpression(t.identifier(tagName), [props]),
+	]);
+
+	// wrap in template so return type is consistent
+	return t.templateLiteral(
+		[
+			t.templateElement({ raw: "", cooked: "" }),
+			t.templateElement({ raw: "", cooked: "" }, true),
+		],
+		[call],
+	);
+}
+
+export function processFragmentSSR(
+	node: t.JSXFragment,
+	signals: Set<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);
+}

package/src/babel/jsx/text-node.ts

@@ -0,0 +1,192 @@
+import { types as t } from "@babel/core";
+
+/**
+ * Create a reactive text node: `createEffect(() => node.textContent = String(expr))`
+ * In hydrate mode:
+ *   - Claims <!--g--> anchor via claimComment (fixes adjacent-text bug vs DOM walk)
+ *   - Consumes <!--/g--> closing delimiter
+ *   - Gets nextSibling as the text node; if it's not a Text (SPA navigation), creates one
+ *   - Effect updates that text node's content
+ * In dom mode: creates a new text node and appends it.
+ */
+export function buildTextNode(
+	varName: string,
+	expr: t.Expression,
+	statements: t.Statement[],
+	genId: () => string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): void {
+	if (hydrate) {
+		const nodesId = t.identifier(nodesVar ?? "__nodes");
+		const parentIdent = parentVar ? t.identifier(parentVar) : undefined;
+
+		// const _anchor = claimComment(nodes, "g", parent) — claim/create <!--g-->
+		const anchorVar = genId();
+		const claimGArgs: t.Expression[] = [nodesId, t.stringLiteral("g")];
+		if (parentIdent) claimGArgs.push(parentIdent);
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(anchorVar),
+					t.callExpression(t.identifier("claimComment"), claimGArgs),
+				),
+			]),
+		);
+
+		// claimComment(nodes, "/g", parent) — consume <!--/g--> from pool
+		const claimSlashGArgs: t.Expression[] = [nodesId, t.stringLiteral("/g")];
+		if (parentIdent) claimSlashGArgs.push(parentIdent);
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(t.identifier("claimComment"), claimSlashGArgs),
+			),
+		);
+
+		// let _t = _anchor?.nextSibling
+		// In SSR hydration, this is the text node between the comment delimiters.
+		// In SPA navigation, this is the closing <!--/g--> (not a Text), so we create one.
+		const textVar = genId();
+		statements.push(
+			t.variableDeclaration("let", [
+				t.variableDeclarator(
+					t.identifier(textVar),
+					t.optionalMemberExpression(
+						t.identifier(anchorVar),
+						t.identifier("nextSibling"),
+						false,
+						true,
+					),
+				),
+			]),
+		);
+
+		// if (!(_t instanceof Text)) { const _nt = createTextNode(""); if (_anchor) _anchor.after(_nt); _t = _nt; }
+		const newTextVar = genId();
+		statements.push(
+			t.ifStatement(
+				t.unaryExpression(
+					"!",
+					t.parenthesizedExpression(
+						t.binaryExpression(
+							"instanceof",
+							t.identifier(textVar),
+							t.identifier("Text"),
+						),
+					),
+				),
+				t.blockStatement([
+					t.variableDeclaration("const", [
+						t.variableDeclarator(
+							t.identifier(newTextVar),
+							t.callExpression(
+								t.memberExpression(
+									t.identifier("document"),
+									t.identifier("createTextNode"),
+								),
+								[t.stringLiteral("")],
+							),
+						),
+					]),
+					t.ifStatement(
+						t.identifier(anchorVar),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(anchorVar),
+									t.identifier("after"),
+								),
+								[t.identifier(newTextVar)],
+							),
+						),
+					),
+					t.expressionStatement(
+						t.assignmentExpression(
+							"=",
+							t.identifier(textVar),
+							t.identifier(newTextVar),
+						),
+					),
+				]),
+			),
+		);
+
+		// createEffect(() => { if (_t) _t.textContent = String(expr); })
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(t.identifier("createEffect"), [
+					t.arrowFunctionExpression(
+						[],
+						t.blockStatement([
+							t.ifStatement(
+								t.identifier(textVar),
+								t.expressionStatement(
+									t.assignmentExpression(
+										"=",
+										t.memberExpression(
+											t.identifier(textVar),
+											t.identifier("textContent"),
+										),
+										t.callExpression(t.identifier("String"), [expr]),
+									),
+								),
+							),
+						]),
+					),
+				]),
+			),
+		);
+		return;
+	}
+
+	// DOM mode: create text node and append
+	const textVar = genId();
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(textVar),
+				t.callExpression(
+					t.memberExpression(
+						t.identifier("document"),
+						t.identifier("createTextNode"),
+					),
+					[t.stringLiteral("")],
+				),
+			),
+		]),
+	);
+
+	// createEffect(() => _t.textContent = String(expr))
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(
+									t.identifier(textVar),
+									t.identifier("textContent"),
+								),
+								t.callExpression(t.identifier("String"), [expr]),
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
+
+	// varName.append(_t)
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(
+				t.memberExpression(t.identifier(varName), t.identifier("append")),
+				[t.identifier(textVar)],
+			),
+		),
+	);
+}

package/src/babel/jsx/utils.ts

@@ -0,0 +1,124 @@
+import { types as t } from "@babel/core";
+
+export const ATTR_MAP: Record<string, string> = {
+	class: "className",
+	for: "htmlFor",
+};
+
+export function containsSignal(
+	expr: t.Expression,
+	signals: Set<string>,
+): boolean {
+	if (t.isIdentifier(expr)) return signals.has(expr.name);
+	if (t.isCallExpression(expr)) {
+		return containsSignal(expr.callee as t.Expression, signals);
+	}
+	if (t.isBinaryExpression(expr)) {
+		return (
+			containsSignal(expr.left as t.Expression, signals) ||
+			containsSignal(expr.right, signals)
+		);
+	}
+	if (t.isMemberExpression(expr)) {
+		return containsSignal(expr.object as t.Expression, signals);
+	}
+	if (t.isLogicalExpression(expr)) {
+		return (
+			containsSignal(expr.left as t.Expression, signals) ||
+			containsSignal(expr.right as t.Expression, signals)
+		);
+	}
+	if (t.isConditionalExpression(expr)) {
+		return (
+			containsSignal(expr.test as t.Expression, signals) ||
+			containsSignal(expr.consequent as t.Expression, signals) ||
+			containsSignal(expr.alternate as t.Expression, signals)
+		);
+	}
+	return false;
+}
+
+export function isPrimitive(expr: t.Expression): boolean {
+	if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) return true;
+	if (t.isBinaryExpression(expr)) return true;
+	if (t.isTemplateLiteral(expr)) return true;
+	if (t.isIdentifier(expr)) return true;
+	// user().name is a MemberExpression after state handler rewrites user → user()
+	if (t.isMemberExpression(expr)) return true;
+	return false;
+}
+
+/**
+ * Generate createElement call. In hydrate mode, claims from node pool.
+ * When parentVar is provided, passes it to claim() for SPA fallback (append on create).
+ */
+export function getCreateElement(
+	tag: string,
+	hydrate: boolean,
+	nodesVar = "__nodes",
+	parentVar?: string,
+): t.Expression {
+	if (hydrate) {
+		const args: t.Expression[] = [t.identifier(nodesVar), t.stringLiteral(tag)];
+		if (parentVar) {
+			args.push(t.identifier(parentVar));
+		}
+		return t.callExpression(t.identifier("claim"), args);
+	}
+	return t.callExpression(
+		t.memberExpression(t.identifier("document"), t.identifier("createElement")),
+		[t.stringLiteral(tag)],
+	);
+}
+
+/**
+ * Generate createTextNode call. In hydrate mode, claims from node pool.
+ * When parentVar is provided, passes it to claimText() for SPA fallback.
+ */
+export function getCreateText(
+	hydrate: boolean,
+	nodesVar = "__nodes",
+	parentVar?: string,
+): t.Expression {
+	if (hydrate) {
+		const args: t.Expression[] = [t.identifier(nodesVar)];
+		if (parentVar) {
+			args.push(t.identifier(parentVar));
+		}
+		return t.callExpression(t.identifier("claimText"), args);
+	}
+	return t.callExpression(
+		t.memberExpression(
+			t.identifier("document"),
+			t.identifier("createTextNode"),
+		),
+		[t.stringLiteral("")],
+	);
+}
+
+/**
+ * Generate `const <nodesVar> = Array.from(el.childNodes)` for hydration scope.
+ * Returns the generated variable name for use by children.
+ */
+export function buildHydrationScope(
+	parentVar: string,
+	statements: t.Statement[],
+	nodesVar: string,
+): void {
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(nodesVar),
+				t.callExpression(
+					t.memberExpression(t.identifier("Array"), t.identifier("from")),
+					[
+						t.memberExpression(
+							t.identifier(parentVar),
+							t.identifier("childNodes"),
+						),
+					],
+				),
+			),
+		]),
+	);
+}

package/src/babel/util/bind.ts

@@ -0,0 +1,75 @@
+import { types as t } from "@babel/core";
+
+const BIND_EVENT: Record<string, string> = {
+	value: "input",
+	checked: "change",
+};
+
+export function buildBind(
+	varName: string,
+	attrName: string,
+	attr: t.JSXAttribute,
+	statements: t.Statement[],
+): void {
+	const signal = (attr.value as t.JSXExpressionContainer)
+		.expression as t.Expression;
+
+	// bind:this — just assign the element to the signal once
+	if (attrName === "bindThis") {
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(t.memberExpression(signal, t.identifier("set")), [
+					t.identifier(varName),
+				]),
+			),
+		);
+		return;
+	}
+
+	const prop = attrName.slice(4).toLowerCase(); // bindValue → value
+	const event = BIND_EVENT[prop] ?? "input";
+
+	// createEffect(() => _el.prop = signal())
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(t.identifier(varName), t.identifier(prop)),
+								t.callExpression(signal, []),
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
+
+	// _el.addEventListener(event, e => signal.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(signal, t.identifier("set")), [
+							t.memberExpression(
+								t.memberExpression(t.identifier("e"), t.identifier("target")),
+								t.identifier(prop),
+							),
+						]),
+					),
+				],
+			),
+		),
+	);
+}