rask-ui 0.28.3 → 0.29.0

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

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":""}