rask-ui 0.2.4 → 0.2.6

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

@@ -1,334 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { jsx, render } from "../vdom";
-import { createState } from "../createState";
-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 pass props from parent to child component", () => {
-        const container = document.createElement("div");
-        const ChildComponent = (props) => {
-            return () => jsx("div", { children: props.message });
-        };
-        const ParentComponent = (props) => {
-            return () => jsx("div", {
-                children: jsx(ChildComponent, { message: props.text }),
-            });
-        };
-        render(jsx(ParentComponent, { text: "Hello from parent" }), container);
-        expect(container.children[0].children[0].textContent).toBe("Hello from parent");
-    });
-    it("should pass props through multiple levels of nesting", () => {
-        const container = document.createElement("div");
-        const GrandchildComponent = (props) => {
-            return () => jsx("span", { children: props.value });
-        };
-        const ChildComponent = (props) => {
-            return () => jsx("div", {
-                children: jsx(GrandchildComponent, { value: props.data }),
-            });
-        };
-        const ParentComponent = (props) => {
-            return () => jsx("div", {
-                children: jsx(ChildComponent, { data: props.info }),
-            });
-        };
-        render(jsx(ParentComponent, { info: "Deep nested value" }), container);
-        const span = container.querySelector("span");
-        expect(span?.textContent).toBe("Deep nested value");
-    });
-    it("should update nested component when parent props change", async () => {
-        const container = document.createElement("div");
-        const ChildComponent = (props) => {
-            return () => jsx("div", { children: String(props.count) });
-        };
-        const ParentComponent = () => {
-            const state = createState({ value: 5 });
-            return () => jsx("div", {
-                children: [
-                    jsx(ChildComponent, { count: state.value }),
-                    jsx("button", {
-                        onclick: () => (state.value = 10),
-                        children: "Update",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        expect(container.children[0].children[0].textContent).toBe("5");
-        // Trigger update
-        container.querySelector("button").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(container.children[0].children[0].textContent).toBe("10");
-    });
-    it("should correctly update props in nested components with state changes", async () => {
-        const container = document.createElement("div");
-        const ChildComponent = (props) => {
-            return () => jsx("div", { children: `${props.message}: ${props.count}` });
-        };
-        const ParentComponent = () => {
-            const state = createState({ count: 0 });
-            return () => jsx("div", {
-                children: [
-                    jsx(ChildComponent, { message: "Count", count: state.count }),
-                    jsx("button", {
-                        onclick: () => state.count++,
-                        children: "Increment",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        // Check initial state
-        const childDiv = container.querySelector(":scope > div > div");
-        expect(childDiv.textContent).toBe("Count: 0");
-        // Simulate button click
-        const button = container.querySelector("button");
-        button.click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Check updated state - THIS is where the bug would show
-        // If old props are used instead of new props, this will fail
-        expect(childDiv.textContent).toBe("Count: 1");
-    });
-    it("should pass updated object props to nested components", async () => {
-        const container = document.createElement("div");
-        const ChildComponent = (props) => {
-            return () => jsx("div", { children: `${props.user.name} - ${props.user.age}` });
-        };
-        const ParentComponent = () => {
-            const state = createState({
-                userData: { name: "Alice", age: 25 },
-            });
-            return () => jsx("div", {
-                children: [
-                    jsx(ChildComponent, { user: state.userData }),
-                    jsx("button", {
-                        onclick: () => {
-                            state.userData.name = "Bob";
-                            state.userData.age = 30;
-                        },
-                        children: "Update",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        expect(container.children[0].children[0].textContent).toBe("Alice - 25");
-        // Trigger update
-        container.querySelector("button").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(container.children[0].children[0].textContent).toBe("Bob - 30");
-    });
-    it("should correctly update props in deeply nested components on state change", async () => {
-        const container = document.createElement("div");
-        const DeepChild = (props) => {
-            return () => jsx("span", { children: String(props.value) });
-        };
-        const MiddleChild = (props) => {
-            return () => jsx("div", {
-                children: jsx(DeepChild, { value: props.data }),
-            });
-        };
-        const ParentComponent = () => {
-            const state = createState({ value: 100 });
-            return () => jsx("div", {
-                children: [
-                    jsx(MiddleChild, { data: state.value }),
-                    jsx("button", {
-                        onclick: () => (state.value += 50),
-                        children: "Update",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        // Check initial state
-        const span = container.querySelector("span");
-        expect(span.textContent).toBe("100");
-        // Trigger update
-        const button = container.querySelector("button");
-        button.click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // THIS is the critical test - ensures new props propagate correctly
-        expect(span.textContent).toBe("150");
-    });
-    it("should handle multiple nested components receiving different updated props", async () => {
-        const container = document.createElement("div");
-        const ChildA = (props) => {
-            return () => jsx("div", { class: "child-a", children: props.value });
-        };
-        const ChildB = (props) => {
-            return () => jsx("div", { class: "child-b", children: props.value });
-        };
-        const ParentComponent = () => {
-            const state = createState({ valueA: "A1", valueB: "B1" });
-            return () => jsx("div", {
-                children: [
-                    jsx(ChildA, { value: state.valueA }),
-                    jsx(ChildB, { value: state.valueB }),
-                    jsx("button", {
-                        class: "btn-a",
-                        onclick: () => (state.valueA = "A2"),
-                        children: "Update A",
-                    }),
-                    jsx("button", {
-                        class: "btn-b",
-                        onclick: () => (state.valueB = "B2"),
-                        children: "Update B",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        const childA = container.querySelector(".child-a");
-        const childB = container.querySelector(".child-b");
-        expect(childA.textContent).toBe("A1");
-        expect(childB.textContent).toBe("B1");
-        // Update only A
-        container.querySelector(".btn-a").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(childA.textContent).toBe("A2");
-        expect(childB.textContent).toBe("B1"); // B should remain unchanged
-        // Update only B
-        container.querySelector(".btn-b").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(childA.textContent).toBe("A2"); // A should remain unchanged
-        expect(childB.textContent).toBe("B2");
-    });
-    it("should pass array of props to nested components and update correctly", async () => {
-        const container = document.createElement("div");
-        const ItemComponent = (props) => {
-            return () => jsx("li", { children: `${props.index}: ${props.item}` });
-        };
-        const ListComponent = (props) => {
-            return () => jsx("ul", {
-                children: props.items.map((item, index) => jsx(ItemComponent, { item, index, key: index })),
-            });
-        };
-        const ParentComponent = () => {
-            const state = createState({ items: ["apple", "banana"] });
-            return () => jsx("div", {
-                children: [
-                    jsx(ListComponent, { items: state.items }),
-                    jsx("button", {
-                        onclick: () => state.items.push("cherry"),
-                        children: "Add",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        const ul = container.querySelector("ul");
-        expect(ul.children.length).toBe(2);
-        expect(ul.children[0].textContent).toBe("0: apple");
-        expect(ul.children[1].textContent).toBe("1: banana");
-        // Add item
-        container.querySelector("button").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(ul.children.length).toBe(3);
-        expect(ul.children[2].textContent).toBe("2: cherry");
-    });
-    it("should maintain correct prop values when sibling components update", async () => {
-        const container = document.createElement("div");
-        const DisplayComponent = (props) => {
-            return () => jsx("div", {
-                class: props.label.toLowerCase().replace(/\s/g, "-"),
-                children: `${props.label}: ${props.value}`,
-            });
-        };
-        const ParentComponent = () => {
-            const state = createState({ countA: 0, countB: 100 });
-            return () => jsx("div", {
-                children: [
-                    jsx(DisplayComponent, { label: "Counter A", value: state.countA }),
-                    jsx(DisplayComponent, { label: "Counter B", value: state.countB }),
-                    jsx("button", {
-                        class: "update-a",
-                        onclick: () => state.countA++,
-                        children: "Inc A",
-                    }),
-                ],
-            });
-        };
-        render(jsx(ParentComponent, {}), container);
-        const displayA = container.querySelector(".counter-a");
-        const displayB = container.querySelector(".counter-b");
-        // Update A
-        container.querySelector(".update-a").click();
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        // Ensure A updated and B kept its value (didn't get stale/wrong props)
-        expect(displayA?.textContent).toContain("1");
-        expect(displayB?.textContent).toContain("100");
-    });
-});

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

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

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

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