rask-ui 0.28.3 → 0.28.4

package/dist/tests/batch.test.js

@@ -1,10 +1,10 @@
 import { describe, it, expect } from "vitest";
 import { syncBatch } from "../batch";
-import { createState } from "../createState";
+import { useState } from "../useState";
 import { Observer } from "../observation";
 describe("syncBatch", () => {
     it("should batch multiple state changes into a single notification", () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -26,7 +26,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should handle nested batches correctly", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -47,7 +47,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should handle multiple observers with syncBatch", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount1 = 0;
         let notifyCount2 = 0;
         const observer1 = new Observer(() => {
@@ -74,7 +74,7 @@ describe("syncBatch", () => {
         observer2.dispose();
     });
     it("should maintain correct state values after syncBatch", () => {
-        const state = createState({
+        const state = useState({
             count: 0,
             name: "Alice",
             items: [1, 2, 3],
@@ -90,7 +90,7 @@ describe("syncBatch", () => {
         expect(state.items).toEqual([100, 2, 3, 4]);
     });
     it("should not flush if exception thrown within syncBatch", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -114,7 +114,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should deduplicate notifications for the same observer", () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -135,7 +135,7 @@ describe("syncBatch", () => {
 });
 describe("queue (async batching)", () => {
     it("should queue updates and flush on microtask", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -157,7 +157,7 @@ describe("queue (async batching)", () => {
         observer.dispose();
     });
     it("should batch multiple async updates into one notification", async () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -175,7 +175,7 @@ describe("queue (async batching)", () => {
         observer.dispose();
     });
     it("should handle separate async batches", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -196,7 +196,7 @@ describe("queue (async batching)", () => {
 });
 describe("syncBatch with nested async updates", () => {
     it("should handle syncBatch inside async context", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -217,7 +217,7 @@ describe("syncBatch with nested async updates", () => {
         observer.dispose();
     });
     it("should handle async updates inside syncBatch callback", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -242,3 +242,193 @@ describe("syncBatch with nested async updates", () => {
         observer.dispose();
     });
 });
+describe("syncBatch with cascading updates", () => {
+    it("should handle cascading observer notifications within the same batch", () => {
+        const state = useState({ count: 0 });
+        const derived = useState({ doubled: 0 });
+        let stateNotifyCount = 0;
+        let derivedNotifyCount = 0;
+        let componentNotifyCount = 0;
+        // Observer 1: Watches state, updates derived (simulates useDerived)
+        const derivedObserver = new Observer(() => {
+            stateNotifyCount++;
+            // When state changes, update derived synchronously
+            derived.doubled = state.count * 2;
+        });
+        const dispose1 = derivedObserver.observe();
+        state.count; // Track state
+        dispose1();
+        // Observer 2: Watches derived (simulates component)
+        const componentObserver = new Observer(() => {
+            derivedNotifyCount++;
+        });
+        const dispose2 = componentObserver.observe();
+        derived.doubled; // Track derived
+        dispose2();
+        // Observer 3: Also watches derived (another component)
+        const component2Observer = new Observer(() => {
+            componentNotifyCount++;
+        });
+        const dispose3 = component2Observer.observe();
+        derived.doubled; // Track derived
+        dispose3();
+        // Make a change in a batch
+        syncBatch(() => {
+            state.count = 5;
+        });
+        // All observers should have been notified exactly once
+        expect(stateNotifyCount).toBe(1);
+        expect(derivedNotifyCount).toBe(1);
+        expect(componentNotifyCount).toBe(1);
+        expect(state.count).toBe(5);
+        expect(derived.doubled).toBe(10);
+        derivedObserver.dispose();
+        componentObserver.dispose();
+        component2Observer.dispose();
+    });
+    it("should handle multi-level cascading updates", () => {
+        const state = useState({ value: 0 });
+        const derived1 = useState({ level1: 0 });
+        const derived2 = useState({ level2: 0 });
+        const derived3 = useState({ level3: 0 });
+        const notifyCounts = [0, 0, 0, 0];
+        // Level 1: state -> derived1
+        const observer1 = new Observer(() => {
+            notifyCounts[0]++;
+            derived1.level1 = state.value + 1;
+        });
+        const dispose1 = observer1.observe();
+        state.value;
+        dispose1();
+        // Level 2: derived1 -> derived2
+        const observer2 = new Observer(() => {
+            notifyCounts[1]++;
+            derived2.level2 = derived1.level1 + 1;
+        });
+        const dispose2 = observer2.observe();
+        derived1.level1;
+        dispose2();
+        // Level 3: derived2 -> derived3
+        const observer3 = new Observer(() => {
+            notifyCounts[2]++;
+            derived3.level3 = derived2.level2 + 1;
+        });
+        const dispose3 = observer3.observe();
+        derived2.level2;
+        dispose3();
+        // Final observer: watches derived3
+        const observer4 = new Observer(() => {
+            notifyCounts[3]++;
+        });
+        const dispose4 = observer4.observe();
+        derived3.level3;
+        dispose4();
+        // Update state in a batch
+        syncBatch(() => {
+            state.value = 10;
+        });
+        // All levels should have cascaded and each observer notified exactly once
+        expect(notifyCounts).toEqual([1, 1, 1, 1]);
+        expect(state.value).toBe(10);
+        expect(derived1.level1).toBe(11);
+        expect(derived2.level2).toBe(12);
+        expect(derived3.level3).toBe(13);
+        observer1.dispose();
+        observer2.dispose();
+        observer3.dispose();
+        observer4.dispose();
+    });
+    it("should handle diamond dependency pattern", () => {
+        // Diamond: state -> [derived1, derived2] -> derived3
+        const state = useState({ value: 0 });
+        const derived1 = useState({ path1: 0 });
+        const derived2 = useState({ path2: 0 });
+        const derived3 = useState({ combined: 0 });
+        let derived3NotifyCount = 0;
+        // State -> derived1
+        const obs1 = new Observer(() => {
+            derived1.path1 = state.value * 2;
+        });
+        const d1 = obs1.observe();
+        state.value;
+        d1();
+        // State -> derived2
+        const obs2 = new Observer(() => {
+            derived2.path2 = state.value * 3;
+        });
+        const d2 = obs2.observe();
+        state.value;
+        d2();
+        // [derived1, derived2] -> derived3
+        const obs3 = new Observer(() => {
+            derived3.combined = derived1.path1 + derived2.path2;
+        });
+        const d3 = obs3.observe();
+        derived1.path1;
+        derived2.path2;
+        d3();
+        // Watch derived3
+        const obs4 = new Observer(() => {
+            derived3NotifyCount++;
+        });
+        const d4 = obs4.observe();
+        derived3.combined;
+        d4();
+        syncBatch(() => {
+            state.value = 5;
+        });
+        // derived3 should only be notified once despite two paths updating
+        expect(derived3NotifyCount).toBe(1);
+        expect(derived1.path1).toBe(10);
+        expect(derived2.path2).toBe(15);
+        expect(derived3.combined).toBe(25);
+        obs1.dispose();
+        obs2.dispose();
+        obs3.dispose();
+        obs4.dispose();
+    });
+    it("should not create infinite loops with circular dependencies", () => {
+        const state1 = useState({ value: 0 });
+        const state2 = useState({ value: 0 });
+        let notify1Count = 0;
+        let notify2Count = 0;
+        // Observer 1: watches state1, updates state2
+        const obs1 = new Observer(() => {
+            notify1Count++;
+            if (notify1Count > 10) {
+                throw new Error("Infinite loop detected");
+            }
+            // Only update if different to break the cycle
+            if (state2.value !== state1.value + 1) {
+                state2.value = state1.value + 1;
+            }
+        });
+        const d1 = obs1.observe();
+        state1.value;
+        d1();
+        // Observer 2: watches state2, updates state1
+        const obs2 = new Observer(() => {
+            notify2Count++;
+            if (notify2Count > 10) {
+                throw new Error("Infinite loop detected");
+            }
+            // Only update if different to break the cycle
+            if (state1.value !== state2.value - 1) {
+                state1.value = state2.value - 1;
+            }
+        });
+        const d2 = obs2.observe();
+        state2.value;
+        d2();
+        syncBatch(() => {
+            state1.value = 5;
+        });
+        // Should stabilize without infinite loop
+        expect(notify1Count).toBeLessThan(10);
+        expect(notify2Count).toBeLessThan(10);
+        expect(state1.value).toBe(5);
+        expect(state2.value).toBe(6);
+        obs1.dispose();
+        obs2.dispose();
+    });
+});

package/dist/tests/createContext.test.js

@@ -1,21 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "rask-ui/jsx-runtime";
 import { describe, it, expect } from "vitest";
 import { createContext } from "../createContext";
 import { render } from "../";
 describe("createContext", () => {
-    it("should create a context object", () => {
-        const context = createContext();
-        expect(context).toHaveProperty("inject");
-        expect(context).toHaveProperty("get");
+    it("should create a context with use and inject methods", () => {
+        const MyContext = createContext(() => ({ value: "test" }));
+        expect(typeof MyContext.use).toBe("function");
+        expect(typeof MyContext.inject).toBe("function");
     });
     it("should allow setting and getting context values", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "dark" }));
         function Parent() {
-            ThemeContext.inject({ theme: "dark" });
+            ThemeContext.inject();
             return () => _jsx(Child, {});
         }
         function Child() {
-            const theme = ThemeContext.get();
+            const theme = ThemeContext.use();
             return () => _jsx("div", { children: theme.theme });
         }
         const container = document.createElement("div");
@@ -25,16 +25,16 @@ describe("createContext", () => {
         document.body.removeChild(container);
     });
     it("should traverse parent components to find context", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "light" }));
         function GrandParent() {
-            ThemeContext.inject({ theme: "light" });
+            ThemeContext.inject();
             return () => _jsx(Parent, {});
         }
         function Parent() {
             return () => _jsx(Child, {});
         }
         function Child() {
-            const theme = ThemeContext.get();
+            const theme = ThemeContext.use();
             return () => _jsx("div", { children: theme.theme });
         }
         const container = document.createElement("div");
@@ -44,11 +44,11 @@ describe("createContext", () => {
         document.body.removeChild(container);
     });
     it("should throw error when context is not found", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "dark" }));
         function Child() {
             expect(() => {
-                ThemeContext.get();
-            }).toThrow("There is no parent context");
+                ThemeContext.use();
+            }).toThrow("No context available");
             return () => _jsx("div", { children: "Child" });
         }
         const container = document.createElement("div");
@@ -57,33 +57,33 @@ describe("createContext", () => {
         document.body.removeChild(container);
     });
     it("should throw error when setting context outside component", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "dark" }));
         expect(() => {
-            ThemeContext.inject({ theme: "dark" });
-        }).toThrow("No current component");
+            ThemeContext.inject();
+        }).toThrow("Only use useInjectContext in component setup");
     });
     it("should throw error when getting context outside component", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "dark" }));
         expect(() => {
-            ThemeContext.get();
-        }).toThrow("No current component");
+            ThemeContext.use();
+        }).toThrow("Only use useContext in component setup");
     });
     it("should allow overriding context in nested components", () => {
-        const ThemeContext = createContext();
+        const ThemeContext = createContext((theme) => ({ theme }));
         function GrandParent() {
-            ThemeContext.inject({ theme: "light" });
+            ThemeContext.inject("light");
             return () => (_jsxs("div", { children: [_jsx(Parent, {}), _jsx(ChildOfGrandParent, {})] }));
         }
         function Parent() {
-            ThemeContext.inject({ theme: "dark" });
+            ThemeContext.inject("dark");
             return () => _jsx(ChildOfParent, {});
         }
         function ChildOfParent() {
-            const theme = ThemeContext.get();
+            const theme = ThemeContext.use();
             return () => _jsx("div", { class: "child-of-parent", children: theme.theme });
         }
         function ChildOfGrandParent() {
-            const theme = ThemeContext.get();
+            const theme = ThemeContext.use();
             return () => _jsx("div", { class: "child-of-grandparent", children: theme.theme });
         }
         const container = document.createElement("div");
@@ -96,16 +96,16 @@ describe("createContext", () => {
         document.body.removeChild(container);
     });
     it("should support multiple different contexts", () => {
-        const ThemeContext = createContext();
-        const UserContext = createContext();
+        const ThemeContext = createContext(() => ({ theme: "dark" }));
+        const UserContext = createContext(() => ({ name: "Alice" }));
         function Parent() {
-            ThemeContext.inject({ theme: "dark" });
-            UserContext.inject({ name: "Alice" });
+            ThemeContext.inject();
+            UserContext.inject();
             return () => _jsx(Child, {});
         }
         function Child() {
-            const theme = ThemeContext.get();
-            const user = UserContext.get();
+            const theme = ThemeContext.use();
+            const user = UserContext.use();
             return () => _jsx("div", { children: `${theme.theme} - ${user.name}` });
         }
         const container = document.createElement("div");
@@ -115,16 +115,16 @@ describe("createContext", () => {
         document.body.removeChild(container);
     });
     it("should handle context values of different types", () => {
-        const NumberContext = createContext();
-        const ArrayContext = createContext();
+        const NumberContext = createContext(() => 42);
+        const ArrayContext = createContext(() => ["a", "b", "c"]);
         function Parent() {
-            NumberContext.inject(42);
-            ArrayContext.inject(["a", "b", "c"]);
+            NumberContext.inject();
+            ArrayContext.inject();
             return () => _jsx(Child, {});
         }
         function Child() {
-            const num = NumberContext.get();
-            const arr = ArrayContext.get();
+            const num = NumberContext.use();
+            const arr = ArrayContext.use();
             return () => _jsx("div", { children: `${num} - ${arr.join(",")}` });
         }
         const container = document.createElement("div");
@@ -133,4 +133,17 @@ describe("createContext", () => {
         expect(container.textContent).toContain("42 - a,b,c");
         document.body.removeChild(container);
     });
+    it("should allow using context in the root component that injects it", () => {
+        const ThemeContext = createContext(() => ({ theme: "root-theme" }));
+        function RootComponent() {
+            ThemeContext.inject();
+            const theme = ThemeContext.use();
+            return () => _jsx("div", { children: theme.theme });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(RootComponent, {}), container);
+        expect(container.textContent).toContain("root-theme");
+        document.body.removeChild(container);
+    });
 });

package/dist/tests/error.test.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "rask-ui/jsx-runtime";
 import { describe, it, expect } from "vitest";
-import { ErrorBoundary } from "../error";
+import { useCatchError } from "../useCatchError";
 import { render } from "../";
-describe("ErrorBoundary", () => {
+describe("useCatchError", () => {
     it("should render children when no error occurs", async () => {
         function SafeChild() {
             return () => _jsx("div", { children: "Safe content" });
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(SafeChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", String(errorState.error)] })) : (_jsx(SafeChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -26,7 +27,8 @@ describe("ErrorBoundary", () => {
             };
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", String(errorState.error)] })) : (_jsx(ThrowingChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -44,7 +46,8 @@ describe("ErrorBoundary", () => {
             };
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => (_jsxs("div", { class: "error-ui", children: [_jsx("h1", { children: "Oops!" }), _jsx("p", { children: String(error) })] })), children: _jsx(ThrowingChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { class: "error-ui", children: [_jsx("h1", { children: "Oops!" }), _jsx("p", { children: String(errorState.error) })] })) : (_jsx(ThrowingChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -64,7 +67,8 @@ describe("ErrorBoundary", () => {
             return () => _jsx("div", { children: "Child 2" });
         }
         function TestComponent() {
-            return () => (_jsxs(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: [_jsx(SafeChild1, {}), _jsx(SafeChild2, {})] }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", String(errorState.error)] })) : (_jsxs(_Fragment, { children: [_jsx(SafeChild1, {}), _jsx(SafeChild2, {})] }));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -85,7 +89,8 @@ describe("ErrorBoundary", () => {
             return () => _jsx(DeepChild, {});
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Caught: ", String(error)] }), children: _jsx(MiddleChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Caught: ", String(errorState.error)] })) : (_jsx(MiddleChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -102,8 +107,13 @@ describe("ErrorBoundary", () => {
                 return _jsx("div", {});
             };
         }
+        function InnerBoundary() {
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Inner: ", String(errorState.error)] })) : (_jsx(ThrowingChild, {}));
+        }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Outer: ", String(error)] }), children: _jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Inner: ", String(error)] }), children: _jsx(ThrowingChild, {}) }) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Outer: ", String(errorState.error)] })) : (_jsx(InnerBoundary, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -122,7 +132,8 @@ describe("ErrorBoundary", () => {
             };
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", String(errorState.error)] })) : (_jsx(ThrowingChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -139,7 +150,8 @@ describe("ErrorBoundary", () => {
             };
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => (_jsxs("div", { children: ["Error: ", error.message, " (Code: ", error.code, ")"] })), children: _jsx(ThrowingChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", errorState.error.message, " (Code:", " ", errorState.error.code, ")"] })) : (_jsx(ThrowingChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);
@@ -156,7 +168,8 @@ describe("ErrorBoundary", () => {
             return () => _jsx("div", { children: "Safe content" });
         }
         function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(SafeChild, {}) }));
+            const errorState = useCatchError();
+            return () => errorState.error ? (_jsxs("div", { children: ["Error: ", String(errorState.error)] })) : (_jsx(SafeChild, {}));
         }
         const container = document.createElement("div");
         document.body.appendChild(container);

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

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

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

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

package/dist/tests/renderCount.test.js

@@ -0,0 +1,95 @@
+import { jsxs as _jsxs, jsx as _jsx } from "rask-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { useState } from "../useState";
+import { render } from "../";
+describe("Child render count test", () => {
+    it("should track how many times Child renders when count changes", async () => {
+        let childRenderCount = 0;
+        let state;
+        function Child(props) {
+            return () => {
+                childRenderCount++;
+                return (_jsxs("div", { children: ["State count: ", props.state.count, ", Props count: ", props.count] }));
+            };
+        }
+        function MyComp() {
+            state = useState({
+                count: 0,
+            });
+            return () => (_jsx("div", { children: _jsx(Child, { state: state, count: state.count }) }));
+        }
+        const container = document.createElement("div");
+        render(_jsx(MyComp, {}), container);
+        // Initial render
+        expect(childRenderCount).toBe(1);
+        expect(container.textContent).toBe("State count: 0, Props count: 0");
+        // Simulate click to increment count
+        state.count++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // After first increment
+        expect(childRenderCount).toBe(2);
+        expect(container.textContent).toBe("State count: 1, Props count: 1");
+        state.count++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // After second increment
+        expect(childRenderCount).toBe(3);
+        expect(container.textContent).toBe("State count: 2, Props count: 2");
+    });
+    it("should show Child renders only once when only state prop changes", async () => {
+        let childRenderCount = 0;
+        let state;
+        function Child(props) {
+            childRenderCount++;
+            return () => _jsxs("div", { children: ["State count: ", props.state.count] });
+        }
+        function MyComp() {
+            state = useState({
+                count: 0,
+            });
+            return () => (_jsx("div", { children: _jsx(Child, { state: state }) }));
+        }
+        const container = document.createElement("div");
+        render(_jsx(MyComp, {}), container);
+        // Initial render
+        expect(childRenderCount).toBe(1);
+        expect(container.textContent).toBe("State count: 0");
+        // Simulate click to increment count
+        state.count++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Child shouldn't re-render because state object reference didn't change
+        expect(childRenderCount).toBe(1);
+        expect(container.textContent).toBe("State count: 1");
+    });
+    it("should show Child renders when primitive prop changes", async () => {
+        let childRenderCount = 0;
+        let state;
+        function Child(props) {
+            return () => {
+                childRenderCount++;
+                return _jsxs("div", { children: ["Props count: ", props.count] });
+            };
+        }
+        function MyComp() {
+            state = useState({
+                count: 0,
+            });
+            return () => (_jsx("div", { children: _jsx(Child, { count: state.count }) }));
+        }
+        const container = document.createElement("div");
+        render(_jsx(MyComp, {}), container);
+        // Initial render
+        expect(childRenderCount).toBe(1);
+        expect(container.textContent).toBe("Props count: 0");
+        // Simulate click to increment count
+        state.count++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Child re-renders because count prop changed
+        expect(childRenderCount).toBe(2);
+        expect(container.textContent).toBe("Props count: 1");
+        // Another click
+        state.count++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(childRenderCount).toBe(3);
+        expect(container.textContent).toBe("Props count: 2");
+    });
+});