@sigil-dev/compiler 0.3.0

package/src/babel/jsx/anchor-mount.ts

@@ -0,0 +1,366 @@
+import { types as t } from "@babel/core";
+
+/**
+ * Mount dynamic (non-primitive, non-keyed) content using an anchor comment node.
+ * Generates a mount function that handles arrays, Nodes, and primitive values,
+ * plus a createEffect that diffs by removing previous nodes and re-mounting.
+ * In hydrate mode, claims the comment from the pool instead of creating.
+ */
+export function buildAnchorMount(
+	varName: string,
+	expr: t.Expression,
+	statements: t.Statement[],
+	genId: () => string,
+	hydrate?: boolean,
+	nodesVar?: string,
+	parentVar?: string,
+): void {
+	const anchorVar = genId();
+	const prevVar = genId();
+	const mountFn = genId();
+
+	if (hydrate) {
+		// Claim opening <!--g--> delimiter as anchor from pool
+		const args: t.Expression[] = [
+			t.identifier(nodesVar ?? "__nodes"),
+			t.stringLiteral("g"),
+		];
+		if (parentVar) args.push(t.identifier(parentVar));
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(anchorVar),
+					t.callExpression(t.identifier("claimComment"), args),
+				),
+			]),
+		);
+		// Consume closing <!--/g--> delimiter from pool
+		const closeArgs: t.Expression[] = [
+			t.identifier(nodesVar ?? "__nodes"),
+			t.stringLiteral("/g"),
+		];
+		if (parentVar) closeArgs.push(t.identifier(parentVar));
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(t.identifier("claimComment"), closeArgs),
+			),
+		);
+		// Collect and remove SSR content between <!--g--> and <!--/g-->
+		// so the effect doesn't duplicate it on first run.
+		// Generates: let _prev = []; { let _n = anchor.nextSibling; while (_n) {
+		//   const _cur = _n; _n = _n.nextSibling;
+		//   if (_cur instanceof Comment && _cur.data === "/g") { _cur.remove(); break; }
+		//   _cur.remove(); _prev.push(_cur); } }
+		const nextVar = genId();
+		const curVar = genId();
+		statements.push(
+			t.variableDeclaration("let", [
+				t.variableDeclarator(t.identifier(prevVar), t.arrayExpression([])),
+			]),
+		);
+		statements.push(
+			t.blockStatement([
+				// let _n = anchor.nextSibling
+				t.variableDeclaration("let", [
+					t.variableDeclarator(
+						t.identifier(nextVar),
+						t.memberExpression(
+							t.identifier(anchorVar),
+							t.identifier("nextSibling"),
+						),
+					),
+				]),
+				// while (_n) { ... }
+				t.whileStatement(
+					t.identifier(nextVar),
+					t.blockStatement([
+						// const _cur = _n
+						t.variableDeclaration("const", [
+							t.variableDeclarator(t.identifier(curVar), t.identifier(nextVar)),
+						]),
+						// _n = _n.nextSibling
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.identifier(nextVar),
+								t.memberExpression(
+									t.identifier(curVar),
+									t.identifier("nextSibling"),
+								),
+							),
+						),
+						// if (_cur instanceof Comment && _cur.data === "/g") { _cur.remove(); break; }
+						t.ifStatement(
+							t.logicalExpression(
+								"&&",
+								t.binaryExpression(
+									"instanceof",
+									t.identifier(curVar),
+									t.identifier("Comment"),
+								),
+								t.binaryExpression(
+									"===",
+									t.memberExpression(
+										t.identifier(curVar),
+										t.identifier("data"),
+									),
+									t.stringLiteral("/g"),
+								),
+							),
+							t.blockStatement([
+								t.expressionStatement(
+									t.callExpression(
+										t.memberExpression(
+											t.identifier(curVar),
+											t.identifier("remove"),
+										),
+										[],
+									),
+								),
+								t.breakStatement(),
+							]),
+						),
+						// _cur.remove()
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier(curVar),
+									t.identifier("remove"),
+								),
+								[],
+							),
+						),
+						// _prev.push(_cur)
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(t.identifier(prevVar), t.identifier("push")),
+								[t.identifier(curVar)],
+							),
+						),
+					]),
+				),
+			]),
+		);
+	} else {
+		// const _anchor = document.createComment('')
+		statements.push(
+			t.variableDeclaration("const", [
+				t.variableDeclarator(
+					t.identifier(anchorVar),
+					t.callExpression(
+						t.memberExpression(
+							t.identifier("document"),
+							t.identifier("createComment"),
+						),
+						[t.stringLiteral("")],
+					),
+				),
+			]),
+		);
+
+		// parent.append(_anchor)
+		statements.push(
+			t.expressionStatement(
+				t.callExpression(
+					t.memberExpression(t.identifier(varName), t.identifier("append")),
+					[t.identifier(anchorVar)],
+				),
+			),
+		);
+	}
+
+	// let _prev = [] — already declared in hydrate block above
+	if (!hydrate) {
+		statements.push(
+			t.variableDeclaration("let", [
+				t.variableDeclarator(t.identifier(prevVar), t.arrayExpression([])),
+			]),
+		);
+	}
+
+	// function _mountFn(_v, _a) { ... }
+	const mountBody = t.blockStatement([
+		t.variableDeclaration("const", [
+			t.variableDeclarator(t.identifier("_nodes"), t.arrayExpression([])),
+		]),
+		t.ifStatement(
+			t.callExpression(
+				t.memberExpression(t.identifier("Array"), t.identifier("isArray")),
+				[t.identifier("_v")],
+			),
+			t.blockStatement([
+				t.forOfStatement(
+					t.variableDeclaration("const", [
+						t.variableDeclarator(t.identifier("_item")),
+					]),
+					t.identifier("_v"),
+					t.blockStatement([
+						t.variableDeclaration("const", [
+							t.variableDeclarator(
+								t.identifier("_n"),
+								t.conditionalExpression(
+									t.binaryExpression(
+										"instanceof",
+										t.identifier("_item"),
+										t.identifier("Node"),
+									),
+									t.identifier("_item"),
+									t.callExpression(
+										t.memberExpression(
+											t.identifier("document"),
+											t.identifier("createTextNode"),
+										),
+										[
+											t.callExpression(t.identifier("String"), [
+												t.logicalExpression(
+													"??",
+													t.identifier("_item"),
+													t.stringLiteral(""),
+												),
+											]),
+										],
+									),
+								),
+							),
+						]),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(t.identifier("_a"), t.identifier("before")),
+								[t.identifier("_n")],
+							),
+						),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier("_nodes"),
+									t.identifier("push"),
+								),
+								[t.identifier("_n")],
+							),
+						),
+					]),
+				),
+			]),
+			t.ifStatement(
+				t.binaryExpression(
+					"instanceof",
+					t.identifier("_v"),
+					t.identifier("Node"),
+				),
+				t.blockStatement([
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier("_a"), t.identifier("before")),
+							[t.identifier("_v")],
+						),
+					),
+					t.expressionStatement(
+						t.callExpression(
+							t.memberExpression(t.identifier("_nodes"), t.identifier("push")),
+							[t.identifier("_v")],
+						),
+					),
+				]),
+				t.ifStatement(
+					t.logicalExpression(
+						"&&",
+						t.logicalExpression(
+							"&&",
+							t.binaryExpression("!=", t.identifier("_v"), t.nullLiteral()),
+							t.binaryExpression(
+								"!==",
+								t.identifier("_v"),
+								t.booleanLiteral(false),
+							),
+						),
+						t.binaryExpression(
+							"!==",
+							t.identifier("_v"),
+							t.booleanLiteral(true),
+						),
+					),
+					t.blockStatement([
+						t.variableDeclaration("const", [
+							t.variableDeclarator(
+								t.identifier("_n"),
+								t.callExpression(
+									t.memberExpression(
+										t.identifier("document"),
+										t.identifier("createTextNode"),
+									),
+									[
+										t.callExpression(t.identifier("String"), [
+											t.identifier("_v"),
+										]),
+									],
+								),
+							),
+						]),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(t.identifier("_a"), t.identifier("before")),
+								[t.identifier("_n")],
+							),
+						),
+						t.expressionStatement(
+							t.callExpression(
+								t.memberExpression(
+									t.identifier("_nodes"),
+									t.identifier("push"),
+								),
+								[t.identifier("_n")],
+							),
+						),
+					]),
+				),
+			),
+		),
+		t.returnStatement(t.identifier("_nodes")),
+	]);
+
+	statements.push(
+		t.functionDeclaration(
+			t.identifier(mountFn),
+			[t.identifier("_v"), t.identifier("_a")],
+			mountBody,
+		),
+	);
+
+	// createEffect(() => { for (const n of _prev) n.remove(); _prev = _mountFn(expr, _anchor); })
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.forOfStatement(
+							t.variableDeclaration("const", [
+								t.variableDeclarator(t.identifier("_n")),
+							]),
+							t.identifier(prevVar),
+							t.expressionStatement(
+								t.callExpression(
+									t.memberExpression(
+										t.identifier("_n"),
+										t.identifier("remove"),
+									),
+									[],
+								),
+							),
+						),
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.identifier(prevVar),
+								t.callExpression(t.identifier(mountFn), [
+									expr,
+									t.identifier(anchorVar),
+								]),
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
+}

package/src/babel/jsx/children.ts

@@ -0,0 +1,124 @@
+import { types as t } from "@babel/core";
+import { processElement } from "./element";
+import { processFragment } from "./fragment";
+
+/**
+ * Collect children from a JSX element into a children expression.
+ * Returns null if no meaningful children exist.
+ */
+export function collectChildren(
+	node: t.JSXElement,
+	statements: t.Statement[],
+	genId: () => string,
+	signals: Set<string>,
+	hash?: string,
+	hydrate?: boolean,
+	nodesVar?: string,
+): t.Expression | null {
+	const childrenElements: t.Expression[] = [];
+	let hasOnlyText = true;
+
+	for (const child of node.children) {
+		if (t.isJSXText(child)) {
+			const text = child.value.trim();
+			if (!text) continue;
+			childrenElements.push(t.stringLiteral(text));
+		} else if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+			hasOnlyText = false;
+			const childStatements: t.Statement[] = [];
+			let childVar: string;
+			if (t.isJSXElement(child)) {
+				childVar = processElement(
+					child,
+					childStatements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					nodesVar,
+				);
+			} else {
+				childVar = processFragment(
+					child,
+					childStatements,
+					genId,
+					signals,
+					hash,
+					hydrate,
+					nodesVar,
+				);
+			}
+			// Build an IIFE from the child statements
+			childrenElements.push(
+				t.callExpression(
+					t.arrowFunctionExpression(
+						[],
+						t.blockStatement([
+							...childStatements,
+							t.returnStatement(t.identifier(childVar)),
+						]),
+					),
+					[],
+				),
+			);
+		} else if (t.isJSXExpressionContainer(child)) {
+			const expr = child.expression as t.Expression;
+			if (t.isJSXElement(expr) || t.isJSXFragment(expr)) {
+				hasOnlyText = false;
+				const childStatements: t.Statement[] = [];
+				let childVar: string;
+				if (t.isJSXElement(expr)) {
+					childVar = processElement(
+						expr,
+						childStatements,
+						genId,
+						signals,
+						hash,
+						hydrate,
+						nodesVar,
+					);
+				} else {
+					childVar = processFragment(
+						expr,
+						childStatements,
+						genId,
+						signals,
+						hash,
+						hydrate,
+						nodesVar,
+					);
+				}
+				childrenElements.push(
+					t.callExpression(
+						t.arrowFunctionExpression(
+							[],
+							t.blockStatement([
+								...childStatements,
+								t.returnStatement(t.identifier(childVar)),
+							]),
+						),
+						[],
+					),
+				);
+			} else {
+				hasOnlyText = false;
+				// For dynamic expressions, just pass the expression directly
+				childrenElements.push(expr);
+			}
+		}
+	}
+
+	if (childrenElements.length === 0) return null;
+	// Build the inner value: string for single text, array otherwise
+	let inner: t.Expression;
+	if (
+		childrenElements.length === 1 &&
+		hasOnlyText &&
+		t.isStringLiteral(childrenElements[0])
+	) {
+		inner = childrenElements[0];
+	} else {
+		inner = t.arrayExpression(childrenElements);
+	}
+	return inner;
+}