@sigil-dev/compiler 0.7.5 → 0.7.7

package/src/babel/jsx/ssr.ts

@@ -1,4 +1,5 @@
 import { types as t } from "@babel/core";
+import { isGlobalComponent } from "../handlers/dom/globals";
 import { getTagName } from "../util/helpers";
 
 const VOID_ELEMENTS = new Set([
@@ -120,6 +121,13 @@ export function processElementSSR(
 	const isComponent = /^[A-Z]/.test(tagName);
 
 	if (isComponent) {
+		// Global components (Window/Document/Body) produce no SSR output
+		if (isGlobalComponent(tagName)) {
+			return t.templateLiteral(
+				[t.templateElement({ raw: "", cooked: "" }, true)],
+				[],
+			);
+		}
 		return processComponentSSR(node, tagName, signals);
 	}
 	let dangerousHTML: t.Expression | null = null;
@@ -210,16 +218,17 @@ function processComponentSSR(
 	for (const attr of node.openingElement.attributes) {
 		if (!t.isJSXAttribute(attr)) continue;
 		const attrName = (attr.name as t.JSXIdentifier).name;
+		// data-key is a framework-internal attribute for HTML elements only; skip for components
+		if (attrName === "data-key" || attrName === "key") continue;
+		// use StringLiteral key for hyphenated names, Identifier otherwise
+		const propKey = /[^a-zA-Z_$0-9]/.test(attrName)
+			? t.stringLiteral(attrName)
+			: t.identifier(attrName);
 		if (t.isStringLiteral(attr.value)) {
-			props.properties.push(
-				t.objectProperty(t.identifier(attrName), attr.value),
-			);
+			props.properties.push(t.objectProperty(propKey, attr.value));
 		} else if (t.isJSXExpressionContainer(attr.value)) {
 			props.properties.push(
-				t.objectProperty(
-					t.identifier(attrName),
-					attr.value.expression as t.Expression,
-				),
+				t.objectProperty(propKey, attr.value.expression as t.Expression),
 			);
 		}
 	}

package/src/babel/jsx/utils.ts

@@ -35,6 +35,14 @@ export function containsSignal(
 			containsSignal(expr.alternate as t.Expression, signals)
 		);
 	}
+	if (t.isUnaryExpression(expr)) {
+		return containsSignal(expr.argument as t.Expression, signals);
+	}
+	if (t.isTemplateLiteral(expr)) {
+		return expr.expressions.some((e) =>
+			containsSignal(e as t.Expression, signals),
+		);
+	}
 	return false;
 }
 

package/src/babel/util/bind.ts

@@ -3,133 +3,137 @@ import { types as t } from "@babel/core";
 const BIND_EVENT: Record<string, string> = {
 	value: "input",
 	checked: "change",
+	innerHTML: "input",
+	textContent: "input",
+	group: "change",
 };
 
 export function buildBind(
-  varName: string,
-  attrName: string,
-  attr: t.JSXAttribute,
-  statements: t.Statement[],
+	varName: string,
+	bindProp: string,
+	attr: t.JSXAttribute,
+	statements: t.Statement[],
 ): void {
-  const signal = (attr.value as t.JSXExpressionContainer)
-    .expression as t.CallExpression; // already text()
+	const signal = (attr.value as t.JSXExpressionContainer)
+		.expression as t.CallExpression; // already text()
 
-  const signalId = signal.callee as t.Identifier; // text — for .set()
+	const signalId = signal.callee as t.Identifier; // text — for .set()
 
-  if (attrName === "bindThis") {
-    statements.push(
-      t.expressionStatement(
-        t.callExpression(
-          t.memberExpression(signalId, t.identifier("set")),
-          [t.identifier(varName)],
-        ),
-      ),
-    );
-    return;
-  }
+	const event = BIND_EVENT[bindProp] ?? "input";
 
-  const prop = attrName.slice(4).toLowerCase();
-  const event = BIND_EVENT[prop] ?? "input";
+	// createEffect(() => _el.prop = text())
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier(bindProp),
+								),
+								signal,
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
 
-  // createEffect(() => _el.prop = text())
-  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)),
-                signal, // text() — already correct
-              ),
-            ),
-          ]),
-        ),
-      ]),
-    ),
-  );
-
-  // addEventListener(event, e => text.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(signalId, t.identifier("set")),
-              [
-                t.memberExpression(
-                  t.memberExpression(t.identifier("e"), t.identifier("target")),
-                  t.identifier(prop),
-                ),
-              ],
-            ),
-          ),
-        ],
-      ),
-    ),
-  );
+	// addEventListener(event, e => text.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(signalId, t.identifier("set")),
+							[
+								t.memberExpression(
+									t.memberExpression(t.identifier("e"), t.identifier("target")),
+									t.identifier(bindProp),
+								),
+							],
+						),
+					),
+				],
+			),
+		),
+	);
 }
 
 export function buildProxyBind(
-  varName: string,
-  attrName: string,
-  attr: t.JSXAttribute,
-  statements: t.Statement[],
-  signal: t.MemberExpression, // already form().name
+	varName: string,
+	bindProp: string,
+	attr: t.JSXAttribute,
+	statements: t.Statement[],
+	signal: t.MemberExpression, // already form().name
 ): void {
-  const prop = attrName.slice(4).toLowerCase();
-  const event = BIND_EVENT[prop] ?? "input";
+	const event = BIND_EVENT[bindProp] ?? "input";
 
-  // createEffect(() => el.prop = form().name)
-  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)),
-                signal,
-              ),
-            ),
-          ]),
-        ),
-      ]),
-    ),
-  );
+	// createEffect(() => el.prop = form().name)
+	statements.push(
+		t.expressionStatement(
+			t.callExpression(t.identifier("createEffect"), [
+				t.arrowFunctionExpression(
+					[],
+					t.blockStatement([
+						t.expressionStatement(
+							t.assignmentExpression(
+								"=",
+								t.memberExpression(
+									t.identifier(varName),
+									t.identifier(bindProp),
+								),
+								signal,
+							),
+						),
+					]),
+				),
+			]),
+		),
+	);
 
-  // addEventListener(event, e => { form().name = 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.blockStatement([
-              t.expressionStatement(
-                t.assignmentExpression(
-                  "=",
-                  signal as unknown as t.LVal, // form().name — valid LVal
-                  t.memberExpression(
-                    t.memberExpression(t.identifier("e"), t.identifier("target")),
-                    t.identifier(prop),
-                  ),
-                ),
-              ),
-            ]),
-          ),
-        ],
-      ),
-    ),
-  );
+	// addEventListener(event, e => { form().name = 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.blockStatement([
+							t.expressionStatement(
+								t.assignmentExpression(
+									"=",
+									signal as unknown as t.LVal, // form().name — valid LVal
+									t.memberExpression(
+										t.memberExpression(
+											t.identifier("e"),
+											t.identifier("target"),
+										),
+										t.identifier(bindProp),
+									),
+								),
+							),
+						]),
+					),
+				],
+			),
+		),
+	);
 }

package/src/babel/util/dead-code.ts

@@ -1,28 +1,28 @@
-import { traverse, types as t, NodePath } from "@babel/core";
-
-export function warnDeadReactivity(
-    path: NodePath,
-    signals: Set<string>,
-    storeSignals: Set<string>,
-    filename?: string,
-): void {
-    const used = new Set<string>();
-
-    path.traverse({
-        CallExpression(innerPath: any) {
-            if (t.isIdentifier(innerPath.node.callee)) {
-                used.add(innerPath.node.callee.name);
-            }
-        }
-    });
-
-    for (const name of signals) {
-        if (storeSignals.has(name)) continue; // exported, used across files
-        if (!used.has(name)) {
-            const tag = filename ? `[sigil:${filename}]` : "[sigil]";
-            console.warn(
-                `${tag} unused reactive declaration: "${name}" is declared with $state or $derived but never read.`
-            );
-        }
-    }
-}
+import { type NodePath, types as t, traverse } from "@babel/core";
+
+export function warnDeadReactivity(
+	path: NodePath,
+	signals: Set<string>,
+	storeSignals: Set<string>,
+	filename?: string,
+): void {
+	const used = new Set<string>();
+
+	path.traverse({
+		CallExpression(innerPath: any) {
+			if (t.isIdentifier(innerPath.node.callee)) {
+				used.add(innerPath.node.callee.name);
+			}
+		},
+	});
+
+	for (const name of signals) {
+		if (storeSignals.has(name)) continue; // exported, used across files
+		if (!used.has(name)) {
+			const tag = filename ? `[sigil:${filename}]` : "[sigil]";
+			console.warn(
+				`${tag} unused reactive declaration: "${name}" is declared with $state or $derived but never read.`,
+			);
+		}
+	}
+}

package/src/babel/util/helpers.ts

@@ -5,8 +5,22 @@ export function getMacro(declarator: NodePath<t.VariableDeclarator>) {
 	const init = declarator.get("init");
 	if (!init.isCallExpression()) return null;
 	const callee = init.get("callee");
-	if (!callee.isIdentifier()) return null;
-	return { name: callee.node.name, init };
+
+	// Handle identifier: $state(x), $derived(x)
+	if (callee.isIdentifier()) {
+		return { name: callee.node.name, init };
+	}
+
+	// Handle member expression: $state.raw(x), $state.snapshot(x)
+	if (callee.isMemberExpression()) {
+		const object = callee.get("object");
+		const property = callee.get("property");
+		if (object.isIdentifier() && property.isIdentifier()) {
+			return { name: `${object.node.name}.${property.node.name}`, init };
+		}
+	}
+
+	return null;
 }
 
 export function getTagName(

package/src/babel/util/magic.ts

@@ -1,5 +1,11 @@
 export const MAGIC = {
 	createSignal: "createSignal",
+	createRawSignal: "createRawSignal",
 	createMemo: "createMemo",
 	createEffect: "createEffect",
+	createEffectPre: "createEffectPre",
+	createInspectEffect: "createInspectEffect",
+	withEffectScope: "withEffectScope",
+	tracking: "tracking",
+	snapshot: "snapshot",
 } as const;

package/src/bun-plugin.ts

@@ -26,7 +26,11 @@ function shouldTransform(path: string): boolean {
 
 function shouldTransformSource(path: string, code: string): boolean {
 	const normalized = normalizePath(path);
-	return JSX_RE.test(normalized) || SIGIL_MACRO_RE.test(code) || STYLE_TEST_RE.test(code);
+	return (
+		JSX_RE.test(normalized) ||
+		SIGIL_MACRO_RE.test(code) ||
+		STYLE_TEST_RE.test(code)
+	);
 }
 
 export function sigil(options?: {
@@ -36,10 +40,23 @@ export function sigil(options?: {
 		name: "sigil",
 		setup(build) {
 			const transpiler = new Bun.Transpiler({ loader: "tsx" });
+
+			// This is required for both linking errors,
+			// and for a bug in the bundler, which was reported in https://github.com/oven-sh/bun/issues/13897 (2 YEARSS AGO)
+			// and apparently fixed in https://github.com/oven-sh/bun/pull/15119. It wasnt
+			build.onResolve({ filter: /^@sigil-dev\/runtime($|\/)/ }, (args) => {
+				try {
+					const resolved = Bun.resolveSync(args.path, process.cwd());
+					return { path: resolved.replaceAll("\\", "/") };
+				} catch {
+					return undefined;
+				}
+			});
+
 			build.onLoad({ filter: SOURCE_RE }, async ({ path }) => {
-				if (!shouldTransform(path)) return;
+				if (!shouldTransform(path)) return undefined;
 				let code = await Bun.file(path).text();
-				if (!shouldTransformSource(path, code)) return;
+				if (!shouldTransformSource(path, code)) return undefined;
 				// console.log("[bun-plugin] intercepting:", path);
 				const hash = computeHash(path);
 				let scopedCSS = "";

package/src/vite/index.ts

@@ -5,9 +5,13 @@ import { computeHash, scopeCSS } from "../babel/util/css.ts";
 
 const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
 
-export function sigil(options?: { hydrate?: boolean }): Plugin {
+export function sigil(options?: {
+	hydrate?: boolean;
+	styleNonce?: string;
+}): Plugin {
 	// Track injected CSS per component to avoid duplicates
 	const injected = new Set<string>();
+	const styleNonce = options?.styleNonce ?? "";
 
 	return {
 		name: "sigil",
@@ -35,10 +39,11 @@ export function sigil(options?: { hydrate?: boolean }): Plugin {
 			let cssInjection = "";
 			if (scopedCSS && !injected.has(id)) {
 				injected.add(id);
+				const nonceAttr = styleNonce ? ` nonce="${styleNonce}"` : "";
 				cssInjection = `
 if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
     const __style = document.createElement('style');
-    __style.id = 'sigil-${hash}';
+    __style.id = 'sigil-${hash}';${nonceAttr ? `\n    __style.setAttribute('nonce', '${styleNonce}');` : ""}
     __style.textContent = ${JSON.stringify(scopedCSS)};
     document.head.appendChild(__style);
 }`;

package/test/hydration.test.ts

@@ -112,7 +112,7 @@ describe("Hydration", () => {
 	test("imports claim and claimText from @sigil-dev/runtime", () => {
 		const code = transform(`const el = <div></div>`, { mode: "hydrate" });
 		expect(code).toContain(
-			"createSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, insert",
+			"createSignal, createRawSignal, createEffect, createMemo, reconcile, claim, claimText, claimComment, hydrateKeyedList, insert, getHydrationNodes, pushHydrationNodes, popHydrationNodes, snapshot, tracking, createEffectPre, createInspectEffect, withEffectScope",
 		);
 	});