@ersbeth/picoflow 1.0.0 → 1.1.0

package/test/nodes/sync/flowDerivation.test.ts

@@ -0,0 +1,1373 @@
+import { describe, expect, it, vi } from "vitest";
+import { derivation, effect, signal, state } from "#package";
+
+describe("flowDerivation", () => {
+	describe("unit", () => {
+		describe("initialization", () => {
+			it("should not call compute function on creation", () => {
+				const computeFn = vi.fn(() => 42);
+				derivation(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+			});
+
+			it("should call compute function on first access", async () => {
+				const computeFn = vi.fn(() => 100);
+				const $state = state(1);
+				const $derivation = derivation((t) => {
+					computeFn();
+					return $state.get(t) * 2;
+				});
+
+				expect(computeFn).not.toHaveBeenCalled();
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should call compute function again when dependency changes", async () => {
+				const computeFn = vi.fn((t) => {
+					const $s = state(1);
+					return $s.get(t) * 2;
+				});
+				const $state = state(1);
+				const $derivation = derivation((t) => {
+					computeFn(t);
+					return $state.get(t) * 2;
+				});
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $state.set(2);
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should handle number return values", async () => {
+				const $state = state(5);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				expect(await $derivation.pick()).toBe(10);
+			});
+
+			it("should handle string return values", async () => {
+				const $state = state("hello");
+				const $derivation = derivation((t) => $state.get(t).toUpperCase());
+				expect(await $derivation.pick()).toBe("HELLO");
+			});
+
+			it("should handle object return values", async () => {
+				const $state = state({ a: 1 });
+				const $derivation = derivation((t) => ({
+					...$state.get(t),
+					b: 2,
+				}));
+				const value = await $derivation.pick();
+				expect(value).toEqual({ a: 1, b: 2 });
+			});
+
+			it("should handle array return values", async () => {
+				const $state = state([1, 2]);
+				const $derivation = derivation((t) => [...$state.get(t), 3]);
+				const value = await $derivation.pick();
+				expect(value).toEqual([1, 2, 3]);
+			});
+
+			it("should handle null return values", async () => {
+				const $state = state(true);
+				const $derivation = derivation((t) =>
+					$state.get(t) ? null : "not null",
+				);
+				expect(await $derivation.pick()).toBeNull();
+			});
+
+			it("should handle undefined return values", async () => {
+				const $state = state(true);
+				const $derivation = derivation((t) =>
+					$state.get(t) ? undefined : "defined",
+				);
+				expect(await $derivation.pick()).toBeUndefined();
+			});
+		});
+
+		describe("get", () => {
+			it("should return computed value with tracking context", () => {
+				const $state = state(5);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const $tracker = state(0);
+				const value = $derivation.get($tracker);
+				expect(value).toBe(10);
+			});
+
+			it("should compute lazy value on first get call", () => {
+				const computeFn = vi.fn((t) => {
+					const $s = state(10);
+					return $s.get(t) * 2;
+				});
+				const $state = state(10);
+				const $derivation = derivation((t) => {
+					computeFn(t);
+					return $state.get(t) * 2;
+				});
+				const $tracker = state(0);
+
+				expect(computeFn).not.toHaveBeenCalled();
+				const value = $derivation.get($tracker);
+				expect(value).toBe(20);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should recompute when dependency changes", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const $tracker = state(0);
+
+				expect($derivation.get($tracker)).toBe(2);
+
+				await $state.set(2);
+				expect($derivation.get($tracker)).toBe(4);
+			});
+		});
+
+		describe("pick", () => {
+			it("should return computed value without tracking", async () => {
+				const $state = state(15);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const value = await $derivation.pick();
+				expect(value).toBe(30);
+			});
+
+			it("should compute lazy value on first pick call", async () => {
+				const computeFn = vi.fn((t) => {
+					const $s = state(25);
+					return $s.get(t) * 2;
+				});
+				const $state = state(25);
+				const $derivation = derivation((t) => {
+					computeFn(t);
+					return $state.get(t) * 2;
+				});
+
+				expect(computeFn).not.toHaveBeenCalled();
+				const value = await $derivation.pick();
+				expect(value).toBe(50);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should recompute when dependency changes", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+
+				expect(await $derivation.pick()).toBe(2);
+
+				await $state.set(2);
+				expect(await $derivation.pick()).toBe(4);
+			});
+		});
+
+		describe("refresh", () => {
+			it("should force recomputation", async () => {
+				const $state = state(1);
+				const computeFn = vi.fn((t) => $state.get(t) * 2);
+				const $derivation = derivation(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $derivation.refresh();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should return a Promise", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const result = $derivation.refresh();
+				expect(result).toBeInstanceOf(Promise);
+			});
+
+			it("should not notify when refresh returns same value", async () => {
+				const $state = state(5);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				// Value is 10, refresh will compute same value
+				await $derivation.refresh();
+
+				// Wait to ensure no additional calls
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(1);
+			});
+
+			it("should notify when refresh returns different value", async () => {
+				let multiplier = 2;
+				const $state = state(5);
+				const $derivation = derivation((t) => $state.get(t) * multiplier);
+				const listener = vi.fn();
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				multiplier = 3;
+				await $derivation.refresh();
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+			});
+
+			it("should recompute even if not dirty", async () => {
+				const $state = state(1);
+				const computeFn = vi.fn((t) => $state.get(t) * 2);
+				const $derivation = derivation(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				// Not dirty, but refresh forces recomputation
+				await $derivation.refresh();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("watch", () => {
+			it("should register dependency when watch is called", () => {
+				const $state = state(35);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const $tracker = state(0);
+
+				expect(() => $derivation.watch($tracker)).not.toThrow();
+			});
+
+			it("should compute lazy value when watch is called", () => {
+				const computeFn = vi.fn((t) => {
+					const $s = state(40);
+					return $s.get(t) * 2;
+				});
+				const $state = state(40);
+				const $derivation = derivation((t) => {
+					computeFn(t);
+					return $state.get(t) * 2;
+				});
+				const $tracker = state(0);
+
+				expect(computeFn).not.toHaveBeenCalled();
+				$derivation.watch($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+		});
+
+		describe("subscribe", () => {
+			it("should return a disposer function", () => {
+				const $state = state(50);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+				const disposer = $derivation.subscribe(listener);
+
+				expect(typeof disposer).toBe("function");
+			});
+
+			it("should call listener immediately with computed value", async () => {
+				const $state = state(55);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+				expect(listener).toHaveBeenLastCalledWith(110);
+			});
+
+			it("should call listener when value changes", async () => {
+				const $state = state(60);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(listener);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $state.set(70);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+				expect(listener).toHaveBeenLastCalledWith(140);
+			});
+
+			it("should not call listener when value does not change", async () => {
+				const $state = state(75);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(listener);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $state.set(75);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(1);
+			});
+
+			it("should support multiple subscriptions", async () => {
+				const $state = state(80);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener1 = vi.fn();
+				const listener2 = vi.fn();
+				const listener3 = vi.fn();
+
+				$derivation.subscribe(listener1);
+				$derivation.subscribe(listener2);
+				$derivation.subscribe(listener3);
+
+				await vi.waitFor(() => {
+					expect(listener1).toHaveBeenCalledTimes(1);
+					expect(listener2).toHaveBeenCalledTimes(1);
+					expect(listener3).toHaveBeenCalledTimes(1);
+				});
+
+				expect(listener1).toHaveBeenLastCalledWith(160);
+				expect(listener2).toHaveBeenLastCalledWith(160);
+				expect(listener3).toHaveBeenLastCalledWith(160);
+			});
+
+			it("should dispose effect when disposer is called", async () => {
+				const $state = state(85);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				const unsubscribe = $derivation.subscribe(listener);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $state.set(90);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+
+				unsubscribe();
+
+				await $state.set(95);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("trigger", () => {
+			it("should return a Promise", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const result = $derivation.trigger();
+				expect(result).toBeInstanceOf(Promise);
+			});
+
+			it("should allow multiple triggers", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const promise1 = $derivation.trigger();
+				const promise2 = $derivation.trigger();
+				const promise3 = $derivation.trigger();
+
+				expect(promise1).toBeInstanceOf(Promise);
+				expect(promise2).toBeInstanceOf(Promise);
+				expect(promise3).toBeInstanceOf(Promise);
+
+				await Promise.all([promise1, promise2, promise3]);
+			});
+		});
+
+		describe("disposal", () => {
+			it("should have disposed property set to false initially", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				expect($derivation.disposed).toBe(false);
+			});
+
+			it("should have disposed property set to true after disposal", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				$derivation.dispose();
+				expect($derivation.disposed).toBe(true);
+			});
+
+			it("should throw error when disposed twice", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				$derivation.dispose();
+				expect(() => $derivation.dispose()).toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should accept self option without throwing", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				expect(() => $derivation.dispose({ self: true })).not.toThrow();
+				expect($derivation.disposed).toBe(true);
+			});
+
+			it("should accept default options without throwing", () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				expect(() => $derivation.dispose()).not.toThrow();
+				expect($derivation.disposed).toBe(true);
+			});
+		});
+
+		describe("special cases", () => {
+			it("should handle dynamic dependencies - dependencies change between computations", async () => {
+				const $state1 = state(1);
+				const $state2 = state(10);
+				const $cond = state(true);
+				const $derivation = derivation((t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t) * 2;
+					}
+					return $state2.get(t) * 2;
+				});
+
+				// Initially depends on state1
+				expect(await $derivation.pick()).toBe(2);
+
+				// Change state1 - should recompute
+				await $state1.set(2);
+				expect(await $derivation.pick()).toBe(4);
+
+				// Switch to state2 dependency
+				await $cond.set(false);
+				expect(await $derivation.pick()).toBe(20);
+
+				// Change state2 - should recompute
+				await $state2.set(20);
+				expect(await $derivation.pick()).toBe(40);
+
+				// Change state1 - should NOT recompute (no longer a dependency)
+				await $state1.set(100);
+				expect(await $derivation.pick()).toBe(40);
+			});
+
+			it("should unregister dependencies that are no longer used", async () => {
+				const $state1 = state(1);
+				const $state2 = state(10);
+				const $cond = state(true);
+				const $derivation = derivation((t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t);
+					}
+					return $state2.get(t);
+				});
+
+				await $derivation.pick();
+				// Initially depends on state1
+
+				await $cond.set(false);
+				await $derivation.pick();
+				// Now depends on state2, state1 should be unregistered
+			});
+
+			it("should mark as dirty when dependency changes", async () => {
+				const $state = state(1);
+				const computeFn = vi.fn((t) => $state.get(t) * 2);
+				const $derivation = derivation(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				// Change dependency - marks as dirty but doesn't recompute yet
+				await $state.set(2);
+
+				// Next access triggers recomputation
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should recompute only on next access when dirty", async () => {
+				const $state = state(1);
+				const computeFn = vi.fn((t) => $state.get(t) * 2);
+				const $derivation = derivation(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				// Multiple dependency changes
+				await $state.set(2);
+				await $state.set(3);
+				await $state.set(4);
+
+				// Still only called once more (lazy recomputation)
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should handle nested derivations", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivation((t) => $derivation1.get(t) * 2);
+
+				expect(await $derivation2.pick()).toBe(4);
+
+				await $state.set(2);
+				expect(await $derivation2.pick()).toBe(8);
+			});
+
+			it("should handle compute function that returns undefined", async () => {
+				const $state = state(true);
+				const $derivation = derivation((t) =>
+					$state.get(t) ? undefined : "defined",
+				);
+				expect(await $derivation.pick()).toBeUndefined();
+			});
+
+			it("should handle compute function that throws error", async () => {
+				const error = new Error("Compute error");
+				const $state = state(1);
+				const $derivation = derivation((t) => {
+					if ($state.get(t) === 1) {
+						throw error;
+					}
+					return $state.get(t) * 2;
+				});
+
+				await expect($derivation.pick()).rejects.toThrow("Compute error");
+			});
+		});
+
+		describe("error handling", () => {
+			describe("compute function errors", () => {
+				it("should propagate error when pick is called with throwing compute", async () => {
+					const error = new Error("Compute pick error");
+					const $derivation = derivation(() => {
+						throw error;
+					});
+
+					await expect($derivation.pick()).rejects.toThrow(
+						"Compute pick error",
+					);
+				});
+
+				it("should propagate error when pick throws on subsequent compute", async () => {
+					let throwNow = false;
+					const $state = state(1);
+					const $derivation = derivation((t) => {
+						if (throwNow) {
+							throw new Error("Compute pick error");
+						}
+						throwNow = true;
+						return $state.get(t);
+					});
+
+					expect(await $derivation.pick()).toBe(1);
+
+					await $state.set(2);
+					await expect($derivation.pick()).rejects.toThrow(
+						"Compute pick error",
+					);
+				});
+
+				it("should propagate error when get is called with throwing compute", () => {
+					const error = new Error("Compute get error");
+					const $derivation = derivation(() => {
+						throw error;
+					});
+
+					expect(() => $derivation.get(state(0))).toThrow("Compute get error");
+				});
+
+				it("should propagate error when get throws on subsequent compute", async () => {
+					let throwNow = false;
+					const $state = state(1);
+					const $derivation = derivation((t) => {
+						if (throwNow) {
+							throw new Error("Compute get error");
+						}
+						throwNow = true;
+						return $state.get(t);
+					});
+					const $tracker = state(0);
+
+					expect($derivation.get($tracker)).toBe(1);
+					await $state.set(2);
+					expect(() => $derivation.get($tracker)).toThrow("Compute get error");
+				});
+			});
+
+			describe("disposed derivation", () => {
+				it("should throw error when pick is called after disposal", async () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+
+					await $derivation.pick();
+					$derivation.dispose();
+
+					await expect($derivation.pick()).rejects.toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+
+				it("should throw error when get is called after disposal", () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+					const $tracker = state(0);
+
+					$derivation.get($tracker);
+					$derivation.dispose();
+
+					expect(() => $derivation.get($tracker)).toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+
+				it("should throw error when refresh is called after disposal", async () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+
+					$derivation.dispose();
+
+					await expect($derivation.refresh()).rejects.toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+
+				it("should throw error when watch is called after disposal", () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+					const $tracker = state(0);
+
+					$derivation.watch($tracker);
+					$derivation.dispose();
+
+					expect(() => $derivation.watch($tracker)).toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+
+				it("should throw error when subscribe is called after disposal", () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+					const listener = vi.fn();
+
+					$derivation.dispose();
+
+					expect(() => $derivation.subscribe(listener)).toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+
+				it("should throw error when trigger is called after disposal", async () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+					$derivation.dispose();
+					await expect($derivation.trigger()).rejects.toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+			});
+		});
+	});
+
+	describe("with effect", () => {
+		describe("get", () => {
+			it("should create reactive dependency when get is used in effect", async () => {
+				const $state = state(100);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+
+				effect((t) => {
+					$derivation.get(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+			});
+
+			it("should call effect with initial computed value", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+			});
+
+			it("should call effect when dependency changes", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				await $state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should not call effect when value does not change", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				await $state.set(1);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should not call effect after effect is disposed", async () => {
+				const $state = state(1);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				const $effect = effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				await $state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$effect.dispose();
+
+				await $state.set(3);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should support multiple effects depending on same derivation", async () => {
+				const $state = state(200);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn1 = vi.fn();
+				const effectFn2 = vi.fn();
+				const effectFn3 = vi.fn();
+
+				effect((t) => {
+					$derivation.get(t);
+					effectFn1();
+				});
+
+				effect((t) => {
+					$derivation.get(t);
+					effectFn2();
+				});
+
+				effect((t) => {
+					$derivation.get(t);
+					effectFn3();
+				});
+
+				await vi.waitFor(() => {
+					expect(effectFn1).toHaveBeenCalledTimes(1);
+					expect(effectFn2).toHaveBeenCalledTimes(1);
+					expect(effectFn3).toHaveBeenCalledTimes(1);
+				});
+
+				await $state.set(300);
+				await vi.waitFor(() => {
+					expect(effectFn1).toHaveBeenCalledTimes(2);
+					expect(effectFn2).toHaveBeenCalledTimes(2);
+					expect(effectFn3).toHaveBeenCalledTimes(2);
+				});
+			});
+
+			it("should support effect with get and untracked get mixed", async () => {
+				const $state1 = state(10);
+				const $state2 = state(20);
+				const $derivation1 = derivation((t) => $state1.get(t) * 2);
+				const $derivation2 = derivation((t) => $state2.get(t) * 2);
+				const effectFn = vi.fn();
+
+				effect(async (t) => {
+					const tracked = $derivation1.get(t);
+					const untracked = $derivation2.get(null);
+					effectFn(tracked, untracked);
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(20, 40);
+
+				// Changing derivation1 should trigger effect
+				await $state1.set(11);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(22, 40);
+
+				// Changing derivation2 should not trigger effect (untracked)
+				await $state2.set(21);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should support effect depending on multiple derivations", async () => {
+				const $stateA = state(5);
+				const $stateB = state(10);
+				const $derivationA = derivation((t) => $stateA.get(t) * 2);
+				const $derivationB = derivation((t) => $stateB.get(t) * 2);
+				const effectFn = vi.fn();
+
+				effect((t) => {
+					const a = $derivationA.get(t);
+					const b = $derivationB.get(t);
+					effectFn(a, b);
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(10, 20);
+
+				await $stateA.set(6);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(12, 20);
+
+				await $stateB.set(11);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(12, 22);
+			});
+		});
+
+		describe("watch", () => {
+			it("should register dependency when watch is used in effect", async () => {
+				const $state = state(400);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+
+				effect((t) => {
+					$derivation.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+			});
+
+			it("should trigger re-runs when derivation changes after watch", async () => {
+				const $state = state(500);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+
+				effect((t) => {
+					$derivation.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				await $state.set(600);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+			});
+		});
+
+		describe("subscribe", () => {
+			it("should create effect internally when subscribe is used", async () => {
+				const $state = state(700);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+				expect(listener).toHaveBeenLastCalledWith(1400);
+			});
+
+			it("should support multiple subscriptions with effects", async () => {
+				const $state = state(800);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener1 = vi.fn();
+				const listener2 = vi.fn();
+
+				$derivation.subscribe(listener1);
+				$derivation.subscribe(listener2);
+
+				await vi.waitFor(() => {
+					expect(listener1).toHaveBeenCalledTimes(1);
+					expect(listener2).toHaveBeenCalledTimes(1);
+				});
+
+				await $state.set(900);
+				await vi.waitFor(() => {
+					expect(listener1).toHaveBeenCalledTimes(2);
+					expect(listener2).toHaveBeenCalledTimes(2);
+				});
+			});
+
+			it("should dispose effect when disposer is called", async () => {
+				const $state = state(1000);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				const unsubscribe = $derivation.subscribe(listener);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $state.set(1100);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+
+				unsubscribe();
+
+				await $state.set(1200);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("error handling", () => {
+			describe("compute function errors", () => {
+				it("should propagate error when lazy compute throws in effect", async () => {
+					const error = new Error("Effect compute error");
+					const $derivation = derivation(() => {
+						throw error;
+					});
+
+					const $effect = effect((t) => {
+						$derivation.get(t);
+					});
+
+					await expect($effect.settled).rejects.toThrow("Effect compute error");
+				});
+
+				it("should propagate error when lazy compute throws on subsequent effect run", async () => {
+					const $state = state(1);
+					const $derivation = derivation((t) => {
+						const value = $state.get(t);
+						if (value > 1) {
+							throw new Error("Effect compute error");
+						}
+						return value;
+					});
+
+					const $effect = effect((t) => {
+						$derivation.get(t);
+					});
+
+					await expect($effect.settled).resolves.toBeUndefined();
+
+					await expect($state.set(2)).rejects.toThrow("Effect compute error");
+					await expect($effect.settled).rejects.toThrow("Effect compute error");
+				});
+			});
+
+			describe("disposed derivation", () => {
+				it("should throw error when creating an effect with a disposed derivation", async () => {
+					const $derivation = derivation((t) => state(1).get(t) * 2);
+
+					$derivation.dispose();
+
+					const $effect = effect((t) => {
+						$derivation.get(t);
+					});
+
+					await expect($effect.settled).rejects.toThrow(
+						"[PicoFlow] Primitive is disposed",
+					);
+				});
+			});
+		});
+
+		describe("disposal", () => {
+			it("should dispose effects when derivation is disposed", async () => {
+				const $state = state(1300);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				const $effect = effect((t) => {
+					$derivation.get(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect($effect.disposed).toBe(false);
+
+				$derivation.dispose();
+
+				expect($effect.disposed).toBe(true);
+			});
+
+			it("should not dispose effects when derivation is disposed with self option", async () => {
+				const $state = state(1400);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				const $effect = effect((t) => {
+					$derivation.get(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect($effect.disposed).toBe(false);
+
+				$derivation.dispose({ self: true });
+
+				expect($effect.disposed).toBe(false);
+				expect($derivation.disposed).toBe(true);
+			});
+
+			it("should unregister effects when derivation is disposed with self option", async () => {
+				const $state = state(1500);
+				const $derivation = derivation((t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				const $effect = effect((t) => {
+					$derivation.get(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$derivation.dispose({ self: true });
+
+				// Effect should still be active but not notified
+				expect($effect.disposed).toBe(false);
+
+				// But derivation is disposed so operations should fail
+				const $tracker = state(0);
+				expect(() => $derivation.get($tracker)).toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+		});
+
+		describe("dependencies", () => {
+			it("should handle chained dependencies", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivation((t) => $derivation1.get(t) * 2);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				await $state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(8);
+			});
+
+			it("should handle multiple dependencies", async () => {
+				const $state1 = state(1);
+				const $state2 = state(2);
+				const $derivation = derivation((t) => $state1.get(t) + $state2.get(t));
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(3);
+
+				await $state1.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				await $state2.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(5);
+			});
+
+			it("should handle multiple dependants", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivation((t) => $state.get(t) * 3);
+				const effect1Fn = vi.fn();
+				const effect2Fn = vi.fn();
+
+				effect((t) => effect1Fn($derivation1.get(t)));
+				effect((t) => effect2Fn($derivation2.get(t)));
+
+				await vi.waitFor(() => {
+					expect(effect1Fn).toHaveBeenCalledTimes(1);
+					expect(effect2Fn).toHaveBeenCalledTimes(1);
+				});
+				expect(effect1Fn).toHaveBeenLastCalledWith(2);
+				expect(effect2Fn).toHaveBeenLastCalledWith(3);
+
+				await $state.set(2);
+				await vi.waitFor(() => {
+					expect(effect1Fn).toHaveBeenCalledTimes(2);
+					expect(effect2Fn).toHaveBeenCalledTimes(2);
+				});
+				expect(effect1Fn).toHaveBeenLastCalledWith(4);
+				expect(effect2Fn).toHaveBeenLastCalledWith(6);
+			});
+
+			it("should handle derivation depending on state and signal", async () => {
+				const $signal = signal();
+				const $state = state(1);
+				const $derivation = derivation((t) => {
+					$signal.watch(t);
+					return $state.get(t) * 2;
+				});
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				await $state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should handle derivation depending on multiple states", async () => {
+				const $state1 = state(5);
+				const $state2 = state(10);
+				const $state3 = state(15);
+				const $derivation = derivation(
+					(t) => $state1.get(t) + $state2.get(t) + $state3.get(t),
+				);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(30);
+
+				await $state1.set(6);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(31);
+			});
+
+			it("should handle derivation depending on multiple signals", async () => {
+				const $signal1 = signal();
+				const $signal2 = signal();
+				const $derivation = derivation((t) => {
+					$signal1.watch(t);
+					$signal2.watch(t);
+				});
+				const effectFn = vi.fn();
+				effect((t) => {
+					$derivation.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$signal1.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+
+				$signal2.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+			});
+
+			it("should handle derivation depending on state and other derivation", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivation(
+					(t) => $state.get(t) + $derivation1.get(t),
+				);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(3);
+
+				await $state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(6);
+			});
+		});
+
+		describe("patterns", () => {
+			it("should handle diamond pattern", async () => {
+				const $stateA = state(1);
+				const $aMult3 = derivation((t) => $stateA.get(t) * 3);
+				const $aMult2 = derivation((t) => $stateA.get(t) * 2);
+				const $addAmult3Amult2 = derivation(
+					(t) => $aMult3.get(t) + $aMult2.get(t),
+				);
+
+				const effectFn = vi.fn();
+				effect((t) => effectFn($addAmult3Amult2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(5);
+
+				await $stateA.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(10);
+
+				await $stateA.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(15);
+			});
+
+			it("should handle multi diamond pattern", async () => {
+				const $stateA = state(1);
+				const $stateB = state(2);
+				const $addAB = derivation((t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a + b;
+				});
+
+				const $multiplyAB = derivation((t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a * b;
+				});
+
+				const $addAndMultiply = derivation((t) => {
+					const add = $addAB.get(t);
+					const multiply = $multiplyAB.get(t);
+					return add * multiply;
+				});
+
+				const effectFn = vi.fn();
+				effect((t) => effectFn($addAndMultiply.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(6);
+
+				await $stateA.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(16);
+
+				await $stateB.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(30);
+			});
+
+			it("should handle derivation with conditional dependencies", async () => {
+				const obj = {
+					cond: state(false),
+					b: state(2),
+				};
+
+				const $state = state(obj);
+				const $derivation = derivation((t) => {
+					const cond = $state.get(t).cond.get(t);
+					if (cond) {
+						return $state.get(t).b.get(t) * 2;
+					}
+					return 0;
+				});
+
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(0);
+
+				(await $state.pick()).cond.set(true);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				await $state.set({
+					cond: state(false),
+					b: state(3),
+				});
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(0);
+
+				(await $state.pick()).cond.set(true);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+				expect(effectFn).toHaveBeenLastCalledWith(6);
+			});
+
+			it("should handle derivation with dynamic dependencies", async () => {
+				const $state1 = state(1);
+				const $state2 = state(10);
+				const $cond = state(true);
+				const $derivation = derivation((t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t) * 2;
+					}
+					return $state2.get(t) * 2;
+				});
+
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				await $state1.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				await $cond.set(false);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(20);
+
+				await $state2.set(20);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+				expect(effectFn).toHaveBeenLastCalledWith(40);
+			});
+
+			it("should handle nested states in derivation", async () => {
+				const obj1 = {
+					cond: state(false),
+					num: state(2),
+					dispose: (options: { self: boolean }) => {
+						obj1.cond.dispose(options);
+						obj1.num.dispose(options);
+					},
+				};
+				const obj2 = {
+					cond: state(false),
+					num: state(4),
+					dispose: (options: { self: boolean }) => {
+						obj2.cond.dispose(options);
+						obj2.num.dispose(options);
+					},
+				};
+				const $state = state(obj1);
+				const $derivationCond = derivation((t) => $state.get(t).cond.get(t));
+				const $derivationNum = derivation((t) => $state.get(t).num.get(t) * 2);
+				const effectCondFn = vi.fn();
+				const effectNumFn = vi.fn();
+				effect((t) => effectCondFn($derivationCond.get(t)));
+				effect((t) => effectNumFn($derivationNum.get(t)));
+
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(1));
+				expect(effectCondFn).toHaveBeenLastCalledWith(false);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(1));
+				expect(effectNumFn).toHaveBeenLastCalledWith(4);
+
+				(await $state.pick()).num.set(3);
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(1));
+				expect(effectCondFn).toHaveBeenLastCalledWith(false);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(2));
+				expect(effectNumFn).toHaveBeenLastCalledWith(6);
+
+				(await $state.pick()).cond.set(true);
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(2));
+				expect(effectCondFn).toHaveBeenLastCalledWith(true);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(2));
+				expect(effectNumFn).toHaveBeenLastCalledWith(6);
+
+				$state.set(obj2);
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(3));
+				expect(effectCondFn).toHaveBeenLastCalledWith(false);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(3));
+				expect(effectNumFn).toHaveBeenLastCalledWith(8);
+
+				(await $state.pick()).cond.set(true);
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(4));
+				expect(effectCondFn).toHaveBeenLastCalledWith(true);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(3));
+				expect(effectNumFn).toHaveBeenLastCalledWith(8);
+
+				(await $state.pick()).num.set(5);
+				await vi.waitFor(() => expect(effectCondFn).toHaveBeenCalledTimes(4));
+				expect(effectCondFn).toHaveBeenLastCalledWith(true);
+				await vi.waitFor(() => expect(effectNumFn).toHaveBeenCalledTimes(4));
+				expect(effectNumFn).toHaveBeenLastCalledWith(10);
+			});
+		});
+
+		describe("with refresh", () => {
+			it("should force recomputation in effect", async () => {
+				let multiplier = 2;
+				const $state = state(5);
+				const $derivation = derivation((t) => $state.get(t) * multiplier);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(10);
+
+				multiplier = 3;
+				await $derivation.refresh();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(15);
+			});
+
+			it("shouldn't trigger effects even if dependencies have not changed", async () => {
+				const $state = state(1);
+				const computeFn = vi.fn((t) => $state.get(t) * 2);
+				const $derivation = derivation(computeFn);
+				const effectFn = vi.fn();
+				effect((t) => effectFn($derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				// Refresh forces recomputation even though state hasn't changed
+				await $derivation.refresh();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+		});
+	});
+});