@sigil-dev/runtime 0.7.5 → 0.7.7

package/index.test.ts

@@ -5,10 +5,35 @@ import {
 	claimComment,
 	claimText,
 	createEffect,
+	createEffectPre,
+	createInspectEffect,
 	createMemo,
+	createProfilerEffect,
+	createRawSignal,
 	createSignal,
+	easeInCubic,
+	easeInOutCubic,
+	easeInOutQuad,
+	easeInOutQuart,
+	easeInOutQuint,
+	easeInOutSine,
+	easeInQuad,
+	easeInQuart,
+	easeInQuint,
+	easeInSine,
+	easeOutCubic,
+	easeOutQuad,
+	easeOutQuart,
+	easeOutQuint,
+	easeOutSine,
 	hydrateKeyedList,
+	linear,
+	ReactiveMap,
+	ReactiveSet,
 	reconcile,
+	snapshot,
+	tick,
+	tracking,
 	withEffectScope,
 } from "./index.ts";
 
@@ -84,7 +109,9 @@ describe("Runtime", () => {
 				createEffect(() => {
 					seen = count();
 				});
-				count.set(5);
+				batch(() => {
+					count.set(5);
+				});
 				expect(seen).toBe(5);
 			});
 		});
@@ -99,7 +126,9 @@ describe("Runtime", () => {
 			test("updates when dependency changes", () => {
 				const count = createSignal(2);
 				const doubled = createMemo(() => count() * 2);
-				count.set(5);
+				batch(() => {
+					count.set(5);
+				});
 				expect(doubled()).toBe(10);
 			});
 		});
@@ -320,7 +349,8 @@ describe("Runtime", () => {
 		});
 		count.set(1);
 		count.set(2);
-		expect(log).toEqual(["cleanup", "cleanup"]);
+		batch(() => {});
+		expect(log).toEqual(["cleanup"]);
 	});
 
 	test("disposer stops effect", () => {
@@ -330,9 +360,13 @@ describe("Runtime", () => {
 			count();
 			runs++;
 		});
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		stop();
-		count.set(2);
+		batch(() => {
+			count.set(2);
+		});
 		expect(runs).toBe(2); // initial + one update, not three
 	});
 
@@ -382,7 +416,7 @@ describe("batch", () => {
 		expect(runs).toBe(2); // one run after outer exits
 	});
 
-	test("outside batch runs immediately", () => {
+	test("outside batch auto-batches to microtask", () => {
 		const count = createSignal(0);
 		let runs = 0;
 		createEffect(() => {
@@ -392,7 +426,11 @@ describe("batch", () => {
 
 		count.set(1);
 		count.set(2);
-		expect(runs).toBe(3); // initial + two immediate runs
+		// Without batch, effects are auto-batched — no synchronous run
+		expect(runs).toBe(1); // initial only
+
+		batch(() => {});
+		expect(runs).toBe(2); // initial + one batched update (last write wins)
 	});
 });
 
@@ -409,7 +447,9 @@ describe("createSignal with objects", () => {
 			seen = state().name;
 		});
 		expect(seen).toBe("Alice");
-		state().name = "Bob";
+		batch(() => {
+			state().name = "Bob";
+		});
 		expect(seen).toBe("Bob");
 	});
 
@@ -421,9 +461,13 @@ describe("createSignal with objects", () => {
 			runs++;
 		});
 		expect(runs).toBe(1);
-		state().age = 31;
+		batch(() => {
+			state().age = 31;
+		});
 		expect(runs).toBe(1);
-		state().name = "Bob";
+		batch(() => {
+			state().name = "Bob";
+		});
 		expect(runs).toBe(2);
 	});
 
@@ -434,7 +478,9 @@ describe("createSignal with objects", () => {
 			seen = state().user.address.city;
 		});
 		expect(seen).toBe("NYC");
-		state().user.address.city = "LA";
+		batch(() => {
+			state().user.address.city = "LA";
+		});
 		expect(seen).toBe("LA");
 	});
 
@@ -449,7 +495,9 @@ describe("createSignal with objects", () => {
 			seen = state().address.city;
 		});
 		expect(seen).toBe("Agartha");
-		state().address.city = "Hyperborea";
+		batch(() => {
+			state().address.city = "Hyperborea";
+		});
 		expect(seen).toBe("Hyperborea");
 	});
 
@@ -460,7 +508,9 @@ describe("createSignal with objects", () => {
 			seen = state().name;
 		});
 		expect(seen).toBe("Alice");
-		state.set({ name: "Charlie", age: 25 });
+		batch(() => {
+			state.set({ name: "Charlie", age: 25 });
+		});
 		expect(seen).toBe("Charlie");
 	});
 
@@ -472,7 +522,9 @@ describe("createSignal with objects", () => {
 			runs++;
 		});
 		expect(runs).toBe(1);
-		state().name = "Bob";
+		batch(() => {
+			state().name = "Bob";
+		});
 		expect(runs).toBe(1);
 	});
 
@@ -501,7 +553,9 @@ describe("createSignal with arrays", () => {
 			len = items().length;
 		});
 		expect(len).toBe(3);
-		items().push(4);
+		batch(() => {
+			items().push(4);
+		});
 		expect(len).toBe(4);
 	});
 
@@ -513,7 +567,9 @@ describe("createSignal with arrays", () => {
 			first = items()[0];
 		});
 		expect(first).toBe(1);
-		items()[0] = 99;
+		batch(() => {
+			items()[0] = 99;
+		});
 		expect(first).toBe(99);
 	});
 
@@ -524,9 +580,13 @@ describe("createSignal with arrays", () => {
 			seen = [...items()];
 		});
 		expect(seen).toEqual([]);
-		items().push(1);
+		batch(() => {
+			items().push(1);
+		});
 		expect(seen).toEqual([1]);
-		items().push(2);
+		batch(() => {
+			items().push(2);
+		});
 		expect(seen).toEqual([1, 2]);
 	});
 
@@ -537,7 +597,9 @@ describe("createSignal with arrays", () => {
 			len = items().length;
 		});
 		expect(len).toBe(3);
-		items().pop();
+		batch(() => {
+			items().pop();
+		});
 		expect(len).toBe(2);
 	});
 
@@ -547,7 +609,9 @@ describe("createSignal with arrays", () => {
 		createEffect(() => {
 			seen = [...items()];
 		});
-		items().splice(1, 2);
+		batch(() => {
+			items().splice(1, 2);
+		});
 		expect(seen).toEqual([1, 4]);
 	});
 
@@ -555,7 +619,9 @@ describe("createSignal with arrays", () => {
 		const items = createSignal([1, 2, 3]);
 		const doubled = createMemo(() => items().map((x) => x * 2));
 		expect(doubled()).toEqual([2, 4, 6]);
-		items().push(4);
+		batch(() => {
+			items().push(4);
+		});
 		expect(doubled()).toEqual([2, 4, 6, 8]);
 	});
 });
@@ -574,7 +640,9 @@ describe("proxy edge cases", () => {
 			seen = [...state().items];
 		});
 		expect(seen).toEqual([1, 2, 3]);
-		state().items.push(4);
+		batch(() => {
+			state().items.push(4);
+		});
 		expect(seen).toEqual([1, 2, 3, 4]);
 	});
 
@@ -595,13 +663,17 @@ describe("proxy edge cases", () => {
 		expect(xRuns).toBe(1);
 		expect(yRuns).toBe(1);
 
-		state().x = 5;
+		batch(() => {
+			state().x = 5;
+		});
 		expect(xSeen).toBe(5);
 		expect(ySeen).toBe(0);
 		expect(xRuns).toBe(2);
 		expect(yRuns).toBe(1);
 
-		state().y = 10;
+		batch(() => {
+			state().y = 10;
+		});
 		expect(xSeen).toBe(5);
 		expect(ySeen).toBe(10);
 		expect(xRuns).toBe(2);
@@ -771,11 +843,15 @@ describe("Scary reactivity", () => {
 		expect(runs).toBe(1);
 
 		// flip condition, effect should now track b, not a
-		condition.set(false);
+		batch(() => {
+			condition.set(false);
+		});
 		expect(runs).toBe(2);
 
 		// updating a should NOT trigger the effect anymore
-		a.set(99);
+		batch(() => {
+			a.set(99);
+		});
 		expect(runs).toBe(2); // ← this will fail with current implementation
 	});
 });
@@ -791,7 +867,9 @@ describe("withEffectScope", () => {
 			});
 		});
 		expect(runs).toBe(1);
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		expect(runs).toBe(2);
 	});
 
@@ -805,12 +883,16 @@ describe("withEffectScope", () => {
 			});
 		});
 		expect(runs).toBe(1);
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		expect(runs).toBe(2);
 
 		dispose();
 
-		count.set(2);
+		batch(() => {
+			count.set(2);
+		});
 		expect(runs).toBe(2); // stopped — no further runs
 	});
 
@@ -829,15 +911,19 @@ describe("withEffectScope", () => {
 				runsB++;
 			});
 		});
-		a.set(1);
-		b.set(1);
+		batch(() => {
+			a.set(1);
+			b.set(1);
+		});
 		expect(runsA).toBe(2);
 		expect(runsB).toBe(2);
 
 		dispose();
 
-		a.set(2);
-		b.set(2);
+		batch(() => {
+			a.set(2);
+			b.set(2);
+		});
 		expect(runsA).toBe(2);
 		expect(runsB).toBe(2);
 	});
@@ -859,13 +945,17 @@ describe("withEffectScope", () => {
 			});
 		});
 
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		expect(outsideRuns).toBe(2);
 		expect(insideRuns).toBe(2);
 
 		dispose();
 
-		count.set(2);
+		batch(() => {
+			count.set(2);
+		});
 		expect(outsideRuns).toBe(3); // still running
 		expect(insideRuns).toBe(2); // stopped
 	});
@@ -890,12 +980,16 @@ describe("withEffectScope", () => {
 			disposeInner();
 		});
 
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		expect(outerRuns).toBe(2);
 		expect(innerRuns).toBe(1); // stopped on inner dispose
 
 		disposeOuter();
-		count.set(2);
+		batch(() => {
+			count.set(2);
+		});
 		expect(outerRuns).toBe(2); // stopped on outer dispose
 	});
 
@@ -911,11 +1005,15 @@ describe("withEffectScope", () => {
 			expect(doubled()).toBe(0);
 		});
 		expect(memoRuns).toBe(1);
-		count.set(5);
+		batch(() => {
+			count.set(5);
+		});
 		expect(memoRuns).toBe(2);
 
 		dispose();
-		count.set(10);
+		batch(() => {
+			count.set(10);
+		});
 		expect(memoRuns).toBe(2); // memo's internal effect stopped
 	});
 
@@ -930,7 +1028,9 @@ describe("withEffectScope", () => {
 		});
 		dispose();
 		dispose(); // second call must not throw or double-fire
-		count.set(1);
+		batch(() => {
+			count.set(1);
+		});
 		expect(runs).toBe(1);
 	});
 });
@@ -1063,3 +1163,450 @@ describe("hydrateKeyedList", () => {
 		expect(result.keyMap.size).toBe(0);
 	});
 });
+
+describe("A1 createRawSignal", () => {
+	test("skips proxy for objects", () => {
+		const state = createRawSignal({ name: "Alice" });
+		expect(state()).toEqual({ name: "Alice" });
+		// Raw signal — direct object, not proxied
+		const obj = state();
+		state.set({ name: "Bob" });
+		expect(state()).toEqual({ name: "Bob" });
+	});
+
+	test("works with primitives", () => {
+		const count = createRawSignal(0);
+		expect(count()).toBe(0);
+		count.set(5);
+		expect(count()).toBe(5);
+	});
+
+	test("is reactive", () => {
+		const count = createRawSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(2);
+	});
+
+	test(".peek() reads without tracking", () => {
+		const count = createRawSignal(0);
+		let runs = 0;
+		createEffect(() => {
+			count.peek();
+			runs++;
+		});
+		expect(runs).toBe(1);
+		batch(() => {
+			count.set(1);
+		});
+		expect(runs).toBe(1);
+	});
+});
+
+describe("A2 snapshot", () => {
+	test("returns primitive values as-is", () => {
+		expect(snapshot(42)).toBe(42);
+		expect(snapshot("hello")).toBe("hello");
+		expect(snapshot(null)).toBe(null);
+		expect(snapshot(undefined)).toBe(undefined);
+	});
+
+	test("unwraps proxy to plain object", () => {
+		const state = createSignal({ name: "Alice", age: 30 });
+		const snap = snapshot(state());
+		expect(snap).toEqual({ name: "Alice", age: 30 });
+		expect(snap).not.toBe(state()); // distinct reference
+	});
+
+	test("unwraps proxy to plain array", () => {
+		const items = createSignal([1, 2, 3]);
+		const snap = snapshot(items());
+		expect(snap).toEqual([1, 2, 3]);
+		expect(Array.isArray(snap)).toBe(true);
+		expect(snap).not.toBe(items()); // distinct reference
+	});
+
+	test("non-proxy objects are returned as-is", () => {
+		const obj = { plain: true };
+		expect(snapshot(obj)).toBe(obj);
+	});
+
+	test("deeply nested snapshot is fully un-proxied", () => {
+		const obj = createSignal({ a: { b: { c: 1 } } });
+		const s = snapshot(obj());
+		expect(s.a.b.c).toBe(1);
+		// s.a.b should NOT be a proxy — it's a plain object from the deep copy
+		const proxyTargetCheck = (val: object) =>
+			typeof val === "object" &&
+			val !== null &&
+			!Object.getPrototypeOf(val)?.constructor?.name?.includes("Map");
+		// Verify no nested proxy: accessing s.a.b.c should not trigger tracking
+		let tracked = false;
+		const prev = (globalThis as any).__sigil_tracking_test;
+		(globalThis as any).__sigil_tracking_test = () => (tracked = true);
+		const raw = s.a.b;
+		// No reactive tracking should happen on plain objects
+		expect(raw.c).toBe(1);
+		// Deep compare confirms it's a full independent copy
+		expect(s).toEqual({ a: { b: { c: 1 } } });
+		expect(s.a).not.toBe(obj().a);
+		expect(s.a.b).not.toBe(obj().a.b);
+	});
+});
+
+describe("A3 tracking", () => {
+	test("returns false outside effect", () => {
+		expect(tracking()).toBe(false);
+	});
+
+	test("returns true inside effect", () => {
+		let inside = false;
+		createEffect(() => {
+			inside = tracking();
+		});
+		expect(inside).toBe(true);
+	});
+
+	test("returns false after effect completes", () => {
+		createEffect(() => {
+			tracking();
+		});
+		expect(tracking()).toBe(false);
+	});
+});
+
+describe("A4 createInspectEffect", () => {
+	test("does not throw", () => {
+		const count = createSignal(0);
+		expect(() => {
+			createInspectEffect(() => [count()]);
+		}).not.toThrow();
+	});
+
+	test("accepts custom callback", () => {
+		const count = createSignal(0);
+		const logged: unknown[][] = [];
+		createInspectEffect(
+			() => [count()],
+			(vals) => logged.push(vals),
+		);
+		expect(logged.length).toBe(1);
+		expect(logged[0]).toEqual([0]);
+	});
+});
+
+describe("A5 createEffectPre", () => {
+	test("runs immediately like createEffect", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createEffectPre(() => {
+			seen = count();
+		});
+		expect(seen).toBe(0);
+	});
+
+	test("reruns on signal change", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createEffectPre(() => {
+			seen = count();
+		});
+		batch(() => {
+			count.set(5);
+		});
+		expect(seen).toBe(5);
+	});
+});
+
+describe("A7 ReactiveMap", () => {
+	test("basic set/get", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		expect(map.get("a")).toBe(1);
+	});
+
+	test("reactivity: get tracks reads", () => {
+		const map = new ReactiveMap<string, number>();
+		let size = 0;
+		createEffect(() => {
+			size = map.size;
+		});
+		expect(size).toBe(0);
+		batch(() => {
+			map.set("x", 1);
+		});
+		expect(size).toBe(1);
+	});
+
+	test("deleted key triggers reactivity", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let accessed: number | undefined;
+		createEffect(() => {
+			accessed = map.get("a");
+		});
+		expect(accessed).toBe(1);
+		batch(() => {
+			map.delete("a");
+		});
+		expect(accessed).toBe(undefined);
+	});
+
+	test("clear triggers reactivity", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let size = 0;
+		createEffect(() => {
+			size = map.size;
+		});
+		batch(() => {
+			map.clear();
+		});
+		expect(size).toBe(0);
+	});
+
+	test("forEach tracks reads", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let count = 0;
+		createEffect(() => {
+			count = 0;
+			map.forEach(() => count++);
+		});
+		expect(count).toBe(1);
+		batch(() => {
+			map.set("b", 2);
+		});
+		expect(count).toBe(2);
+	});
+
+	test("per-key granularity: setting key X does not re-trigger effect reading key Y", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		map.set("b", 2);
+		let aRuns = 0;
+		let bRuns = 0;
+		createEffect(() => {
+			map.get("a");
+			aRuns++;
+		});
+		createEffect(() => {
+			map.get("b");
+			bRuns++;
+		});
+		expect(aRuns).toBe(1);
+		expect(bRuns).toBe(1);
+
+		batch(() => {
+			map.set("a", 10); // only a-effect should rerun
+		});
+		expect(aRuns).toBe(2);
+		expect(bRuns).toBe(1);
+
+		batch(() => {
+			map.set("b", 20); // only b-effect should rerun
+		});
+		expect(aRuns).toBe(2);
+		expect(bRuns).toBe(2);
+	});
+
+	test("per-key: adding new key triggers struct but not existing key effects", () => {
+		const map = new ReactiveMap<string, number>();
+		map.set("a", 1);
+		let aRuns = 0;
+		let sizeRuns = 0;
+		createEffect(() => {
+			map.get("a");
+			aRuns++;
+		});
+		createEffect(() => {
+			map.size;
+			sizeRuns++;
+		});
+		expect(aRuns).toBe(1);
+		expect(sizeRuns).toBe(1);
+
+		batch(() => {
+			map.set("b", 2); // new key — struct changes, a's value doesn't
+		});
+		expect(aRuns).toBe(1);
+		expect(sizeRuns).toBe(2);
+	});
+});
+
+describe("A7 ReactiveSet", () => {
+	test("basic add/has", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		expect(set.has(1)).toBe(true);
+	});
+
+	test("reactivity: has tracks reads", () => {
+		const set = new ReactiveSet<number>();
+		let hasIt = false;
+		createEffect(() => {
+			hasIt = set.has(1);
+		});
+		expect(hasIt).toBe(false);
+		batch(() => {
+			set.add(1);
+		});
+		expect(hasIt).toBe(true);
+	});
+
+	test("delete triggers reactivity", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		let size = 0;
+		createEffect(() => {
+			size = set.size;
+		});
+		expect(size).toBe(1);
+		batch(() => {
+			set.delete(1);
+		});
+		expect(size).toBe(0);
+	});
+
+	test("clear triggers reactivity", () => {
+		const set = new ReactiveSet<number>();
+		set.add(1);
+		let size = 0;
+		createEffect(() => {
+			size = set.size;
+		});
+		batch(() => {
+			set.clear();
+		});
+		expect(size).toBe(0);
+	});
+
+	test("forEach tracks reads", () => {
+		const set = new ReactiveSet<string>();
+		set.add("a");
+		let count = 0;
+		createEffect(() => {
+			count = 0;
+			set.forEach(() => count++);
+		});
+		expect(count).toBe(1);
+		batch(() => {
+			set.add("b");
+		});
+		expect(count).toBe(2);
+	});
+});
+
+describe("A8 easing functions", () => {
+	test("linear is identity", () => {
+		expect(linear(0)).toBe(0);
+		expect(linear(0.5)).toBe(0.5);
+		expect(linear(1)).toBe(1);
+	});
+
+	test("easeInQuad is quadratic", () => {
+		expect(easeInQuad(0)).toBe(0);
+		expect(easeInQuad(0.5)).toBe(0.25);
+		expect(easeInQuad(1)).toBe(1);
+	});
+
+	test("easeOutQuad completes at 1", () => {
+		expect(easeOutQuad(0)).toBe(0);
+		expect(easeOutQuad(1)).toBe(1);
+	});
+
+	test("all easing functions return 0 at t=0 and 1 at t=1", () => {
+		const fns = [
+			easeInQuad,
+			easeOutQuad,
+			easeInOutQuad,
+			easeInCubic,
+			easeOutCubic,
+			easeInOutCubic,
+			easeInQuart,
+			easeOutQuart,
+			easeInOutQuart,
+			easeInQuint,
+			easeOutQuint,
+			easeInOutQuint,
+			easeInSine,
+			easeOutSine,
+			easeInOutSine,
+		];
+		for (const fn of fns) {
+			expect(fn(0)).toBeCloseTo(0, 10);
+			expect(fn(1)).toBeCloseTo(1, 10);
+		}
+	});
+});
+
+describe("A9 createProfilerEffect", () => {
+	test("runs the effect", () => {
+		let ran = false;
+		createProfilerEffect("test", () => {
+			ran = true;
+		});
+		expect(ran).toBe(true);
+	});
+
+	test("reacts to signal changes", () => {
+		const count = createSignal(0);
+		let seen = -1;
+		createProfilerEffect("test", () => {
+			seen = count();
+		});
+		expect(seen).toBe(0);
+		batch(() => {
+			count.set(5);
+		});
+		expect(seen).toBe(5);
+	});
+});
+
+describe("Array reactivity", () => {
+    test("push on $state array triggers reactivity", async () => {
+        const items = createSignal([] as string[]);
+        let count = 0;
+        createEffect(() => {
+            items(); // now auto-tracks length
+            count++;
+        });
+        await tick();
+        expect(count).toBe(1); // initial run
+        items().push("a");
+        await tick();
+        expect(count).toBe(2); // re-ran after push
+        expect(items().length).toBe(1);
+    });
+
+    test("pop on $state array triggers reactivity", async () => {
+        const items = createSignal(["a", "b"] as string[]);
+        let len = 0;
+        createEffect(() => {
+            len = items().length; // reads length, subscribes
+        });
+        await tick();
+        expect(len).toBe(2);
+        items().pop();
+        await tick();
+        expect(len).toBe(1);
+    });
+
+    test("splice on $state array triggers reactivity", async () => {
+        const items = createSignal(["a", "b", "c"] as string[]);
+        let len = 0;
+        createEffect(() => { len = items().length; });
+        await tick();
+        expect(len).toBe(3);
+        items().splice(1, 1);
+        await tick();
+        expect(len).toBe(2);
+    });
+})