rask-ui 0.1.0 → 0.2.0

package/dist/tests/createRef.test.js

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { createRef } from "../createRef";
+import { jsx, render } from "../vdom";
+describe("createRef", () => {
+    it("should create a ref with null initial value", () => {
+        const ref = createRef();
+        expect(ref.current).toBeNull();
+    });
+    it("should be callable as a function", () => {
+        const ref = createRef();
+        expect(typeof ref).toBe("function");
+    });
+    it("should update current when called with a node", () => {
+        const ref = createRef();
+        const element = document.createElement("div");
+        ref(element);
+        expect(ref.current).toBe(element);
+    });
+    it("should update current when called with null", () => {
+        const ref = createRef();
+        const element = document.createElement("div");
+        ref(element);
+        expect(ref.current).toBe(element);
+        ref(null);
+        expect(ref.current).toBeNull();
+    });
+    it("should work with JSX ref attribute", async () => {
+        const ref = createRef();
+        function TestComponent() {
+            return () => jsx("div", { ref, children: "Hello" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ref.current).not.toBeNull();
+        expect(ref.current?.tagName).toBe("DIV");
+        expect(ref.current?.textContent).toBe("Hello");
+        document.body.removeChild(vnode.elm);
+    });
+    it("should handle multiple ref updates", () => {
+        const ref = createRef();
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        ref(div);
+        expect(ref.current).toBe(div);
+        ref(span);
+        expect(ref.current).toBe(span);
+        ref(null);
+        expect(ref.current).toBeNull();
+    });
+    it("should work with different element types", async () => {
+        const inputRef = createRef();
+        const buttonRef = createRef();
+        function TestComponent() {
+            return () => jsx("div", {
+                children: [
+                    jsx("input", { ref: inputRef, type: "text" }),
+                    jsx("button", { ref: buttonRef, children: "Click" }),
+                ],
+            });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(inputRef.current?.tagName).toBe("INPUT");
+        expect(buttonRef.current?.tagName).toBe("BUTTON");
+        document.body.removeChild(vnode.elm);
+    });
+    it("should allow accessing DOM properties", async () => {
+        const ref = createRef();
+        function TestComponent() {
+            return () => jsx("input", { ref, type: "text", value: "test" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ref.current?.value).toBe("test");
+        expect(ref.current?.type).toBe("text");
+        document.body.removeChild(vnode.elm);
+    });
+});

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

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

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

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

package/dist/tests/createState.test.js

@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import { createState } from "../createState";
+import { Observer } from "../observation";
+describe("createState", () => {
+    it("should create a reactive proxy from an object", () => {
+        const state = createState({ count: 0 });
+        expect(state.count).toBe(0);
+    });
+    it("should allow mutations", () => {
+        const state = createState({ count: 0 });
+        state.count = 5;
+        expect(state.count).toBe(5);
+    });
+    it("should return the same proxy for the same object", () => {
+        const obj = { count: 0 };
+        const proxy1 = createState(obj);
+        const proxy2 = createState(obj);
+        expect(proxy1).toBe(proxy2);
+    });
+    it("should create nested proxies for nested objects", () => {
+        const state = createState({ user: { name: "Alice", age: 30 } });
+        state.user.name = "Bob";
+        expect(state.user.name).toBe("Bob");
+    });
+    it("should handle arrays reactively", () => {
+        const state = createState({ items: [1, 2, 3] });
+        state.items.push(4);
+        expect(state.items).toEqual([1, 2, 3, 4]);
+    });
+    it("should track property access in observers", () => {
+        const state = createState({ count: 0 });
+        let renderCount = 0;
+        const observer = new Observer(() => {
+            renderCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Access property to track it
+        dispose();
+        expect(renderCount).toBe(0);
+        // Mutate after observation setup
+        const dispose2 = observer.observe();
+        const value = state.count; // Track
+        dispose2(); // Stop observing, subscriptions are now active
+        state.count = 1;
+        // Wait for microtask
+        return new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(renderCount).toBeGreaterThan(0);
+                resolve(undefined);
+            });
+        });
+    });
+    it("should handle property deletion", () => {
+        const state = createState({ count: 0, temp: "value" });
+        delete state.temp;
+        expect(state.temp).toBeUndefined();
+        expect("temp" in state).toBe(false);
+    });
+    it("should not create proxies for functions", () => {
+        const fn = () => "hello";
+        const state = createState({ method: fn });
+        expect(state.method).toBe(fn);
+        expect(state.method()).toBe("hello");
+    });
+    it("should handle symbol properties", () => {
+        const sym = Symbol("test");
+        const state = createState({ [sym]: "value" });
+        expect(state[sym]).toBe("value");
+    });
+    it("should notify observers only on actual changes", () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        state.count = 0; // Same value - should still notify per current implementation
+        state.count = 0;
+        return new Promise((resolve) => {
+            queueMicrotask(() => {
+                // The implementation notifies even for same value, except for optimization cases
+                observer.dispose();
+                resolve(undefined);
+            });
+        });
+    });
+    it("should handle deeply nested objects", () => {
+        const state = createState({
+            level1: {
+                level2: {
+                    level3: {
+                        value: "deep",
+                    },
+                },
+            },
+        });
+        state.level1.level2.level3.value = "modified";
+        expect(state.level1.level2.level3.value).toBe("modified");
+    });
+    it("should handle array mutations correctly", () => {
+        const state = createState({ items: [1, 2, 3] });
+        state.items.pop();
+        expect(state.items).toEqual([1, 2]);
+        state.items.unshift(0);
+        expect(state.items).toEqual([0, 1, 2]);
+        state.items.splice(1, 1, 99);
+        expect(state.items).toEqual([0, 99, 2]);
+    });
+});

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

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

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

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

package/dist/tests/createView.test.js

@@ -0,0 +1,203 @@
+import { describe, it, expect } from "vitest";
+import { createView } from "../createView";
+import { createState } from "../createState";
+import { Observer } from "../observation";
+describe("createView", () => {
+    it("should merge two plain objects", () => {
+        const a = { x: 1, y: 2 };
+        const b = { z: 3 };
+        const view = createView(a, b);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(2);
+        expect(view.z).toBe(3);
+    });
+    it("should allow later arguments to override earlier ones", () => {
+        const a = { x: 1, y: 2 };
+        const b = { y: 3, z: 4 };
+        const view = createView(a, b);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(3); // b.y overrides a.y
+        expect(view.z).toBe(4);
+    });
+    it("should maintain reactivity with reactive objects", async () => {
+        const state = createState({ count: 0 });
+        const view = createView(state);
+        let renderCount = 0;
+        let lastValue = 0;
+        const observer = new Observer(() => {
+            renderCount++;
+        });
+        const dispose = observer.observe();
+        lastValue = view.count; // Track the property
+        dispose();
+        expect(renderCount).toBe(0);
+        state.count = 5;
+        // Wait for microtask to process notification
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(renderCount).toBe(1);
+                lastValue = view.count;
+                expect(lastValue).toBe(5);
+                resolve(undefined);
+            });
+        });
+    });
+    it("should merge reactive and plain objects while maintaining reactivity", () => {
+        const state = createState({ count: 0 });
+        const helpers = {
+            increment() {
+                state.count++;
+            },
+            decrement() {
+                state.count--;
+            },
+        };
+        const view = createView(state, helpers);
+        expect(view.count).toBe(0);
+        expect(typeof view.increment).toBe("function");
+        expect(typeof view.decrement).toBe("function");
+        view.increment();
+        expect(view.count).toBe(1);
+        view.decrement();
+        expect(view.count).toBe(0);
+    });
+    it("should merge multiple reactive objects", () => {
+        const state1 = createState({ count: 0 });
+        const state2 = createState({ name: "Alice" });
+        const state3 = createState({ age: 25 });
+        const view = createView(state1, state2, state3);
+        expect(view.count).toBe(0);
+        expect(view.name).toBe("Alice");
+        expect(view.age).toBe(25);
+        state1.count = 10;
+        state2.name = "Bob";
+        state3.age = 30;
+        expect(view.count).toBe(10);
+        expect(view.name).toBe("Bob");
+        expect(view.age).toBe(30);
+    });
+    it("should reflect changes in source objects", () => {
+        const source = { x: 1 };
+        const view = createView(source);
+        expect(view.x).toBe(1);
+        source.x = 2;
+        expect(view.x).toBe(2);
+    });
+    it("should handle property override order correctly", () => {
+        const a = { x: 1, y: 2, z: 3 };
+        const b = { y: 20 };
+        const c = { z: 30 };
+        const view = createView(a, b, c);
+        expect(view.x).toBe(1); // From a
+        expect(view.y).toBe(20); // From b (overrides a)
+        expect(view.z).toBe(30); // From c (overrides a)
+    });
+    it("should only include enumerable properties", () => {
+        const obj = { x: 1 };
+        Object.defineProperty(obj, "hidden", {
+            value: 42,
+            enumerable: false,
+        });
+        const view = createView(obj);
+        expect(view.x).toBe(1);
+        expect(view.hidden).toBeUndefined();
+    });
+    it("should handle symbol keys", () => {
+        const sym = Symbol("test");
+        const obj = { x: 1, [sym]: "symbol value" };
+        const view = createView(obj);
+        expect(view.x).toBe(1);
+        expect(view[sym]).toBe("symbol value");
+    });
+    it("should track dependencies for each property independently", async () => {
+        const state = createState({ count: 0, name: "Alice" });
+        const view = createView(state);
+        let countRenderCount = 0;
+        let nameRenderCount = 0;
+        // Observer that only accesses count
+        const countObserver = new Observer(() => {
+            countRenderCount++;
+        });
+        const dispose1 = countObserver.observe();
+        view.count; // Track count
+        dispose1();
+        expect(countRenderCount).toBe(0);
+        // Change count - should trigger
+        state.count = 1;
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(countRenderCount).toBe(1);
+                resolve(undefined);
+            });
+        });
+        // Change name - should NOT trigger (not tracked)
+        state.name = "Bob";
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(countRenderCount).toBe(1); // Still 1
+                resolve(undefined);
+            });
+        });
+        // Now track name with a different observer
+        const nameObserver = new Observer(() => {
+            nameRenderCount++;
+        });
+        const dispose2 = nameObserver.observe();
+        view.name; // Track name
+        dispose2();
+        expect(nameRenderCount).toBe(0);
+        // Change name - should trigger name observer
+        state.name = "Charlie";
+        await new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(nameRenderCount).toBe(1);
+                resolve(undefined);
+            });
+        });
+    });
+    it("should return the same value type as source", () => {
+        const obj = { nums: [1, 2, 3], nested: { x: 1 } };
+        const view = createView(obj);
+        expect(Array.isArray(view.nums)).toBe(true);
+        expect(view.nums).toEqual([1, 2, 3]);
+        expect(typeof view.nested).toBe("object");
+        expect(view.nested.x).toBe(1);
+    });
+    it("should handle empty merge", () => {
+        const view = createView({});
+        expect(Object.keys(view).length).toBe(0);
+    });
+    it("should merge single object", () => {
+        const obj = { x: 1, y: 2 };
+        const view = createView(obj);
+        expect(view.x).toBe(1);
+        expect(view.y).toBe(2);
+    });
+    it("should maintain function context", () => {
+        const state = createState({ count: 0 });
+        const methods = {
+            increment() {
+                state.count++;
+            },
+        };
+        const view = createView(state, methods);
+        expect(view.count).toBe(0);
+        view.increment();
+        expect(view.count).toBe(1);
+        expect(state.count).toBe(1);
+    });
+    it("should work with reactive state and computed-like patterns", () => {
+        const state = createState({ firstName: "John", lastName: "Doe" });
+        const computed = {
+            get fullName() {
+                return `${state.firstName} ${state.lastName}`;
+            },
+        };
+        const view = createView(state, computed);
+        expect(view.firstName).toBe("John");
+        expect(view.lastName).toBe("Doe");
+        expect(view.fullName).toBe("John Doe");
+        state.firstName = "Jane";
+        expect(view.fullName).toBe("Jane Doe");
+    });
+});

package/dist/tests/edge-cases.test.d.ts

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

package/dist/tests/edge-cases.test.d.ts.map

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