@sigil-dev/compiler 0.7.4 → 0.7.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {
@@ -20,5 +20,9 @@
     "@babel/plugin-syntax-typescript": "next",
     "@babel/traverse": "next",
     "@babel/types": "next"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-typescript": "^8.0.0-rc.6",
+    "@babel/preset-typescript": "^8.0.0-rc.6"
   }
 }

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

@@ -2,6 +2,12 @@ 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>,
@@ -17,13 +23,37 @@ export function handleDerived(
 	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 = "const";
+	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;

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

@@ -0,0 +1,102 @@
+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(
+										"===",
+										t.unaryExpression("typeof", targetExpr),
+										t.stringLiteral("undefined"),
+									),
+									t.returnStatement(),
+								),
+								t.expressionStatement(
+									t.callExpression(
+										t.memberExpression(
+											targetExpr,
+											t.identifier("addEventListener"),
+										),
+										[t.stringLiteral(event), handler],
+									),
+								),
+								t.returnStatement(
+									t.arrowFunctionExpression(
+										[],
+										t.callExpression(
+											t.memberExpression(
+												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/ssr/state.ts

@@ -1,10 +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";
-}
+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";
+}