rask-ui 0.1.1 → 0.2.0

package/dist/vdom/component.cleanup.test.js

@@ -0,0 +1,323 @@
+import { describe, it, expect, vi } from "vitest";
+import { onCleanup } from "./ComponentVNode";
+import { jsx, render } from "./index";
+import { createState } from "../createState";
+describe("Component Cleanup", () => {
+    it("should call onCleanup callback when component unmounts", async () => {
+        const container = document.createElement("div");
+        const cleanupFn = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            onCleanup(cleanupFn);
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => state.show ? jsx(MyComponent, {}) : jsx("div", { children: "Empty" });
+        };
+        render(jsx(App, {}), container);
+        expect(cleanupFn).not.toHaveBeenCalled();
+        // Hide component to trigger unmount
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(cleanupFn).toHaveBeenCalledTimes(1);
+    });
+    it("should call multiple onCleanup callbacks in order", async () => {
+        const container = document.createElement("div");
+        const calls = [];
+        const cleanup1 = vi.fn(() => calls.push(1));
+        const cleanup2 = vi.fn(() => calls.push(2));
+        const cleanup3 = vi.fn(() => calls.push(3));
+        let stateFn;
+        const MyComponent = () => {
+            onCleanup(cleanup1);
+            onCleanup(cleanup2);
+            onCleanup(cleanup3);
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(cleanup1).toHaveBeenCalledTimes(1);
+        expect(cleanup2).toHaveBeenCalledTimes(1);
+        expect(cleanup3).toHaveBeenCalledTimes(1);
+        expect(calls).toEqual([1, 2, 3]);
+    });
+    it("should cleanup event listeners", async () => {
+        const container = document.createElement("div");
+        const cleanupFn = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            const button = document.createElement("button");
+            button.addEventListener("click", cleanupFn);
+            onCleanup(() => {
+                button.removeEventListener("click", cleanupFn);
+                cleanupFn();
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        expect(cleanupFn).not.toHaveBeenCalled();
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Cleanup function should be called
+        expect(cleanupFn).toHaveBeenCalledTimes(1);
+    });
+    it("should cleanup intervals", async () => {
+        vi.useFakeTimers();
+        const container = document.createElement("div");
+        const callback = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            const intervalId = setInterval(callback, 1000);
+            onCleanup(() => {
+                clearInterval(intervalId);
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        vi.advanceTimersByTime(2000);
+        expect(callback).toHaveBeenCalledTimes(2);
+        stateFn.show = false;
+        await vi.runAllTimersAsync();
+        // After cleanup, interval should be cleared
+        vi.advanceTimersByTime(2000);
+        expect(callback).toHaveBeenCalledTimes(2); // Still 2, not 4
+        vi.useRealTimers();
+    });
+    it("should cleanup timeouts", async () => {
+        vi.useFakeTimers();
+        const container = document.createElement("div");
+        const callback = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            const timeoutId = setTimeout(callback, 1000);
+            onCleanup(() => {
+                clearTimeout(timeoutId);
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        stateFn.show = false;
+        await vi.runAllTimersAsync();
+        // After cleanup, timeout should be cleared
+        vi.advanceTimersByTime(2000);
+        expect(callback).not.toHaveBeenCalled();
+        vi.useRealTimers();
+    });
+    it("should cleanup subscriptions", async () => {
+        const container = document.createElement("div");
+        const unsubscribe = vi.fn();
+        const subscribe = vi.fn(() => unsubscribe);
+        let stateFn;
+        const MyComponent = () => {
+            const subscription = subscribe();
+            onCleanup(() => {
+                subscription();
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        expect(subscribe).toHaveBeenCalledTimes(1);
+        expect(unsubscribe).not.toHaveBeenCalled();
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(unsubscribe).toHaveBeenCalledTimes(1);
+    });
+    it("should not call cleanup when component is still mounted", () => {
+        const container = document.createElement("div");
+        const cleanupFn = vi.fn();
+        const MyComponent = () => {
+            onCleanup(cleanupFn);
+            return () => jsx("div", { children: "Component" });
+        };
+        render(jsx(MyComponent, {}), container);
+        expect(cleanupFn).not.toHaveBeenCalled();
+    });
+    it("should call cleanup when component is replaced with different component", async () => {
+        const container = document.createElement("div");
+        const cleanup1 = vi.fn();
+        const cleanup2 = vi.fn();
+        let stateFn;
+        const Component1 = () => {
+            onCleanup(cleanup1);
+            return () => jsx("div", { children: "Component 1" });
+        };
+        const Component2 = () => {
+            onCleanup(cleanup2);
+            return () => jsx("div", { children: "Component 2" });
+        };
+        const App = () => {
+            const state = createState({ showFirst: true });
+            stateFn = state;
+            return () => state.showFirst ? jsx(Component1, {}) : jsx(Component2, {});
+        };
+        render(jsx(App, {}), container);
+        expect(cleanup1).not.toHaveBeenCalled();
+        stateFn.showFirst = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Component1 should be cleaned up when replaced with Component2
+        expect(cleanup1).toHaveBeenCalledTimes(1);
+        expect(cleanup2).not.toHaveBeenCalled();
+    });
+    it("should throw error when onCleanup is called outside component setup", () => {
+        expect(() => {
+            onCleanup(() => { });
+        }).toThrow("Only use onCleanup in component setup");
+    });
+    it("should cleanup nested resources", async () => {
+        const container = document.createElement("div");
+        const outerCleanup = vi.fn();
+        const innerCleanup = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            const resource1 = { close: outerCleanup };
+            onCleanup(() => resource1.close());
+            const resource2 = { dispose: innerCleanup };
+            onCleanup(() => resource2.dispose());
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(outerCleanup).toHaveBeenCalledTimes(1);
+        expect(innerCleanup).toHaveBeenCalledTimes(1);
+    });
+    it("should handle cleanup errors gracefully", async () => {
+        const container = document.createElement("div");
+        const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => { });
+        const cleanup1 = vi.fn(() => {
+            throw new Error("Cleanup error");
+        });
+        const cleanup2 = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            onCleanup(cleanup1);
+            onCleanup(cleanup2);
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        // Trigger unmount - errors should be logged but not thrown
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Both cleanups should have been called
+        expect(cleanup1).toHaveBeenCalledTimes(1);
+        expect(cleanup2).toHaveBeenCalledTimes(1);
+        // Error should have been logged
+        expect(consoleErrorSpy).toHaveBeenCalledWith("Error during cleanup:", expect.objectContaining({ message: "Cleanup error" }));
+        consoleErrorSpy.mockRestore();
+    });
+    it("should cleanup component with state and effects", async () => {
+        vi.useFakeTimers();
+        const container = document.createElement("div");
+        const updateCallback = vi.fn();
+        const cleanupFn = vi.fn();
+        let stateFn;
+        const MyComponent = () => {
+            const intervalId = setInterval(updateCallback, 100);
+            onCleanup(() => {
+                clearInterval(intervalId);
+                cleanupFn();
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        vi.advanceTimersByTime(500);
+        expect(updateCallback).toHaveBeenCalledTimes(5);
+        stateFn.show = false;
+        await vi.runAllTimersAsync();
+        expect(cleanupFn).toHaveBeenCalledTimes(1);
+        // After cleanup, no more updates
+        vi.advanceTimersByTime(500);
+        expect(updateCallback).toHaveBeenCalledTimes(5);
+        vi.useRealTimers();
+    });
+    it("should allow cleanup to access component closure variables", async () => {
+        const container = document.createElement("div");
+        let capturedValue;
+        let stateFn;
+        const MyComponent = () => {
+            const value = 42;
+            onCleanup(() => {
+                capturedValue = value;
+            });
+            return () => jsx("div", { children: "Component" });
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(MyComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(capturedValue).toBe(42);
+    });
+    it("should cleanup parent and child components", async () => {
+        const container = document.createElement("div");
+        const parentCleanup = vi.fn();
+        const childCleanup = vi.fn();
+        let stateFn;
+        const ChildComponent = () => {
+            onCleanup(childCleanup);
+            return () => jsx("span", { children: "Child" });
+        };
+        const ParentComponent = () => {
+            onCleanup(parentCleanup);
+            return () => jsx(ChildComponent, {});
+        };
+        const App = () => {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? jsx(ParentComponent, {}) : null);
+        };
+        render(jsx(App, {}), container);
+        expect(parentCleanup).not.toHaveBeenCalled();
+        expect(childCleanup).not.toHaveBeenCalled();
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(parentCleanup).toHaveBeenCalledTimes(1);
+        expect(childCleanup).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/vdom/component.counter.test.d.ts

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

package/dist/vdom/component.counter.test.d.ts.map

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

package/dist/vdom/component.counter.test.js

@@ -0,0 +1,124 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "./index";
+import { createState } from "../createState";
+describe("Component Counter", () => {
+    it("should render a simple counter", () => {
+        const container = document.createElement("div");
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            return () => jsx("h1", { children: `Counter ${state.count}` });
+        };
+        render(jsx(MyComponent, {}), container);
+        expect(container.children).toHaveLength(1);
+        expect(container.children[0].textContent).toBe("Counter 0");
+    });
+    it("should update counter text when state changes", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("h1", { children: `Counter ${state.count}` });
+        };
+        render(jsx(MyComponent, {}), container);
+        expect(container.children[0].textContent).toBe("Counter 0");
+        // Update the counter
+        stateFn.count++;
+        // Wait for reactive update
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        expect(container.children[0].textContent).toBe("Counter 1");
+    });
+    it("should handle multiple counter increments", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("h1", { children: `Counter ${state.count}` });
+        };
+        render(jsx(MyComponent, {}), container);
+        // Multiple increments
+        stateFn.count++;
+        stateFn.count++;
+        stateFn.count++;
+        // Wait for reactive update
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        expect(container.children[0].textContent).toBe("Counter 3");
+    });
+    it("should handle counter with click handler", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("h1", {
+                children: `Counter ${state.count}`,
+                onClick: () => state.count++,
+            });
+        };
+        render(jsx(MyComponent, {}), container);
+        expect(container.children[0].textContent).toBe("Counter 0");
+        // Simulate state change (like a click would do)
+        stateFn.count++;
+        // Wait for reactive update
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        expect(container.children[0].textContent).toBe("Counter 1");
+    });
+    it("should handle counter in a div wrapper", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("div", {
+                children: jsx("h1", { children: `Counter ${state.count}` }),
+            });
+        };
+        render(jsx(MyComponent, {}), container);
+        stateFn.count++;
+        // Wait for reactive update
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        expect(container.children[0].querySelector("h1")?.textContent).toBe("Counter 1");
+    });
+    it("should handle template literal with interpolated count", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("h1", {
+                children: `Hello World (${state.count})`,
+            });
+        };
+        render(jsx(MyComponent, {}), container);
+        stateFn.count = 5;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        expect(container.children[0].textContent).toBe("Hello World (5)");
+    });
+    it("should handle counter with nested elements", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = () => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("div", {
+                children: [
+                    jsx("h1", { children: "Title" }),
+                    jsx("p", { children: `Count: ${state.count}` }),
+                ],
+            });
+        };
+        render(jsx(MyComponent, {}), container);
+        stateFn.count = 42;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Validate the container
+        const div = container.children[0];
+        expect(div.querySelector("h1")?.textContent).toBe("Title");
+        expect(div.querySelector("p")?.textContent).toBe("Count: 42");
+    });
+});

package/dist/vdom/component.interaction.test.d.ts

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

package/dist/vdom/component.interaction.test.d.ts.map

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

package/dist/vdom/component.interaction.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "./index";
+import { createState } from "../createState";
+describe("Component State and Props Interaction", () => {
+    it("should use both state and props together", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            const state = createState({ count: props.initialCount });
+            return () => jsx("div", { children: String(state.count) });
+        };
+        render(jsx(MyComponent, { initialCount: 10 }), container);
+        expect(container.children[0].textContent).toBe("10");
+    });
+    it("should derive state from props on mount", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            const state = createState({ count: 0 });
+            return () => jsx("div", {
+                children: String(state.count * props.multiplier),
+            });
+        };
+        render(jsx(MyComponent, { multiplier: 5 }), container);
+        expect(container.children[0].textContent).toBe("0");
+    });
+    it("should handle state changes with prop-based rendering", () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const MyComponent = (props) => {
+            const state = createState({ count: 0 });
+            stateFn = state;
+            return () => jsx("div", {
+                children: `${props.prefix}: ${state.count}`,
+            });
+        };
+        render(jsx(MyComponent, { prefix: "Count" }), container);
+        expect(container.children[0].textContent).toBe("Count: 0");
+        stateFn.count = 5;
+        // After state update, should show "Count: 5"
+        // The implementation will handle this
+    });
+    it("should support multiple state values with props", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            const state = createState({
+                count: props.initialCount,
+                isVisible: true,
+            });
+            return () => jsx("div", {
+                children: state.isVisible
+                    ? `${props.title}: ${state.count}`
+                    : "Hidden",
+            });
+        };
+        render(jsx(MyComponent, {
+            title: "Counter",
+            initialCount: 5,
+        }), container);
+        expect(container.children[0].textContent).toBe("Counter: 5");
+    });
+    it("should handle complex state derived from props", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            const state = createState({ selectedIndex: 0 });
+            return () => jsx("div", {
+                children: props.items[state.selectedIndex] || "None",
+            });
+        };
+        render(jsx(MyComponent, {
+            items: ["First", "Second", "Third"],
+        }), container);
+        expect(container.children[0].textContent).toBe("First");
+    });
+});

package/dist/vdom/component.props.test.d.ts

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

package/dist/vdom/component.props.test.d.ts.map

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

package/dist/vdom/component.props.test.js

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "./index";
+describe("Component Props", () => {
+    it("should pass string props to component", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", { children: props.message });
+        };
+        render(jsx(MyComponent, { message: "Hello Props" }), container);
+        expect(container.children[0].textContent).toBe("Hello Props");
+    });
+    it("should pass number props to component", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", { children: String(props.count) });
+        };
+        render(jsx(MyComponent, { count: 42 }), container);
+        expect(container.children[0].textContent).toBe("42");
+    });
+    it("should pass object props to component", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", {
+                children: `${props.user.name} is ${props.user.age}`,
+            });
+        };
+        render(jsx(MyComponent, { user: { name: "Alice", age: 25 } }), container);
+        expect(container.children[0].textContent).toBe("Alice is 25");
+    });
+    it("should pass array props to component", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("ul", {
+                children: props.items.map((item) => jsx("li", { children: item })),
+            });
+        };
+        render(jsx(MyComponent, { items: ["apple", "banana", "cherry"] }), container);
+        const ul = container.children[0];
+        expect(ul.children).toHaveLength(3);
+        expect(ul.children[0].textContent).toBe("apple");
+        expect(ul.children[1].textContent).toBe("banana");
+        expect(ul.children[2].textContent).toBe("cherry");
+    });
+    it("should pass function props to component", () => {
+        const container = document.createElement("div");
+        const handleClick = () => "clicked";
+        const MyComponent = (props) => {
+            return () => jsx("button", {
+                children: props.onClick(),
+            });
+        };
+        render(jsx(MyComponent, { onClick: handleClick }), container);
+        expect(container.children[0].textContent).toBe("clicked");
+    });
+    it("should pass multiple props to component", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", {
+                children: `${props.title}: ${props.count} (${props.isActive ? "active" : "inactive"})`,
+            });
+        };
+        render(jsx(MyComponent, { title: "Counter", count: 5, isActive: true }), container);
+        expect(container.children[0].textContent).toBe("Counter: 5 (active)");
+    });
+    it("should handle optional props", () => {
+        const container1 = document.createElement("div");
+        const container2 = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", {
+                children: props.message || "Default message",
+            });
+        };
+        render(jsx(MyComponent, {}), container1);
+        expect(container1.children[0].textContent).toBe("Default message");
+        render(jsx(MyComponent, { message: "Custom message" }), container2);
+        expect(container2.children[0].textContent).toBe("Custom message");
+    });
+    it("should update when props change", () => {
+        const container = document.createElement("div");
+        const MyComponent = (props) => {
+            return () => jsx("div", { children: props.message });
+        };
+        render(jsx(MyComponent, { message: "Initial" }), container);
+        expect(container.children[0].textContent).toBe("Initial");
+        // Simulate props update
+        // The implementation will handle prop updates through patch
+    });
+});

package/dist/vdom/component.return-types.test.d.ts

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

package/dist/vdom/component.return-types.test.d.ts.map

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