rask-ui 0.27.0 → 0.28.1

package/dist/tests/batch.test.js

@@ -0,0 +1,244 @@
+import { describe, it, expect } from "vitest";
+import { syncBatch } from "../batch";
+import { createState } from "../createState";
+import { Observer } from "../observation";
+describe("syncBatch", () => {
+    it("should batch multiple state changes into a single notification", () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track count
+        state.name; // Track name
+        dispose();
+        // Make multiple changes in a batch
+        syncBatch(() => {
+            state.count = 1;
+            state.name = "Bob";
+            state.count = 2;
+        });
+        // Should only notify once despite multiple changes, and synchronously
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(2);
+        expect(state.name).toBe("Bob");
+        observer.dispose();
+    });
+    it("should handle nested batches correctly", () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        syncBatch(() => {
+            state.count = 1;
+            syncBatch(() => {
+                state.count = 2;
+            });
+            state.count = 3;
+        });
+        // Should still only notify once for nested batches
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(3);
+        observer.dispose();
+    });
+    it("should handle multiple observers with syncBatch", () => {
+        const state = createState({ count: 0 });
+        let notifyCount1 = 0;
+        let notifyCount2 = 0;
+        const observer1 = new Observer(() => {
+            notifyCount1++;
+        });
+        const observer2 = new Observer(() => {
+            notifyCount2++;
+        });
+        const dispose1 = observer1.observe();
+        state.count; // Track in observer1
+        dispose1();
+        const dispose2 = observer2.observe();
+        state.count; // Track in observer2
+        dispose2();
+        syncBatch(() => {
+            state.count = 1;
+            state.count = 2;
+            state.count = 3;
+        });
+        // Both observers should be notified exactly once
+        expect(notifyCount1).toBe(1);
+        expect(notifyCount2).toBe(1);
+        observer1.dispose();
+        observer2.dispose();
+    });
+    it("should maintain correct state values after syncBatch", () => {
+        const state = createState({
+            count: 0,
+            name: "Alice",
+            items: [1, 2, 3],
+        });
+        syncBatch(() => {
+            state.count = 10;
+            state.name = "Bob";
+            state.items.push(4);
+            state.items[0] = 100;
+        });
+        expect(state.count).toBe(10);
+        expect(state.name).toBe("Bob");
+        expect(state.items).toEqual([100, 2, 3, 4]);
+    });
+    it("should not flush if exception thrown within syncBatch", () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        try {
+            syncBatch(() => {
+                state.count = 1;
+                throw new Error("Test error");
+            });
+        }
+        catch (e) {
+            // Expected error
+        }
+        // Should NOT have flushed since the batch was interrupted
+        expect(notifyCount).toBe(0);
+        // But state change still occurred
+        expect(state.count).toBe(1);
+        observer.dispose();
+    });
+    it("should deduplicate notifications for the same observer", () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        state.name; // Track
+        dispose();
+        syncBatch(() => {
+            state.count = 1; // Triggers observer
+            state.name = "Bob"; // Triggers same observer again
+            state.count = 2; // Triggers observer yet again
+        });
+        // Should deduplicate and only notify once
+        expect(notifyCount).toBe(1);
+        observer.dispose();
+    });
+});
+describe("queue (async batching)", () => {
+    it("should queue updates and flush on microtask", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        // Make changes that will be queued
+        state.count = 1;
+        state.count = 2;
+        state.count = 3;
+        // Not yet notified (queued)
+        expect(notifyCount).toBe(0);
+        // Wait for microtask flush
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Should have notified once after flush
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(3);
+        observer.dispose();
+    });
+    it("should batch multiple async updates into one notification", async () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        state.name;
+        dispose();
+        state.count = 1;
+        state.name = "Bob";
+        state.count = 2;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Should batch all updates into single notification
+        expect(notifyCount).toBe(1);
+        observer.dispose();
+    });
+    it("should handle separate async batches", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        state.count = 1;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        const afterFirst = notifyCount;
+        state.count = 2;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        const afterSecond = notifyCount;
+        expect(afterFirst).toBe(1);
+        expect(afterSecond).toBe(2);
+        observer.dispose();
+    });
+});
+describe("syncBatch with nested async updates", () => {
+    it("should handle syncBatch inside async context", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        // Async update
+        state.count = 1;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(notifyCount).toBe(1);
+        // Sync batch after async
+        syncBatch(() => {
+            state.count = 2;
+            state.count = 3;
+        });
+        expect(notifyCount).toBe(2); // +1 from sync batch
+        observer.dispose();
+    });
+    it("should handle async updates inside syncBatch callback", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        syncBatch(() => {
+            state.count = 1;
+            // Trigger an async update from within syncBatch
+            setTimeout(() => {
+                state.count = 2;
+            }, 0);
+        });
+        // Sync batch should flush immediately
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(1);
+        // Wait for async update
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(notifyCount).toBe(2);
+        expect(state.count).toBe(2);
+        observer.dispose();
+    });
+});

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

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

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

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

package/dist/tests/createComputed.test.js

@@ -0,0 +1,257 @@
+import { describe, it, expect, vi } from "vitest";
+import { createComputed } from "../createComputed";
+import { createState } from "../createState";
+import { Observer } from "../observation";
+describe("createComputed", () => {
+    it("should compute values lazily", () => {
+        const state = createState({ count: 5 });
+        const computeFn = vi.fn(() => state.count * 2);
+        const computed = createComputed({
+            doubled: computeFn,
+        });
+        // Should not compute until accessed
+        expect(computeFn).not.toHaveBeenCalled();
+        const result = computed.doubled;
+        expect(computeFn).toHaveBeenCalledTimes(1);
+        expect(result).toBe(10);
+    });
+    it("should cache computed values", () => {
+        const state = createState({ count: 5 });
+        const computeFn = vi.fn(() => state.count * 2);
+        const computed = createComputed({
+            doubled: computeFn,
+        });
+        // Access multiple times
+        computed.doubled;
+        computed.doubled;
+        computed.doubled;
+        // Should only compute once due to caching
+        expect(computeFn).toHaveBeenCalledTimes(1);
+    });
+    it("should invalidate cache when dependencies change", async () => {
+        const state = createState({ count: 5 });
+        const computeFn = vi.fn(() => state.count * 2);
+        const computed = createComputed({
+            doubled: computeFn,
+        });
+        expect(computed.doubled).toBe(10);
+        expect(computeFn).toHaveBeenCalledTimes(1);
+        // Change dependency
+        state.count = 10;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Should recompute on next access
+        expect(computed.doubled).toBe(20);
+        expect(computeFn).toHaveBeenCalledTimes(2);
+    });
+    it("should handle multiple computed properties", async () => {
+        const state = createState({ width: 10, height: 5 });
+        const computed = createComputed({
+            area: () => state.width * state.height,
+            perimeter: () => 2 * (state.width + state.height),
+        });
+        expect(computed.area).toBe(50);
+        expect(computed.perimeter).toBe(30);
+        state.width = 20;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.area).toBe(100);
+        expect(computed.perimeter).toBe(50);
+    });
+    it("should support computed properties depending on other computed properties", async () => {
+        const state = createState({ count: 5 });
+        const computed = createComputed({
+            doubled: () => state.count * 2,
+            quadrupled: () => computed.doubled * 2,
+        });
+        expect(computed.doubled).toBe(10);
+        expect(computed.quadrupled).toBe(20);
+        state.count = 10;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.doubled).toBe(20);
+        expect(computed.quadrupled).toBe(40);
+    });
+    it("should be reactive when observed", async () => {
+        const state = createState({ count: 5 });
+        const computed = createComputed({
+            doubled: () => state.count * 2,
+        });
+        let observedValue = null;
+        const observer = new Observer(() => {
+            observedValue = computed.doubled;
+        });
+        const dispose = observer.observe();
+        computed.doubled; // Track the computed
+        dispose();
+        expect(observedValue).toBe(null);
+        // Change state
+        state.count = 10;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(observedValue).toBe(20);
+        observer.dispose();
+    });
+    it("should only recompute when actual dependencies change", () => {
+        const state = createState({ a: 1, b: 2 });
+        const computeFn = vi.fn(() => state.a * 2);
+        const computed = createComputed({
+            result: computeFn,
+        });
+        expect(computed.result).toBe(2);
+        expect(computeFn).toHaveBeenCalledTimes(1);
+        // Change unrelated property
+        state.b = 100;
+        // Should still return cached value
+        expect(computed.result).toBe(2);
+        expect(computeFn).toHaveBeenCalledTimes(1);
+    });
+    it("should handle complex dependency chains", async () => {
+        const state = createState({
+            items: [1, 2, 3, 4, 5],
+            multiplier: 2,
+        });
+        const computed = createComputed({
+            total: () => state.items.reduce((sum, item) => sum + item, 0),
+            multipliedTotal: () => computed.total * state.multiplier,
+            average: () => computed.total / state.items.length,
+        });
+        expect(computed.total).toBe(15);
+        expect(computed.multipliedTotal).toBe(30);
+        expect(computed.average).toBe(3);
+        state.items.push(6);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.total).toBe(21);
+        expect(computed.multipliedTotal).toBe(42);
+        expect(computed.average).toBe(3.5);
+        state.multiplier = 3;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.multipliedTotal).toBe(63);
+    });
+    it("should handle array operations", async () => {
+        const state = createState({ items: [1, 2, 3] });
+        const computed = createComputed({
+            sum: () => state.items.reduce((sum, item) => sum + item, 0),
+            count: () => state.items.length,
+        });
+        expect(computed.sum).toBe(6);
+        expect(computed.count).toBe(3);
+        state.items.push(4);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.sum).toBe(10);
+        expect(computed.count).toBe(4);
+        state.items.pop();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.sum).toBe(6);
+        expect(computed.count).toBe(3);
+    });
+    it("should handle deeply nested state", async () => {
+        const state = createState({
+            user: {
+                profile: {
+                    name: "Alice",
+                    age: 30,
+                },
+            },
+        });
+        const computed = createComputed({
+            displayName: () => `${state.user.profile.name} (${state.user.profile.age})`,
+        });
+        expect(computed.displayName).toBe("Alice (30)");
+        state.user.profile.name = "Bob";
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.displayName).toBe("Bob (30)");
+        state.user.profile.age = 25;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.displayName).toBe("Bob (25)");
+    });
+    it("should not recompute unnecessarily with nested computed", async () => {
+        const state = createState({ count: 5 });
+        const innerFn = vi.fn(() => state.count * 2);
+        const outerFn = vi.fn(() => computed.inner + 10);
+        const computed = createComputed({
+            inner: innerFn,
+            outer: outerFn,
+        });
+        // Access outer (should compute both)
+        expect(computed.outer).toBe(20);
+        expect(innerFn).toHaveBeenCalledTimes(1);
+        expect(outerFn).toHaveBeenCalledTimes(1);
+        // Access outer again (should use cache)
+        expect(computed.outer).toBe(20);
+        expect(innerFn).toHaveBeenCalledTimes(1);
+        expect(outerFn).toHaveBeenCalledTimes(1);
+        // Change state
+        state.count = 10;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Access outer (should recompute both)
+        expect(computed.outer).toBe(30);
+        expect(innerFn).toHaveBeenCalledTimes(2);
+        expect(outerFn).toHaveBeenCalledTimes(2);
+    });
+    it("should handle conditional dependencies", async () => {
+        const state = createState({ useA: true, a: 10, b: 20 });
+        const computeFn = vi.fn(() => (state.useA ? state.a : state.b));
+        const computed = createComputed({
+            value: computeFn,
+        });
+        expect(computed.value).toBe(10);
+        expect(computeFn).toHaveBeenCalledTimes(1);
+        // Change b (not currently tracked)
+        state.b = 30;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.value).toBe(10); // Should not recompute
+        expect(computeFn).toHaveBeenCalledTimes(1);
+        // Change a (currently tracked)
+        state.a = 15;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.value).toBe(15); // Should recompute
+        expect(computeFn).toHaveBeenCalledTimes(2);
+        // Switch to using b
+        state.useA = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.value).toBe(30); // Should recompute and now track b
+        expect(computeFn).toHaveBeenCalledTimes(3);
+        // Change a (no longer tracked)
+        state.a = 100;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.value).toBe(30); // Should not recompute
+        expect(computeFn).toHaveBeenCalledTimes(3);
+        // Change b (now tracked)
+        state.b = 40;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(computed.value).toBe(40); // Should recompute
+        expect(computeFn).toHaveBeenCalledTimes(4);
+    });
+    it("should return consistent values during same synchronous execution", () => {
+        const state = createState({ count: 5 });
+        const computed = createComputed({
+            doubled: () => state.count * 2,
+        });
+        const first = computed.doubled;
+        const second = computed.doubled;
+        const third = computed.doubled;
+        expect(first).toBe(10);
+        expect(second).toBe(10);
+        expect(third).toBe(10);
+    });
+    it("should handle empty computed object", () => {
+        const computed = createComputed({});
+        expect(Object.keys(computed).length).toBe(0);
+    });
+    it("should properly track changes in computed used by observers", async () => {
+        const state = createState({ x: 1, y: 2 });
+        const computed = createComputed({
+            sum: () => state.x + state.y,
+        });
+        const results = [];
+        const observer = new Observer(() => {
+            results.push(computed.sum);
+        });
+        const dispose = observer.observe();
+        computed.sum; // Track
+        dispose();
+        state.x = 10;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        state.y = 20;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(results).toEqual([12, 30]);
+        observer.dispose();
+    });
+});

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

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

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

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

package/dist/tests/createContext.test.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "./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 allow setting and getting context values", () => {
+        const ThemeContext = createContext();
+        function Parent() {
+            ThemeContext.inject({ theme: "dark" });
+            return () => _jsx(Child, {});
+        }
+        function Child() {
+            const theme = ThemeContext.get();
+            return () => _jsx("div", { children: theme.theme });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Parent, {}), container);
+        expect(container.textContent).toContain("dark");
+        document.body.removeChild(container);
+    });
+    it("should traverse parent components to find context", () => {
+        const ThemeContext = createContext();
+        function GrandParent() {
+            ThemeContext.inject({ theme: "light" });
+            return () => _jsx(Parent, {});
+        }
+        function Parent() {
+            return () => _jsx(Child, {});
+        }
+        function Child() {
+            const theme = ThemeContext.get();
+            return () => _jsx("div", { children: theme.theme });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(GrandParent, {}), container);
+        expect(container.textContent).toContain("light");
+        document.body.removeChild(container);
+    });
+    it("should throw error when context is not found", () => {
+        const ThemeContext = createContext();
+        function Child() {
+            expect(() => {
+                ThemeContext.get();
+            }).toThrow("There is no parent context");
+            return () => _jsx("div", { children: "Child" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Child, {}), container);
+        document.body.removeChild(container);
+    });
+    it("should throw error when setting context outside component", () => {
+        const ThemeContext = createContext();
+        expect(() => {
+            ThemeContext.inject({ theme: "dark" });
+        }).toThrow("No current component");
+    });
+    it("should throw error when getting context outside component", () => {
+        const ThemeContext = createContext();
+        expect(() => {
+            ThemeContext.get();
+        }).toThrow("No current component");
+    });
+    it("should allow overriding context in nested components", () => {
+        const ThemeContext = createContext();
+        function GrandParent() {
+            ThemeContext.inject({ theme: "light" });
+            return () => (_jsxs("div", { children: [_jsx(Parent, {}), _jsx(ChildOfGrandParent, {})] }));
+        }
+        function Parent() {
+            ThemeContext.inject({ theme: "dark" });
+            return () => _jsx(ChildOfParent, {});
+        }
+        function ChildOfParent() {
+            const theme = ThemeContext.get();
+            return () => _jsx("div", { class: "child-of-parent", children: theme.theme });
+        }
+        function ChildOfGrandParent() {
+            const theme = ThemeContext.get();
+            return () => _jsx("div", { class: "child-of-grandparent", children: theme.theme });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(GrandParent, {}), container);
+        const childOfParent = document.querySelector(".child-of-parent");
+        const childOfGrandParent = document.querySelector(".child-of-grandparent");
+        expect(childOfParent?.textContent).toBe("dark");
+        expect(childOfGrandParent?.textContent).toBe("light");
+        document.body.removeChild(container);
+    });
+    it("should support multiple different contexts", () => {
+        const ThemeContext = createContext();
+        const UserContext = createContext();
+        function Parent() {
+            ThemeContext.inject({ theme: "dark" });
+            UserContext.inject({ name: "Alice" });
+            return () => _jsx(Child, {});
+        }
+        function Child() {
+            const theme = ThemeContext.get();
+            const user = UserContext.get();
+            return () => _jsx("div", { children: `${theme.theme} - ${user.name}` });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Parent, {}), container);
+        expect(container.textContent).toContain("dark - Alice");
+        document.body.removeChild(container);
+    });
+    it("should handle context values of different types", () => {
+        const NumberContext = createContext();
+        const ArrayContext = createContext();
+        function Parent() {
+            NumberContext.inject(42);
+            ArrayContext.inject(["a", "b", "c"]);
+            return () => _jsx(Child, {});
+        }
+        function Child() {
+            const num = NumberContext.get();
+            const arr = ArrayContext.get();
+            return () => _jsx("div", { children: `${num} - ${arr.join(",")}` });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Parent, {}), container);
+        expect(container.textContent).toContain("42 - a,b,c");
+        document.body.removeChild(container);
+    });
+});

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

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

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

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