@sigil-dev/compiler 0.7.6 → 0.8.0

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/magic.ts

@@ -5,6 +5,7 @@ export const MAGIC = {
 	createEffect: "createEffect",
 	createEffectPre: "createEffectPre",
 	createInspectEffect: "createInspectEffect",
+	withEffectScope: "withEffectScope",
 	tracking: "tracking",
 	snapshot: "snapshot",
 } as const;

package/src/bun-plugin.ts

@@ -1,86 +1,89 @@
-import { transformSync } from "@babel/core";
-import type { BunPlugin } from "bun";
-import sigilPlugin from "./babel/index.ts";
-import { computeHash, scopeCSS } from "./babel/util/css.ts";
-
-const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-const STYLE_TEST_RE = /<style[^>]*>[\s\S]*?<\/style>/i;
-const SOURCE_RE = /\.[jt]sx?$/;
-const JSX_RE = /\.[jt]sx$/;
-const SIGIL_MACRO_RE = /\$(?:state|store|derived|effect)\s*\(/;
-
-function normalizePath(path: string): string {
-	return path.replace(/\\/g, "/");
-}
-
-function shouldTransform(path: string): boolean {
-	const normalized = normalizePath(path);
-	if (!SOURCE_RE.test(normalized)) return false;
-	if (normalized.includes("/.grimoire/")) return false;
-	if (normalized.includes("/node_modules/")) return false;
-	if (normalized.includes("/packages/runtime/")) return false;
-	if (normalized.includes("/packages/grimoire/")) return false;
-	if (normalized.includes("/packages/compiler/")) return false;
-	return true;
-}
-
-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);
-}
-
-export function sigil(options?: {
-	mode?: "dom" | "ssr" | "hydrate";
-}): BunPlugin {
-	return {
-		name: "sigil",
-		setup(build) {
-			const transpiler = new Bun.Transpiler({ loader: "tsx" });
-
-			// When grimoire/compiler are bun-linked from the sigil monorepo,
-			// @sigil-dev/runtime resolves to the workspace source at
-			// D:\Projects\sigil\packages\runtime rather than the project's
-			// node_modules — causing "Unexpected reading file" from Bun.build.
-			// Force resolution from the project's cwd instead.
-			build.onResolve({ filter: /^@sigil-dev\/runtime($|\/)/ }, (args) => {
-				try {
-					return { path: Bun.resolveSync(args.path, process.cwd()) };
-				} catch {
-					return undefined;
-				}
-			});
-
-			build.onLoad({ filter: SOURCE_RE }, async ({ path }) => {
-				if (!shouldTransform(path)) return undefined;
-				let code = await Bun.file(path).text();
-				if (!shouldTransformSource(path, code)) return undefined;
-				// console.log("[bun-plugin] intercepting:", path);
-				const hash = computeHash(path);
-				let scopedCSS = "";
-				code = code.replace(STYLE_RE, (_, css) => {
-					scopedCSS = scopeCSS(css.trim(), hash);
-					return "";
-				});
-				const res = transformSync(code, {
-					parserOpts: {
-						plugins: [["typescript", { isTSX: true }], "jsx"],
-					},
-					plugins: [[sigilPlugin, { hash, mode: options?.mode }]],
-					filename: path,
-				});
-				let out = transpiler.transformSync(res?.code ?? "");
-				if (scopedCSS && options?.mode !== "ssr") {
-					out =
-						`
-if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
-    const __style = document.createElement('style');
-    __style.id = 'sigil-${hash}';
-    __style.textContent = ${JSON.stringify(scopedCSS)};
-    document.head.appendChild(__style);
-}` + out;
-				}
-				return { contents: out, loader: "js" };
-			});
-		},
-	};
-}
+import { transformSync } from "@babel/core";
+import type { BunPlugin } from "bun";
+import sigilPlugin from "./babel/index.ts";
+import { computeHash, scopeCSS } from "./babel/util/css.ts";
+
+const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+const STYLE_TEST_RE = /<style[^>]*>[\s\S]*?<\/style>/i;
+const SOURCE_RE = /\.[jt]sx?$/;
+const JSX_RE = /\.[jt]sx$/;
+const SIGIL_MACRO_RE = /\$(?:state|store|derived|effect)\s*\(/;
+
+function normalizePath(path: string): string {
+	return path.replace(/\\/g, "/");
+}
+
+function shouldTransform(path: string): boolean {
+	const normalized = normalizePath(path);
+	if (!SOURCE_RE.test(normalized)) return false;
+	if (normalized.includes("/.grimoire/")) return false;
+	if (normalized.includes("/node_modules/")) return false;
+	if (normalized.includes("/packages/runtime/")) return false;
+	if (normalized.includes("/packages/grimoire/")) return false;
+	if (normalized.includes("/packages/compiler/")) return false;
+	return true;
+}
+
+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)
+	);
+}
+
+export function sigil(options?: {
+	mode?: "dom" | "ssr" | "hydrate";
+}): BunPlugin {
+	return {
+		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 undefined;
+				let code = await Bun.file(path).text();
+				if (!shouldTransformSource(path, code)) return undefined;
+				// console.log("[bun-plugin] intercepting:", path);
+				const hash = computeHash(path);
+				let scopedCSS = "";
+				code = code.replace(STYLE_RE, (_, css) => {
+					scopedCSS = scopeCSS(css.trim(), hash);
+					return "";
+				});
+				const res = transformSync(code, {
+					parserOpts: {
+						plugins: [["typescript", { isTSX: true }], "jsx"],
+					},
+					plugins: [[sigilPlugin, { hash, mode: options?.mode }]],
+					filename: path,
+				});
+				let out = transpiler.transformSync(res?.code ?? "");
+				if (scopedCSS && options?.mode !== "ssr") {
+					out =
+						`
+if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
+    const __style = document.createElement('style');
+    __style.id = 'sigil-${hash}';
+    __style.textContent = ${JSON.stringify(scopedCSS)};
+    document.head.appendChild(__style);
+}` + out;
+				}
+				return { contents: out, loader: "js" };
+			});
+		},
+	};
+}

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",
 		);
 	});
 

package/test/jsx.test.ts

@@ -1,195 +1,197 @@
-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(`
-            let count = $state(0);
-            const el = <div id={count} />;
-          `);
-            expect(result).toContain("createEffect(");
-            expect(result).toContain("_el0.id = count()");
-        });
-
-        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");
-        });
-
-        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(`
-            let count = $state(0);
-            const el = (
-              <div>
-                <span>{count}</span>
-                <button onClick={() => count++}>+</button>
-              </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(`
-                    let count = $state(0);
-                    const el = (
-                        <div>
-                            <span>{count}</span>
-                            <button onClick={() => count++}>+</button>
-                        </div>
-                    );
-                `);
-            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();
-      });
-    });
-});
+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(`
+            let count = $state(0);
+            const el = <div id={count} />;
+          `);
+			expect(result).toContain("createEffect(");
+			expect(result).toContain("_el0.id = count()");
+		});
+
+		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");
+		});
+
+		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(`
+            let count = $state(0);
+            const el = (
+              <div>
+                <span>{count}</span>
+                <button onClick={() => count++}>+</button>
+              </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(`
+                    let count = $state(0);
+                    const el = (
+                        <div>
+                            <span>{count}</span>
+                            <button onClick={() => count++}>+</button>
+                        </div>
+                    );
+                `);
+			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();
+		});
+	});
+});