rask-ui 0.28.2 → 0.28.4

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");
+    });
+});

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

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

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

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

package/dist/tests/scopeEnforcement.test.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rask-ui/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { useState } from "../useState";
+import { useEffect } from "../useEffect";
+import { useDerived } from "../useDerived";
+import { render } from "../index";
+describe("Scope Enforcement", () => {
+    describe("useState", () => {
+        it("should allow useState in global scope", () => {
+            expect(() => {
+                const state = useState({ count: 0 });
+            }).not.toThrow();
+        });
+        it("should allow useState in component setup", () => {
+            function Component() {
+                const state = useState({ count: 0 });
+                return () => _jsx("div", { children: state.count });
+            }
+            const container = document.createElement("div");
+            expect(() => {
+                render(_jsx(Component, {}), container);
+            }).not.toThrow();
+        });
+        it("should throw when useState is called during render", () => {
+            function Component() {
+                const state = useState({ count: 0 });
+                return () => {
+                    // This should throw - useState in render scope
+                    expect(() => {
+                        useState({ nested: 1 });
+                    }).toThrow("useState cannot be called during render");
+                    return _jsx("div", { children: state.count });
+                };
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+        });
+    });
+    describe("useEffect", () => {
+        it("should throw when useEffect is called outside component setup", () => {
+            expect(() => {
+                useEffect(() => {
+                    // Effect logic
+                });
+            }).toThrow("Only use useEffect in component setup");
+        });
+        it("should allow useEffect in component setup", () => {
+            function Component() {
+                const state = useState({ count: 0 });
+                let effectRan = false;
+                useEffect(() => {
+                    effectRan = true;
+                    state.count;
+                });
+                expect(effectRan).toBe(true);
+                return () => _jsx("div", { children: state.count });
+            }
+            const container = document.createElement("div");
+            expect(() => {
+                render(_jsx(Component, {}), container);
+            }).not.toThrow();
+        });
+        it("should throw when useEffect is called during render", () => {
+            function Component() {
+                const state = useState({ count: 0 });
+                return () => {
+                    // This should throw - useEffect in render scope
+                    expect(() => {
+                        useEffect(() => {
+                            state.count;
+                        });
+                    }).toThrow("Only use useEffect in component setup");
+                    return _jsx("div", { children: state.count });
+                };
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+        });
+    });
+    describe("useDerived", () => {
+        it("should throw when useDerived is called outside component setup", () => {
+            expect(() => {
+                useDerived({
+                    doubled: () => 2 * 2,
+                });
+            }).toThrow("Only use useDerived in component setup");
+        });
+        it("should allow useDerived in component setup", () => {
+            function Component() {
+                const state = useState({ count: 5 });
+                const computed = useDerived({
+                    doubled: () => state.count * 2,
+                });
+                return () => _jsx("div", { children: computed.doubled });
+            }
+            const container = document.createElement("div");
+            expect(() => {
+                render(_jsx(Component, {}), container);
+            }).not.toThrow();
+        });
+        it("should throw when useDerived is called during render", () => {
+            function Component() {
+                const state = useState({ count: 0 });
+                return () => {
+                    // This should throw - useDerived in render scope
+                    expect(() => {
+                        useDerived({
+                            doubled: () => state.count * 2,
+                        });
+                    }).toThrow("Only use useDerived in component setup");
+                    return _jsx("div", { children: state.count });
+                };
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+        });
+    });
+    describe("Mixed scenarios", () => {
+        it("should allow all reactive primitives in setup but not in render", () => {
+            function Component() {
+                // All of these should work in setup
+                const state = useState({ count: 0 });
+                const computed = useDerived({
+                    doubled: () => state.count * 2,
+                });
+                useEffect(() => {
+                    state.count;
+                });
+                return () => {
+                    // None of these should work in render
+                    expect(() => useState({ bad: 1 })).toThrow();
+                    expect(() => useEffect(() => { })).toThrow();
+                    expect(() => useDerived({ bad: () => 1 })).toThrow();
+                    return _jsx("div", { children: computed.doubled });
+                };
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+        });
+        it("should properly enforce scope in nested renders", () => {
+            function Child() {
+                const childState = useState({ value: "child" });
+                return () => _jsx("div", { children: childState.value });
+            }
+            function Parent() {
+                const parentState = useState({ value: "parent" });
+                return () => {
+                    // This should fail in render
+                    expect(() => useState({ bad: 1 })).toThrow();
+                    return (_jsxs("div", { children: [parentState.value, _jsx(Child, {})] }));
+                };
+            }
+            const container = document.createElement("div");
+            render(_jsx(Parent, {}), container);
+        });
+    });
+});

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

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

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

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

package/dist/tests/useAction.test.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi } from "vitest";
+import { useAction } from "../useAction";
+describe("useAction", () => {
+    it("should initialize with idle state", () => {
+        const [state] = useAction(async () => "result");
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(null);
+        expect(state.result).toBe(null);
+        expect(state.error).toBe(null);
+    });
+    it("should handle successful action without parameters", async () => {
+        const fn = vi.fn(async () => "success");
+        const [state, run] = useAction(fn);
+        run();
+        expect(state.isPending).toBe(true);
+        expect(state.params).toBe(null);
+        expect(state.result).toBe(null);
+        expect(state.error).toBe(null);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(state.isPending).toBe(false);
+        expect(state.result).toBe("success");
+        expect(state.error).toBe(null);
+        expect(fn).toHaveBeenCalledTimes(1);
+    });
+    it("should handle successful action with parameters", async () => {
+        const fn = vi.fn(async (x) => x * 2);
+        const [state, run] = useAction(fn);
+        run(5);
+        expect(state.isPending).toBe(true);
+        expect(state.params).toBe(5);
+        expect(state.result).toBe(null);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(5);
+        expect(state.result).toBe(10);
+        expect(state.error).toBe(null);
+    });
+    it("should handle errors", async () => {
+        const fn = vi.fn(async () => {
+            throw new Error("Test error");
+        });
+        const [state, run] = useAction(fn);
+        run();
+        expect(state.isPending).toBe(true);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(state.isPending).toBe(false);
+        expect(state.result).toBe(null);
+        expect(state.error?.message).toBe("Test error");
+    });
+    it("should abort previous action when new action starts", async () => {
+        let resolveFirst = null;
+        let resolveSecond = null;
+        const fn = vi.fn(async (id) => {
+            if (id === 1) {
+                return new Promise((resolve) => {
+                    resolveFirst = resolve;
+                });
+            }
+            else {
+                return new Promise((resolve) => {
+                    resolveSecond = resolve;
+                });
+            }
+        });
+        const [state, run] = useAction(fn);
+        // Start first action
+        run(1);
+        expect(state.isPending).toBe(true);
+        expect(state.params).toBe(1);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Start second action (should abort first)
+        run(2);
+        expect(state.isPending).toBe(true);
+        expect(state.params).toBe(2);
+        // Resolve first action (should be ignored due to abort)
+        resolveFirst?.("first");
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // State should not reflect first action
+        expect(state.result).toBe(null);
+        // Resolve second action
+        resolveSecond?.("second");
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // State should reflect second action
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(2);
+        expect(state.result).toBe("second");
+    });
+    it("should track params even on error", async () => {
+        const fn = vi.fn(async (x) => {
+            throw new Error("Failed");
+        });
+        const [state, run] = useAction(fn);
+        run(42);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(42);
+        expect(state.error?.message).toBe("Failed");
+        expect(state.result).toBe(null);
+    });
+    it("should handle rapid consecutive calls", async () => {
+        let callCount = 0;
+        const fn = vi.fn(async (x) => {
+            callCount++;
+            await new Promise((resolve) => setTimeout(resolve, 5));
+            return x;
+        });
+        const [state, run] = useAction(fn);
+        // Fire off multiple calls
+        run(1);
+        run(2);
+        run(3);
+        // Wait for all to settle
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Should have called function 3 times (not aborted, just ignored results)
+        expect(callCount).toBe(3);
+        // State should reflect the last call
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(3);
+        expect(state.result).toBe(3);
+    });
+    it("should handle null as valid param value", async () => {
+        const fn = vi.fn(async (x) => {
+            return x === null ? "was null" : x;
+        });
+        const [state, run] = useAction(fn);
+        run(null);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(state.isPending).toBe(false);
+        expect(state.params).toBe(null);
+        expect(state.result).toBe("was null");
+    });
+});

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

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

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

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