rask-ui 0.1.0 → 0.2.0

package/dist/vdom/keys.test.js

@@ -0,0 +1,293 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "./index";
+import { createState } from "../createState";
+const waitForUpdate = () => new Promise((resolve) => setTimeout(resolve, 10));
+describe("VDOM Keys", () => {
+    it("should preserve elements when reordering with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ order: ["a", "b", "c"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.order.map((key) => jsx("li", { children: `Item ${key.toUpperCase()}` }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        // Store references to the original DOM elements
+        const itemA = initialChildren[0];
+        const itemB = initialChildren[1];
+        const itemC = initialChildren[2];
+        expect(itemA.textContent).toBe("Item A");
+        expect(itemB.textContent).toBe("Item B");
+        expect(itemC.textContent).toBe("Item C");
+        // Reorder to C, A, B
+        stateFn.order = ["c", "a", "b"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        // Verify elements were reordered, not recreated
+        // The DOM elements should be the same instances, just moved
+        expect(newChildren[0]).toBe(itemC); // C is now first
+        expect(newChildren[1]).toBe(itemA); // A is now second
+        expect(newChildren[2]).toBe(itemB); // B is now third
+        expect(newChildren[0].textContent).toBe("Item C");
+        expect(newChildren[1].textContent).toBe("Item A");
+        expect(newChildren[2].textContent).toBe("Item B");
+    });
+    it("should not preserve elements when reordering without keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ items: ["Item A", "Item B", "Item C"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((text) => jsx("li", { children: text })),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        // Store references to the original DOM elements
+        const itemA = initialChildren[0];
+        const itemB = initialChildren[1];
+        const itemC = initialChildren[2];
+        // Reorder to C, A, B
+        stateFn.items = ["Item C", "Item A", "Item B"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        // Without keys, the DOM elements are reused in place and just updated
+        // So the DOM nodes remain the same, but their content is changed
+        expect(newChildren[0]).toBe(itemA); // Same DOM node, but content changed to "Item C"
+        expect(newChildren[1]).toBe(itemB); // Same DOM node, but content changed to "Item A"
+        expect(newChildren[2]).toBe(itemC); // Same DOM node, but content changed to "Item B"
+        expect(newChildren[0].textContent).toBe("Item C");
+        expect(newChildren[1].textContent).toBe("Item A");
+        expect(newChildren[2].textContent).toBe("Item B");
+    });
+    it("should preserve element state when reordering with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({
+                order: ["first", "second", "third"],
+                values: { first: "First", second: "Second", third: "Third" },
+            });
+            stateFn = state;
+            return () => jsx("div", {
+                children: state.order.map((key) => jsx("input", { value: state.values[key] }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const div = container.children[0];
+        const initialInputs = Array.from(div.children);
+        // User "types" in the inputs (simulating user interaction)
+        initialInputs[0].value = "Modified First";
+        initialInputs[1].value = "Modified Second";
+        initialInputs[2].value = "Modified Third";
+        // Store references
+        const input1 = initialInputs[0];
+        const input2 = initialInputs[1];
+        const input3 = initialInputs[2];
+        // Reorder to third, first, second
+        stateFn.order = ["third", "first", "second"];
+        await waitForUpdate();
+        const newInputs = Array.from(div.children);
+        // Verify elements were moved (not recreated) so user modifications are preserved
+        expect(newInputs[0]).toBe(input3);
+        expect(newInputs[1]).toBe(input1);
+        expect(newInputs[2]).toBe(input2);
+        // The user's modifications should be preserved because the DOM elements were moved
+        expect(newInputs[0].value).toBe("Modified Third");
+        expect(newInputs[1].value).toBe("Modified First");
+        expect(newInputs[2].value).toBe("Modified Second");
+    });
+    it("should handle adding new items with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ items: ["a", "b"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((key) => jsx("li", { children: `Item ${key.toUpperCase()}` }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(2);
+        // Store references
+        const itemA = initialChildren[0];
+        const itemB = initialChildren[1];
+        // Add a new item in the middle
+        stateFn.items = ["a", "c", "b"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(3);
+        // Original elements should be preserved
+        expect(newChildren[0]).toBe(itemA);
+        expect(newChildren[2]).toBe(itemB);
+        // New element in the middle
+        expect(newChildren[1]).not.toBe(itemA);
+        expect(newChildren[1]).not.toBe(itemB);
+        expect(newChildren[1].textContent).toBe("Item C");
+    });
+    it("should handle removing items with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ items: ["a", "b", "c"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((key) => jsx("li", { children: `Item ${key.toUpperCase()}` }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(3);
+        // Store references
+        const itemA = initialChildren[0];
+        const itemC = initialChildren[2];
+        // Remove the middle item
+        stateFn.items = ["a", "c"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(2);
+        // Remaining elements should be preserved
+        expect(newChildren[0]).toBe(itemA);
+        expect(newChildren[1]).toBe(itemC);
+    });
+    it("should handle replacing all items with different keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ items: ["a", "b", "c"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((key) => jsx("li", { children: `Item ${key.toUpperCase()}` }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        // Store references
+        const itemA = initialChildren[0];
+        const itemB = initialChildren[1];
+        const itemC = initialChildren[2];
+        // Replace all items with new keys
+        stateFn.items = ["x", "y", "z"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(3);
+        // All elements should be new instances
+        expect(newChildren[0]).not.toBe(itemA);
+        expect(newChildren[1]).not.toBe(itemB);
+        expect(newChildren[2]).not.toBe(itemC);
+        expect(newChildren[0].textContent).toBe("Item X");
+        expect(newChildren[1].textContent).toBe("Item Y");
+        expect(newChildren[2].textContent).toBe("Item Z");
+    });
+    it("should handle complex reordering scenario with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ items: ["a", "b", "c", "d", "e"] });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((key) => jsx("li", { children: key.toUpperCase() }, key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        const initialChildren = Array.from(ul.children);
+        const [itemA, itemB, itemC, itemD, itemE] = initialChildren;
+        // Complex reorder: remove C, add F, reorder to [E, A, F, D, B]
+        stateFn.items = ["e", "a", "f", "d", "b"];
+        await waitForUpdate();
+        const newChildren = Array.from(ul.children);
+        expect(ul.children.length).toBe(5);
+        // Verify preserved elements are in correct positions
+        expect(newChildren[0]).toBe(itemE);
+        expect(newChildren[1]).toBe(itemA);
+        expect(newChildren[3]).toBe(itemD);
+        expect(newChildren[4]).toBe(itemB);
+        // F is new
+        expect(newChildren[2]).not.toBe(itemA);
+        expect(newChildren[2]).not.toBe(itemB);
+        expect(newChildren[2]).not.toBe(itemC);
+        expect(newChildren[2]).not.toBe(itemD);
+        expect(newChildren[2]).not.toBe(itemE);
+        expect(newChildren[2].textContent).toBe("F");
+        // C should not be in the list
+        expect(newChildren.includes(itemC)).toBe(false);
+    });
+    it("should handle nested elements with keys", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ order: ["section1", "section2"] });
+            stateFn = state;
+            return () => jsx("div", {
+                children: state.order.map((key) => {
+                    const num = key === "section1" ? "1" : "2";
+                    return jsx("section", {
+                        children: [
+                            jsx("h2", { children: `Section ${num}` }),
+                            jsx("p", { children: `Content ${num}` }),
+                        ],
+                    }, key);
+                }),
+            });
+        };
+        render(jsx(App, {}), container);
+        const div = container.children[0];
+        const initialSections = Array.from(div.children);
+        const section1 = initialSections[0];
+        const section2 = initialSections[1];
+        // Reorder sections
+        stateFn.order = ["section2", "section1"];
+        await waitForUpdate();
+        const newSections = Array.from(div.children);
+        // Verify sections were moved, not recreated
+        expect(newSections[0]).toBe(section2);
+        expect(newSections[1]).toBe(section1);
+        expect(newSections[0].children[0].textContent).toBe("Section 2");
+        expect(newSections[1].children[0].textContent).toBe("Section 1");
+    });
+    it("should handle mixed keys and non-keyed elements", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({
+                items: [
+                    { key: "a", text: "Item A" },
+                    { text: "Item B" },
+                    { key: "c", text: "Item C" },
+                ],
+            });
+            stateFn = state;
+            return () => jsx("ul", {
+                children: state.items.map((item) => jsx("li", { children: item.text }, item.key)),
+            });
+        };
+        render(jsx(App, {}), container);
+        const ul = container.children[0];
+        expect(ul.children.length).toBe(3);
+        expect(ul.children[0].textContent).toBe("Item A");
+        expect(ul.children[1].textContent).toBe("Item B");
+        expect(ul.children[2].textContent).toBe("Item C");
+        // Reorder with mixed keys
+        stateFn.items = [
+            { key: "c", text: "Item C" },
+            { text: "Item B Modified" },
+            { key: "a", text: "Item A" },
+        ];
+        await waitForUpdate();
+        expect(ul.children.length).toBe(3);
+        expect(ul.children[0].textContent).toBe("Item C");
+        expect(ul.children[1].textContent).toBe("Item B Modified");
+        expect(ul.children[2].textContent).toBe("Item A");
+    });
+});

package/dist/vdom/mount.test.d.ts

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

package/dist/vdom/mount.test.d.ts.map

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

package/dist/vdom/mount.test.js

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from "vitest";
+import { jsx, render } from "./index";
+describe("VDOM Mount", () => {
+    it("should render a single element to the DOM", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create a vnode using jsx
+        const vnode = jsx("div", { id: "test" });
+        // Render the vnode to the container
+        render(vnode, container);
+        // Assert that the element was created and appended
+        expect(container.children.length).toBe(1);
+        expect(container.children[0].tagName).toBe("DIV");
+    });
+    it("should render an element with multiple children", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create child vnodes
+        const child1 = jsx("span", { id: "child1" });
+        const child2 = jsx("span", { id: "child2" });
+        const child3 = jsx("div", { id: "child3" });
+        // Create parent vnode with children
+        const parentVNode = jsx("div", {
+            id: "parent",
+            children: [child1, child2, child3],
+        });
+        // Render the parent vnode
+        render(parentVNode, container);
+        // Verify parent was rendered
+        expect(container.children.length).toBe(1);
+        expect(container.children[0].tagName).toBe("DIV");
+        // Verify children were rendered
+        const parent = container.children[0];
+        expect(parent.children.length).toBe(3);
+        expect(parent.children[0].tagName).toBe("SPAN");
+        expect(parent.children[1].tagName).toBe("SPAN");
+        expect(parent.children[2].tagName).toBe("DIV");
+    });
+    it("should render element with data and aria attributes", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with data and aria attributes
+        const vnode = jsx("div", {
+            "data-testid": "test-component",
+            "data-value": "123",
+            "aria-label": "Test element",
+            "aria-hidden": "true",
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify attributes were set
+        const div = container.children[0];
+        expect(div.getAttribute("data-testid")).toBe("test-component");
+        expect(div.getAttribute("data-value")).toBe("123");
+        expect(div.getAttribute("aria-label")).toBe("Test element");
+        expect(div.getAttribute("aria-hidden")).toBe("true");
+    });
+    it("should render element with properties", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with properties
+        const vnode = jsx("div", {
+            className: "test-class",
+            textContent: "Hello World",
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify properties were set
+        const div = container.children[0];
+        expect(div.className).toBe("test-class");
+        expect(div.textContent).toBe("Hello World");
+    });
+    it("should render element with event listener", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create mock click handler
+        const handleClick = vi.fn();
+        // Create vnode with event listener
+        const vnode = jsx("button", {
+            onClick: handleClick,
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Get the button element
+        const button = container.children[0];
+        // Trigger click event
+        button.click();
+        // Verify event handler was called
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/vdom/patch.test.d.ts

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

package/dist/vdom/patch.test.d.ts.map

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