@sigil-dev/compiler 0.6.12 → 0.7.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.6.12",
+  "version": "0.7.1",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {

package/src/babel/index.ts

@@ -7,6 +7,7 @@ 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";
+import { warnDeadReactivity } from "./util/dead-code.ts";
 
 const SSR_HELPERS = template.statements.ast(`
     const __SAFE = Symbol.for('sigil.safe');
@@ -32,208 +33,222 @@ const SSR_HELPERS = template.statements.ast(`
  * 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);
-		}
-	}
+    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";
+    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;
+    const signals = new Set<string>();
+    const storeSignals = 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";
+    return {
+        name: "sigil",
+        visitor: {
+            Program: {
+                enter(path, state) {
+                    signals.clear();
+                    storeSignals.clear();
+                    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;
-					}
+                    // 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)),
-							]),
-						),
-						[],
-					),
-				);
-			},
-		},
-	};
+                    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"),
+                        ),
+                    );
+                },
+                exit(path, state) {
+                    console.log("signals at exit:", [...signals]);
+                    warnDeadReactivity(path, signals, storeSignals, state.filename)
+                }
+            },
+            VariableDeclaration(path) {
+              for (const declarator of path.get("declarations")) {
+                const macro = getMacro(declarator);
+                if (!macro) continue;
+                const { name, init } = macro;
+                const varName = t.isIdentifier(declarator.node.id)
+                  ? declarator.node.id.name
+                  : null;
+
+                if (name === "$state" || name === "$store") {
+                  isSSR
+                    ? handleStateSSR(path, declarator, init)
+                    : handleState(path, declarator, init, signals);
+                  if (name === "$store" && varName) {
+                    storeSignals.add(varName);
+                  }
+                } 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)),
+                            ]),
+                        ),
+                        [],
+                    ),
+                );
+            },
+        },
+    };
 }

package/src/babel/jsx/element.ts

@@ -1,5 +1,6 @@
 import { types as t } from "@babel/core";
-import { buildBind } from "../util/bind";
+import {generate} from "@babel/generator"
+import { buildBind, buildProxyBind } from "../util/bind";
 import { buildAnchorMount } from "./anchor-mount";
 import { collectChildren } from "./children";
 import { processFragment } from "./fragment";
@@ -181,7 +182,29 @@ export function processElement(
                 ),
             );
         } else if (attrName.startsWith("bind")) {
+          const signal = (attr.value as t.JSXExpressionContainer)
+            .expression as t.Expression;
+
+          const isTopLevelSignal = t.isCallExpression(signal) &&
+            t.isIdentifier((signal as t.CallExpression).callee) &&
+            signals.has(((signal as t.CallExpression).callee as t.Identifier).name);
+
+          const isMemberOfSignal = t.isMemberExpression(signal) &&
+            t.isCallExpression((signal as t.MemberExpression).object) &&
+            t.isIdentifier(((signal as t.MemberExpression).object as t.CallExpression).callee) &&
+            signals.has((((signal as t.MemberExpression).object as t.CallExpression).callee as t.Identifier).name);
+
+          if (isTopLevelSignal) {
             buildBind(varName, attrName, attr, statements);
+          } else if (isMemberOfSignal) {
+            buildProxyBind(varName, attrName, attr, statements, signal);
+          } else {
+            console.warn(
+              `[sigil] ${attrName}={...} requires a $state signal or $state object property. ` +
+              `Got: ${generate(signal).code}. ` +
+              `Hint: change to a $state() call.`
+            );
+          }
         } else if (t.isStringLiteral(attr.value)) {
             statements.push(
                 t.expressionStatement(

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

@@ -136,4 +136,60 @@ describe("JSX", () => {
             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");
+    });
+});