rask-ui 0.1.1 → 0.2.1

package/dist/tests/patchChildren.test.js

@@ -0,0 +1,387 @@
+import { describe, it, expect } from "vitest";
+import { AbstractVNode } from "../vdom/AbstractVNode";
+// Helper to convert MockVNode arrays to VNode arrays
+const toVNodes = (nodes) => nodes;
+// Mock VNode for testing
+class MockVNode extends AbstractVNode {
+    mountCalls = 0;
+    patchCalls = 0;
+    unmountCalls = 0;
+    patchedWith;
+    constructor(key) {
+        super();
+        this.key = key;
+    }
+    mount(parent) {
+        this.mountCalls++;
+        this.parent = parent;
+        this.elm = document.createTextNode(`mock-${this.key || "no-key"}`);
+        return this.elm;
+    }
+    patch(newNode) {
+        this.patchCalls++;
+        this.patchedWith = newNode;
+        // In real implementation, old node updates itself from new node
+        // but keeps the same object reference
+    }
+    unmount() {
+        this.unmountCalls++;
+        delete this.elm;
+        delete this.parent;
+    }
+    rerender() {
+        // No-op for mock
+    }
+}
+// Parent mock that has children
+class MockParentVNode extends MockVNode {
+    constructor(initialChildren, key) {
+        super(key);
+        this.children = (initialChildren || []);
+    }
+}
+describe("patchChildren (new approach: keep old, patch in new)", () => {
+    describe("Edge cases", () => {
+        it("should mount all new children when starting with empty", () => {
+            const newChild1 = new MockVNode("a");
+            const newChild2 = new MockVNode("b");
+            const parent = new MockParentVNode([]);
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // New children should be mounted
+            expect(newChild1.mountCalls).toBe(1);
+            expect(newChild2.mountCalls).toBe(1);
+            expect(newChild1.parent).toBe(parent);
+            expect(newChild2.parent).toBe(parent);
+            // Result should be the new children (since old was empty)
+            expect(result).toEqual([newChild1, newChild2]);
+        });
+        it("should unmount all old children when new is empty", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const result = parent.patchChildren(toVNodes([]));
+            // Old children should be unmounted
+            expect(oldChild1.unmountCalls).toBe(1);
+            expect(oldChild2.unmountCalls).toBe(1);
+            // Result should be empty
+            expect(result).toEqual([]);
+        });
+    });
+    describe("Patching with keys", () => {
+        it("should reuse old VNodes when keys match", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const oldChild3 = new MockVNode("c");
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            const newChild1 = new MockVNode("a");
+            const newChild2 = new MockVNode("b");
+            const newChild3 = new MockVNode("c");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // OLD children should be patched with new children
+            expect(oldChild1.patchCalls).toBe(1);
+            expect(oldChild2.patchCalls).toBe(1);
+            expect(oldChild3.patchCalls).toBe(1);
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            expect(oldChild3.patchedWith).toBe(newChild3);
+            // NEW children should NOT be mounted
+            expect(newChild1.mountCalls).toBe(0);
+            expect(newChild2.mountCalls).toBe(0);
+            expect(newChild3.mountCalls).toBe(0);
+            // OLD children should NOT be unmounted
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            expect(oldChild3.unmountCalls).toBe(0);
+            // Result should still be the OLD children (reused)
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+        });
+        it("should handle reordered children with keys", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const oldChild3 = new MockVNode("c");
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            // Reordered: c, a, b
+            const newChild1 = new MockVNode("c");
+            const newChild2 = new MockVNode("a");
+            const newChild3 = new MockVNode("b");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // Old nodes should be patched with corresponding new nodes by key
+            expect(oldChild1.patchedWith).toBe(newChild2); // a->a
+            expect(oldChild2.patchedWith).toBe(newChild3); // b->b
+            expect(oldChild3.patchedWith).toBe(newChild1); // c->c
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            expect(oldChild3.unmountCalls).toBe(0);
+            // Result should be old children in NEW order (c, a, b)
+            expect(result).toEqual([oldChild3, oldChild1, oldChild2]);
+            // Verify correct keys
+            expect(result[0].key).toBe("c");
+            expect(result[1].key).toBe("a");
+            expect(result[2].key).toBe("b");
+        });
+        it("should mount new children and unmount removed children", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const oldChild3 = new MockVNode("c");
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            // Remove 'b', add 'd'
+            const newChild1 = new MockVNode("a");
+            const newChild2 = new MockVNode("c");
+            const newChild3 = new MockVNode("d");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // a and c should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild3.patchedWith).toBe(newChild2);
+            // d should be mounted
+            expect(newChild3.mountCalls).toBe(1);
+            // b should be unmounted
+            expect(oldChild2.unmountCalls).toBe(1);
+            // Result should contain old a, old c, and new d
+            expect(result).toContain(oldChild1);
+            expect(result).toContain(oldChild3);
+            expect(result).toContain(newChild3);
+            expect(result).not.toContain(oldChild2);
+            expect(result.length).toBe(3);
+        });
+        it("should replace all children when all keys change", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode("x");
+            const newChild2 = new MockVNode("y");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // All new children should be mounted
+            expect(newChild1.mountCalls).toBe(1);
+            expect(newChild2.mountCalls).toBe(1);
+            // All old children should be unmounted
+            expect(oldChild1.unmountCalls).toBe(1);
+            expect(oldChild2.unmountCalls).toBe(1);
+            // Result should be the new children
+            expect(result).toEqual([newChild1, newChild2]);
+        });
+    });
+    describe("Patching without keys (index-based)", () => {
+        it("should patch children by index when no keys", () => {
+            const oldChild1 = new MockVNode();
+            const oldChild2 = new MockVNode();
+            const oldChild3 = new MockVNode();
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            const newChild1 = new MockVNode();
+            const newChild2 = new MockVNode();
+            const newChild3 = new MockVNode();
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // Should patch by index: 0->0, 1->1, 2->2
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            expect(oldChild3.patchedWith).toBe(newChild3);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            expect(oldChild3.unmountCalls).toBe(0);
+            // Result should be old children (reused)
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+        });
+        it("should mount new children when growing without keys", () => {
+            const oldChild1 = new MockVNode();
+            const oldChild2 = new MockVNode();
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode();
+            const newChild2 = new MockVNode();
+            const newChild3 = new MockVNode();
+            const newChild4 = new MockVNode();
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3, newChild4]));
+            // First two should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            // Last two should be mounted
+            expect(newChild3.mountCalls).toBe(1);
+            expect(newChild4.mountCalls).toBe(1);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            // Result should be [oldChild1, oldChild2, newChild3, newChild4]
+            expect(result).toEqual([oldChild1, oldChild2, newChild3, newChild4]);
+        });
+        it("should unmount old children when shrinking without keys", () => {
+            const oldChild1 = new MockVNode();
+            const oldChild2 = new MockVNode();
+            const oldChild3 = new MockVNode();
+            const oldChild4 = new MockVNode();
+            const parent = new MockParentVNode([
+                oldChild1,
+                oldChild2,
+                oldChild3,
+                oldChild4,
+            ]);
+            const newChild1 = new MockVNode();
+            const newChild2 = new MockVNode();
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // First two should be patched
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            // Last two old children should be unmounted
+            expect(oldChild3.unmountCalls).toBe(1);
+            expect(oldChild4.unmountCalls).toBe(1);
+            // First two should not be unmounted
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            // Result should be [oldChild1, oldChild2]
+            expect(result).toEqual([oldChild1, oldChild2]);
+        });
+    });
+    describe("Mixed keys and indices", () => {
+        it("should handle mix of keyed and non-keyed children", () => {
+            const oldChild1 = new MockVNode("a"); // key: "a"
+            const oldChild2 = new MockVNode(); // key: undefined -> index 1
+            const oldChild3 = new MockVNode("c"); // key: "c"
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            const newChild1 = new MockVNode("a"); // key: "a"
+            const newChild2 = new MockVNode(); // key: undefined -> index 1
+            const newChild3 = new MockVNode("c"); // key: "c"
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // Keyed children should patch by key
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild3.patchedWith).toBe(newChild3);
+            // Non-keyed child should patch by index
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            expect(oldChild3.unmountCalls).toBe(0);
+            // Result should be old children (reused)
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+        });
+    });
+    describe("Real-world scenarios", () => {
+        it("should handle conditional rendering (null -> component)", () => {
+            const oldChild1 = new MockVNode("title");
+            const parent = new MockParentVNode([oldChild1]);
+            const newChild1 = new MockVNode("title");
+            const newChild2 = new MockVNode("details");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // Title should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            // Details should be mounted
+            expect(newChild2.mountCalls).toBe(1);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            // Result should be [oldChild1, newChild2]
+            expect(result).toEqual([oldChild1, newChild2]);
+        });
+        it("should handle conditional rendering (component -> null)", () => {
+            const oldChild1 = new MockVNode("title");
+            const oldChild2 = new MockVNode("details");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode("title");
+            const result = parent.patchChildren(toVNodes([newChild1]));
+            // Title should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            // Details should be unmounted
+            expect(oldChild2.unmountCalls).toBe(1);
+            // Title should not be unmounted
+            expect(oldChild1.unmountCalls).toBe(0);
+            // Result should be [oldChild1]
+            expect(result).toEqual([oldChild1]);
+        });
+        it("should handle list with items added at beginning", () => {
+            const oldChild1 = new MockVNode("item-1");
+            const oldChild2 = new MockVNode("item-2");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode("item-0"); // New item at start
+            const newChild2 = new MockVNode("item-1");
+            const newChild3 = new MockVNode("item-2");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // New item should be mounted
+            expect(newChild1.mountCalls).toBe(1);
+            // Existing items should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild2);
+            expect(oldChild2.patchedWith).toBe(newChild3);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            // Result should be [newChild1, oldChild1, oldChild2]
+            expect(result).toEqual([newChild1, oldChild1, oldChild2]);
+        });
+        it("should handle list with items added at end", () => {
+            const oldChild1 = new MockVNode("item-1");
+            const oldChild2 = new MockVNode("item-2");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode("item-1");
+            const newChild2 = new MockVNode("item-2");
+            const newChild3 = new MockVNode("item-3"); // New item at end
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // Existing items should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild2.patchedWith).toBe(newChild2);
+            // New item should be mounted
+            expect(newChild3.mountCalls).toBe(1);
+            // No unmounts
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild2.unmountCalls).toBe(0);
+            // Result should be [oldChild1, oldChild2, newChild3]
+            expect(result).toEqual([oldChild1, oldChild2, newChild3]);
+        });
+        it("should handle list with item removed from middle", () => {
+            const oldChild1 = new MockVNode("item-1");
+            const oldChild2 = new MockVNode("item-2");
+            const oldChild3 = new MockVNode("item-3");
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            const newChild1 = new MockVNode("item-1");
+            const newChild2 = new MockVNode("item-3"); // item-2 removed
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // item-1 and item-3 should be patched (reused)
+            expect(oldChild1.patchedWith).toBe(newChild1);
+            expect(oldChild3.patchedWith).toBe(newChild2);
+            // item-2 should be unmounted
+            expect(oldChild2.unmountCalls).toBe(1);
+            // Others should not be unmounted
+            expect(oldChild1.unmountCalls).toBe(0);
+            expect(oldChild3.unmountCalls).toBe(0);
+            // Result should be [oldChild1, oldChild3]
+            expect(result).toEqual([oldChild1, oldChild3]);
+        });
+        it("should handle empty -> multiple children", () => {
+            const parent = new MockParentVNode([]);
+            const newChild1 = new MockVNode("a");
+            const newChild2 = new MockVNode("b");
+            const newChild3 = new MockVNode("c");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            // All should be mounted
+            expect(newChild1.mountCalls).toBe(1);
+            expect(newChild2.mountCalls).toBe(1);
+            expect(newChild3.mountCalls).toBe(1);
+            // Result should be the new children
+            expect(result).toEqual([newChild1, newChild2, newChild3]);
+        });
+        it("should handle multiple children -> empty", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const oldChild3 = new MockVNode("c");
+            const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
+            const result = parent.patchChildren(toVNodes([]));
+            // All should be unmounted
+            expect(oldChild1.unmountCalls).toBe(1);
+            expect(oldChild2.unmountCalls).toBe(1);
+            expect(oldChild3.unmountCalls).toBe(1);
+            // Result should be empty
+            expect(result).toEqual([]);
+        });
+    });
+    describe("Object reference preservation", () => {
+        it("should preserve old VNode object references when patching", () => {
+            const oldChild1 = new MockVNode("a");
+            const oldChild2 = new MockVNode("b");
+            const parent = new MockParentVNode([oldChild1, oldChild2]);
+            const newChild1 = new MockVNode("a");
+            const newChild2 = new MockVNode("b");
+            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            // The result should contain the EXACT SAME object references as the old children
+            expect(result[0]).toBe(oldChild1); // Same object reference
+            expect(result[1]).toBe(oldChild2); // Same object reference
+            // NOT the new children
+            expect(result[0]).not.toBe(newChild1);
+            expect(result[1]).not.toBe(newChild2);
+        });
+    });
+});

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

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

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

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

package/dist/tests/primitives.test.js

@@ -0,0 +1,132 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "../vdom/index";
+describe("VDOM Primitives", () => {
+    it("should render element with string child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with string child
+        const vnode = jsx("div", {
+            children: "Hello World",
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify string was rendered as text content
+        const div = container.children[0];
+        expect(div.textContent).toBe("Hello World");
+        expect(div.childNodes.length).toBe(1);
+        expect(div.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+    });
+    it("should render element with number child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with number child
+        const vnode = jsx("span", {
+            children: 42,
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify number was rendered as text content
+        const span = container.children[0];
+        expect(span.textContent).toBe("42");
+        expect(span.childNodes.length).toBe(1);
+        expect(span.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+    });
+    it("should render element with null child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with null child
+        const vnode = jsx("div", {
+            children: null,
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify null renders as empty
+        const div = container.children[0];
+        expect(div.childNodes.length).toBe(0);
+    });
+    it("should render element with undefined child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with undefined child
+        const vnode = jsx("div", {
+            children: undefined,
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify undefined renders as empty
+        const div = container.children[0];
+        expect(div.childNodes.length).toBe(0);
+    });
+    it("should render element with mixed children including primitives", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with mixed children
+        const vnode = jsx("div", {
+            children: [
+                "Text before",
+                jsx("span", { textContent: "middle" }),
+                "Text after",
+                42,
+                null,
+                jsx("div", { textContent: "end" }),
+            ],
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify mixed children were rendered correctly
+        const div = container.children[0];
+        // Should have: text node, span, text node, text node (42), div
+        // null should be skipped
+        expect(div.childNodes.length).toBe(5);
+        expect(div.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+        expect(div.childNodes[0].textContent).toBe("Text before");
+        expect(div.childNodes[1].tagName).toBe("SPAN");
+        expect(div.childNodes[2].textContent).toBe("Text after");
+        expect(div.childNodes[3].textContent).toBe("42");
+        expect(div.childNodes[4].tagName).toBe("DIV");
+    });
+    it("should render element with boolean children", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with boolean children
+        const vnode = jsx("div", {
+            children: [true, false, "visible"],
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify booleans render as empty (like React)
+        const div = container.children[0];
+        // Should only have the text node "visible", booleans should be skipped
+        expect(div.childNodes.length).toBe(1);
+        expect(div.childNodes[0].textContent).toBe("visible");
+    });
+    it("should render element with zero as child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with zero as child (should render, not be treated as falsy)
+        const vnode = jsx("div", {
+            children: 0,
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify zero is rendered
+        const div = container.children[0];
+        expect(div.textContent).toBe("0");
+        expect(div.childNodes.length).toBe(1);
+    });
+    it("should render element with empty string as child", () => {
+        // Create a container element
+        const container = document.createElement("div");
+        // Create vnode with empty string as child
+        const vnode = jsx("div", {
+            children: "",
+        });
+        // Render the vnode
+        render(vnode, container);
+        // Verify empty string renders as empty text node
+        const div = container.children[0];
+        expect(div.textContent).toBe("");
+        expect(div.childNodes.length).toBe(1);
+        expect(div.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+    });
+});

package/dist/vdom/AbstractVNode.d.ts

@@ -0,0 +1,22 @@
+import { RootVNode } from "./RootVNode";
+import { VNode } from "./types";
+export declare abstract class AbstractVNode {
+    key?: string;
+    parent?: VNode;
+    root?: RootVNode;
+    elm?: Node;
+    children?: VNode[];
+    abstract mount(parent?: VNode): Node | Node[];
+    abstract patch(oldNode: VNode): void;
+    abstract unmount(): void;
+    abstract rerender(): void;
+    protected getHTMLElement(): HTMLElement;
+    /**
+     * A VNode can represent multiple elements (fragment of component)
+     */
+    getElements(): Node[];
+    getParentElement(): HTMLElement;
+    protected canPatch(oldNode: VNode, newNode: VNode): boolean;
+    patchChildren(newChildren: VNode[]): VNode[];
+}
+//# sourceMappingURL=AbstractVNode.d.ts.map

package/dist/vdom/AbstractVNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/AbstractVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,8BAAsB,aAAa;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACnB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,EAAE;IAC7C,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,GAAG,IAAI;IACpC,QAAQ,CAAC,OAAO,IAAI,IAAI;IACxB,QAAQ,CAAC,QAAQ,IAAI,IAAI;IACzB,SAAS,CAAC,cAAc;IAOxB;;OAEG;IACH,WAAW,IAAI,IAAI,EAAE;IAWrB,gBAAgB,IAAI,WAAW;IAiB/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,OAAO;IAoB3D,aAAa,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;CA2D7C"}

package/dist/vdom/AbstractVNode.js

@@ -0,0 +1,106 @@
+export class AbstractVNode {
+    key;
+    parent;
+    root;
+    elm;
+    children;
+    getHTMLElement() {
+        if (!this.elm || !(this.elm instanceof HTMLElement)) {
+            throw new Error("This VNode does not have an HTMLElement");
+        }
+        return this.elm;
+    }
+    /**
+     * A VNode can represent multiple elements (fragment of component)
+     */
+    getElements() {
+        if (this.elm) {
+            return [this.elm];
+        }
+        if (!this.children) {
+            throw new Error("This VNode has no element or children");
+        }
+        return this.children.map((child) => child.getElements()).flat();
+    }
+    getParentElement() {
+        let parent = this.parent;
+        // This VNode might not have an element, but relies
+        // on a parent for it. So we make sure that we get
+        // the actual parent of the element related to this VNode
+        while (parent) {
+            if (parent.elm instanceof HTMLElement) {
+                // This will always be an HTMLElement as text nodes has no children
+                return parent.elm;
+            }
+            parent = parent.parent;
+        }
+        throw new Error("There is no parent element for this VNode");
+    }
+    canPatch(oldNode, newNode) {
+        // Must be same constructor type
+        if (oldNode.constructor !== newNode.constructor) {
+            return false;
+        }
+        // For ElementVNodes, must have same tag
+        if ("tag" in oldNode && "tag" in newNode) {
+            return oldNode.tag === newNode.tag;
+        }
+        // For ComponentVNodes, must have same component function
+        if ("component" in oldNode && "component" in newNode) {
+            return oldNode.component === newNode.component;
+        }
+        // TextVNodes and FragmentVNodes can always patch
+        return true;
+    }
+    patchChildren(newChildren) {
+        const prevChildren = this.children;
+        // When there are only new children, we just mount them
+        if (newChildren && prevChildren.length === 0) {
+            newChildren.forEach((child) => child.mount(this));
+            return newChildren;
+        }
+        // If we want to remove all children, we just unmount the previous ones
+        if (!newChildren.length && prevChildren.length) {
+            prevChildren.forEach((child) => child.unmount());
+            return [];
+        }
+        const oldKeys = {};
+        prevChildren.forEach((prevChild, index) => {
+            oldKeys[prevChild.key || index] = prevChild;
+        });
+        // Build result array in the NEW order
+        const result = [];
+        newChildren.forEach((newChild, index) => {
+            const key = newChild.key || index;
+            const prevChild = oldKeys[key];
+            if (!prevChild) {
+                // New child - mount and add to result
+                newChild.mount(this);
+                result.push(newChild);
+            }
+            else if (prevChild === newChild) {
+                // Same instance - no patching needed, just reuse
+                result.push(prevChild);
+                delete oldKeys[key];
+            }
+            else if (this.canPatch(prevChild, newChild)) {
+                // Compatible types - patch and reuse old VNode
+                prevChild.patch(newChild);
+                result.push(prevChild);
+                delete oldKeys[key];
+            }
+            else {
+                // Incompatible types - replace completely
+                newChild.mount(this);
+                prevChild.unmount();
+                result.push(newChild);
+                delete oldKeys[key];
+            }
+        });
+        // Unmount any old children that weren't reused
+        for (const key in oldKeys) {
+            oldKeys[key].unmount();
+        }
+        return result;
+    }
+}