@sigil-dev/compiler 0.6.11 → 0.7.0

package/src/babel/util/bind.ts

@@ -6,70 +6,130 @@ const BIND_EVENT: Record<string, string> = {
 };
 
 export function buildBind(
-	varName: string,
-	attrName: string,
-	attr: t.JSXAttribute,
-	statements: t.Statement[],
+  varName: string,
+  attrName: string,
+  attr: t.JSXAttribute,
+  statements: t.Statement[],
 ): void {
-	const signal = (attr.value as t.JSXExpressionContainer)
-		.expression as t.Expression;
+  const signal = (attr.value as t.JSXExpressionContainer)
+    .expression as t.CallExpression; // already text()
 
-	// bind:this — just assign the element to the signal once
-	if (attrName === "bindThis") {
-		statements.push(
-			t.expressionStatement(
-				t.callExpression(t.memberExpression(signal, t.identifier("set")), [
-					t.identifier(varName),
-				]),
-			),
-		);
-		return;
-	}
+  const signalId = signal.callee as t.Identifier; // text — for .set()
 
-	const prop = attrName.slice(4).toLowerCase(); // bindValue → value
-	const event = BIND_EVENT[prop] ?? "input";
+  if (attrName === "bindThis") {
+    statements.push(
+      t.expressionStatement(
+        t.callExpression(
+          t.memberExpression(signalId, t.identifier("set")),
+          [t.identifier(varName)],
+        ),
+      ),
+    );
+    return;
+  }
 
-	// createEffect(() => _el.prop = signal())
-	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)),
-								t.callExpression(signal, []),
-							),
-						),
-					]),
-				),
-			]),
-		),
-	);
+  const prop = attrName.slice(4).toLowerCase();
+  const event = BIND_EVENT[prop] ?? "input";
 
-	// _el.addEventListener(event, e => signal.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(signal, t.identifier("set")), [
-							t.memberExpression(
-								t.memberExpression(t.identifier("e"), t.identifier("target")),
-								t.identifier(prop),
-							),
-						]),
-					),
-				],
-			),
-		),
-	);
+  // 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),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    ),
+  );
+}
+
+export function buildProxyBind(
+  varName: string,
+  attrName: 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";
+
+  // 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,
+              ),
+            ),
+          ]),
+        ),
+      ]),
+    ),
+  );
+
+  // 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),
+                  ),
+                ),
+              ),
+            ]),
+          ),
+        ],
+      ),
+    ),
+  );
 }

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

@@ -0,0 +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.`
+            );
+        }
+    }
+}

package/test/jsx.test.ts

@@ -2,80 +2,99 @@ import { describe, expect, test } from "bun:test";
 import { transform } from "./helpers/transform.ts";
 
 describe("JSX", () => {
-	test("single static element", () => {
-		const result = transform(`const el = <div />;`);
-		expect(result).toContain('document.createElement("div")');
-	});
-
-	test("nested static elements", () => {
-		const result = transform(`const el = <div><span /></div>;`);
-		expect(result).toContain('document.createElement("div")');
-		expect(result).toContain('document.createElement("span")');
-		expect(result).toContain(".append(");
-	});
-
-	test("static string attribute", () => {
-		const result = transform(`const el = <div class="app" />;`);
-		expect(result).toContain('_el0.className = "app"');
-	});
-
-	test("attribute without mapping", () => {
-		const result = transform(`const el = <input type="text" />;`);
-		expect(result).toContain('_el0.type = "text"');
-	});
-
-	test("expression attribute", () => {
-		const result = transform(`const el = <div id={myId} />;`);
-		expect(result).toContain("_el0.id = myId");
-	});
-
-	describe("Reactivity", () => {
-		test("dynamic attribute wraps in createEffect", () => {
-			const result = transform(`
+    test("single static element", () => {
+        const result = transform(`const el = <div />;`);
+        expect(result).toContain('document.createElement("div")');
+    });
+
+    test("nested static elements", () => {
+        const result = transform(`const el = <div><span /></div>;`);
+        expect(result).toContain('document.createElement("div")');
+        expect(result).toContain('document.createElement("span")');
+        expect(result).toContain(".append(");
+    });
+
+    test("static string attribute", () => {
+        const result = transform(`const el = <div class="app" />;`);
+        expect(result).toContain('_el0.className = "app"');
+    });
+
+    test("attribute without mapping", () => {
+        const result = transform(`const el = <input type="text" />;`);
+        expect(result).toContain('_el0.type = "text"');
+    });
+
+    test("expression attribute", () => {
+        const result = transform(`const el = <div id={myId} />;`);
+        expect(result).toContain("_el0.id = myId");
+    });
+
+    describe("Reactivity", () => {
+        test("dynamic attribute wraps in createEffect", () => {
+            const result = transform(`
             let count = $state(0);
             const el = <div id={count} />;
           `);
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("_el0.id = count()");
-		});
+            expect(result).toContain("createEffect(");
+            expect(result).toContain("_el0.id = count()");
+        });
 
-		test("static expression attribute does not wrap in createEffect", () => {
-			const result = transform(`
+        test("static expression attribute does not wrap in createEffect", () => {
+            const result = transform(`
             const myId = "app";
             const el = <div id={myId} />;
           `);
-			expect(result).not.toContain("createEffect(");
-			expect(result).toContain("_el0.id = myId");
-		});
-	});
-
-	describe("Children", () => {
-		// text children
-		test("static text child", () => {
-			const result = transform(`const el = <div>hello</div>;`);
-			expect(result).toContain('createTextNode("hello")');
-		});
-
-		test("dynamic text child", () => {
-			const result = transform(`
+            expect(result).not.toContain("createEffect(");
+            expect(result).toContain("_el0.id = myId");
+        });
+
+        test("style object compiles to per-property assignment", () => {
+          const code = transform(`
+            const el = <div style={{ color: "red", fontSize: "16px" }} />;
+          `);
+          expect(code).toContain('.style.color = "red"');
+          expect(code).toContain('.style.fontSize = "16px"');
+          expect(code).not.toContain("[object Object]");
+        });
+
+        test("reactive style property wraps in createEffect", () => {
+          const code = transform(`
+            let size = $state(16);
+            const el = <div style={{ fontSize: size + "px", color: "red" }} />;
+          `);
+          expect(code).toContain("createEffect");
+          expect(code).toContain(".style.fontSize");
+          expect(code).toContain('.style.color = "red"');
+        });
+    });
+
+    describe("Children", () => {
+        // text children
+        test("static text child", () => {
+            const result = transform(`const el = <div>hello</div>;`);
+            expect(result).toContain('createTextNode("hello")');
+        });
+
+        test("dynamic text child", () => {
+            const result = transform(`
             let count = $state(0);
             const el = <div>{count}</div>;
           `);
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("count()");
-		});
-
-		// event handlers
-		test("onClick handler", () => {
-			const result = transform(
-				`const el = <button onClick={() => {}}>click</button>;`,
-			);
-			expect(result).toContain('addEventListener("click"');
-		});
-
-		// combined
-		test("counter shape", () => {
-			const result = transform(`
+            expect(result).toContain("createEffect(");
+            expect(result).toContain("count()");
+        });
+
+        // event handlers
+        test("onClick handler", () => {
+            const result = transform(
+                `const el = <button onClick={() => {}}>click</button>;`,
+            );
+            expect(result).toContain('addEventListener("click"');
+        });
+
+        // combined
+        test("counter shape", () => {
+            const result = transform(`
             let count = $state(0);
             const el = (
               <div>
@@ -84,25 +103,25 @@ describe("JSX", () => {
               </div>
             );
           `);
-			expect(result).toContain("createSignal(0)");
-			expect(result).toContain('addEventListener("click"');
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("createTextNode");
-		});
-	});
-
-	describe("Events", () => {
-		test("onClick handler", () => {
-			const result = transform(
-				`const el = <button onClick={() => {}}>click</button>;`,
-			);
-			expect(result).toContain('addEventListener("click"');
-		});
-	});
-
-	describe("Integration", () => {
-		test("counter shape", () => {
-			const result = transform(`
+            expect(result).toContain("createSignal(0)");
+            expect(result).toContain('addEventListener("click"');
+            expect(result).toContain("createEffect(");
+            expect(result).toContain("createTextNode");
+        });
+    });
+
+    describe("Events", () => {
+        test("onClick handler", () => {
+            const result = transform(
+                `const el = <button onClick={() => {}}>click</button>;`,
+            );
+            expect(result).toContain('addEventListener("click"');
+        });
+    });
+
+    describe("Integration", () => {
+        test("counter shape", () => {
+            const result = transform(`
                     let count = $state(0);
                     const el = (
                         <div>
@@ -111,10 +130,66 @@ describe("JSX", () => {
                         </div>
                     );
                 `);
-			expect(result).toContain("createSignal(0)");
-			expect(result).toContain('addEventListener("click"');
-			expect(result).toContain("createEffect(");
-			expect(result).toContain("createTextNode");
-		});
-	});
+            expect(result).toContain("createSignal(0)");
+            expect(result).toContain('addEventListener("click"');
+            expect(result).toContain("createEffect(");
+            expect(result).toContain("createTextNode");
+        });
+    });
+
+    describe("Bind", () => {
+      test("bindValue compiles to effect + event listener", () => {
+        const code = transform(`
+          let text = $state("");
+          const el = <input bindValue={text} />;
+        `);
+        // getter: createEffect(() => el.value = text())
+        expect(code).toContain("createEffect");
+        expect(code).toContain(".value = text()");
+        // setter: addEventListener("input", e => text.set(e.target.value))
+        expect(code).toContain('"input"');
+        expect(code).toContain("text.set(e.target.value)");
+      });
+
+      test("bindChecked compiles to change event", () => {
+        const code = transform(`
+          let checked = $state(false);
+          const el = <input type="checkbox" bindChecked={checked} />;
+        `);
+        expect(code).toContain(".checked = checked()");
+        expect(code).toContain('"change"');
+        expect(code).toContain("checked.set(e.target.checked)");
+      });
+
+      test("bindThis assigns element reference", () => {
+        const code = transform(`
+          let el = $state(null);
+          const div = <div bindThis={el} />;
+        `);
+        expect(code).toContain("el.set(");
+        expect(code).not.toContain("addEventListener");
+        expect(code).not.toContain("createEffect(");
+      });
+
+      test("bindValue on object property uses proxy assignment", () => {
+        const code = transform(`
+          let form = $state({ name: "" });
+          const el = <input bindValue={form.name} />;
+        `);
+        // getter: createEffect(() => el.value = form().name)
+        expect(code).toContain("form().name");
+        expect(code).toContain("createEffect(");
+        // setter: proxy assignment, not .set()
+        expect(code).toContain("form().name = e.target.value");
+        expect(code).not.toContain("form.name.set");
+      });
+
+      test("bindValue does not affect non-signal expressions", () => {
+        // static string should not compile — but if it does, at least no crash
+        // this is a misuse case, just verify it does not throw
+        expect(() => transform(`
+          const el = <input bindValue={"static"} />;
+        `)).not.toThrow();
+      });
+    });
 });

package/test/tree-shaking.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, spyOn, test } from "bun:test";
+import { transform } from "./helpers/transform.ts";
+
+
+describe("Dead code warnings", () => {
+    test("warns on unused $state", () => {
+        const warn = spyOn(console, "warn");
+        transform(`
+      let unused = $state(0);
+      const el = <div />;
+    `);
+        expect(warn).toHaveBeenCalledWith(
+            expect.stringContaining('unused reactive declaration: "unused"'),
+        );
+        warn.mockRestore();
+    });
+
+    test("warns on unused $derived", () => {
+        const warn = spyOn(console, "warn");
+        transform(`
+      let count = $state(0);
+      let doubled = $derived(count * 2);
+      const el = <div>{count}</div>;
+    `);
+        expect(warn).toHaveBeenCalledWith(
+            expect.stringContaining('unused reactive declaration: "doubled"'),
+        );
+        warn.mockRestore();
+    });
+
+    test("no warning when $state is used in JSX", () => {
+        const warn = spyOn(console, "warn");
+        transform(`
+      let count = $state(0);
+      const el = <div>{count}</div>;
+    `);
+        expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
+        warn.mockRestore();
+    });
+
+    test("no warning when $state is used in effect", () => {
+        const warn = spyOn(console, "warn");
+        transform(`
+      let count = $state(0);
+      $effect(() => { console.log(count); });
+    `);
+        expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('"count"'));
+        warn.mockRestore();
+    });
+
+    test("$store does not warn even if not used in same file", () => {
+        const warn = spyOn(console, "warn");
+        transform(`
+        export let count = $store(0);
+        export let user = $store({ name: "" });
+      `);
+        expect(warn).not.toHaveBeenCalledWith(
+            expect.stringContaining("unused reactive declaration")
+        );
+        warn.mockRestore();
+    });
+
+    test("$store compiles to createSignal like $state", () => {
+        const code = transform(`
+        export let count = $store(0);
+      `);
+        expect(code).toContain("createSignal(0)");
+        expect(code).not.toContain("$store");
+    });
+
+    test("$store in JSX works like $state", () => {
+        const code = transform(`
+        export let count = $store(0);
+        const el = <div>{count}</div>;
+      `);
+        expect(code).toContain("count()");
+        expect(code).not.toContain("$store");
+    });
+});