@sigil-dev/compiler 0.3.0

package/README.md

@@ -0,0 +1,3 @@
+# Sigil Compiler
+
+Compiles JSX down to `document.createElement()` calls

package/index.ts

@@ -0,0 +1,4 @@
+// packages/compiler/index.ts
+
+export { default as sigilPlugin } from "./src/babel/index.ts";
+export { sigil } from "./src/vite/index.ts";

package/jsr.json

@@ -0,0 +1,8 @@
+{
+	"name": "@sigil-dev/compiler",
+	"version": "0.2.0",
+	"exports": "./index.ts",
+	"publish": {
+		"exclude": ["src/**/*.test.ts"]
+	}
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "@sigil-dev/compiler",
+	"module": "index.ts",
+	"type": "module",
+	"version": "0.3.0",
+	"private": false,
+	"description": "Compiler for the Sigil framework",
+	"peerDependencies": {
+		"typescript": "^5"
+	},
+	"exports": {
+		".": "./index.ts",
+		"./babel": "./src/babel/index.ts",
+		"./vite": "./src/vite/index.ts",
+		"./bun": "./src/bun-plugin.ts"
+	},
+	"devDependencies": {
+		"@babel/core": "next",
+		"@babel/plugin-syntax-jsx": "next",
+		"@babel/plugin-syntax-typescript": "next",
+		"@babel/traverse": "next",
+		"@babel/types": "next"
+	}
+}

package/src/babel/handlers/dom/derived.ts

@@ -0,0 +1,32 @@
+import type { NodePath } from "@babel/core";
+import { types as t } from "@babel/core";
+import { MAGIC } from "../../util/magic.ts";
+
+export function handleDerived(
+	declaration: NodePath<t.VariableDeclaration>,
+	declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+	signals: Set<string>,
+): void {
+	const { id } = declarator.node;
+	if (!t.isIdentifier(id))
+		throw new Error("Destructured $derived not supported");
+	const name = id.name;
+	signals.add(id.name);
+
+	const binding = declaration.scope.getBinding(name);
+	if (!binding) return;
+	const refs = [...binding.referencePaths];
+
+	init.replaceWith(
+		t.callExpression(t.identifier(MAGIC.createMemo), [
+			t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
+		]),
+	);
+	declaration.node.kind = "const";
+	for (const ref of refs) {
+		if (!ref.isIdentifier()) continue;
+		if (ref.parentPath?.isUpdateExpression()) continue;
+		ref.replaceWith(t.callExpression(ref.node, []));
+	}
+}

package/src/babel/handlers/dom/effect.ts

@@ -0,0 +1,15 @@
+import type { NodePath, types as t } from "@babel/core";
+import { MAGIC } from "../../util/magic.ts";
+
+export function handleEffect(statement: NodePath<t.ExpressionStatement>): void {
+	const expr = statement.get("expression");
+	if (!expr.isCallExpression()) return;
+	const callee = expr.get("callee");
+	if (!callee.isIdentifier()) return;
+	if (callee.node.name === "$effect") callee.node.name = MAGIC.createEffect;
+	else if (callee.node.name === "$derived") {
+		throw statement.buildCodeFrameError(
+			"$derived must be assigned to a variable: let doubled = $derived(count*2)",
+		);
+	}
+}

package/src/babel/handlers/dom/state.ts

@@ -0,0 +1,78 @@
+import type { NodePath } from "@babel/core";
+import { types as t } from "@babel/core";
+import { MAGIC } from "../../util/magic.ts";
+export function handleState(
+	declaration: NodePath<t.VariableDeclaration>,
+	declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+	signals: Set<string>,
+): void {
+	// AST has to be perfect so we're using type safe
+	// replacement instead of just swapping method name everywhere.
+
+	const { id } = declarator.node;
+	if (!t.isIdentifier(id)) throw new Error("Destructured $state not supported");
+	const name = id.name; // <-- "count"
+
+	const setCall = (
+		value: t.Expression, // <-- now captures "count"
+	) =>
+		t.callExpression(
+			t.memberExpression(t.identifier(name), t.identifier("set")),
+			[value],
+		);
+
+	const binding = declaration.scope.getBinding(name);
+	if (!binding) return;
+	const refs = [...binding.referencePaths];
+	const violations = [...binding.constantViolations]; // snapshot
+
+	// rewrite declaration
+	init.replaceWith(
+		t.callExpression(t.identifier(MAGIC.createSignal), init.node.arguments),
+	);
+	declaration.node.kind = "const";
+
+	// rewrite writes
+	// violations go before refs becase UpdateExpression
+	// is both a read and a write and this prevents count()++
+	for (const violation of violations) {
+		if (violation.isUpdateExpression()) {
+			const op = violation.node.operator === "++" ? "+" : "-";
+			violation.replaceWith(
+				setCall(
+					t.binaryExpression(
+						op,
+						t.callExpression(t.identifier(name), []),
+						t.numericLiteral(1),
+					),
+				),
+			);
+		} else if (violation.isAssignmentExpression()) {
+			const { operator, right } = violation.node;
+			if (operator === "=") {
+				// count = 5  ->  count.set(5)
+				violation.replaceWith(setCall(right));
+			} else {
+				// count += 2  ->  count.set(count() + 2)
+				const baseOp = operator.slice(0, -1);
+				violation.replaceWith(
+					setCall(
+						t.binaryExpression(
+							baseOp as t.BinaryExpression["operator"],
+							t.callExpression(t.identifier(name), []),
+							right,
+						),
+					),
+				);
+			}
+		}
+	}
+
+	for (const ref of refs) {
+		if (!ref.isIdentifier()) continue;
+		// weird syntax, but just swaps the read with a call.
+		ref.replaceWith(t.callExpression(ref.node, []));
+	}
+	signals.add(name);
+}

package/src/babel/handlers/ssr/derived.ts

@@ -0,0 +1,26 @@
+import { type NodePath, types as t } from "@babel/core";
+
+export function handleDerivedSSR(
+	declaration: NodePath<t.VariableDeclaration>,
+	declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+): void {
+	const { id } = declarator.node;
+	if (!t.isIdentifier(id))
+		throw new Error("Destructured $derived not supported");
+
+	// Replace $derived(expr) with () => expr (lazy evaluation)
+	init.replaceWith(
+		t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
+	);
+	declaration.node.kind = "const";
+
+	// Replace all references to this variable with () calls
+	const binding = declaration.scope.getBinding(id.name);
+	if (!binding) return;
+	for (const ref of [...binding.referencePaths]) {
+		if (!ref.isIdentifier()) continue;
+		if (ref.parentPath?.isUpdateExpression()) continue;
+		ref.replaceWith(t.callExpression(ref.node, []));
+	}
+}

package/src/babel/handlers/ssr/state.ts

@@ -0,0 +1,10 @@
+import type { NodePath, types as t } from "@babel/core";
+
+export function handleStateSSR(
+	declaration: NodePath<t.VariableDeclaration>,
+	declarator: NodePath<t.VariableDeclarator>,
+	init: NodePath<t.CallExpression>,
+): void {
+	init.replaceWith(init.node.arguments[0] as t.Expression);
+	declaration.node.kind = "let";
+}

package/src/babel/index.ts

@@ -0,0 +1,239 @@
+import { type PluginObject, types as t, template } from "@babel/core";
+import { handleDerived } from "./handlers/dom/derived.ts";
+import { handleEffect } from "./handlers/dom/effect.ts";
+import { handleState } from "./handlers/dom/state.ts";
+import { handleDerivedSSR } from "./handlers/ssr/derived.ts";
+import { handleStateSSR } from "./handlers/ssr/state.ts";
+import { processElement, processFragment } from "./jsx/index.ts";
+import { processElementSSR, processFragmentSSR } from "./jsx/ssr.ts";
+import { getMacro } from "./util/helpers.ts";
+
+const SSR_HELPERS = template.statements.ast(`
+    const __SAFE = Symbol.for('sigil.safe');
+    class __H {
+        constructor(v) { this.v = v; this[__SAFE] = true; }
+        toString() { return this.v; }
+    }
+    const __h = (v) => {
+        if (v?.[__SAFE]) return v;
+        if (Array.isArray(v)) return new __H(v.map(x => x?.[__SAFE] ? x.v : __e(x)).join(''));
+        return new __H(String(v ?? ''));
+    };
+    const __e = (v) => {
+        if (v?.[__SAFE]) return v.v;
+        if (Array.isArray(v)) return v.map(x => x?.[__SAFE] ? x.v : __e(x)).join('');
+        if (v === false || v === null || v === undefined) return '';
+        return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    };
+`);
+
+/**
+ * Recursively convert key={expr} to data-key={expr} in JSX tree.
+ * Needed for SSR output so hydration can map items by key.
+ */
+function convertKeyToDataKey(node: t.JSXElement): void {
+	for (let i = 0; i < node.openingElement.attributes.length; i++) {
+		const attr = node.openingElement.attributes[i];
+		if (
+			t.isJSXAttribute(attr) &&
+			t.isJSXIdentifier(attr.name) &&
+			attr.name.name === "key"
+		) {
+			node.openingElement.attributes[i] = t.jsxAttribute(
+				t.jsxIdentifier("data-key"),
+				attr.value,
+			);
+		}
+	}
+	for (const child of node.children) {
+		if (t.isJSXElement(child)) {
+			convertKeyToDataKey(child);
+		} else if (
+			t.isJSXExpressionContainer(child) &&
+			t.isJSXElement(child.expression)
+		) {
+			convertKeyToDataKey(child.expression);
+		}
+	}
+}
+
+interface SigilOptions {
+	hash?: string;
+	mode?: "dom" | "ssr" | "hydrate";
+}
+
+export default function sigilPlugin(): PluginObject {
+	const signals = new Set<string>();
+	let scopedHash: string | undefined;
+	let isSSR = false;
+	let isHydrate = false;
+
+	return {
+		name: "sigil",
+		visitor: {
+			Program: {
+				enter(path, state) {
+					const opts = (state.opts || {}) as SigilOptions;
+					scopedHash = opts.hash;
+					isSSR = opts.mode === "ssr";
+					isHydrate = opts.mode === "hydrate";
+
+					// SSR doesn't need any runtime imports except the `escape` utility.
+					if (isSSR) {
+						path.unshiftContainer("body", SSR_HELPERS);
+						return;
+					}
+
+					path.unshiftContainer(
+						"body",
+						t.importDeclaration(
+							[
+								t.importSpecifier(
+									t.identifier("createSignal"),
+									t.identifier("createSignal"),
+								),
+								t.importSpecifier(
+									t.identifier("createEffect"),
+									t.identifier("createEffect"),
+								),
+								t.importSpecifier(
+									t.identifier("createMemo"),
+									t.identifier("createMemo"),
+								),
+								t.importSpecifier(
+									t.identifier("reconcile"),
+									t.identifier("reconcile"),
+								),
+								t.importSpecifier(t.identifier("claim"), t.identifier("claim")),
+								t.importSpecifier(
+									t.identifier("claimText"),
+									t.identifier("claimText"),
+								),
+								t.importSpecifier(
+									t.identifier("claimComment"),
+									t.identifier("claimComment"),
+								),
+								t.importSpecifier(
+									t.identifier("hydrateKeyedList"),
+									t.identifier("hydrateKeyedList"),
+								),
+								t.importSpecifier(
+									t.identifier("insert"),
+									t.identifier("insert"),
+								),
+							],
+							t.stringLiteral("@sigil-dev/runtime"),
+						),
+					);
+				},
+			},
+			VariableDeclaration(path) {
+				for (const declarator of path.get("declarations")) {
+					const macro = getMacro(declarator);
+					if (!macro) continue;
+					const { name, init } = macro;
+					if (name === "$state") {
+						isSSR
+							? handleStateSSR(path, declarator, init)
+							: handleState(path, declarator, init, signals);
+					} else if (name === "$derived") {
+						isSSR
+							? handleDerivedSSR(path, declarator, init)
+							: handleDerived(path, declarator, init, signals);
+					}
+				}
+			},
+			ExpressionStatement(path) {
+				if (isSSR) {
+					// drop $effect entirely in SSR
+					const expr = path.get("expression");
+					if (expr.isCallExpression()) {
+						const callee = expr.get("callee");
+						if (callee.isIdentifier() && callee.node.name === "$effect") {
+							path.remove();
+						}
+					}
+					return;
+				}
+				handleEffect(path);
+			},
+			JSXElement(path) {
+				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
+					return;
+				if (isSSR) {
+					convertKeyToDataKey(path.node);
+					path.replaceWith(
+						t.callExpression(t.identifier("__h"), [
+							processElementSSR(path.node, signals),
+						]),
+					);
+					return;
+				}
+				const statements: t.Statement[] = [];
+				const genId = (() => {
+					let i = 0;
+					return () => `_el${i++}`;
+				})();
+				const root = processElement(
+					path.node,
+					statements,
+					genId,
+					signals,
+					scopedHash,
+					isHydrate,
+					isHydrate ? "__nodes" : undefined,
+				);
+				path.replaceWith(
+					t.callExpression(
+						t.arrowFunctionExpression(
+							[],
+							t.blockStatement([
+								...statements,
+								t.returnStatement(t.identifier(root)),
+							]),
+						),
+						[],
+					),
+				);
+			},
+			JSXFragment(path) {
+				if (path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment())
+					return;
+				if (isSSR) {
+					path.replaceWith(
+						t.callExpression(t.identifier("__h"), [
+							processFragmentSSR(path.node, signals),
+						]),
+					);
+					return;
+				}
+				const statements: t.Statement[] = [];
+				const genId = (() => {
+					let i = 0;
+					return () => `_el${i++}`;
+				})();
+				const root = processFragment(
+					path.node,
+					statements,
+					genId,
+					signals,
+					scopedHash,
+					isHydrate,
+					isHydrate ? "__nodes" : undefined,
+				);
+				path.replaceWith(
+					t.callExpression(
+						t.arrowFunctionExpression(
+							[],
+							t.blockStatement([
+								...statements,
+								t.returnStatement(t.identifier(root)),
+							]),
+						),
+						[],
+					),
+				);
+			},
+		},
+	};
+}