rask-ui 0.2.3 → 0.2.5

package/dist/tests/patchChildren.test.js

@@ -11,13 +11,11 @@ class MockVNode extends AbstractVNode {
     constructor(key) {
         super();
         this.key = key;
-        // Initialize elm in constructor so getElements() always works
-        this.elm = document.createTextNode(`mock-${this.key || "no-key"}`);
     }
     mount(parent) {
         this.mountCalls++;
         this.parent = parent;
-        // elm already exists from constructor
+        this.elm = document.createTextNode(`mock-${this.key || "no-key"}`);
         return this.elm;
     }
     patch(newNode) {
@@ -28,8 +26,7 @@ class MockVNode extends AbstractVNode {
     }
     unmount() {
         this.unmountCalls++;
-        // Don't delete elm - it's needed for getElements() when building operations
-        // delete this.elm;
+        delete this.elm;
         delete this.parent;
     }
     rerender() {
@@ -40,8 +37,6 @@ class MockVNode extends AbstractVNode {
 class MockParentVNode extends MockVNode {
     constructor(initialChildren, key) {
         super(key);
-        // Override elm with an HTMLElement since parents need to contain children
-        this.elm = document.createElement("div");
         this.children = (initialChildren || []);
     }
 }
@@ -51,33 +46,27 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("a");
             const newChild2 = new MockVNode("b");
             const parent = new MockParentVNode([]);
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = 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(children).toEqual([newChild1, newChild2]);
-            // Should return insert operation
-            expect(operations).toHaveLength(1);
-            expect(operations[0].type).toBe("insert");
-            expect(operations[0]).toHaveProperty("elms");
+            expect(result).toEqual([newChild1, newChild2]);
+            expect(hasChangedStructure).toBe(true);
         });
         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 { children, operations } = parent.patchChildren(toVNodes([]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([]));
             // Old children should be unmounted
             expect(oldChild1.unmountCalls).toBe(1);
             expect(oldChild2.unmountCalls).toBe(1);
             // Result should be empty
-            expect(children).toEqual([]);
-            // Should return remove operation
-            expect(operations).toHaveLength(1);
-            expect(operations[0].type).toBe("remove");
-            expect(operations[0]).toHaveProperty("elms");
+            expect(result).toEqual([]);
+            expect(hasChangedStructure).toBe(true);
         });
     });
     describe("Patching with keys", () => {
@@ -89,7 +78,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("a");
             const newChild2 = new MockVNode("b");
             const newChild3 = new MockVNode("c");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // OLD children should be patched with new children
             expect(oldChild1.patchCalls).toBe(1);
             expect(oldChild2.patchCalls).toBe(1);
@@ -106,9 +95,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild2.unmountCalls).toBe(0);
             expect(oldChild3.unmountCalls).toBe(0);
             // Result should still be the OLD children (reused)
-            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
-            // Should have no operations (just patching)
-            expect(operations).toHaveLength(0);
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(hasChangedStructure).toBe(false);
         });
         it("should handle reordered children with keys", () => {
             const oldChild1 = new MockVNode("a");
@@ -119,7 +107,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("c");
             const newChild2 = new MockVNode("a");
             const newChild3 = new MockVNode("b");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = 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
@@ -129,14 +117,12 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild2.unmountCalls).toBe(0);
             expect(oldChild3.unmountCalls).toBe(0);
             // Result should be old children in NEW order (c, a, b)
-            expect(children).toEqual([oldChild3, oldChild1, oldChild2]);
+            expect(result).toEqual([oldChild3, oldChild1, oldChild2]);
             // Verify correct keys
-            expect(children[0].key).toBe("c");
-            expect(children[1].key).toBe("a");
-            expect(children[2].key).toBe("b");
-            // Should have move operations for reordered children
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "move" || op.type === "insert")).toBe(true);
+            expect(result[0].key).toBe("c");
+            expect(result[1].key).toBe("a");
+            expect(result[2].key).toBe("b");
+            expect(hasChangedStructure).toBe(true);
         });
         it("should mount new children and unmount removed children", () => {
             const oldChild1 = new MockVNode("a");
@@ -147,7 +133,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("a");
             const newChild2 = new MockVNode("c");
             const newChild3 = new MockVNode("d");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // a and c should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild2);
@@ -156,44 +142,12 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             // b should be unmounted
             expect(oldChild2.unmountCalls).toBe(1);
             // Result should contain old a, old c, and new d
-            expect(children).toContain(oldChild1);
-            expect(children).toContain(oldChild3);
-            expect(children).toContain(newChild3);
-            expect(children).not.toContain(oldChild2);
-            expect(children.length).toBe(3);
-            // Should have operations for insert and remove
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
-            expect(operations.some((op) => op.type === "remove")).toBe(true);
-        });
-        it("should generate move operations when children are reordered", () => {
-            const oldChild1 = new MockVNode("a");
-            const oldChild2 = new MockVNode("b");
-            const parent = new MockParentVNode([oldChild1, oldChild2]);
-            // Swap order: b, a
-            const newChild1 = new MockVNode("b");
-            const newChild2 = new MockVNode("a");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
-            // Both should be patched
-            expect(oldChild1.patchedWith).toBe(newChild2);
-            expect(oldChild2.patchedWith).toBe(newChild1);
-            // No unmounts
-            expect(oldChild1.unmountCalls).toBe(0);
-            expect(oldChild2.unmountCalls).toBe(0);
-            // Result should be old children in new order [b, a]
-            expect(children).toEqual([oldChild2, oldChild1]);
-            // Should have move or insert operations for repositioning
-            expect(operations.length).toBeGreaterThan(0);
-            const hasMoveOrInsert = operations.some((op) => op.type === "move" || op.type === "insert");
-            expect(hasMoveOrInsert).toBe(true);
-            // If there's a move operation, it should have the required properties
-            const moveOps = operations.filter((op) => op.type === "move");
-            moveOps.forEach((op) => {
-                if (op.type === "move") {
-                    expect(op).toHaveProperty("elms");
-                    expect(op).toHaveProperty("afterElm");
-                }
-            });
+            expect(result).toContain(oldChild1);
+            expect(result).toContain(oldChild3);
+            expect(result).toContain(newChild3);
+            expect(result).not.toContain(oldChild2);
+            expect(result.length).toBe(3);
+            expect(hasChangedStructure).toBe(true);
         });
         it("should replace all children when all keys change", () => {
             const oldChild1 = new MockVNode("a");
@@ -201,7 +155,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const parent = new MockParentVNode([oldChild1, oldChild2]);
             const newChild1 = new MockVNode("x");
             const newChild2 = new MockVNode("y");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // All new children should be mounted
             expect(newChild1.mountCalls).toBe(1);
             expect(newChild2.mountCalls).toBe(1);
@@ -209,11 +163,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(1);
             expect(oldChild2.unmountCalls).toBe(1);
             // Result should be the new children
-            expect(children).toEqual([newChild1, newChild2]);
-            // Should have operations for both insert and remove
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
-            expect(operations.some((op) => op.type === "remove")).toBe(true);
+            expect(result).toEqual([newChild1, newChild2]);
+            expect(hasChangedStructure).toBe(true);
         });
     });
     describe("Patching without keys (index-based)", () => {
@@ -225,7 +176,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode();
             const newChild2 = new MockVNode();
             const newChild3 = new MockVNode();
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = 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);
@@ -235,9 +186,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild2.unmountCalls).toBe(0);
             expect(oldChild3.unmountCalls).toBe(0);
             // Result should be old children (reused)
-            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
-            // Should have no operations (just patching)
-            expect(operations).toHaveLength(0);
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(hasChangedStructure).toBe(false);
         });
         it("should mount new children when growing without keys", () => {
             const oldChild1 = new MockVNode();
@@ -247,7 +197,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild2 = new MockVNode();
             const newChild3 = new MockVNode();
             const newChild4 = new MockVNode();
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3, newChild4]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3, newChild4]));
             // First two should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -258,10 +208,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(0);
             expect(oldChild2.unmountCalls).toBe(0);
             // Result should be [oldChild1, oldChild2, newChild3, newChild4]
-            expect(children).toEqual([oldChild1, oldChild2, newChild3, newChild4]);
-            // Should have insert operation
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
+            expect(result).toEqual([oldChild1, oldChild2, newChild3, newChild4]);
+            expect(hasChangedStructure).toBe(true);
         });
         it("should unmount old children when shrinking without keys", () => {
             const oldChild1 = new MockVNode();
@@ -276,7 +224,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             ]);
             const newChild1 = new MockVNode();
             const newChild2 = new MockVNode();
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // First two should be patched
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -287,10 +235,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(0);
             expect(oldChild2.unmountCalls).toBe(0);
             // Result should be [oldChild1, oldChild2]
-            expect(children).toEqual([oldChild1, oldChild2]);
-            // Should have remove operations
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "remove")).toBe(true);
+            expect(result).toEqual([oldChild1, oldChild2]);
+            expect(hasChangedStructure).toBe(true);
         });
     });
     describe("Mixed keys and indices", () => {
@@ -302,7 +248,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("a"); // key: "a"
             const newChild2 = new MockVNode(); // key: undefined -> index 1
             const newChild3 = new MockVNode("c"); // key: "c"
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // Keyed children should patch by key
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild3);
@@ -313,9 +259,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild2.unmountCalls).toBe(0);
             expect(oldChild3.unmountCalls).toBe(0);
             // Result should be old children (reused)
-            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
-            // Should have no operations (just patching)
-            expect(operations).toHaveLength(0);
+            expect(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(hasChangedStructure).toBe(false);
         });
     });
     describe("Real-world scenarios", () => {
@@ -324,7 +269,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const parent = new MockParentVNode([oldChild1]);
             const newChild1 = new MockVNode("title");
             const newChild2 = new MockVNode("details");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // Title should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             // Details should be mounted
@@ -332,17 +277,15 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             // No unmounts
             expect(oldChild1.unmountCalls).toBe(0);
             // Result should be [oldChild1, newChild2]
-            expect(children).toEqual([oldChild1, newChild2]);
-            // Should have insert operation
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
+            expect(result).toEqual([oldChild1, newChild2]);
+            expect(hasChangedStructure).toBe(true);
         });
         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 { children, operations } = parent.patchChildren(toVNodes([newChild1]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1]));
             // Title should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             // Details should be unmounted
@@ -350,10 +293,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             // Title should not be unmounted
             expect(oldChild1.unmountCalls).toBe(0);
             // Result should be [oldChild1]
-            expect(children).toEqual([oldChild1]);
-            // Should have remove operation
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "remove")).toBe(true);
+            expect(result).toEqual([oldChild1]);
+            expect(hasChangedStructure).toBe(true);
         });
         it("should handle list with items added at beginning", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -362,7 +303,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("item-0"); // New item at start
             const newChild2 = new MockVNode("item-1");
             const newChild3 = new MockVNode("item-2");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // New item should be mounted
             expect(newChild1.mountCalls).toBe(1);
             // Existing items should be patched (reused)
@@ -372,10 +313,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(0);
             expect(oldChild2.unmountCalls).toBe(0);
             // Result should be [newChild1, oldChild1, oldChild2]
-            expect(children).toEqual([newChild1, oldChild1, oldChild2]);
-            // Should have insert operation and possibly move operations for shifted items
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
+            expect(result).toEqual([newChild1, oldChild1, oldChild2]);
+            expect(hasChangedStructure).toBe(true);
         });
         it("should handle list with items added at end", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -384,7 +323,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("item-1");
             const newChild2 = new MockVNode("item-2");
             const newChild3 = new MockVNode("item-3"); // New item at end
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // Existing items should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -394,10 +333,8 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(0);
             expect(oldChild2.unmountCalls).toBe(0);
             // Result should be [oldChild1, oldChild2, newChild3]
-            expect(children).toEqual([oldChild1, oldChild2, newChild3]);
-            // Should have insert operation
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "insert")).toBe(true);
+            expect(result).toEqual([oldChild1, oldChild2, newChild3]);
+            expect(hasChangedStructure).toBe(true);
         });
         it("should handle list with item removed from middle", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -406,7 +343,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const parent = new MockParentVNode([oldChild1, oldChild2, oldChild3]);
             const newChild1 = new MockVNode("item-1");
             const newChild2 = new MockVNode("item-3"); // item-2 removed
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // item-1 and item-3 should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild2);
@@ -416,42 +353,36 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             expect(oldChild1.unmountCalls).toBe(0);
             expect(oldChild3.unmountCalls).toBe(0);
             // Result should be [oldChild1, oldChild3]
-            expect(children).toEqual([oldChild1, oldChild3]);
-            // Should have remove operation
-            expect(operations.length).toBeGreaterThan(0);
-            expect(operations.some((op) => op.type === "remove")).toBe(true);
+            expect(result).toEqual([oldChild1, oldChild3]);
+            expect(hasChangedStructure).toBe(true);
         });
         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 { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children: result, hasChangedStructure } = 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(children).toEqual([newChild1, newChild2, newChild3]);
-            // Should have insert operation
-            expect(operations).toHaveLength(1);
-            expect(operations[0].type).toBe("insert");
+            expect(result).toEqual([newChild1, newChild2, newChild3]);
+            expect(hasChangedStructure).toBe(true);
         });
         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 { children, operations } = parent.patchChildren(toVNodes([]));
+            const { children: result, hasChangedStructure } = 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(children).toEqual([]);
-            // Should have remove operation
-            expect(operations).toHaveLength(1);
-            expect(operations[0].type).toBe("remove");
+            expect(result).toEqual([]);
+            expect(hasChangedStructure).toBe(true);
         });
     });
     describe("Object reference preservation", () => {
@@ -461,66 +392,14 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const parent = new MockParentVNode([oldChild1, oldChild2]);
             const newChild1 = new MockVNode("a");
             const newChild2 = new MockVNode("b");
-            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children: result, hasChangedStructure } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // The result should contain the EXACT SAME object references as the old children
-            expect(children[0]).toBe(oldChild1); // Same object reference
-            expect(children[1]).toBe(oldChild2); // Same object reference
+            expect(result[0]).toBe(oldChild1); // Same object reference
+            expect(result[1]).toBe(oldChild2); // Same object reference
             // NOT the new children
-            expect(children[0]).not.toBe(newChild1);
-            expect(children[1]).not.toBe(newChild2);
-            // Should have no operations (just patching)
-            expect(operations).toHaveLength(0);
-        });
-    });
-    describe("Move operations - minimal reproduction", () => {
-        it("should correctly reorder [A,B,C] to [C,A,B] in actual DOM", () => {
-            // This test uses actual DOM to verify move operations work correctly
-            const parent = document.createElement("div");
-            // Create initial DOM elements
-            const elmA = document.createTextNode("A");
-            const elmB = document.createTextNode("B");
-            const elmC = document.createTextNode("C");
-            parent.appendChild(elmA);
-            parent.appendChild(elmB);
-            parent.appendChild(elmC);
-            // Create VNodes that represent these elements
-            const oldChild1 = new MockVNode("a");
-            const oldChild2 = new MockVNode("b");
-            const oldChild3 = new MockVNode("c");
-            oldChild1.elm = elmA;
-            oldChild2.elm = elmB;
-            oldChild3.elm = elmC;
-            const parentVNode = new MockParentVNode([
-                oldChild1,
-                oldChild2,
-                oldChild3,
-            ]);
-            parentVNode.elm = parent;
-            // Verify initial DOM order
-            expect(Array.from(parent.childNodes).map((n) => n.textContent)).toEqual([
-                "A",
-                "B",
-                "C",
-            ]);
-            // Reorder to C, A, B
-            const newChild1 = new MockVNode("c");
-            const newChild2 = new MockVNode("a");
-            const newChild3 = new MockVNode("b");
-            const { children, operations } = parentVNode.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
-            // Result should be old children in new order
-            expect(children).toEqual([oldChild3, oldChild1, oldChild2]);
-            // Apply the operations to the actual DOM
-            parentVNode.applyDOMOperations(operations);
-            // Verify DOM is correctly reordered
-            expect(Array.from(parent.childNodes).map((n) => n.textContent)).toEqual([
-                "C",
-                "A",
-                "B",
-            ]);
-            // Verify same DOM elements were moved, not recreated
-            expect(parent.childNodes[0]).toBe(elmC);
-            expect(parent.childNodes[1]).toBe(elmA);
-            expect(parent.childNodes[2]).toBe(elmB);
+            expect(result[0]).not.toBe(newChild1);
+            expect(result[1]).not.toBe(newChild2);
+            expect(hasChangedStructure).toBe(false);
         });
     });
 });

package/dist/vdom/AbstractVNode.d.ts

@@ -1,21 +1,5 @@
 import { RootVNode } from "./RootVNode";
 import { VNode } from "./types";
-export type DOMOperation = {
-    type: "replace";
-    oldElms: Node[];
-    newElms: Node[];
-} | {
-    type: "remove";
-    elms: Node[];
-} | {
-    type: "insert";
-    elms: Node[];
-    afterElm?: Node;
-} | {
-    type: "move";
-    elms: Node[];
-    afterElm?: Node;
-};
 export declare abstract class AbstractVNode {
     key?: string;
     parent?: VNode;
@@ -25,7 +9,7 @@ export declare abstract class AbstractVNode {
     abstract mount(parent?: VNode): Node | Node[];
     abstract patch(oldNode: VNode): void;
     abstract unmount(): void;
-    applyDOMOperations(operations: DOMOperation[], atVNode?: VNode): void;
+    abstract rerender(): void;
     protected getHTMLElement(): HTMLElement;
     /**
      * A VNode can represent multiple elements (fragment of component)
@@ -35,7 +19,7 @@ export declare abstract class AbstractVNode {
     protected canPatch(oldNode: VNode, newNode: VNode): boolean;
     patchChildren(newChildren: VNode[]): {
         children: VNode[];
-        operations: DOMOperation[];
+        hasChangedStructure: boolean;
     };
 }
 //# sourceMappingURL=AbstractVNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AbstractVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/AbstractVNode.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,IAAI,EAAE,CAAC;IAChB,OAAO,EAAE,IAAI,EAAE,CAAC;CACjB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,EAAE,CAAC;CACd,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,CAAC;AAEN,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,kBAAkB,CAAC,UAAU,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI;IAkErE,SAAS,CAAC,cAAc;IAOxB;;OAEG;IACH,WAAW,IAAI,IAAI,EAAE;IAarB,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;QACnC,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,UAAU,EAAE,YAAY,EAAE,CAAC;KAC5B;CAuJF"}
+{"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;QACnC,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,mBAAmB,EAAE,OAAO,CAAC;KAC9B;CAqEF"}

package/dist/vdom/AbstractVNode.js

@@ -1,77 +1,9 @@
-import { elementsToFragment } from "./dom-utils";
 export class AbstractVNode {
     key;
     parent;
     root;
     elm;
     children;
-    applyDOMOperations(operations, atVNode) {
-        if (!this.elm || !this.children) {
-            this.parent?.applyDOMOperations(operations, this);
-            return;
-        }
-        console.log(operations);
-        operations.forEach((operation) => {
-            switch (operation.type) {
-                case "insert": {
-                    const fragment = elementsToFragment(operation.elms);
-                    // Insert after afterElm (or at start if undefined)
-                    if (operation.afterElm === undefined) {
-                        // Insert at the start
-                        this.elm.insertBefore(fragment, this.elm.firstChild);
-                    }
-                    else {
-                        // Insert after afterElm
-                        const target = operation.afterElm.nextSibling;
-                        this.elm.insertBefore(fragment, target);
-                    }
-                    break;
-                }
-                case "remove": {
-                    const elms = operation.elms;
-                    if (elms.length === 1) {
-                        this.elm.removeChild(elms[0]);
-                    }
-                    else {
-                        const range = new Range();
-                        range.setStartBefore(elms[0]);
-                        range.setEndAfter(elms[elms.length - 1]);
-                        range.deleteContents();
-                    }
-                    break;
-                }
-                case "replace": {
-                    const oldElms = operation.oldElms;
-                    const newElms = operation.newElms;
-                    if (oldElms.length === 1) {
-                        this.elm.replaceChild(elementsToFragment(newElms), oldElms[0]);
-                    }
-                    else {
-                        const range = new Range();
-                        range.setStartBefore(oldElms[0]);
-                        range.setEndAfter(oldElms[oldElms.length - 1]);
-                        range.deleteContents();
-                        range.insertNode(elementsToFragment(newElms));
-                    }
-                    break;
-                }
-                case "move": {
-                    const fragment = elementsToFragment(operation.elms);
-                    // Insert after afterElm (or at start if undefined)
-                    if (operation.afterElm === undefined) {
-                        // Insert at the start
-                        this.elm.insertBefore(fragment, this.elm.firstChild);
-                    }
-                    else {
-                        // Insert after afterElm
-                        const target = operation.afterElm.nextSibling;
-                        this.elm.insertBefore(fragment, target);
-                    }
-                    break;
-                }
-            }
-        });
-    }
     getHTMLElement() {
         if (!this.elm || !(this.elm instanceof HTMLElement)) {
             throw new Error("This VNode does not have an HTMLElement");
@@ -86,7 +18,6 @@ export class AbstractVNode {
             return [this.elm];
         }
         if (!this.children) {
-            console.log("WTF", this);
             throw new Error("This VNode has no element or children");
         }
         return this.children.map((child) => child.getElements()).flat();
@@ -124,132 +55,61 @@ export class AbstractVNode {
     patchChildren(newChildren) {
         const prevChildren = this.children;
         // When there are only new children, we just mount them
-        if (prevChildren.length === 0) {
+        if (newChildren && prevChildren.length === 0) {
             newChildren.forEach((child) => child.mount(this));
-            return {
-                children: newChildren,
-                operations: [
-                    {
-                        type: "insert",
-                        elms: newChildren.map((child) => child.getElements()).flat(),
-                    },
-                ],
-            };
+            return { children: newChildren, hasChangedStructure: true };
         }
         // If we want to remove all children, we just unmount the previous ones
         if (!newChildren.length && prevChildren.length) {
             prevChildren.forEach((child) => child.unmount());
-            return {
-                children: [],
-                operations: [
-                    {
-                        type: "remove",
-                        elms: prevChildren.map((child) => child.getElements()).flat(),
-                    },
-                ],
-            };
+            return { children: [], hasChangedStructure: true };
         }
-        const operations = [];
         const oldKeys = {};
-        // Build oldKeys map and handle duplicate keys
         prevChildren.forEach((prevChild, index) => {
-            const key = prevChild.key || index;
-            // If key already exists, we have a duplicate - unmount the old one immediately
-            if (oldKeys[key]) {
-                oldKeys[key].unmount();
-                operations.push({ type: "remove", elms: oldKeys[key].getElements() });
-            }
-            oldKeys[key] = prevChild;
+            oldKeys[prevChild.key || index] = {
+                vnode: prevChild,
+                index,
+            };
         });
-        // Helper to get afterElm for a position in result array
-        const getAfterElm = (index, result) => {
-            let currentIndex = index;
-            let prevChild = result[--currentIndex];
-            let afterElm;
-            while (prevChild) {
-                const prevElms = prevChild.getElements();
-                afterElm = prevElms[prevElms.length - 1];
-                if (afterElm) {
-                    break;
-                }
-                prevChild = result[--currentIndex];
-            }
-            return afterElm;
-        };
-        // === PASS 1: Build result array (mount/patch all children) ===
+        // Build result array in the NEW order
         const result = [];
-        const newChildrenMeta = [];
+        let hasChangedStructure = false;
         newChildren.forEach((newChild, index) => {
             const key = newChild.key || index;
-            const oldChild = oldKeys[key];
-            if (!oldChild) {
+            const prevChild = oldKeys[key];
+            if (!prevChild) {
                 // New child - mount and add to result
                 newChild.mount(this);
                 result.push(newChild);
-                newChildrenMeta.push({ isNew: true });
+                hasChangedStructure = true;
+            }
+            else if (prevChild?.vnode === newChild) {
+                // Same instance - no patching needed, just reuse
+                result.push(prevChild.vnode);
+                delete oldKeys[key];
+                hasChangedStructure = hasChangedStructure || prevChild.index !== index;
             }
-            else if (this.canPatch(oldChild, newChild)) {
+            else if (this.canPatch(prevChild.vnode, newChild)) {
                 // Compatible types - patch and reuse old VNode
-                if (oldChild !== newChild) {
-                    oldChild.patch(newChild);
-                }
-                result.push(oldChild);
+                prevChild.vnode.patch(newChild);
+                result.push(prevChild.vnode);
                 delete oldKeys[key];
-                newChildrenMeta.push({ isNew: false });
+                hasChangedStructure = hasChangedStructure || prevChild.index !== index;
             }
             else {
                 // Incompatible types - replace completely
                 newChild.mount(this);
-                oldChild.unmount();
+                prevChild.vnode.unmount();
                 result.push(newChild);
                 delete oldKeys[key];
-                newChildrenMeta.push({ isNew: true, replacedOld: oldChild });
-            }
-        });
-        // === PASS 2: Generate operations by comparing positions ===
-        result.forEach((child, newIndex) => {
-            const oldIndex = prevChildren.indexOf(child);
-            const meta = newChildrenMeta[newIndex];
-            if (meta.isNew) {
-                // New child - generate insert operation
-                const afterElm = getAfterElm(newIndex, result);
-                if (meta.replacedOld) {
-                    // This is a replacement
-                    const prevElms = meta.replacedOld.getElements();
-                    if (prevElms.length) {
-                        operations.push({
-                            type: "replace",
-                            oldElms: prevElms,
-                            newElms: child.getElements(),
-                        });
-                        return;
-                    }
-                }
-                operations.push({
-                    type: "insert",
-                    elms: child.getElements(),
-                    afterElm,
-                });
-            }
-            else if (oldIndex !== newIndex) {
-                // Existing child that moved - generate move operation
-                const afterElm = getAfterElm(newIndex, result);
-                operations.push({
-                    type: "move",
-                    elms: child.getElements(),
-                    afterElm,
-                });
+                hasChangedStructure = true;
             }
-            // else: child is in same position, no operation needed
         });
         // Unmount any old children that weren't reused
         for (const key in oldKeys) {
-            oldKeys[key].unmount();
-            operations.push({ type: "remove", elms: oldKeys[key].getElements() });
+            oldKeys[key].vnode.unmount();
+            hasChangedStructure = true;
         }
-        return {
-            children: result,
-            operations,
-        };
+        return { children: result, hasChangedStructure };
     }
 }

package/dist/vdom/ComponentVNode.d.ts

@@ -40,6 +40,7 @@ export declare class ComponentVNode extends AbstractVNode {
     children: VNode[];
     instance?: ComponentInstance;
     constructor(component: Component<any>, props: Props, children: VNode[], key?: string);
+    rerender(): void;
     mount(parent?: VNode): Node[];
     patch(newNode: ComponentVNode): void;
     unmount(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ComponentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,MAAM,GACN,IAAI,GACJ,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,IACjC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,iBAAiB,CAAC,GACvC,CAAC,MAAM,MAAM,iBAAiB,CAAC,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAKF,wBAAgB,mBAAmB,sBAYlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAYrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAYvC;AAED,qBAAa,cAAe,SAAQ,aAAa;IAC/C,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IAEb,QAAQ,EAAE,KAAK,EAAE,CAAM;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;gBAE3B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAWd,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IA0I7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}
+{"version":3,"file":"ComponentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ComponentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,MAAM,GACN,IAAI,GACJ,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,IACjC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,iBAAiB,CAAC,GACvC,CAAC,MAAM,MAAM,iBAAiB,CAAC,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAKF,wBAAgB,mBAAmB,sBAYlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAYrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAYvC;AAED,qBAAa,cAAe,SAAQ,aAAa;IAC/C,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IAEb,QAAQ,EAAE,KAAK,EAAE,CAAM;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;gBAE3B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAWd,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IAmI7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -4,7 +4,6 @@ import { FragmentVNode } from "./FragmentVNode";
 import { RootVNode } from "./RootVNode";
 import { normalizeChildren } from "./utils";
 import { currentRoot } from "./RootVNode";
-import { ElementVNode } from "./ElementVNode";
 export function getCurrentComponent() {
     if (!currentRoot) {
         throw new Error("No current root");
@@ -51,6 +50,9 @@ export class ComponentVNode extends AbstractVNode {
         this.children = [];
         this.key = key;
     }
+    rerender() {
+        this.parent?.rerender();
+    }
     mount(parent) {
         this.parent = parent;
         if (parent instanceof RootVNode) {
@@ -94,17 +96,10 @@ export class ComponentVNode extends AbstractVNode {
                     this.root?.setAsCurrent();
                     const newChildren = executeRender();
                     const prevChildren = this.children;
-                    const { children, operations } = this.patchChildren(newChildren);
+                    const { children, hasChangedStructure } = this.patchChildren(newChildren);
                     this.children = children;
-                    // Typically components return a single element, which does
-                    // not require the parent to apply elements to the DOM again
-                    const canSelfUpdate = prevChildren.length === 1 &&
-                        this.children.length === 1 &&
-                        prevChildren[0] instanceof ElementVNode &&
-                        this.children[0] instanceof ElementVNode &&
-                        this.canPatch(prevChildren[0], this.children[0]);
-                    if (!canSelfUpdate) {
-                        this.parent?.applyDOMOperations(operations, this);
+                    if (hasChangedStructure) {
+                        this.parent?.rerender();
                     }
                     this.root?.clearCurrent();
                 });

package/dist/vdom/ElementVNode.d.ts

@@ -8,6 +8,7 @@ export declare class ElementVNode extends AbstractVNode {
     private ref?;
     private eventListeners?;
     constructor(tag: string, { ref, ...props }: Props, children: VNode[], key?: string);
+    rerender(): void;
     mount(parent?: VNode): Node;
     /**
      * An ELEMENT patch goes through three operations
@@ -19,5 +20,11 @@ export declare class ElementVNode extends AbstractVNode {
     private setProp;
     private patchProps;
     private addEventListener;
+    /**
+     * Intelligently sync DOM to match children VNode order.
+     * Only performs DOM operations when elements are out of position.
+     * This is used by both patch() and rerender() to efficiently update children.
+     */
+    private syncDOMChildren;
 }
 //# sourceMappingURL=ElementVNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAWvC,qBAAa,YAAa,SAAQ,aAAa;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,GAAG,CAAC,CAA0D;IACtE,OAAO,CAAC,cAAc,CAAC,CAA6B;gBAElD,GAAG,EAAE,MAAM,EACX,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EACxB,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IASd,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAO3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;CAgBzB"}
+{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUvC,qBAAa,YAAa,SAAQ,aAAa;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,GAAG,CAAC,CAA0D;IACtE,OAAO,CAAC,cAAc,CAAC,CAA6B;gBAElD,GAAG,EAAE,MAAM,EACX,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EACxB,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IASd,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAY3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;IAgBxB;;;;OAIG;IACH,OAAO,CAAC,eAAe;CAyBxB"}

package/dist/vdom/ElementVNode.js

@@ -17,6 +17,9 @@ export class ElementVNode extends AbstractVNode {
         this.key = key;
         this.ref = ref;
     }
+    rerender() {
+        this.syncDOMChildren();
+    }
     mount(parent) {
         this.parent = parent;
         if (parent instanceof RootVNode) {
@@ -54,9 +57,11 @@ export class ElementVNode extends AbstractVNode {
     patch(newNode) {
         this.patchProps(newNode.props);
         this.props = newNode.props;
-        const { children, operations } = this.patchChildren(newNode.children);
+        const { children, hasChangedStructure } = this.patchChildren(newNode.children);
         this.children = children;
-        this.applyDOMOperations(operations);
+        if (hasChangedStructure) {
+            this.syncDOMChildren();
+        }
     }
     unmount() {
         this.children.forEach((child) => child.unmount());
@@ -115,4 +120,32 @@ export class ElementVNode extends AbstractVNode {
             delete this.eventListeners[type];
         }
     }
+    /**
+     * Intelligently sync DOM to match children VNode order.
+     * Only performs DOM operations when elements are out of position.
+     * This is used by both patch() and rerender() to efficiently update children.
+     */
+    syncDOMChildren() {
+        const elm = this.elm;
+        let currentDomChild = elm.firstChild;
+        for (const child of this.children) {
+            const childNodes = child.getElements();
+            for (const node of childNodes) {
+                if (currentDomChild === node) {
+                    // Already in correct position, advance pointer
+                    currentDomChild = currentDomChild.nextSibling;
+                }
+                else {
+                    // Insert (or move if it exists elsewhere in DOM)
+                    elm.insertBefore(node, currentDomChild);
+                }
+            }
+        }
+        // Remove any leftover nodes (shouldn't happen if unmount works correctly)
+        while (currentDomChild) {
+            const next = currentDomChild.nextSibling;
+            elm.removeChild(currentDomChild);
+            currentDomChild = next;
+        }
+    }
 }

package/dist/vdom/FragmentVNode.d.ts

@@ -6,6 +6,7 @@ export declare class FragmentVNode extends AbstractVNode {
     key?: string;
     constructor(children: VNode[], key?: string);
     mount(parent?: VNode): Node[];
+    rerender(): void;
     patch(newNode: FragmentVNode): void;
     unmount(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FragmentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/FragmentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,QAAQ,eAAqB,CAAC;AAE3C,qBAAa,aAAc,SAAQ,aAAa;IAC9C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;gBAED,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM;IAK3C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IAW7B,KAAK,CAAC,OAAO,EAAE,aAAa;IAK5B,OAAO;CAMR"}
+{"version":3,"file":"FragmentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/FragmentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,QAAQ,eAAqB,CAAC;AAE3C,qBAAa,aAAc,SAAQ,aAAa;IAC9C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;gBAED,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM;IAK3C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IAW7B,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,OAAO,EAAE,aAAa;IAS5B,OAAO;CAMR"}

package/dist/vdom/FragmentVNode.js

@@ -19,10 +19,15 @@ export class FragmentVNode extends AbstractVNode {
         }
         return this.children.map((child) => child.mount(this)).flat();
     }
+    rerender() {
+        this.parent?.rerender();
+    }
     patch(newNode) {
-        const { children, operations } = this.patchChildren(newNode.children);
+        const { children, hasChangedStructure } = this.patchChildren(newNode.children);
         this.children = children;
-        this.applyDOMOperations(operations);
+        if (hasChangedStructure) {
+            this.rerender();
+        }
     }
     unmount() {
         this.children.forEach((child) => child.unmount());

package/dist/vdom/RootVNode.d.ts

@@ -1,4 +1,4 @@
-import { AbstractVNode, DOMOperation } from "./AbstractVNode";
+import { AbstractVNode } from "./AbstractVNode";
 import { VNode } from "./types";
 import { ComponentInstance } from "./ComponentVNode";
 export declare let currentRoot: RootVNode | undefined;
@@ -19,7 +19,7 @@ export declare class RootVNode extends AbstractVNode {
     clearCurrent(): void;
     mount(): Node | Node[];
     patch(): void;
-    applyDOMOperations(operations: DOMOperation[], atVNode: VNode): void;
+    rerender(): void;
     unmount(): void;
 }
 //# sourceMappingURL=RootVNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RootVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/RootVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,eAAO,IAAI,WAAW,EAAE,SAAS,GAAG,SAAS,CAAC;AAE9C,qBAAa,SAAU,SAAQ,aAAa;IAC1C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,cAAc,EAAE,iBAAiB,EAAE,CAAM;IACzC,OAAO,CAAC,cAAc,CAGpB;IACF,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,OAAO,CAAC,gBAAgB,CAAyB;gBAErC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;IAMnD,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI;IAIzB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI;IAG3B,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI;IAa5B,cAAc;IAOd,aAAa,CAAC,QAAQ,EAAE,iBAAiB;IAIzC,YAAY;IAIZ,YAAY;IAIZ,YAAY;IAMZ,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE;IAGtB,KAAK,IAAI,IAAI;IACb,kBAAkB,CAAC,UAAU,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,GAAG,IAAI;IAIpE,OAAO,IAAI,IAAI;CAChB"}
+{"version":3,"file":"RootVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/RootVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,eAAO,IAAI,WAAW,EAAE,SAAS,GAAG,SAAS,CAAC;AAE9C,qBAAa,SAAU,SAAQ,aAAa;IAC1C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,cAAc,EAAE,iBAAiB,EAAE,CAAM;IACzC,OAAO,CAAC,cAAc,CAGpB;IACF,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,OAAO,CAAC,gBAAgB,CAAyB;gBAErC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;IAMnD,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI;IAIzB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI;IAG3B,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI;IAa5B,cAAc;IAOd,aAAa,CAAC,QAAQ,EAAE,iBAAiB;IAIzC,YAAY;IAIZ,YAAY;IAIZ,YAAY;IAMZ,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE;IAGtB,KAAK,IAAI,IAAI;IACb,QAAQ,IAAI,IAAI;IAShB,OAAO,IAAI,IAAI;CAChB"}

package/dist/vdom/RootVNode.js

@@ -59,8 +59,11 @@ export class RootVNode extends AbstractVNode {
         return this.children.map((childNode) => childNode.mount(this)).flat();
     }
     patch() { }
-    applyDOMOperations(operations, atVNode) {
-        super.applyDOMOperations(operations, atVNode);
+    rerender() {
+        const childrenElms = this.children
+            .map((child) => child.getElements())
+            .flat();
+        this.elm.replaceChildren(...childrenElms);
         this.flushLifecycle();
     }
     unmount() { }

package/dist/vdom/TextVNode.d.ts

@@ -5,6 +5,7 @@ export declare class TextVNode extends AbstractVNode {
     constructor(text: string);
     mount(parent?: VNode): Node;
     patch(newNode: TextVNode): void;
+    rerender(): void;
     unmount(): void;
 }
 //# sourceMappingURL=TextVNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/TextVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qBAAa,SAAU,SAAQ,aAAa;IAC1C,IAAI,EAAE,MAAM,CAAC;gBACD,IAAI,EAAE,MAAM;IAIxB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAe3B,KAAK,CAAC,OAAO,EAAE,SAAS;IAQxB,OAAO;CAMR"}
+{"version":3,"file":"TextVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/TextVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qBAAa,SAAU,SAAQ,aAAa;IAC1C,IAAI,EAAE,MAAM,CAAC;gBACD,IAAI,EAAE,MAAM;IAIxB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAe3B,KAAK,CAAC,OAAO,EAAE,SAAS;IAQxB,QAAQ,IAAI,IAAI;IAChB,OAAO;CAMR"}

package/dist/vdom/TextVNode.js

@@ -25,6 +25,7 @@ export class TextVNode extends AbstractVNode {
         this.text = newNode.text;
         this.elm.textContent = this.text;
     }
+    rerender() { }
     unmount() {
         this.root?.queueUnmount(() => {
             delete this.elm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",