rask-ui 0.28.2 → 0.28.4

package/dist/tests/useLookup.test.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rask-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { useLookup } from "../useLookup";
+import { useState } from "../useState";
+import { render } from "../render";
+describe("useLookup", () => {
+    it("should create a lookup function from array", () => {
+        let lookupResult1;
+        let lookupResult2;
+        let lookupResult3;
+        function Component() {
+            const state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                lookupResult1 = lookup(1);
+                lookupResult2 = lookup(2);
+                lookupResult3 = lookup(3);
+                return _jsx("div", { children: "test" });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(lookupResult1).toEqual({ id: 1, name: "Alice" });
+        expect(lookupResult2).toEqual({ id: 2, name: "Bob" });
+        expect(lookupResult3).toBeUndefined();
+    });
+    it("should update lookup when useState array is mutated via push", async () => {
+        let lookupResult;
+        let state;
+        function Component() {
+            state = useState({ items: [{ id: 1, name: "Alice" }] });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                lookupResult = lookup(2);
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(2)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(lookupResult).toBeUndefined();
+        expect(container.textContent).toBe("Alice - ");
+        // Mutate the array by pushing
+        state.items.push({ id: 2, name: "Bob" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(lookupResult).toEqual({ id: 2, name: "Bob" });
+        expect(container.textContent).toBe("Alice - Bob");
+    });
+    it("should update lookup when useState array is mutated via pop", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(2)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice - Bob");
+        // Mutate the array by popping
+        state.items.pop();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice - ");
+    });
+    it("should update lookup when useState array is mutated via splice", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                    { id: 3, name: "Charlie" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(2)?.name, " - ", lookup(3)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice - Bob - Charlie");
+        // Remove Bob via splice
+        state.items.splice(1, 1);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice -  - Charlie");
+    });
+    it("should update lookup when useState array is mutated via unshift", async () => {
+        let state;
+        function Component() {
+            state = useState({ items: [{ id: 2, name: "Bob" }] });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(2)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe(" - Bob");
+        // Add item at beginning
+        state.items.unshift({ id: 1, name: "Alice" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice - Bob");
+    });
+    it("should update lookup when array reference is replaced", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(3)?.name, " - ", lookup(4)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice -  - ");
+        // Replace the entire array
+        state.items = [
+            { id: 3, name: "Charlie" },
+            { id: 4, name: "Diana" },
+        ];
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe(" - Charlie - Diana");
+    });
+    it("should handle mutations when items are modified", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return _jsx("div", { children: lookup(1)?.name });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice");
+        // Modify Alice's name (this doesn't change the lookup key)
+        state.items[0].name = "Alicia";
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // The lookup should still find the same object, now with modified name
+        expect(container.textContent).toBe("Alicia");
+    });
+    it("should update lookup when item key is changed", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsxs("div", { children: [lookup(1)?.name, " - ", lookup(5)?.name] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice - ");
+        // Change Alice's id
+        state.items[0].id = 5;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Old id should not be found, new id should be found
+        expect(container.textContent).toBe(" - Alice");
+    });
+    it("should work with string keys", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                users: [
+                    { username: "alice", email: "alice@example.com" },
+                    { username: "bob", email: "bob@example.com" },
+                ],
+            });
+            const lookup = useLookup(() => state.users, "username");
+            return () => {
+                return (_jsxs("div", { children: [lookup("alice")?.email, " - ", lookup("charlie")?.email] }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("alice@example.com - ");
+        // Add new user
+        state.users.push({ username: "charlie", email: "charlie@example.com" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("alice@example.com - charlie@example.com");
+    });
+    it("should handle array with duplicate keys (last one wins)", () => {
+        let lookupResult;
+        function Component() {
+            const state = useState({
+                items: [
+                    { id: 1, name: "Alice" },
+                    { id: 2, name: "Bob" },
+                    { id: 1, name: "Alice2" }, // Duplicate id
+                ],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                lookupResult = lookup(1);
+                return _jsx("div", { children: lookup(1)?.name });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        // Last item with id=1 should win
+        expect(lookupResult).toEqual({ id: 1, name: "Alice2" });
+        expect(container.textContent).toBe("Alice2");
+    });
+    it("should handle empty array", async () => {
+        let state;
+        function Component() {
+            state = useState({ items: [] });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return _jsx("div", { children: lookup(1)?.name || "empty" });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("empty");
+        // Add item to empty array
+        state.items.push({ id: 1, name: "Alice" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice");
+    });
+    it("should handle multiple array mutations in sequence", async () => {
+        let state;
+        function Component() {
+            state = useState({
+                items: [{ id: 1, name: "Alice" }],
+            });
+            const lookup = useLookup(() => state.items, "id");
+            return () => {
+                return (_jsx("div", { children: state.items.map((item) => lookup(item.id)?.name).join(", ") }));
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Component, {}), container);
+        expect(container.textContent).toBe("Alice");
+        // Multiple mutations
+        state.items.push({ id: 2, name: "Bob" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice, Bob");
+        state.items.push({ id: 3, name: "Charlie" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Alice, Bob, Charlie");
+        state.items.shift();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Bob, Charlie");
+        state.items[0].name = "Robert";
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Robert, Charlie");
+    });
+    it("should handle lookup in nested component", async () => {
+        let parentState;
+        function Child(props) {
+            const lookup = useLookup(() => props.items, "id");
+            return () => {
+                console.log("Render Child");
+                return _jsx("div", { children: lookup(2)?.name || "not found" });
+            };
+        }
+        function Parent() {
+            parentState = useState({
+                items: [{ id: 1, name: "Alice" }],
+            });
+            return () => {
+                return _jsx(Child, { items: parentState.items });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Parent, {}), container);
+        expect(container.textContent).toBe("not found");
+        parentState.items.push({ id: 2, name: "Bob" });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.textContent).toBe("Bob");
+    });
+});

package/dist/tests/useRef.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useRef.test.d.ts.map

package/dist/tests/useRef.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRef.test.d.ts","sourceRoot":"","sources":["../../src/tests/useRef.test.tsx"],"names":[],"mappings":""}

package/dist/tests/useRef.test.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rask-ui/jsx-runtime";
+import { describe, it, expect, vi } from "vitest";
+import { useRef } from "../useRef";
+import { useEffect } from "../useEffect";
+import { render } from "../";
+describe("useRef", () => {
+    it("should create a ref object with current property", () => {
+        function Component() {
+            const ref = useRef();
+            expect(ref).toHaveProperty("current");
+            return () => _jsx("div", {});
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        document.body.removeChild(container);
+    });
+    it("should allow setting and getting ref values", () => {
+        function Component() {
+            const ref = useRef();
+            ref.current = document.createElement("div");
+            expect(ref.current).toBeInstanceOf(HTMLDivElement);
+            return () => _jsx("div", {});
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        document.body.removeChild(container);
+    });
+    it("should have initial value of null", () => {
+        function Component() {
+            const ref = useRef();
+            expect(ref.current).toBe(null);
+            return () => _jsx("div", {});
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        document.body.removeChild(container);
+    });
+    it("should allow ref to be assigned to DOM elements", () => {
+        let capturedRef;
+        function Component() {
+            const ref = useRef();
+            capturedRef = ref;
+            return () => _jsx("div", { ref: ref, children: "Content" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        // After render, the ref should be assigned to the div element
+        expect(capturedRef.current).toBeInstanceOf(HTMLDivElement);
+        expect(capturedRef.current.textContent).toBe("Content");
+        document.body.removeChild(container);
+    });
+    it("should trigger useEffect when ref is assigned to an element", async () => {
+        const effectCallback = vi.fn();
+        function Component() {
+            const ref = useRef();
+            useEffect(() => {
+                // Reading ref.current subscribes the effect to the signal
+                const element = ref.current;
+                effectCallback(element);
+            });
+            return () => _jsx("div", { ref: ref, children: "Content" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        // Wait for microtask queue to process signal notifications
+        await new Promise((resolve) => queueMicrotask(resolve));
+        // Effect should run twice:
+        // 1. Initially when effect is created (ref.current is null)
+        // 2. After the element is mounted and assigned to ref.current
+        expect(effectCallback).toHaveBeenCalledTimes(2);
+        expect(effectCallback).toHaveBeenNthCalledWith(1, null);
+        expect(effectCallback).toHaveBeenNthCalledWith(2, expect.any(HTMLDivElement));
+        document.body.removeChild(container);
+    });
+    it("should re-run effect when ref value changes", async () => {
+        const effectCallback = vi.fn();
+        let updateRef;
+        function Component() {
+            const ref = useRef();
+            useEffect(() => {
+                // Reading ref.current subscribes the effect to changes
+                const element = ref.current;
+                effectCallback(element);
+            });
+            updateRef = (el) => {
+                ref.current = el;
+            };
+            return () => _jsx("div", { children: "Content" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        await new Promise((resolve) => queueMicrotask(resolve));
+        // Initial effect run
+        expect(effectCallback).toHaveBeenCalledTimes(1);
+        expect(effectCallback).toHaveBeenNthCalledWith(1, null);
+        effectCallback.mockClear();
+        // Manually set the ref to an element
+        const testEl = document.createElement("div");
+        updateRef?.(testEl);
+        await new Promise((resolve) => queueMicrotask(resolve));
+        // Effect should run again with the new element
+        expect(effectCallback).toHaveBeenCalledTimes(1);
+        expect(effectCallback).toHaveBeenCalledWith(testEl);
+        effectCallback.mockClear();
+        // Change ref to null
+        updateRef?.(null);
+        await new Promise((resolve) => queueMicrotask(resolve));
+        // Effect should run again with null
+        expect(effectCallback).toHaveBeenCalledTimes(1);
+        expect(effectCallback).toHaveBeenCalledWith(null);
+        document.body.removeChild(container);
+    });
+    it("should work with multiple refs in the same effect", async () => {
+        const effectCallback = vi.fn();
+        function Component() {
+            const ref1 = useRef();
+            const ref2 = useRef();
+            useEffect(() => {
+                // Reading both refs subscribes to both signals
+                effectCallback({
+                    ref1: ref1.current,
+                    ref2: ref2.current,
+                });
+            });
+            return () => (_jsxs("div", { children: [_jsx("div", { ref: ref1, children: "Div" }), _jsx("span", { ref: ref2, children: "Span" })] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        await new Promise((resolve) => queueMicrotask(resolve));
+        // Effect should be called:
+        // 1. Initially (both refs null)
+        // 2. When ref1 is assigned
+        // 3. When ref2 is assigned
+        expect(effectCallback.mock.calls.length).toBeGreaterThanOrEqual(2);
+        // Last call should have both refs assigned
+        const lastCall = effectCallback.mock.calls[effectCallback.mock.calls.length - 1][0];
+        expect(lastCall.ref1).toBeInstanceOf(HTMLDivElement);
+        expect(lastCall.ref2).toBeInstanceOf(HTMLSpanElement);
+        document.body.removeChild(container);
+    });
+    it("should only notify when value is set, not when read", async () => {
+        const effectCallback = vi.fn();
+        let readRef;
+        function Component() {
+            const ref = useRef();
+            useEffect(() => {
+                const element = ref.current;
+                effectCallback(element);
+            });
+            readRef = () => {
+                // Just reading should not trigger a notification
+                const _ = ref.current;
+            };
+            return () => _jsx("div", { children: "Content" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        await new Promise((resolve) => queueMicrotask(resolve));
+        const initialCallCount = effectCallback.mock.calls.length;
+        // Reading the ref should not cause effect to re-run
+        readRef?.();
+        readRef?.();
+        readRef?.();
+        await new Promise((resolve) => queueMicrotask(resolve));
+        expect(effectCallback).toHaveBeenCalledTimes(initialCallCount);
+        document.body.removeChild(container);
+    });
+    it("should work with callback refs", () => {
+        const refCallback = vi.fn();
+        function Component() {
+            return () => _jsx("div", { ref: refCallback, children: "Content" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Component, {}), container);
+        // Callback ref should be called with the element
+        expect(refCallback).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+        expect(refCallback.mock.calls[0][0].textContent).toBe("Content");
+        document.body.removeChild(container);
+    });
+});

package/dist/tests/useState.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useState.test.d.ts.map

package/dist/tests/useState.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useState.test.d.ts","sourceRoot":"","sources":["../../src/tests/useState.test.tsx"],"names":[],"mappings":""}

package/dist/tests/useState.test.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rask-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { useState } from "../useState";
+import { Observer } from "../observation";
+import { render } from "../render";
+describe("useState", () => {
+    it("should create a reactive proxy from an object", () => {
+        const state = useState({ count: 0 });
+        expect(state.count).toBe(0);
+    });
+    it("should allow mutations", () => {
+        const state = useState({ count: 0 });
+        state.count = 5;
+        expect(state.count).toBe(5);
+    });
+    it("should return the same proxy for the same object", () => {
+        const obj = { count: 0 };
+        const proxy1 = useState(obj);
+        const proxy2 = useState(obj);
+        expect(proxy1).toBe(proxy2);
+    });
+    it("should create nested proxies for nested objects", () => {
+        const state = useState({ user: { name: "Alice", age: 30 } });
+        state.user.name = "Bob";
+        expect(state.user.name).toBe("Bob");
+    });
+    it("should handle arrays reactively", () => {
+        const state = useState({ items: [1, 2, 3] });
+        state.items.push(4);
+        expect(state.items).toEqual([1, 2, 3, 4]);
+    });
+    it("should track property access in observers", async () => {
+        const state = useState({ count: 0 });
+        let renderCount = 0;
+        const observer = new Observer(() => {
+            renderCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Access property to track it
+        dispose();
+        expect(renderCount).toBe(0);
+        // Mutate after observation setup
+        const dispose2 = observer.observe();
+        const value = state.count; // Track
+        dispose2(); // Stop observing, subscriptions are now active
+        state.count = 1;
+        // Wait for microtasks to complete
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(renderCount).toBeGreaterThan(0);
+    });
+    it("should handle property deletion", () => {
+        const state = useState({ count: 0, temp: "value" });
+        delete state.temp;
+        expect(state.temp).toBeUndefined();
+        expect("temp" in state).toBe(false);
+    });
+    it("should not create proxies for functions", () => {
+        const fn = () => "hello";
+        const state = useState({ method: fn });
+        expect(state.method).toBe(fn);
+        expect(state.method()).toBe("hello");
+    });
+    it("should handle symbol properties", () => {
+        const sym = Symbol("test");
+        const state = useState({ [sym]: "value" });
+        expect(state[sym]).toBe("value");
+    });
+    it("should notify observers only on actual changes", async () => {
+        const state = useState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        state.count = 0; // Same value - should still notify per current implementation
+        state.count = 0;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // The implementation notifies even for same value, except for optimization cases
+        observer.dispose();
+    });
+    it("should handle deeply nested objects", () => {
+        const state = useState({
+            level1: {
+                level2: {
+                    level3: {
+                        value: "deep",
+                    },
+                },
+            },
+        });
+        state.level1.level2.level3.value = "modified";
+        expect(state.level1.level2.level3.value).toBe("modified");
+    });
+    it("should handle array mutations correctly", () => {
+        const state = useState({ items: [1, 2, 3] });
+        state.items.pop();
+        expect(state.items).toEqual([1, 2]);
+        state.items.unshift(0);
+        expect(state.items).toEqual([0, 1, 2]);
+        state.items.splice(1, 1, 99);
+        expect(state.items).toEqual([0, 99, 2]);
+    });
+    it("should cache proxies for array elements to prevent double-wrapping", () => {
+        const state = useState({
+            data: [
+                { id: 1, label: "Item 1" },
+                { id: 2, label: "Item 2" },
+                { id: 3, label: "Item 3" },
+            ],
+        });
+        // Access the same array element multiple times
+        const firstAccess = state.data[0];
+        const secondAccess = state.data[0];
+        // Should return the exact same proxy reference
+        expect(firstAccess).toBe(secondAccess);
+        // Test with array iteration methods
+        const mapped = state.data.map((item) => item);
+        const firstItem = mapped[0];
+        const directAccess = state.data[0];
+        // The proxy returned from iteration should be the same as direct access
+        expect(firstItem).toBe(directAccess);
+        // Test that we don't double-wrap when iterating multiple times
+        const mapped2 = state.data.map((item) => item);
+        expect(mapped[0]).toBe(mapped2[0]);
+    });
+    it("should maintain proxy identity after filter operations", () => {
+        const state = useState({
+            data: [
+                { id: 1, label: "Item 1" },
+                { id: 2, label: "Item 2" },
+                { id: 3, label: "Item 3" },
+            ],
+        });
+        // Get reference to an item before filtering
+        const originalItem = state.data[0];
+        // Simulate the remove operation: filter creates a new array but reuses proxies
+        state.data = state.data.filter((row) => row.id !== 2);
+        // After filter, the first item should still be the same proxy reference
+        const afterFilter = state.data[0];
+        expect(afterFilter).toBe(originalItem);
+        // And accessing it multiple times should return the same reference
+        expect(state.data[0]).toBe(state.data[0]);
+    });
+    it("should rerender child when array prop changes", async () => {
+        let childRenderCount = 0;
+        let parentState;
+        function Child(props) {
+            return () => {
+                childRenderCount++;
+                return (_jsxs("div", { children: [_jsx("div", { class: "count", children: props.todos.length }), _jsx("ul", { children: props.todos.map((todo) => (_jsx("li", { children: todo.text }, todo.id))) })] }));
+            };
+        }
+        function Parent() {
+            parentState = useState({
+                todos: [
+                    { id: "1", text: "Task 1", completed: false },
+                    { id: "2", text: "Task 2", completed: true },
+                    { id: "3", text: "Task 3", completed: false },
+                ],
+                filter: "all",
+            });
+            return () => {
+                const filtered = parentState.filter === "active"
+                    ? parentState.todos.filter((t) => !t.completed)
+                    : parentState.todos;
+                return _jsx(Child, { todos: filtered });
+            };
+        }
+        const container = document.createElement("div");
+        render(_jsx(Parent, {}), container);
+        expect(childRenderCount).toBe(1);
+        parentState.filter = "active";
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(childRenderCount).toBe(2);
+    });
+});

package/dist/tests/useSuspend.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useSuspend.test.d.ts.map