rask-ui 0.28.3 → 0.29.0

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

package/dist/tests/useAsync.test.js

@@ -0,0 +1,499 @@
+import { jsx as _jsx } from "rask-ui/jsx-runtime";
+import { describe, it, expect, vi } from "vitest";
+import { useAsync, isAsync } from "../useAsync";
+import { render } from "../index";
+describe("useAsync", () => {
+    describe("basic functionality", () => {
+        it("should auto-run on mount and start in loading state", () => {
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => new Promise(() => { }));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBeNull();
+            expect(state.error).toBeNull();
+        });
+        it("should resolve to success state", async () => {
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.resolve("success"));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(state.isLoading).toBe(true);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBe("success");
+            expect(state.error).toBeNull();
+        });
+        it("should resolve to error state on rejection", async () => {
+            let state, refresh;
+            const error = new Error("failed");
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.reject(error));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBeNull();
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("failed");
+        });
+        it("should auto-run the async function on mount", async () => {
+            const fetcher = vi.fn(() => Promise.resolve("data"));
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(fetcher).toHaveBeenCalledTimes(1);
+            expect(state.isLoading).toBe(true);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toBe("data");
+            expect(state.isLoading).toBe(false);
+        });
+    });
+    describe("refresh functionality", () => {
+        it("should set isRefreshing when refresh is called with existing value", async () => {
+            let state, refresh;
+            let resolveFirst;
+            let resolveSecond;
+            const firstPromise = new Promise((resolve) => {
+                resolveFirst = resolve;
+            });
+            const secondPromise = new Promise((resolve) => {
+                resolveSecond = resolve;
+            });
+            const fetcher = vi
+                .fn()
+                .mockReturnValueOnce(firstPromise)
+                .mockReturnValueOnce(secondPromise);
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            // Resolve first load
+            resolveFirst("first");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBe("first");
+            // Refresh
+            refresh();
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(true);
+            expect(state.value).toBe("first");
+            // Resolve refresh
+            resolveSecond("second");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBe("second");
+        });
+        it("should set isLoading when refresh is called after error", async () => {
+            let state, refresh;
+            const error = new Error("failed");
+            const fetcher = vi
+                .fn()
+                .mockRejectedValueOnce(error)
+                .mockResolvedValueOnce("success");
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("failed");
+            expect(state.value).toBeNull();
+            // Refresh after error
+            refresh();
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.error).toBeNull();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBe("success");
+            expect(state.error).toBeNull();
+        });
+        it("should not trigger refresh if already loading", async () => {
+            let state, refresh;
+            const fetcher = vi.fn(() => new Promise(() => { }));
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(state.isLoading).toBe(true);
+            expect(fetcher).toHaveBeenCalledTimes(1);
+            // Try to refresh while loading
+            await refresh();
+            // Should not trigger another call
+            expect(fetcher).toHaveBeenCalledTimes(1);
+        });
+        it("should return a promise from refresh that resolves on success", async () => {
+            let state, refresh;
+            let resolvePromise;
+            const promise = new Promise((resolve) => {
+                resolvePromise = resolve;
+            });
+            const fetcher = vi.fn(() => promise);
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            // Wait for initial load
+            resolvePromise("initial");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Create new promise for refresh
+            let resolveRefresh;
+            const refreshPromise = new Promise((resolve) => {
+                resolveRefresh = resolve;
+            });
+            fetcher.mockReturnValueOnce(refreshPromise);
+            let refreshResolved = false;
+            refresh().then(() => {
+                refreshResolved = true;
+            });
+            expect(refreshResolved).toBe(false);
+            resolveRefresh("refreshed");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(refreshResolved).toBe(true);
+            expect(state.value).toBe("refreshed");
+        });
+        it("should return a promise from refresh that rejects on error", async () => {
+            let state, refresh;
+            let resolvePromise;
+            const promise = new Promise((resolve) => {
+                resolvePromise = resolve;
+            });
+            const fetcher = vi.fn(() => promise);
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            // Wait for initial load
+            resolvePromise("initial");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Create new promise for refresh that rejects
+            const error = new Error("refresh failed");
+            fetcher.mockRejectedValueOnce(error);
+            let refreshRejected = false;
+            refresh().catch(() => {
+                refreshRejected = true;
+            });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(refreshRejected).toBe(true);
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("refresh failed");
+        });
+    });
+    describe("cancellation with AbortSignal", () => {
+        it("should pass AbortSignal to the async function", async () => {
+            let receivedSignal;
+            const fetcher = vi.fn((signal) => {
+                receivedSignal = signal;
+                return Promise.resolve("data");
+            });
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(receivedSignal).toBeInstanceOf(AbortSignal);
+        });
+        it("should abort previous request when refresh is called", async () => {
+            let firstSignal;
+            let secondSignal;
+            let resolveFirst;
+            let resolveSecond;
+            const firstPromise = new Promise((resolve) => {
+                resolveFirst = resolve;
+            });
+            const secondPromise = new Promise((resolve) => {
+                resolveSecond = resolve;
+            });
+            const fetcher = vi
+                .fn()
+                .mockImplementationOnce((signal) => {
+                firstSignal = signal;
+                return firstPromise;
+            })
+                .mockImplementationOnce((signal) => {
+                secondSignal = signal;
+                return secondPromise;
+            });
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(firstSignal?.aborted).toBe(false);
+            // Resolve first to get to refreshable state
+            resolveFirst("first");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Trigger refresh - should abort first signal
+            refresh();
+            expect(firstSignal?.aborted).toBe(true);
+            expect(secondSignal?.aborted).toBe(false);
+            // Resolve second
+            resolveSecond("second");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toBe("second");
+        });
+        it("should ignore aborted request results", async () => {
+            let state, refresh;
+            let resolveFirst;
+            let resolveSecond;
+            const firstPromise = new Promise((resolve) => {
+                resolveFirst = resolve;
+            });
+            const secondPromise = new Promise((resolve) => {
+                resolveSecond = resolve;
+            });
+            const fetcher = vi
+                .fn()
+                .mockReturnValueOnce(firstPromise)
+                .mockReturnValueOnce(secondPromise);
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            // Resolve first to get to refreshable state
+            resolveFirst("first");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Trigger refresh (aborts previous)
+            refresh();
+            // Resolve second
+            resolveSecond("second");
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Only second result should be in state
+            expect(state.value).toBe("second");
+        });
+    });
+    describe("type handling", () => {
+        it("should handle numeric values", async () => {
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.resolve(42));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toBe(42);
+        });
+        it("should handle object values", async () => {
+            const data = { id: 1, name: "Test" };
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.resolve(data));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toEqual(data);
+        });
+        it("should handle array values", async () => {
+            const data = [1, 2, 3, 4, 5];
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.resolve(data));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toEqual(data);
+        });
+        it("should preserve Error objects", async () => {
+            const error = new Error("Something went wrong");
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.reject(error));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("Something went wrong");
+        });
+    });
+    describe("edge cases", () => {
+        it("should handle immediate resolution", async () => {
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.resolve("immediate"));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(false);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.value).toBe("immediate");
+        });
+        it("should handle immediate rejection", async () => {
+            const error = new Error("immediate error");
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => Promise.reject(error));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.isLoading).toBe(true);
+            expect(state.isRefreshing).toBe(false);
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("immediate error");
+        });
+        it("should handle delayed resolution", async () => {
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(() => new Promise((resolve) => {
+                    setTimeout(() => resolve("delayed"), 20);
+                }));
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(state.isLoading).toBe(true);
+            await new Promise((resolve) => setTimeout(resolve, 30));
+            expect(state.isLoading).toBe(false);
+            expect(state.value).toBe("delayed");
+        });
+        it("should clear error on successful retry", async () => {
+            const error = new Error("First error");
+            const fetcher = vi
+                .fn()
+                .mockRejectedValueOnce(error)
+                .mockResolvedValueOnce("success");
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.error).toBeInstanceOf(Error);
+            expect(state.error.message).toBe("First error");
+            expect(state.value).toBeNull();
+            refresh();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.error).toBeNull();
+            expect(state.value).toBe("success");
+        });
+        it("should handle rapid successive refreshes", async () => {
+            let counter = 0;
+            let resolvers = [];
+            const fetcher = vi.fn(() => {
+                const currentCount = ++counter;
+                return new Promise((resolve) => {
+                    resolvers.push(() => resolve(`data-${currentCount}`));
+                });
+            });
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            // Resolve initial load
+            resolvers[0]();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(state.value).toBe("data-1");
+            // Rapid refreshes
+            refresh();
+            refresh();
+            refresh();
+            // Resolve in order
+            resolvers[1]();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            resolvers[2]();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            resolvers[3]();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            // Only the last result should be in state due to abortion
+            expect(state.value).toBe("data-4");
+        });
+    });
+    describe("cleanup", () => {
+        it("should abort request when component unmounts", async () => {
+            let signal;
+            const fetcher = vi.fn((s) => {
+                signal = s;
+                return new Promise(() => { });
+            });
+            let state, refresh;
+            function Component() {
+                [state, refresh] = useAsync(fetcher);
+                return () => _jsx("div", { children: "test" });
+            }
+            const container = document.createElement("div");
+            render(_jsx(Component, {}), container);
+            expect(signal?.aborted).toBe(false);
+            // Unmount
+            render(null, container);
+            expect(signal?.aborted).toBe(true);
+        });
+    });
+    describe("isAsync helper", () => {
+        it("should identify async state objects", () => {
+            expect(isAsync({
+                isLoading: true,
+                isRefreshing: false,
+                value: null,
+                error: null,
+            })).toBe(true);
+            expect(isAsync({
+                isLoading: false,
+                isRefreshing: true,
+                value: "data",
+                error: null,
+            })).toBe(true);
+        });
+        it("should reject non-async objects", () => {
+            expect(isAsync(null)).toBe(false);
+            expect(isAsync(undefined)).toBe(false);
+            expect(isAsync({})).toBe(false);
+            expect(isAsync({ isLoading: true })).toBe(false);
+            expect(isAsync({ value: "test" })).toBe(false);
+        });
+    });
+});

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

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

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

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