@sigil-dev/compiler 0.9.4 → 0.9.6

package/index.ts

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

package/jsr.json

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {
@@ -11,6 +11,7 @@
   "exports": {
     ".": "./index.ts",
     "./babel": "./src/babel/index.ts",
+    "./css": "./src/babel/util/css.ts",
     "./vite": "./src/vite/index.ts",
     "./bun": "./src/bun-plugin.ts"
   },

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

@@ -1,62 +1,62 @@
-import type { NodePath } from "@babel/core";
-import { types as t } from "@babel/core";
-import { MAGIC } from "../../util/magic.ts";
-
-const setCall = (name: string, value: t.Expression) =>
-	t.callExpression(
-		t.memberExpression(t.identifier(name), t.identifier("set")),
-		[value],
-	);
-
-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];
-	const violations = [...binding.constantViolations];
-
-	init.replaceWith(
-		t.callExpression(t.identifier(MAGIC.createMemo), [
-			t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
-		]),
-	);
-	declaration.node.kind = "let";
-
-	// A6: $derived reassign — convert assignments to .set() calls
-	for (const violation of violations) {
-		if (violation.isAssignmentExpression()) {
-			const { operator, right } = violation.node;
-			if (operator === "=") {
-				violation.replaceWith(setCall(name, right));
-			} else {
-				const baseOp = operator.slice(0, -1);
-				violation.replaceWith(
-					setCall(
-						name,
-						t.binaryExpression(
-							baseOp as t.BinaryExpression["operator"],
-							t.callExpression(t.identifier(name), []),
-							right,
-						),
-					),
-				);
-			}
-		}
-	}
-
-	for (const ref of refs) {
-		if (!ref.isIdentifier()) continue;
-		if (ref.parentPath?.isUpdateExpression()) continue;
-		ref.replaceWith(t.callExpression(ref.node, []));
-	}
-}
+import type { NodePath } from "@babel/core";
+import { types as t } from "@babel/core";
+import { MAGIC } from "../../util/magic.ts";
+
+const setCall = (name: string, value: t.Expression) =>
+	t.callExpression(
+		t.memberExpression(t.identifier(name), t.identifier("set")),
+		[value],
+	);
+
+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];
+	const violations = [...binding.constantViolations];
+
+	init.replaceWith(
+		t.callExpression(t.identifier(MAGIC.createMemo), [
+			t.arrowFunctionExpression([], init.node.arguments[0] as t.Expression),
+		]),
+	);
+	declaration.node.kind = "let";
+
+	// A6: $derived reassign — convert assignments to .set() calls
+	for (const violation of violations) {
+		if (violation.isAssignmentExpression()) {
+			const { operator, right } = violation.node;
+			if (operator === "=") {
+				violation.replaceWith(setCall(name, right));
+			} else {
+				const baseOp = operator.slice(0, -1);
+				violation.replaceWith(
+					setCall(
+						name,
+						t.binaryExpression(
+							baseOp as t.BinaryExpression["operator"],
+							t.callExpression(t.identifier(name), []),
+							right,
+						),
+					),
+				);
+			}
+		}
+	}
+
+	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

@@ -1,15 +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)",
-		);
-	}
-}
+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/globals.ts

@@ -1,105 +1,105 @@
-import { types as t } from "@babel/core";
-
-const GLOBAL_TARGETS: Record<string, t.Expression> = {
-	Window: t.identifier("window"),
-	Document: t.identifier("document"),
-	Body: t.memberExpression(t.identifier("document"), t.identifier("body")),
-};
-
-export function isGlobalComponent(tag: string): boolean {
-	return tag in GLOBAL_TARGETS;
-}
-
-export function handleGlobalComponent(
-	tag: string,
-	node: t.JSXElement,
-	statements: t.Statement[],
-	genId: () => string,
-): string {
-	const varName = genId();
-	const targetExpr = GLOBAL_TARGETS[tag];
-
-	for (const attr of node.openingElement.attributes) {
-		if (!t.isJSXAttribute(attr)) continue;
-
-		let attrName: string;
-		if (t.isJSXNamespacedName(attr.name)) {
-			attrName = attr.name.name.name;
-		} else {
-			attrName = (attr.name as t.JSXIdentifier).name;
-		}
-
-		if (/^on[A-Z]/.test(attrName)) {
-			const event = attrName.slice(2).toLowerCase();
-			const handler = (attr.value as t.JSXExpressionContainer)
-				.expression as t.Expression;
-
-			// createEffect(() => {
-			//   if (typeof window === "undefined") return;
-			//   target.addEventListener(ev, handler);
-			//   return () => target.removeEventListener(ev, handler);
-			// })
-			statements.push(
-				t.expressionStatement(
-					t.callExpression(t.identifier("createEffect"), [
-						t.arrowFunctionExpression(
-							[],
-							t.blockStatement([
-								t.ifStatement(
-									t.binaryExpression(
-										"===",
-										//@ts-expect-error i dont think it can be undefined here
-										t.unaryExpression("typeof", targetExpr),
-										t.stringLiteral("undefined"),
-									),
-									t.returnStatement(),
-								),
-								t.expressionStatement(
-									t.callExpression(
-										t.memberExpression(
-											//@ts-expect-error i dont think it can be undefined here
-											targetExpr,
-											t.identifier("addEventListener"),
-										),
-										[t.stringLiteral(event), handler],
-									),
-								),
-								t.returnStatement(
-									t.arrowFunctionExpression(
-										[],
-										t.callExpression(
-											t.memberExpression(
-												//@ts-expect-error i dont think it can be undefined here
-												targetExpr,
-												t.identifier("removeEventListener"),
-											),
-											[t.stringLiteral(event), handler],
-										),
-									),
-								),
-							]),
-						),
-					]),
-				),
-			);
-		}
-	}
-
-	// Placeholder comment node for the component's return value
-	statements.push(
-		t.variableDeclaration("const", [
-			t.variableDeclarator(
-				t.identifier(varName),
-				t.callExpression(
-					t.memberExpression(
-						t.identifier("document"),
-						t.identifier("createComment"),
-					),
-					[t.stringLiteral(tag.toLowerCase())],
-				),
-			),
-		]),
-	);
-
-	return varName;
-}
+import { types as t } from "@babel/core";
+
+const GLOBAL_TARGETS: Record<string, t.Expression> = {
+	Window: t.identifier("window"),
+	Document: t.identifier("document"),
+	Body: t.memberExpression(t.identifier("document"), t.identifier("body")),
+};
+
+export function isGlobalComponent(tag: string): boolean {
+	return tag in GLOBAL_TARGETS;
+}
+
+export function handleGlobalComponent(
+	tag: string,
+	node: t.JSXElement,
+	statements: t.Statement[],
+	genId: () => string,
+): string {
+	const varName = genId();
+	const targetExpr = GLOBAL_TARGETS[tag];
+
+	for (const attr of node.openingElement.attributes) {
+		if (!t.isJSXAttribute(attr)) continue;
+
+		let attrName: string;
+		if (t.isJSXNamespacedName(attr.name)) {
+			attrName = attr.name.name.name;
+		} else {
+			attrName = (attr.name as t.JSXIdentifier).name;
+		}
+
+		if (/^on[A-Z]/.test(attrName)) {
+			const event = attrName.slice(2).toLowerCase();
+			const handler = (attr.value as t.JSXExpressionContainer)
+				.expression as t.Expression;
+
+			// createEffect(() => {
+			//   if (typeof window === "undefined") return;
+			//   target.addEventListener(ev, handler);
+			//   return () => target.removeEventListener(ev, handler);
+			// })
+			statements.push(
+				t.expressionStatement(
+					t.callExpression(t.identifier("createEffect"), [
+						t.arrowFunctionExpression(
+							[],
+							t.blockStatement([
+								t.ifStatement(
+									t.binaryExpression(
+										"===",
+										//@ts-expect-error i dont think it can be undefined here
+										t.unaryExpression("typeof", targetExpr),
+										t.stringLiteral("undefined"),
+									),
+									t.returnStatement(),
+								),
+								t.expressionStatement(
+									t.callExpression(
+										t.memberExpression(
+											//@ts-expect-error i dont think it can be undefined here
+											targetExpr,
+											t.identifier("addEventListener"),
+										),
+										[t.stringLiteral(event), handler],
+									),
+								),
+								t.returnStatement(
+									t.arrowFunctionExpression(
+										[],
+										t.callExpression(
+											t.memberExpression(
+												//@ts-expect-error i dont think it can be undefined here
+												targetExpr,
+												t.identifier("removeEventListener"),
+											),
+											[t.stringLiteral(event), handler],
+										),
+									),
+								),
+							]),
+						),
+					]),
+				),
+			);
+		}
+	}
+
+	// Placeholder comment node for the component's return value
+	statements.push(
+		t.variableDeclaration("const", [
+			t.variableDeclarator(
+				t.identifier(varName),
+				t.callExpression(
+					t.memberExpression(
+						t.identifier("document"),
+						t.identifier("createComment"),
+					),
+					[t.stringLiteral(tag.toLowerCase())],
+				),
+			),
+		]),
+	);
+
+	return varName;
+}

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

@@ -1,107 +1,107 @@
-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>,
-	dev?: boolean,
-	fileKey?: string, // e.g. "src/routes/counter.tsx"
-): void {
-	const { id } = declarator.node;
-	if (!t.isIdentifier(id)) throw new Error("Destructured $state not supported");
-	const name = id.name;
-
-	// check for // @sigil:reset escape comment
-	const hasReset = declaration.node.leadingComments?.some(
-		(c) => c.value.trim() === "@sigil:reset",
-	);
-
-	const setCall = (value: t.Expression) =>
-		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];
-
-	const originalArgs = init.node.arguments;
-
-	if (dev && fileKey && !hasReset) {
-		const key = `${fileKey}#${name}`;
-		// createSignal(__hmrAdopt__("file#count", original))
-		init.replaceWith(
-			t.callExpression(t.identifier(MAGIC.createSignal), [
-				t.callExpression(t.identifier("__hmrAdopt__"), [
-					t.stringLiteral(key),
-					...(originalArgs as t.Expression[]),
-				]),
-			]),
-		);
-		// __hmrRegister__("file#count", count) — inserted after declaration
-		declaration.insertAfter(
-			t.expressionStatement(
-				t.callExpression(t.identifier("__hmrRegister__"), [
-					t.stringLiteral(key),
-					t.identifier(name),
-				]),
-			),
-		);
-	} else {
-		init.replaceWith(
-			t.callExpression(
-				t.identifier(MAGIC.createSignal),
-				originalArgs as t.Expression[],
-			),
-		);
-	}
-
-	declaration.node.kind = "const";
-	// ... rest of rewrites unchanged
-	// 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);
-}
+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>,
+	dev?: boolean,
+	fileKey?: string, // e.g. "src/routes/counter.tsx"
+): void {
+	const { id } = declarator.node;
+	if (!t.isIdentifier(id)) throw new Error("Destructured $state not supported");
+	const name = id.name;
+
+	// check for // @sigil:reset escape comment
+	const hasReset = declaration.node.leadingComments?.some(
+		(c) => c.value.trim() === "@sigil:reset",
+	);
+
+	const setCall = (value: t.Expression) =>
+		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];
+
+	const originalArgs = init.node.arguments;
+
+	if (dev && fileKey && !hasReset) {
+		const key = `${fileKey}#${name}`;
+		// createSignal(__hmrAdopt__("file#count", original))
+		init.replaceWith(
+			t.callExpression(t.identifier(MAGIC.createSignal), [
+				t.callExpression(t.identifier("__hmrAdopt__"), [
+					t.stringLiteral(key),
+					...(originalArgs as t.Expression[]),
+				]),
+			]),
+		);
+		// __hmrRegister__("file#count", count) — inserted after declaration
+		declaration.insertAfter(
+			t.expressionStatement(
+				t.callExpression(t.identifier("__hmrRegister__"), [
+					t.stringLiteral(key),
+					t.identifier(name),
+				]),
+			),
+		);
+	} else {
+		init.replaceWith(
+			t.callExpression(
+				t.identifier(MAGIC.createSignal),
+				originalArgs as t.Expression[],
+			),
+		);
+	}
+
+	declaration.node.kind = "const";
+	// ... rest of rewrites unchanged
+	// 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);
+}