rask-ui 0.16.0 → 0.17.0

package/README.md

@@ -47,7 +47,7 @@ RASK provides a set of reactive hooks for building interactive UIs. These hooks
 
 - **`useState`** - Create reactive state objects
 - **`useEffect`** - Run side effects when dependencies change
-- **`useComputed`** - Derive values from state with automatic caching
+- **`useDerived`** - Derive values from state with automatic caching
 - **`useAsync`** - Manage async operations (fetch, mutations, polling, etc.)
 - **`useRouter`** - Type-safe client-side routing
 - **`createContext`** / **`useContext`** - Share data through the component tree

package/dist/component.js

@@ -28,13 +28,13 @@ export function getCurrentComponent() {
 }
 export function useMountEffect(cb) {
     if (!currentComponent) {
-        throw new Error("Only use createMountEffect in component setup");
+        throw new Error("Only use useMountEffect in component setup");
     }
     currentComponent.onMounts.push(cb);
 }
 export function useCleanup(cb) {
     if (!currentComponent || currentComponent.isRendering) {
-        throw new Error("Only use createCleanup in component setup");
+        throw new Error("Only use useCleanup in component setup");
     }
     currentComponent.onCleanups.push(cb);
 }
@@ -91,7 +91,7 @@ export class RaskStatefulComponent extends Component {
                 enumerable: true,
                 get() {
                     const observer = getCurrentObserver();
-                    if (!self.isRendering && observer) {
+                    if (observer) {
                         // Lazy create signal only when accessed in reactive context
                         let signal = signals.get(prop);
                         if (!signal) {

package/dist/createContext.js

@@ -29,7 +29,7 @@ export function createContext() {
 export function useContext(context) {
     let currentComponent = getCurrentComponent();
     if (!currentComponent) {
-        throw new Error("You can not get context outside component setup");
+        throw new Error("Only use useContext in component setup");
     }
     if (typeof currentComponent.context.getContext !== "function") {
         throw new Error("There is no parent context");
@@ -44,7 +44,7 @@ export function useInjectContext(context) {
     return (value) => {
         const currentComponent = getCurrentComponent();
         if (!currentComponent) {
-            throw new Error("You can not inject context outside component setup");
+            throw new Error("Only use useInjectContext in component setup");
         }
         currentComponent.contexts.set(context, value);
     };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { ErrorBoundary } from "./error";
 export { useRef } from "./useRef";
 export { useView } from "./useView";
 export { useEffect } from "./useEffect";
-export { useComputed } from "./useComputed";
+export { useDerived, Derived } from "./useDerived";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
 export { Router, useRouter } from "./useRouter";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -7,7 +7,7 @@ export { ErrorBoundary } from "./error";
 export { useRef } from "./useRef";
 export { useView } from "./useView";
 export { useEffect } from "./useEffect";
-export { useComputed } from "./useComputed";
+export { useDerived } from "./useDerived";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
 export { useRouter } from "./useRouter";

package/dist/tests/createEffect.test.js

@@ -4,451 +4,464 @@ import { createEffect } from "../createEffect";
 import { createState } from "../createState";
 import { render } from "../index";
 describe("createEffect", () => {
-    it("should run immediately on creation", () => {
-        const effectFn = vi.fn();
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
+  it("should run immediately on creation", () => {
+    const effectFn = vi.fn();
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+  });
+  it("should track reactive dependencies", async () => {
+    const state = createState({ count: 0 });
+    const effectFn = vi.fn(() => {
+      state.count; // Access to track
     });
-    it("should track reactive dependencies", async () => {
-        const state = createState({ count: 0 });
-        const effectFn = vi.fn(() => {
-            state.count; // Access to track
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(2);
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(2);
+  });
+  it("should re-run when dependencies change", async () => {
+    const state = createState({ count: 0 });
+    const results = [];
+    createEffect(() => {
+      results.push(state.count);
     });
-    it("should re-run when dependencies change", async () => {
-        const state = createState({ count: 0 });
-        const results = [];
-        createEffect(() => {
-            results.push(state.count);
-        });
-        expect(results).toEqual([0]);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([0, 1]);
-        state.count = 2;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([0, 1, 2]);
+    expect(results).toEqual([0]);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([0, 1]);
+    state.count = 2;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([0, 1, 2]);
+  });
+  it("should run on microtask, not synchronously", () => {
+    const state = createState({ count: 0 });
+    const results = [];
+    createEffect(() => {
+      results.push(state.count);
     });
-    it("should run on microtask, not synchronously", () => {
-        const state = createState({ count: 0 });
-        const results = [];
-        createEffect(() => {
-            results.push(state.count);
-        });
-        expect(results).toEqual([0]); // Initial run is synchronous
-        state.count = 1;
-        // Should not have run yet (microtask not flushed)
-        expect(results).toEqual([0]);
+    expect(results).toEqual([0]); // Initial run is synchronous
+    state.count = 1;
+    // Should not have run yet (microtask not flushed)
+    expect(results).toEqual([0]);
+  });
+  it("should handle multiple effects on same state", async () => {
+    const state = createState({ count: 0 });
+    const results1 = [];
+    const results2 = [];
+    createEffect(() => {
+      results1.push(state.count);
     });
-    it("should handle multiple effects on same state", async () => {
-        const state = createState({ count: 0 });
-        const results1 = [];
-        const results2 = [];
-        createEffect(() => {
-            results1.push(state.count);
-        });
-        createEffect(() => {
-            results2.push(state.count * 2);
-        });
-        expect(results1).toEqual([0]);
-        expect(results2).toEqual([0]);
-        state.count = 5;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results1).toEqual([0, 5]);
-        expect(results2).toEqual([0, 10]);
+    createEffect(() => {
+      results2.push(state.count * 2);
     });
-    it("should only track dependencies accessed during execution", async () => {
-        const state = createState({ a: 1, b: 2 });
-        const effectFn = vi.fn(() => {
-            state.a; // Only track 'a'
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        // Change 'b' (not tracked)
-        state.b = 100;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(1); // Should not re-run
-        // Change 'a' (tracked)
-        state.a = 10;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(2); // Should re-run
+    expect(results1).toEqual([0]);
+    expect(results2).toEqual([0]);
+    state.count = 5;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results1).toEqual([0, 5]);
+    expect(results2).toEqual([0, 10]);
+  });
+  it("should only track dependencies accessed during execution", async () => {
+    const state = createState({ a: 1, b: 2 });
+    const effectFn = vi.fn(() => {
+      state.a; // Only track 'a'
     });
-    it("should re-track dependencies on each run", async () => {
-        const state = createState({ useA: true, a: 1, b: 2 });
-        const effectFn = vi.fn(() => {
-            if (state.useA) {
-                state.a;
-            }
-            else {
-                state.b;
-            }
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        // Change 'a' (currently tracked)
-        state.a = 10;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(2);
-        // Change 'b' (not tracked)
-        state.b = 20;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(2); // No change
-        // Switch to using 'b'
-        state.useA = false;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(3);
-        // Change 'a' (no longer tracked)
-        state.a = 100;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(3); // No change
-        // Change 'b' (now tracked)
-        state.b = 200;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(4);
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    // Change 'b' (not tracked)
+    state.b = 100;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(1); // Should not re-run
+    // Change 'a' (tracked)
+    state.a = 10;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(2); // Should re-run
+  });
+  it("should re-track dependencies on each run", async () => {
+    const state = createState({ useA: true, a: 1, b: 2 });
+    const effectFn = vi.fn(() => {
+      if (state.useA) {
+        state.a;
+      } else {
+        state.b;
+      }
     });
-    it("should handle effects that modify state", async () => {
-        const state = createState({ input: 1, output: 0 });
-        createEffect(() => {
-            state.output = state.input * 2;
-        });
-        expect(state.output).toBe(2);
-        state.input = 5;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(state.output).toBe(10);
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    // Change 'a' (currently tracked)
+    state.a = 10;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(2);
+    // Change 'b' (not tracked)
+    state.b = 20;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(2); // No change
+    // Switch to using 'b'
+    state.useA = false;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(3);
+    // Change 'a' (no longer tracked)
+    state.a = 100;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(3); // No change
+    // Change 'b' (now tracked)
+    state.b = 200;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(4);
+  });
+  it("should handle effects that modify state", async () => {
+    const state = createState({ input: 1, output: 0 });
+    createEffect(() => {
+      state.output = state.input * 2;
     });
-    it("should handle nested state access", async () => {
-        const state = createState({
-            user: {
-                profile: {
-                    name: "Alice",
-                },
-            },
-        });
-        const results = [];
-        createEffect(() => {
-            results.push(state.user.profile.name);
-        });
-        expect(results).toEqual(["Alice"]);
-        state.user.profile.name = "Bob";
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual(["Alice", "Bob"]);
+    expect(state.output).toBe(2);
+    state.input = 5;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(state.output).toBe(10);
+  });
+  it("should handle nested state access", async () => {
+    const state = createState({
+      user: {
+        profile: {
+          name: "Alice",
+        },
+      },
     });
-    it("should handle array access", async () => {
-        const state = createState({ items: [1, 2, 3] });
-        const results = [];
-        createEffect(() => {
-            results.push(state.items.length);
-        });
-        expect(results).toEqual([3]);
-        state.items.push(4);
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([3, 4]);
-        state.items.pop();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([3, 4, 3]);
+    const results = [];
+    createEffect(() => {
+      results.push(state.user.profile.name);
     });
-    it("should handle effects accessing array elements", async () => {
-        const state = createState({ items: [1, 2, 3] });
-        const results = [];
-        createEffect(() => {
-            const sum = state.items.reduce((acc, val) => acc + val, 0);
-            results.push(sum);
-        });
-        expect(results).toEqual([6]);
-        state.items.push(4);
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([6, 10]);
-        state.items[0] = 10;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([6, 10, 19]);
+    expect(results).toEqual(["Alice"]);
+    state.user.profile.name = "Bob";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual(["Alice", "Bob"]);
+  });
+  it("should handle array access", async () => {
+    const state = createState({ items: [1, 2, 3] });
+    const results = [];
+    createEffect(() => {
+      results.push(state.items.length);
     });
-    it("should batch multiple state changes before re-running", async () => {
-        const state = createState({ a: 1, b: 2 });
-        const effectFn = vi.fn(() => {
-            state.a;
-            state.b;
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        // Multiple changes in same turn
-        state.a = 10;
-        state.b = 20;
-        state.a = 15;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Should only run once for all changes
-        expect(effectFn).toHaveBeenCalledTimes(2);
+    expect(results).toEqual([3]);
+    state.items.push(4);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([3, 4]);
+    state.items.pop();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([3, 4, 3]);
+  });
+  it("should handle effects accessing array elements", async () => {
+    const state = createState({ items: [1, 2, 3] });
+    const results = [];
+    createEffect(() => {
+      const sum = state.items.reduce((acc, val) => acc + val, 0);
+      results.push(sum);
     });
-    it("should handle effects with no dependencies", async () => {
-        let runCount = 0;
-        createEffect(() => {
-            runCount++;
-            // No reactive state accessed
-        });
-        expect(runCount).toBe(1);
-        // Wait to ensure it doesn't run again
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(runCount).toBe(1);
+    expect(results).toEqual([6]);
+    state.items.push(4);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([6, 10]);
+    state.items[0] = 10;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([6, 10, 19]);
+  });
+  it("should batch multiple state changes before re-running", async () => {
+    const state = createState({ a: 1, b: 2 });
+    const effectFn = vi.fn(() => {
+      state.a;
+      state.b;
     });
-    it("should handle effects that conditionally access state", async () => {
-        const state = createState({ enabled: true, value: 5 });
-        const effectFn = vi.fn(() => {
-            if (state.enabled) {
-                state.value;
-            }
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        // Change value (tracked because enabled is true)
-        state.value = 10;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(2);
-        // Disable
-        state.enabled = false;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(3);
-        // Change value (not tracked because enabled is false)
-        state.value = 20;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectFn).toHaveBeenCalledTimes(3); // No change
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    // Multiple changes in same turn
+    state.a = 10;
+    state.b = 20;
+    state.a = 15;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Should only run once for all changes
+    expect(effectFn).toHaveBeenCalledTimes(2);
+  });
+  it("should handle effects with no dependencies", async () => {
+    let runCount = 0;
+    createEffect(() => {
+      runCount++;
+      // No reactive state accessed
     });
-    it("should handle complex dependency graphs", async () => {
-        const state = createState({
-            multiplier: 2,
-            values: [1, 2, 3],
-        });
-        const results = [];
-        createEffect(() => {
-            const sum = state.values.reduce((acc, val) => acc + val, 0);
-            results.push(sum * state.multiplier);
-        });
-        expect(results).toEqual([12]); // (1+2+3) * 2
-        state.multiplier = 3;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([12, 18]); // (1+2+3) * 3
-        state.values.push(4);
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(results).toEqual([12, 18, 30]); // (1+2+3+4) * 3
+    expect(runCount).toBe(1);
+    // Wait to ensure it doesn't run again
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(runCount).toBe(1);
+  });
+  it("should handle effects that conditionally access state", async () => {
+    const state = createState({ enabled: true, value: 5 });
+    const effectFn = vi.fn(() => {
+      if (state.enabled) {
+        state.value;
+      }
     });
-    it("should handle effects that run other synchronous code", async () => {
-        const state = createState({ count: 0 });
-        const sideEffects = [];
-        createEffect(() => {
-            sideEffects.push("effect-start");
-            const value = state.count;
-            sideEffects.push(`value-${value}`);
-            sideEffects.push("effect-end");
-        });
-        expect(sideEffects).toEqual(["effect-start", "value-0", "effect-end"]);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(sideEffects).toEqual([
-            "effect-start",
-            "value-0",
-            "effect-end",
-            "effect-start",
-            "value-1",
-            "effect-end",
-        ]);
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    // Change value (tracked because enabled is true)
+    state.value = 10;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(2);
+    // Disable
+    state.enabled = false;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(3);
+    // Change value (not tracked because enabled is false)
+    state.value = 20;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectFn).toHaveBeenCalledTimes(3); // No change
+  });
+  it("should handle complex dependency graphs", async () => {
+    const state = createState({
+      multiplier: 2,
+      values: [1, 2, 3],
     });
-    it("should handle rapid state changes", async () => {
-        const state = createState({ count: 0 });
-        const effectFn = vi.fn(() => {
-            state.count;
-        });
-        createEffect(effectFn);
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        // Rapid changes
-        for (let i = 1; i <= 10; i++) {
-            state.count = i;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Should batch all changes into one effect run
-        expect(effectFn).toHaveBeenCalledTimes(2);
+    const results = [];
+    createEffect(() => {
+      const sum = state.values.reduce((acc, val) => acc + val, 0);
+      results.push(sum * state.multiplier);
     });
-    it("should access latest state values when effect runs", async () => {
-        const state = createState({ count: 0 });
-        const results = [];
-        createEffect(() => {
-            results.push(state.count);
-        });
-        state.count = 1;
-        state.count = 2;
-        state.count = 3;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Should see latest value when effect runs
-        expect(results).toEqual([0, 3]);
+    expect(results).toEqual([12]); // (1+2+3) * 2
+    state.multiplier = 3;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([12, 18]); // (1+2+3) * 3
+    state.values.push(4);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(results).toEqual([12, 18, 30]); // (1+2+3+4) * 3
+  });
+  it("should handle effects that run other synchronous code", async () => {
+    const state = createState({ count: 0 });
+    const sideEffects = [];
+    createEffect(() => {
+      sideEffects.push("effect-start");
+      const value = state.count;
+      sideEffects.push(`value-${value}`);
+      sideEffects.push("effect-end");
     });
-    it("should call dispose function before re-executing", async () => {
-        const state = createState({ count: 0 });
-        const disposeCalls = [];
-        const effectCalls = [];
-        createEffect(() => {
-            effectCalls.push(state.count);
-            return () => {
-                // Dispose sees the current state at the time it's called
-                disposeCalls.push(state.count);
-            };
-        });
-        expect(effectCalls).toEqual([0]);
-        expect(disposeCalls).toEqual([]);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Dispose is called after state change, before effect re-runs
-        expect(disposeCalls).toEqual([1]);
-        expect(effectCalls).toEqual([0, 1]);
-        state.count = 2;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(disposeCalls).toEqual([1, 2]);
-        expect(effectCalls).toEqual([0, 1, 2]);
+    expect(sideEffects).toEqual(["effect-start", "value-0", "effect-end"]);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(sideEffects).toEqual([
+      "effect-start",
+      "value-0",
+      "effect-end",
+      "effect-start",
+      "value-1",
+      "effect-end",
+    ]);
+  });
+  it("should handle rapid state changes", async () => {
+    const state = createState({ count: 0 });
+    const effectFn = vi.fn(() => {
+      state.count;
     });
-    it("should handle dispose function with cleanup logic", async () => {
-        const state = createState({ url: "/api/data" });
-        const subscriptions = [];
-        createEffect(() => {
-            const currentUrl = state.url;
-            subscriptions.push(`subscribe:${currentUrl}`);
-            return () => {
-                subscriptions.push(`unsubscribe:${currentUrl}`);
-            };
-        });
-        expect(subscriptions).toEqual(["subscribe:/api/data"]);
-        state.url = "/api/users";
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(subscriptions).toEqual([
-            "subscribe:/api/data",
-            "unsubscribe:/api/data",
-            "subscribe:/api/users",
-        ]);
-        state.url = "/api/posts";
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(subscriptions).toEqual([
-            "subscribe:/api/data",
-            "unsubscribe:/api/data",
-            "subscribe:/api/users",
-            "unsubscribe:/api/users",
-            "subscribe:/api/posts",
-        ]);
+    createEffect(effectFn);
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    // Rapid changes
+    for (let i = 1; i <= 10; i++) {
+      state.count = i;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Should batch all changes into one effect run
+    expect(effectFn).toHaveBeenCalledTimes(2);
+  });
+  it("should access latest state values when effect runs", async () => {
+    const state = createState({ count: 0 });
+    const results = [];
+    createEffect(() => {
+      results.push(state.count);
     });
-    it("should handle effects without dispose function", async () => {
-        const state = createState({ count: 0 });
-        const effectCalls = [];
-        createEffect(() => {
-            effectCalls.push(state.count);
-            // No dispose function returned
-        });
-        expect(effectCalls).toEqual([0]);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectCalls).toEqual([0, 1]);
-        state.count = 2;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(effectCalls).toEqual([0, 1, 2]);
+    state.count = 1;
+    state.count = 2;
+    state.count = 3;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Should see latest value when effect runs
+    expect(results).toEqual([0, 3]);
+  });
+  it("should call dispose function before re-executing", async () => {
+    const state = createState({ count: 0 });
+    const disposeCalls = [];
+    const effectCalls = [];
+    createEffect(() => {
+      effectCalls.push(state.count);
+      return () => {
+        // Dispose sees the current state at the time it's called
+        disposeCalls.push(state.count);
+      };
     });
-    it("should handle dispose function that throws error", async () => {
-        const state = createState({ count: 0 });
-        const effectCalls = [];
-        const consoleErrorSpy = vi
-            .spyOn(console, "error")
-            .mockImplementation(() => { });
-        createEffect(() => {
-            effectCalls.push(state.count);
-            return () => {
-                throw new Error("Dispose error");
-            };
-        });
-        expect(effectCalls).toEqual([0]);
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Effect should still have run despite dispose throwing
-        expect(effectCalls).toEqual([0, 1]);
-        expect(consoleErrorSpy).toHaveBeenCalledWith("Error in effect dispose function:", expect.any(Error));
-        consoleErrorSpy.mockRestore();
+    expect(effectCalls).toEqual([0]);
+    expect(disposeCalls).toEqual([]);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Dispose is called after state change, before effect re-runs
+    expect(disposeCalls).toEqual([1]);
+    expect(effectCalls).toEqual([0, 1]);
+    state.count = 2;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(disposeCalls).toEqual([1, 2]);
+    expect(effectCalls).toEqual([0, 1, 2]);
+  });
+  it("should handle dispose function with cleanup logic", async () => {
+    const state = createState({ url: "/api/data" });
+    const subscriptions = [];
+    createEffect(() => {
+      const currentUrl = state.url;
+      subscriptions.push(`subscribe:${currentUrl}`);
+      return () => {
+        subscriptions.push(`unsubscribe:${currentUrl}`);
+      };
     });
-    it("should call dispose with latest closure values", async () => {
-        const state = createState({ count: 0 });
-        const disposeValues = [];
-        createEffect(() => {
-            const capturedCount = state.count;
-            return () => {
-                disposeValues.push(capturedCount);
-            };
-        });
-        state.count = 1;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(disposeValues).toEqual([0]);
-        state.count = 5;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(disposeValues).toEqual([0, 1]);
-        state.count = 10;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(disposeValues).toEqual([0, 1, 5]);
+    expect(subscriptions).toEqual(["subscribe:/api/data"]);
+    state.url = "/api/users";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(subscriptions).toEqual([
+      "subscribe:/api/data",
+      "unsubscribe:/api/data",
+      "subscribe:/api/users",
+    ]);
+    state.url = "/api/posts";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(subscriptions).toEqual([
+      "subscribe:/api/data",
+      "unsubscribe:/api/data",
+      "subscribe:/api/users",
+      "unsubscribe:/api/users",
+      "subscribe:/api/posts",
+    ]);
+  });
+  it("should handle effects without dispose function", async () => {
+    const state = createState({ count: 0 });
+    const effectCalls = [];
+    createEffect(() => {
+      effectCalls.push(state.count);
+      // No dispose function returned
     });
-    it("should handle rapid state changes with dispose", async () => {
-        const state = createState({ count: 0 });
-        const effectFn = vi.fn(() => {
-            state.count;
-        });
-        const disposeFn = vi.fn();
-        createEffect(() => {
-            effectFn();
-            return disposeFn;
-        });
-        expect(effectFn).toHaveBeenCalledTimes(1);
-        expect(disposeFn).toHaveBeenCalledTimes(0);
-        // Rapid changes should batch
-        state.count = 1;
-        state.count = 2;
-        state.count = 3;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Effect and dispose should each be called once more
-        expect(effectFn).toHaveBeenCalledTimes(2);
-        expect(disposeFn).toHaveBeenCalledTimes(1);
+    expect(effectCalls).toEqual([0]);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectCalls).toEqual([0, 1]);
+    state.count = 2;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(effectCalls).toEqual([0, 1, 2]);
+  });
+  it("should handle dispose function that throws error", async () => {
+    const state = createState({ count: 0 });
+    const effectCalls = [];
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    createEffect(() => {
+      effectCalls.push(state.count);
+      return () => {
+        throw new Error("Dispose error");
+      };
+    });
+    expect(effectCalls).toEqual([0]);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Effect should still have run despite dispose throwing
+    expect(effectCalls).toEqual([0, 1]);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Error in effect dispose function:",
+      expect.any(Error)
+    );
+    consoleErrorSpy.mockRestore();
+  });
+  it("should call dispose with latest closure values", async () => {
+    const state = createState({ count: 0 });
+    const disposeValues = [];
+    createEffect(() => {
+      const capturedCount = state.count;
+      return () => {
+        disposeValues.push(capturedCount);
+      };
     });
-    it("should run effects synchronously before render when props change", async () => {
-        const renderLog = [];
-        function Child(props) {
-            const state = createState({ internalValue: 0 });
-            createEffect(() => {
-                // Update internal state based on prop
-                state.internalValue = props.value * 2;
-            });
-            return () => {
-                renderLog.push(`render:${state.internalValue}`);
-                return _jsx("div", { class: "child-component", children: state.internalValue });
-            };
-        }
-        function Parent() {
-            const state = createState({ count: 1 });
-            return () => {
-                renderLog.push(`parent-render:${state.count}`);
-                return (_jsxs("div", { children: [_jsx(Child, { value: state.count }), _jsx("button", { onClick: () => {
-                                state.count = 2;
-                            }, children: "Increment" })] }));
-            };
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(Parent, {}), container);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        // Initial render: parent renders, then child renders with effect-updated state
-        expect(renderLog).toEqual(["parent-render:1", "render:2"]);
-        const childDiv = container.querySelector(".child-component");
-        expect(childDiv?.textContent).toBe("2");
-        // Clear log and trigger update
-        renderLog.length = 0;
-        const button = container.querySelector("button");
-        button.click();
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        console.log(renderLog);
-        // After prop update: parent renders, child's effect runs synchronously updating state,
-        // then child renders once with the updated state
-        expect(renderLog).toEqual(["parent-render:2", "render:4"]);
-        expect(childDiv?.textContent).toBe("4");
-        document.body.removeChild(container);
+    state.count = 1;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(disposeValues).toEqual([0]);
+    state.count = 5;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(disposeValues).toEqual([0, 1]);
+    state.count = 10;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(disposeValues).toEqual([0, 1, 5]);
+  });
+  it("should handle rapid state changes with dispose", async () => {
+    const state = createState({ count: 0 });
+    const effectFn = vi.fn(() => {
+      state.count;
     });
+    const disposeFn = vi.fn();
+    createEffect(() => {
+      effectFn();
+      return disposeFn;
+    });
+    expect(effectFn).toHaveBeenCalledTimes(1);
+    expect(disposeFn).toHaveBeenCalledTimes(0);
+    // Rapid changes should batch
+    state.count = 1;
+    state.count = 2;
+    state.count = 3;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    // Effect and dispose should each be called once more
+    expect(effectFn).toHaveBeenCalledTimes(2);
+    expect(disposeFn).toHaveBeenCalledTimes(1);
+  });
+  it("should run effects synchronously before render when props change", async () => {
+    const renderLog = [];
+    function Child(props) {
+      const state = createState({ internalValue: 0 });
+      createEffect(() => {
+        // Update internal state based on prop
+        state.internalValue = props.value * 2;
+      });
+      return () => {
+        renderLog.push(`render:${state.internalValue}`);
+        return _jsx("div", {
+          class: "child-component",
+          children: state.internalValue,
+        });
+      };
+    }
+    function Parent() {
+      const state = createState({ count: 1 });
+      return () => {
+        renderLog.push(`parent-render:${state.count}`);
+        return _jsxs("div", {
+          children: [
+            _jsx(Child, { value: state.count }),
+            _jsx("button", {
+              onClick: () => {
+                state.count = 2;
+              },
+              children: "Increment",
+            }),
+          ],
+        });
+      };
+    }
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    render(_jsx(Parent, {}), container);
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    // Initial render: parent renders, then child renders with effect-updated state
+    expect(renderLog).toEqual(["parent-render:1", "render:2"]);
+    const childDiv = container.querySelector(".child-component");
+    expect(childDiv?.textContent).toBe("2");
+    // Clear log and trigger update
+    renderLog.length = 0;
+    const button = container.querySelector("button");
+    button.click();
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    // After prop update: parent renders, child's effect runs synchronously updating state,
+    // then child renders once with the updated state
+    expect(renderLog).toEqual(["parent-render:2", "render:4"]);
+    expect(childDiv?.textContent).toBe("4");
+    document.body.removeChild(container);
+  });
 });

package/dist/useAsync.js

@@ -3,7 +3,7 @@ import { assignState, useState } from "./useState";
 export function useAsync(...args) {
     const currentComponent = getCurrentComponent();
     if (!currentComponent || currentComponent.isRendering) {
-        throw new Error("Only use createTask in component setup");
+        throw new Error("Only use useTask in component setup");
     }
     const value = args.length === 2 ? args[0] : null;
     const fn = args.length === 2 ? args[1] : args[0];

package/dist/useDerived.d.ts

@@ -0,0 +1,5 @@
+export type Derived<T extends Record<string, () => any>> = {
+    [K in keyof T]: ReturnType<T[K]>;
+};
+export declare function useDerived<T extends Record<string, () => any>>(computed: T): Derived<T>;
+//# sourceMappingURL=useDerived.d.ts.map

package/dist/useDerived.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,GACV,OAAO,CAAC,CAAC,CAAC,CAgFZ"}

package/dist/useDerived.js

@@ -0,0 +1,72 @@
+import { getCurrentComponent, useCleanup } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+import { getCurrentObserver, Observer, Signal } from "./observation";
+export function useDerived(computed) {
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use useDerived in component setup");
+    }
+    const proxy = {};
+    let notifyInspectorRef = {};
+    for (const prop in computed) {
+        let isDirty = true;
+        let value;
+        const signal = new Signal();
+        const computedObserver = new Observer(() => {
+            isDirty = true;
+            signal.notify();
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "computed",
+                    path: notifyInspectorRef.current.path.concat(prop),
+                    isDirty: true,
+                    value,
+                });
+            }
+        });
+        useCleanup(() => computedObserver.dispose());
+        Object.defineProperty(proxy, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                const currentObserver = getCurrentObserver();
+                if (currentObserver) {
+                    currentObserver.subscribeSignal(signal);
+                }
+                if (isDirty) {
+                    const stopObserving = computedObserver.observe();
+                    value = computed[prop]();
+                    stopObserving();
+                    isDirty = false;
+                    if (INSPECTOR_ENABLED) {
+                        notifyInspectorRef.current?.notify({
+                            type: "computed",
+                            path: notifyInspectorRef.current.path.concat(prop),
+                            isDirty: false,
+                            value,
+                        });
+                    }
+                    return value;
+                }
+                return value;
+            },
+        });
+    }
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(proxy, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
+    return proxy;
+}

package/dist/useEffect.js

@@ -4,7 +4,7 @@ import { Observer } from "./observation";
 export function useEffect(cb) {
     const component = getCurrentComponent();
     if (!component || component.isRendering) {
-        throw new Error("Only use createEffect in component setup");
+        throw new Error("Only use useEffect in component setup");
     }
     let disposer;
     const observer = new Observer(() => {

package/dist/useRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAcxC"}
+{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAoBxC"}

package/dist/useRef.js

@@ -1,6 +1,11 @@
 import { getCurrentObserver, Signal } from "./observation";
+import { getCurrentComponent } from "./component";
 export function useRef() {
     let value = null;
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use useRef in component setup");
+    }
     const signal = new Signal();
     return {
         get current() {

package/dist/useRouter.js

@@ -3,7 +3,7 @@ import { getCurrentObserver, Signal } from "./observation";
 import { useCleanup, getCurrentComponent } from "./component";
 export function useRouter(config, options) {
     if (!getCurrentComponent()) {
-        throw new Error("Only use createRouter in component setup");
+        throw new Error("Only use useRouter in component setup");
     }
     const router = internalCreateRouter(config, options);
     const signal = new Signal();

package/dist/useState.d.ts

@@ -9,14 +9,14 @@ export declare function assignState<T extends object>(state: T, newState: T): T;
  * @example
  * // ❌ Bad - destructuring loses reactivity
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   const { count, name } = state; // Don't do this!
  *   return () => <div>{count} {name}</div>; // Won't update!
  * }
  *
  * // ✅ Good - access properties directly in render
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   return () => <div>{state.count} {state.name}</div>; // Reactive!
  * }
  *

package/dist/useState.js

@@ -14,14 +14,14 @@ export function assignState(state, newState) {
  * @example
  * // ❌ Bad - destructuring loses reactivity
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   const { count, name } = state; // Don't do this!
  *   return () => <div>{count} {name}</div>; // Won't update!
  * }
  *
  * // ✅ Good - access properties directly in render
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   return () => <div>{state.count} {state.name}</div>; // Reactive!
  * }
  *
@@ -30,7 +30,7 @@ export function assignState(state, newState) {
  */
 export function useState(state) {
     if (getCurrentComponent()?.isRendering) {
-        throw new Error("createState cannot be called during render. Call it in component setup or globally.");
+        throw new Error("useState cannot be called during render. Call it in component setup or globally.");
     }
     return getProxy(state, {});
 }

package/dist/useView.js

@@ -2,7 +2,7 @@ import { getCurrentComponent } from "./component";
 import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 export function useView(...args) {
     if (!getCurrentComponent()) {
-        throw new Error("Only use createView in component setup");
+        throw new Error("Only use useView in component setup");
     }
     const result = {};
     const seen = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",