@ersbeth/picoflow 1.0.1 → 1.1.1

package/test/nodes/mixed/derivation.test.ts

@@ -0,0 +1,1527 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	derivation,
+	derivationAsync,
+	effect,
+	FlowGraph,
+	signal,
+	state,
+} from "#package";
+
+describe("derivationAsync", () => {
+	beforeEach(() => {
+		FlowGraph.clear();
+	});
+
+	describe("unit", () => {
+		describe("constructor", () => {
+			it("should create derivation with compute function (lazy evaluation)", () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+				expect($derivation).toBeDefined();
+			});
+
+			it("should not execute compute function immediately upon creation", () => {
+				const computeFn = vi.fn(async () => 42);
+				derivationAsync(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+			});
+
+			it("should execute compute function on first access via pick()", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should execute compute function on first access via get()", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+				const $tracker = signal();
+
+				expect(computeFn).not.toHaveBeenCalled();
+				await $derivation.get($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+		});
+
+		describe("get()", () => {
+			it("should return Promise<T> when called with tracker", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				const result = $derivation.get($tracker);
+				expect(result).toBeInstanceOf(Promise);
+				expect(await result).toBe(20);
+			});
+
+			it("should register dependency when called with tracker", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				await $derivation.get($tracker);
+				expect($derivation.disposed).toBe(false);
+
+				$state.set(20);
+				expect(await $derivation.pick()).toBe(40);
+			});
+
+			it("should throw error when called after disposal", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				$derivation.dispose();
+				await expect($derivation.get($tracker)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should compute value lazily on first get() call", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+				const $tracker = signal();
+
+				expect(computeFn).not.toHaveBeenCalled();
+				await $derivation.get($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should cache computed value until dependencies change", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+				const $tracker = signal();
+
+				await $derivation.get($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $derivation.get($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$state.set(20);
+				await $derivation.get($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should recompute when dependencies change", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				expect(await $derivation.get($tracker)).toBe(20);
+
+				$state.set(20);
+				expect(await $derivation.get($tracker)).toBe(40);
+			});
+		});
+
+		describe("pick()", () => {
+			it("should return Promise<T> without tracking", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				const result = $derivation.pick();
+				expect(result).toBeInstanceOf(Promise);
+				expect(await result).toBe(20);
+			});
+
+			it("should not register dependency when called", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				await $derivation.pick();
+				expect(await $derivation.pick()).toBe(20);
+
+				$state.set(20);
+				expect(await $derivation.pick()).toBe(40);
+			});
+
+			it("should throw error when called after disposal", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				$derivation.dispose();
+				await expect($derivation.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should compute value lazily on first pick() call", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should use cached value when not dirty", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should recompute when dirty", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$state.set(20);
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("watch()", () => {
+			it("should register dependency when called", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				$derivation.watch($tracker);
+				expect($derivation.disposed).toBe(false);
+			});
+
+			it("should trigger computation when called", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+				const $tracker = signal();
+
+				expect(computeFn).not.toHaveBeenCalled();
+				$derivation.watch($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should throw error when called after disposal", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				const $tracker = signal();
+
+				$derivation.dispose();
+				await expect($derivation.watch($tracker)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should not recompute if already computed and not dirty", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+				const $tracker = signal();
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$derivation.watch($tracker);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+		});
+
+		describe("subscribe()", () => {
+			it("should call listener immediately with current value", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+				const value = await listener.mock.calls[0][0];
+				expect(value).toBe(20);
+			});
+
+			it("should call listener when value changes", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(async (promise) => listener(await promise));
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $state.set(20);
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+				const value = await listener.mock.calls[1][0];
+				expect(value).toBe(40);
+			});
+
+			it("should return disposer function", () => {
+				const $derivation = derivationAsync(async () => 42);
+				const listener = vi.fn();
+
+				const disposer = $derivation.subscribe(listener);
+				expect(typeof disposer).toBe("function");
+			});
+
+			it("should stop calling listener after disposal", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				const disposer = $derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				disposer();
+
+				$state.set(20);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(1);
+			});
+
+			it("should throw error when called after derivation disposal", () => {
+				const $derivation = derivationAsync(async () => 42);
+				const listener = vi.fn();
+
+				$derivation.dispose();
+				expect(() => $derivation.subscribe(listener)).toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should handle async listener functions", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn(async (valuePromise) => {
+					const value = await valuePromise;
+					expect(value).toBe(20);
+				});
+
+				$derivation.subscribe(listener);
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+			});
+		});
+
+		describe("trigger()", () => {
+			it("should mark derivation as dirty when triggered", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $derivation.trigger();
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should notify dependents when triggered", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				const listener = vi.fn();
+
+				$derivation.subscribe(async (promise) => listener(await promise));
+
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				await $derivation.trigger();
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(2));
+			});
+
+			it("should return Promise when triggered", () => {
+				const $derivation = derivationAsync(async () => 42);
+				const result = $derivation.trigger();
+				expect(result).toBeInstanceOf(Promise);
+			});
+
+			it("should throw error when triggered after disposal", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				$derivation.dispose();
+
+				await expect($derivation.trigger()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+		});
+
+		describe("disposal", () => {
+			it("should have disposed property set to false initially", () => {
+				const $derivation = derivationAsync(async () => 42);
+				expect($derivation.disposed).toBe(false);
+			});
+
+			it("should have disposed property set to true after disposal", () => {
+				const $derivation = derivationAsync(async () => 42);
+				$derivation.dispose();
+				expect($derivation.disposed).toBe(true);
+			});
+
+			it("should throw error when disposed twice", () => {
+				const $derivation = derivationAsync(async () => 42);
+				$derivation.dispose();
+				expect(() => $derivation.dispose()).toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw error when get() called after disposal", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				const $tracker = signal();
+				$derivation.dispose();
+
+				await expect($derivation.get($tracker)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw error when pick() called after disposal", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				$derivation.dispose();
+
+				await expect($derivation.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw error when watch() called after disposal", async () => {
+				const $derivation = derivationAsync(async () => 42);
+				const $tracker = signal();
+				$derivation.dispose();
+
+				await expect($derivation.watch($tracker)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should dispose dependents when disposed (default behavior)", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(async (promise) => listener(await promise));
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				$derivation.dispose();
+
+				$state.set(20);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(listener).toHaveBeenCalledTimes(1);
+			});
+
+			it("should not dispose dependents when disposed with self option", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const listener = vi.fn();
+
+				$derivation.subscribe(async (promise) => listener(await promise));
+				await vi.waitFor(() => expect(listener).toHaveBeenCalledTimes(1));
+
+				$derivation.dispose({ self: true });
+				expect($derivation.disposed).toBe(true);
+
+				// When disposed with self option, the derivation is disposed but dependents are not
+				// However, the derivation can no longer react to changes since it's disposed
+				// The listener subscription should still be active but won't be called because derivation is disposed
+				$state.set(20);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				// Listener won't be called again because derivation is disposed
+				expect(listener).toHaveBeenCalledTimes(1);
+			});
+
+			it("should unregister from dependencies when disposed", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				await $derivation.get($tracker);
+				expect(await $derivation.pick()).toBe(20);
+
+				$derivation.dispose();
+
+				// After disposal, the derivation should no longer react to dependency changes
+				$state.set(20);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				// Cannot call pick() after disposal - it will throw
+				await expect($derivation.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw error when pick() called after state is disposed", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				await $derivation.pick();
+				$state.dispose();
+
+				await expect($derivation.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+		});
+
+		describe("lazy computation", () => {
+			it("should not compute until first access", () => {
+				const computeFn = vi.fn(async () => 42);
+				derivationAsync(computeFn);
+
+				expect(computeFn).not.toHaveBeenCalled();
+			});
+
+			it("should compute only once for multiple pick() calls when not dirty", async () => {
+				const computeFn = vi.fn(async () => 42);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				await $derivation.pick();
+				await $derivation.pick();
+
+				expect(computeFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should recompute when marked dirty", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$state.set(20);
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("dirty tracking", () => {
+			it("should mark as dirty when dependency changes", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$state.set(20);
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should not recompute immediately when marked dirty", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				$state.set(20);
+				expect(computeFn).toHaveBeenCalledTimes(1);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+
+			it("should recompute on next access when dirty", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				expect(await $derivation.pick()).toBe(20);
+
+				$state.set(20);
+				expect(await $derivation.pick()).toBe(40);
+			});
+
+			it("should clear dirty flag after recomputation", async () => {
+				const $state = state(10);
+				const computeFn = vi.fn(async (t) => $state.get(t) * 2);
+				const $derivation = derivationAsync(computeFn);
+
+				await $derivation.pick();
+				$state.set(20);
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+
+				await $derivation.pick();
+				expect(computeFn).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("dynamic dependencies", () => {
+			it("should track dependencies dynamically during computation", async () => {
+				const $state1 = state(10);
+				const $state2 = state(20);
+				const $cond = state(true);
+				const $derivation = derivationAsync(async (t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t);
+					}
+					return $state2.get(t);
+				});
+
+				expect(await $derivation.pick()).toBe(10);
+
+				$cond.set(false);
+				expect(await $derivation.pick()).toBe(20);
+			});
+
+			it("should remove old dependencies when they are no longer accessed", async () => {
+				const $state1 = state(10);
+				const $state2 = state(20);
+				const $cond = state(true);
+				const $derivation = derivationAsync(async (t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t);
+					}
+					return $state2.get(t);
+				});
+
+				await $derivation.pick();
+				$cond.set(false);
+				await $derivation.pick();
+
+				$state1.set(100);
+				expect(await $derivation.pick()).toBe(20);
+
+				$state2.set(200);
+				expect(await $derivation.pick()).toBe(200);
+			});
+
+			it("should add new dependencies when they are accessed", async () => {
+				const $state1 = state(10);
+				const $state2 = state(20);
+				const $cond = state(false);
+				const $derivation = derivationAsync(async (t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t);
+					}
+					return $state2.get(t);
+				});
+
+				expect(await $derivation.pick()).toBe(20);
+
+				$cond.set(true);
+				expect(await $derivation.pick()).toBe(10);
+			});
+
+			it("should handle conditional dependencies correctly", async () => {
+				const $state1 = state(10);
+				const $state2 = state(20);
+				const $cond = state(true);
+				const $derivation = derivationAsync(async (t) => {
+					if ($cond.get(t)) {
+						return $state1.get(t) * 2;
+					}
+					return $state2.get(t) * 3;
+				});
+
+				expect(await $derivation.pick()).toBe(20);
+
+				$state1.set(15);
+				expect(await $derivation.pick()).toBe(30);
+
+				$cond.set(false);
+				expect(await $derivation.pick()).toBe(60);
+
+				$state2.set(25);
+				expect(await $derivation.pick()).toBe(75);
+			});
+		});
+
+		describe("value caching", () => {
+			it("should cache Promise until dependencies change", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				const promise1 = $derivation.get($tracker);
+				const promise2 = $derivation.get($tracker);
+
+				expect(await promise1).toBe(20);
+				expect(await promise2).toBe(20);
+			});
+
+			it("should return same Promise for multiple get() calls when not dirty", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				const promise1 = $derivation.get($tracker);
+				const promise2 = $derivation.get($tracker);
+				const promise3 = $derivation.get($tracker);
+
+				expect(await promise1).toBe(20);
+				expect(await promise2).toBe(20);
+				expect(await promise3).toBe(20);
+			});
+
+			it("should create new Promise when recomputed", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const $tracker = signal();
+
+				const promise1 = $derivation.get($tracker);
+				await promise1;
+				await $state.set(20);
+				const promise2 = $derivation.get($tracker);
+
+				expect(await promise1).toBe(20);
+				expect(await promise2).toBe(40);
+			});
+		});
+
+		describe("from state", () => {
+			it("should be updated when state changes", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				expect(await $derivation.pick()).toBe(2);
+
+				$state.set(2);
+				expect(await $derivation.pick()).toBe(4);
+			});
+
+			it("should be updated with chained async dependencies", async () => {
+				const $state = state(1);
+				const $derivation1 = derivationAsync(async (t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => (await $derivation1.get(t)) * 2,
+				);
+
+				expect(await $derivation2.pick()).toBe(4);
+
+				$state.set(2);
+				expect(await $derivation2.pick()).toBe(8);
+			});
+
+			it("should be updated with chained sync and async dependencies", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => $derivation1.get(t) * 2,
+				);
+
+				expect(await $derivation2.pick()).toBe(4);
+
+				$state.set(2);
+				expect(await $derivation2.pick()).toBe(8);
+			});
+
+			it("should be updated with multiple dependencies", async () => {
+				const $state1 = state(1);
+				const $state2 = state(2);
+				const $derivation = derivationAsync(
+					async (t) => $state1.get(t) + $state2.get(t),
+				);
+
+				expect(await $derivation.pick()).toBe(3);
+
+				$state1.set(2);
+				expect(await $derivation.pick()).toBe(4);
+
+				$state2.set(3);
+				expect(await $derivation.pick()).toBe(5);
+			});
+
+			it("should be updated with multiple dependants", async () => {
+				const $state = state(1);
+				const $derivation1 = derivationAsync(async (t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(async (t) => $state.get(t) * 3);
+
+				expect(await $derivation1.pick()).toBe(2);
+				expect(await $derivation2.pick()).toBe(3);
+
+				$state.set(2);
+				expect(await $derivation1.pick()).toBe(4);
+				expect(await $derivation2.pick()).toBe(6);
+
+				$state.set(3);
+				expect(await $derivation1.pick()).toBe(6);
+				expect(await $derivation2.pick()).toBe(9);
+			});
+		});
+	});
+
+	describe("integration", () => {
+		describe("with effects - basic", () => {
+			it("should execute effect when derivation value changes", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should not execute effect when value is same (===)", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(1);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(1);
+			});
+
+			it("should execute effect multiple times on multiple changes", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+
+				$state.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+
+				$state.set(4);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+			});
+
+			it("should stop executing effect after effect disposal", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				const $effect = effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$effect.dispose();
+
+				$state.set(3);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(2);
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should stop executing effect after derivation disposal", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$derivation.dispose();
+
+				$state.set(3);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(2);
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should stop executing effect after derivation disposal (watch)", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => {
+					$derivation.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+
+				$derivation.dispose();
+
+				$state.set(3);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(2);
+			});
+		});
+
+		describe("with effects - dependencies", () => {
+			it("should execute effect when dependency changes", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should execute effect when multiple dependencies change", async () => {
+				const $state1 = state(1);
+				const $state2 = state(2);
+				const $derivation = derivationAsync(
+					async (t) => $state1.get(t) + $state2.get(t),
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(3);
+
+				$state1.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state2.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(5);
+			});
+
+			it("should execute effect when chained derivation dependency changes", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => (await $derivation1.get(t)) * 2,
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(8);
+			});
+
+			it("should handle mixed sync and async derivations in effects", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => $derivation1.get(t) * 2,
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(8);
+			});
+		});
+
+		describe("with effects - from signal", () => {
+			it("should execute effect when signal is triggered", async () => {
+				const $signal = signal();
+				const $derivation = derivationAsync(async (t) => {
+					$signal.watch(t);
+				});
+				const effectFn = vi.fn();
+				effect((t) => {
+					$derivation.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+			});
+
+			it("should execute effect when signal is triggered (chained dependencies)", async () => {
+				const $signal = signal();
+				const $derivation1 = derivationAsync(async (t) => $signal.watch(t));
+				const $derivation2 = derivationAsync(async (t) =>
+					$derivation1.watch(t),
+				);
+				const effectFn = vi.fn();
+				effect((t) => {
+					$derivation2.watch(t);
+					effectFn();
+				});
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+			});
+
+			it("should execute effect when multiple signals are triggered", async () => {
+				const $signal1 = signal();
+				const $signal2 = signal();
+				const $derivation = derivationAsync(async (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 execute effect when multiple derivations watch same signal", async () => {
+				const $signal = signal();
+				const $derivation1 = derivationAsync(async (t) => $signal.watch(t));
+				const $derivation2 = derivationAsync(async (t) => $signal.watch(t));
+				const effect1Fn = vi.fn();
+				const effect2Fn = vi.fn();
+
+				effect(async (t) => effect1Fn(await $derivation1.get(t)));
+				effect(async (t) => effect2Fn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(1));
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(1));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(2));
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(2));
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(3));
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(3));
+			});
+
+			it("should execute effect when signal is triggered with state", async () => {
+				const $signal = signal();
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => {
+					$signal.watch(t);
+					return $state.get(t) * 2;
+				});
+				const effectFn = vi.fn();
+				const $effect = effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await $effect.settled;
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(5));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+		});
+
+		describe("with effects - from state", () => {
+			it("should execute effect when state is updated", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(6);
+
+				$state.set(3);
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				expect(effectFn).toHaveBeenCalledTimes(3);
+				expect(effectFn).toHaveBeenLastCalledWith(6);
+			});
+
+			it("should execute effect when derivation is triggered", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$derivation.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should execute effect when triggered from signal", async () => {
+				const $state = state(1);
+				const $signal = signal();
+				const $derivation = derivationAsync(async (t) => {
+					$signal.watch(t);
+					return $state.get(t) * 2;
+				});
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$signal.trigger();
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+			});
+
+			it("should execute effect when state is updated (chained dependencies)", async () => {
+				const $state = state(1);
+				const $derivation1 = derivation((t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => (await $derivation1.get(t)) * 2,
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(8);
+			});
+
+			it("should execute effect when state is updated (multiple dependencies)", async () => {
+				const $state1 = state(1);
+				const $state2 = state(2);
+				const $derivation = derivationAsync(
+					async (t) => $state1.get(t) + $state2.get(t),
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn).toHaveBeenLastCalledWith(3);
+
+				$state1.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(effectFn).toHaveBeenLastCalledWith(4);
+
+				$state2.set(3);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn).toHaveBeenLastCalledWith(5);
+			});
+
+			it("should execute effect when state is updated (multiple dependants)", async () => {
+				const $state = state(1);
+				const $derivation1 = derivationAsync(async (t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(async (t) => $state.get(t) * 3);
+				const effect1Fn = vi.fn();
+				const effect2Fn = vi.fn();
+
+				effect(async (t) => effect1Fn(await $derivation1.get(t)));
+				effect(async (t) => effect2Fn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(1));
+				expect(effect1Fn).toHaveBeenLastCalledWith(2);
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(1));
+				expect(effect2Fn).toHaveBeenLastCalledWith(3);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(2));
+				expect(effect1Fn).toHaveBeenLastCalledWith(4);
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(2));
+				expect(effect2Fn).toHaveBeenLastCalledWith(6);
+
+				$state.set(3);
+				await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(3));
+				expect(effect1Fn).toHaveBeenLastCalledWith(6);
+				await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(3));
+				expect(effect2Fn).toHaveBeenLastCalledWith(9);
+			});
+
+			it("should execute effect when state is updated (async)", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(await effectFn.mock.calls[0][0]).toEqual(2);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(await effectFn.mock.calls[1][0]).toEqual(4);
+			});
+
+			it("should execute effect when state is updated (async chain)", async () => {
+				const $state = state(1);
+				const $derivation1 = derivationAsync(async (t) => $state.get(t) * 2);
+				const $derivation2 = derivationAsync(
+					async (t) => (await $derivation1.get(t)) * 2,
+				);
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(await effectFn.mock.calls[0][0]).toEqual(4);
+
+				$state.set(2);
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(await effectFn.mock.calls[1][0]).toEqual(8);
+			});
+		});
+
+		describe("with effects - complex scenarios", () => {
+			it("should handle diamond dependency pattern correctly", async () => {
+				const $stateA = state(1);
+				const $aMult3 = derivationAsync(async (t) => $stateA.get(t) * 3);
+				const $aMult2 = derivationAsync(async (t) => $stateA.get(t) * 2);
+				const $addAmult3Amult2 = derivationAsync(
+					async (t) => (await $aMult3.get(t)) + (await $aMult2.get(t)),
+				);
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $addAmult3Amult2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn.mock.calls[0][0]).toEqual(5);
+
+				$stateA.set(2);
+				$stateA.set(3);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn.mock.calls[1][0]).toEqual(10);
+				expect(effectFn.mock.calls[2][0]).toEqual(15);
+			});
+
+			it("should handle diamond dependency pattern correctly (async)", async () => {
+				const $stateA = state(1);
+				const $aMult3 = derivationAsync(async (t) => $stateA.get(t) * 3);
+				const $aMult2 = derivationAsync(async (t) => $stateA.get(t) * 2);
+				const $addAmult3Amult2 = derivationAsync(
+					async (t) => (await $aMult3.get(t)) + (await $aMult2.get(t)),
+				);
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $addAmult3Amult2.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+				$stateA.set(2);
+				$stateA.set(3);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+
+				expect(await effectFn.mock.calls[0][0]).toEqual(5);
+				expect(await effectFn.mock.calls[1][0]).toEqual(10);
+				expect(await effectFn.mock.calls[2][0]).toEqual(15);
+			});
+
+			it("should handle multiple diamond patterns correctly", async () => {
+				const $stateA = state(1);
+				const $stateB = state(2);
+				const $addAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a + b;
+				});
+
+				const $multiplyAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a * b;
+				});
+
+				const $addAndMultiply = derivationAsync(async (t) => {
+					const add = await $addAB.get(t);
+					const multiply = await $multiplyAB.get(t);
+					return add * multiply;
+				});
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $addAndMultiply.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(effectFn.mock.calls[0][0]).toEqual(6);
+
+				$stateA.set(2);
+				$stateB.set(3);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(effectFn.mock.calls[1][0]).toEqual(16);
+				expect(effectFn.mock.calls[2][0]).toEqual(30);
+			});
+
+			it("should handle multiple diamond patterns correctly (async - stepped)", async () => {
+				const $stateA = state(1);
+				const $stateB = state(2);
+				const $addAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a + b;
+				});
+
+				const $multiplyAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a * b;
+				});
+
+				const $addAndMultiply = derivationAsync(async (t) => {
+					const add = await $addAB.get(t);
+					const multiply = await $multiplyAB.get(t);
+					return add * multiply;
+				});
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $addAndMultiply.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(await effectFn.mock.calls[0][0]).toEqual(6);
+
+				$stateA.set(2);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+				expect(await effectFn.mock.calls[1][0]).toEqual(16);
+
+				$stateB.set(3);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+				expect(await effectFn.mock.calls[2][0]).toEqual(30);
+			});
+
+			it("should handle multiple diamond patterns correctly (async)", async () => {
+				const $stateA = state(1);
+				const $stateB = state(2);
+				const $addAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a + b;
+				});
+
+				const $multiplyAB = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a * b;
+				});
+
+				const $addAndMultiply = derivationAsync(async (t) => {
+					const add = await $addAB.get(t);
+					const multiply = await $multiplyAB.get(t);
+					return add * multiply;
+				});
+
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $addAndMultiply.get(t)));
+
+				$stateA.set(2);
+				$stateB.set(3);
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+
+				expect(await effectFn.mock.calls[0][0]).toEqual(6);
+				expect(await effectFn.mock.calls[1][0]).toEqual(16);
+				expect(await effectFn.mock.calls[2][0]).toEqual(30);
+			});
+
+			it("should handle conditional dependencies in effects", async () => {
+				const obj = {
+					cond: state(false),
+					b: state(2),
+				};
+
+				const $state = state(obj);
+				const $derivation = derivationAsync(async (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(async (t) => effectFn(await $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 nested derivations correctly", 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 = derivationAsync(async (t) =>
+					$state.get(t).cond.get(t),
+				);
+				const $derivationNum = derivationAsync(
+					async (t) => $state.get(t).num.get(t) * 2,
+				);
+				const effectCondFn = vi.fn();
+				const effectNumFn = vi.fn();
+				effect(async (t) => effectCondFn(await $derivationCond.get(t)));
+				effect(async (t) => effectNumFn(await $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);
+			});
+
+			it("should handle basic derivation with multiple states", async () => {
+				const $stateA = state(1);
+				const $stateB = state(2);
+				const $derivation = derivationAsync(async (t) => {
+					const a = $stateA.get(t);
+					const b = $stateB.get(t);
+					return a + b;
+				});
+				const effectFn = vi.fn();
+				effect(async (t) => effectFn(await $derivation.get(t)));
+
+				await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+				expect(await effectFn.mock.calls[0][0]).toEqual(3);
+			});
+		});
+
+		describe("with effects - error handling", () => {
+			it("should propagate errors from compute function", async () => {
+				const $state = state(1);
+				const $derivation = derivationAsync(async (t) => {
+					const val = $state.get(t);
+					if (val > 10) {
+						throw new Error("Value too large");
+					}
+					return val * 2;
+				});
+
+				expect(await $derivation.pick()).toBe(2);
+
+				$state.set(5);
+				expect(await $derivation.pick()).toBe(10);
+
+				// Force recomputation by changing state to trigger error
+				$state.set(15);
+				// The error will be thrown when pick() is called and the promise will reject
+				await expect($derivation.pick()).rejects.toThrow("Value too large");
+			});
+
+			it("should handle disposed dependencies correctly", async () => {
+				const $state = state(10);
+				const $derivation = derivationAsync(async (t) => $state.get(t) * 2);
+
+				expect(await $derivation.pick()).toBe(20);
+
+				$state.dispose();
+
+				await expect($derivation.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+		});
+	});
+});