rask-ui 0.2.5 → 0.2.7

package/dist/createView.test.js

@@ -1,203 +0,0 @@
-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/error.test.d.ts

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

package/dist/error.test.d.ts.map

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

package/dist/error.test.js

@@ -1,144 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
-import { describe, it, expect } from "vitest";
-import { ErrorBoundary } from "./error";
-import { renderComponent } from "./test-setup";
-describe("ErrorBoundary", () => {
-    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 { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Safe content");
-        expect(container.textContent).not.toContain("Error:");
-        unmount();
-    });
-    it("should catch errors thrown in child components", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw new Error("Child component error");
-            };
-        }
-        function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
-        }
-        const { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Error:");
-        expect(container.textContent).toContain("Child component error");
-        unmount();
-    });
-    it("should render custom error UI", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw new Error("Something went wrong");
-            };
-        }
-        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 { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        const errorUI = document.querySelector(".error-ui");
-        expect(errorUI).not.toBeNull();
-        expect(errorUI?.querySelector("h1")?.textContent).toBe("Oops!");
-        expect(errorUI?.textContent).toContain("Something went wrong");
-        unmount();
-    });
-    it("should handle multiple children", async () => {
-        function SafeChild1() {
-            return () => _jsx("div", { children: "Child 1" });
-        }
-        function SafeChild2() {
-            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 { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Child 1");
-        expect(container.textContent).toContain("Child 2");
-        unmount();
-    });
-    it("should catch errors from nested children", async () => {
-        function DeepChild() {
-            return () => {
-                throw new Error("Deep error");
-            };
-        }
-        function MiddleChild() {
-            return () => _jsx(DeepChild, {});
-        }
-        function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Caught: ", String(error)] }), children: _jsx(MiddleChild, {}) }));
-        }
-        const { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Caught:");
-        expect(container.textContent).toContain("Deep error");
-        unmount();
-    });
-    it("should allow nested error boundaries", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw new Error("Inner error");
-            };
-        }
-        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 { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        // Inner boundary should catch the error
-        expect(container.textContent).toContain("Inner:");
-        expect(container.textContent).not.toContain("Outer:");
-        unmount();
-    });
-    it("should handle string errors", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw "String error";
-            };
-        }
-        function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
-        }
-        const { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("String error");
-        unmount();
-    });
-    it("should handle object errors", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw { message: "Custom error object", code: 500 };
-            };
-        }
-        function TestComponent() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => (_jsxs("div", { children: ["Error: ", error.message, " (Code: ", error.code, ")"] })), children: _jsx(ThrowingChild, {}) }));
-        }
-        const { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Custom error object");
-        expect(container.textContent).toContain("500");
-        unmount();
-    });
-    it("should switch back to children if error is cleared", async () => {
-        // Note: This test demonstrates the current behavior
-        // In practice, error clearing would require additional implementation
-        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 { container, unmount } = renderComponent(_jsx(TestComponent, {}));
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(container.textContent).toContain("Safe content");
-        unmount();
-    });
-});

package/dist/integration.test.d.ts

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

package/dist/integration.test.d.ts.map

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

package/dist/integration.test.js

@@ -1,155 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
-import { describe, it, expect, vi } from "vitest";
-import { onCleanup, onMount } from "./vdom/ComponentVNode";
-import { render } from "./vdom";
-import { createState } from "./createState";
-import { createRef } from "./createRef";
-import { createContext } from "./createContext";
-import { ErrorBoundary } from "./error";
-describe("Integration Tests", () => {
-    it("should render a simple component", () => {
-        function App() {
-            return () => _jsx("div", { children: "Hello World" });
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(App, {}), container);
-        // After patch, container is replaced, so check body instead
-        expect(document.body.textContent).toContain("Hello World");
-    });
-    it("should handle reactive state updates", async () => {
-        function Counter() {
-            const state = createState({ count: 0 });
-            return () => (_jsxs("div", { children: [_jsxs("span", { children: ["Count: ", state.count] }), _jsx("button", { onClick: () => state.count++, children: "Increment" })] }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(Counter, {}), container);
-        expect(document.body.textContent).toContain("Count: 0");
-        // Simulate click
-        const button = document.querySelector("button");
-        button?.click();
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(document.body.textContent).toContain("Count: 1");
-    });
-    it("should work with refs", async () => {
-        function App() {
-            const ref = createRef();
-            onMount(() => {
-                expect(ref.current).not.toBeNull();
-                expect(ref.current?.tagName).toBe("DIV");
-            });
-            return () => _jsx("div", { ref: ref, children: "Test" });
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(App, {}), container);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-    });
-    it("should handle context", () => {
-        const ThemeContext = createContext();
-        function Child() {
-            const theme = ThemeContext.get();
-            return () => _jsx("div", { class: "child", children: theme.theme });
-        }
-        function Parent() {
-            ThemeContext.inject({ theme: "dark" });
-            return () => _jsx(Child, {});
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(Parent, {}), container);
-        expect(document.body.textContent).toContain("dark");
-    });
-    it("should handle error boundaries", async () => {
-        function ThrowingChild() {
-            return () => {
-                throw new Error("Test error");
-            };
-        }
-        function App() {
-            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { class: "error", children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(App, {}), container);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        const errorDiv = document.querySelector(".error");
-        expect(errorDiv).not.toBeNull();
-        expect(errorDiv?.textContent).toContain("Test error");
-    });
-    it("should call onMount and onCleanup", async () => {
-        const mountFn = vi.fn();
-        const cleanupFn = vi.fn();
-        let stateFn;
-        function Component() {
-            onMount(mountFn);
-            onCleanup(cleanupFn);
-            return () => _jsx("div", { children: "Test" });
-        }
-        function App() {
-            const state = createState({ show: true });
-            stateFn = state;
-            return () => (state.show ? _jsx(Component, {}) : _jsx("div", { children: "Empty" }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(App, {}), container);
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(mountFn).toHaveBeenCalledTimes(1);
-        expect(cleanupFn).not.toHaveBeenCalled();
-        // Unmount by toggling state to render something else
-        stateFn.show = false;
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(cleanupFn).toHaveBeenCalledTimes(1);
-    });
-    it("should handle nested components", () => {
-        function GrandChild() {
-            return () => _jsx("span", { children: "GrandChild" });
-        }
-        function Child() {
-            return () => (_jsxs("div", { children: ["Child ", _jsx(GrandChild, {})] }));
-        }
-        function Parent() {
-            return () => (_jsxs("div", { children: ["Parent ", _jsx(Child, {})] }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(Parent, {}), container);
-        expect(document.body.textContent).toContain("Parent");
-        expect(document.body.textContent).toContain("Child");
-        expect(document.body.textContent).toContain("GrandChild");
-    });
-    it("should handle conditional rendering", async () => {
-        function App() {
-            const state = createState({ show: true });
-            return () => (_jsxs("div", { children: [_jsx("button", { onClick: () => (state.show = !state.show), children: "Toggle" }), state.show ? _jsx("div", { class: "content", children: "Content" }) : null] }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(App, {}), container);
-        // Wait for initial render
-        await new Promise((resolve) => setTimeout(resolve, 5));
-        expect(document.querySelector(".content")).not.toBeNull();
-        const button = document.querySelector("button");
-        button?.click();
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(document.querySelector(".content")).toBeNull();
-    });
-    it("should handle list rendering", async () => {
-        function TodoList() {
-            const state = createState({ items: ["Item 1", "Item 2"] });
-            return () => (_jsxs("div", { children: [_jsx("button", { onClick: () => {
-                            state.items.push(`Item ${state.items.length + 1}`);
-                        }, children: "Add" }), _jsx("ul", { children: state.items.map((item) => (_jsx("li", { children: item }))) })] }));
-        }
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        render(_jsx(TodoList, {}), container);
-        expect(document.querySelectorAll("li").length).toBe(2);
-        const button = document.querySelector("button");
-        button?.click();
-        await new Promise((resolve) => setTimeout(resolve, 10));
-        expect(document.querySelectorAll("li").length).toBe(3);
-    });
-});

package/dist/jsx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsx.d.ts","sourceRoot":"","sources":["../src/jsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAE9D,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,KAAK,EAAE,SAmDlB"}

package/dist/jsx.js

@@ -1,42 +0,0 @@
-import { h } from "snabbdom";
-import { createComponent } from "./component";
-export function jsx(type, props, children) {
-    let flatChildren = children.flat();
-    if (typeof type === "string") {
-        const data = {};
-        for (const key in props) {
-            if (key === "key") {
-                data[key] = props[key];
-                continue;
-            }
-            if (key === "hook") {
-                data[key] = props[key];
-                continue;
-            }
-            if (key === "style") {
-                data.style = props[key];
-                continue;
-            }
-            if (key.startsWith("on")) {
-                data.on = data.on || {};
-                data.on[key.substring(2).toLocaleLowerCase()] = props[key];
-                continue;
-            }
-            if (key.startsWith("data-") || key.startsWith("aria-")) {
-                data.attrs = data.attrs || {};
-                data.attrs[key] = props[key];
-                continue;
-            }
-            if (type === "svg") {
-                data.attrs = data.attrs || {};
-                data.attrs[key] = props[key];
-                continue;
-            }
-            data.props = data.props || {};
-            data.props[key] = props[key];
-        }
-        return h(type, data, flatChildren);
-    }
-    const maybeSingleChild = flatChildren.length === 1 ? flatChildren[0] : flatChildren;
-    return createComponent(type, props, maybeSingleChild);
-}

package/dist/observation.test.d.ts

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

package/dist/observation.test.d.ts.map

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