rask-ui 0.2.1 → 0.2.3

package/dist/tests/patchChildren.test.js

@@ -11,11 +11,13 @@ 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;
-        this.elm = document.createTextNode(`mock-${this.key || "no-key"}`);
+        // elm already exists from constructor
         return this.elm;
     }
     patch(newNode) {
@@ -26,7 +28,8 @@ class MockVNode extends AbstractVNode {
     }
     unmount() {
         this.unmountCalls++;
-        delete this.elm;
+        // Don't delete elm - it's needed for getElements() when building operations
+        // delete this.elm;
         delete this.parent;
     }
     rerender() {
@@ -37,6 +40,8 @@ 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 || []);
     }
 }
@@ -46,25 +51,33 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode("a");
             const newChild2 = new MockVNode("b");
             const parent = new MockParentVNode([]);
-            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = 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]);
+            expect(children).toEqual([newChild1, newChild2]);
+            // Should return insert operation
+            expect(operations).toHaveLength(1);
+            expect(operations[0].type).toBe("insert");
+            expect(operations[0]).toHaveProperty("elms");
         });
         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([]));
+            const { children, operations } = 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([]);
+            expect(children).toEqual([]);
+            // Should return remove operation
+            expect(operations).toHaveLength(1);
+            expect(operations[0].type).toBe("remove");
+            expect(operations[0]).toHaveProperty("elms");
         });
     });
     describe("Patching with keys", () => {
@@ -76,7 +89,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // OLD children should be patched with new children
             expect(oldChild1.patchCalls).toBe(1);
             expect(oldChild2.patchCalls).toBe(1);
@@ -93,7 +106,9 @@ 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(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
+            // Should have no operations (just patching)
+            expect(operations).toHaveLength(0);
         });
         it("should handle reordered children with keys", () => {
             const oldChild1 = new MockVNode("a");
@@ -104,7 +119,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = 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
@@ -114,11 +129,14 @@ 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(result).toEqual([oldChild3, oldChild1, oldChild2]);
+            expect(children).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");
+            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);
         });
         it("should mount new children and unmount removed children", () => {
             const oldChild1 = new MockVNode("a");
@@ -129,7 +147,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // a and c should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild2);
@@ -138,11 +156,44 @@ 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(result).toContain(oldChild1);
-            expect(result).toContain(oldChild3);
-            expect(result).toContain(newChild3);
-            expect(result).not.toContain(oldChild2);
-            expect(result.length).toBe(3);
+            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");
+                }
+            });
         });
         it("should replace all children when all keys change", () => {
             const oldChild1 = new MockVNode("a");
@@ -150,7 +201,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 result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // All new children should be mounted
             expect(newChild1.mountCalls).toBe(1);
             expect(newChild2.mountCalls).toBe(1);
@@ -158,7 +209,11 @@ 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(result).toEqual([newChild1, newChild2]);
+            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);
         });
     });
     describe("Patching without keys (index-based)", () => {
@@ -170,7 +225,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild1 = new MockVNode();
             const newChild2 = new MockVNode();
             const newChild3 = new MockVNode();
-            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = 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);
@@ -180,7 +235,9 @@ 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(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
+            // Should have no operations (just patching)
+            expect(operations).toHaveLength(0);
         });
         it("should mount new children when growing without keys", () => {
             const oldChild1 = new MockVNode();
@@ -190,7 +247,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             const newChild2 = new MockVNode();
             const newChild3 = new MockVNode();
             const newChild4 = new MockVNode();
-            const result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3, newChild4]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3, newChild4]));
             // First two should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -201,7 +258,10 @@ 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(result).toEqual([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);
         });
         it("should unmount old children when shrinking without keys", () => {
             const oldChild1 = new MockVNode();
@@ -216,7 +276,7 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             ]);
             const newChild1 = new MockVNode();
             const newChild2 = new MockVNode();
-            const result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // First two should be patched
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -227,7 +287,10 @@ 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(result).toEqual([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);
         });
     });
     describe("Mixed keys and indices", () => {
@@ -239,7 +302,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // Keyed children should patch by key
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild3);
@@ -250,7 +313,9 @@ 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(result).toEqual([oldChild1, oldChild2, oldChild3]);
+            expect(children).toEqual([oldChild1, oldChild2, oldChild3]);
+            // Should have no operations (just patching)
+            expect(operations).toHaveLength(0);
         });
     });
     describe("Real-world scenarios", () => {
@@ -259,7 +324,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 result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // Title should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             // Details should be mounted
@@ -267,14 +332,17 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             // No unmounts
             expect(oldChild1.unmountCalls).toBe(0);
             // Result should be [oldChild1, newChild2]
-            expect(result).toEqual([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);
         });
         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]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1]));
             // Title should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             // Details should be unmounted
@@ -282,7 +350,10 @@ describe("patchChildren (new approach: keep old, patch in new)", () => {
             // Title should not be unmounted
             expect(oldChild1.unmountCalls).toBe(0);
             // Result should be [oldChild1]
-            expect(result).toEqual([oldChild1]);
+            expect(children).toEqual([oldChild1]);
+            // Should have remove operation
+            expect(operations.length).toBeGreaterThan(0);
+            expect(operations.some((op) => op.type === "remove")).toBe(true);
         });
         it("should handle list with items added at beginning", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -291,7 +362,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // New item should be mounted
             expect(newChild1.mountCalls).toBe(1);
             // Existing items should be patched (reused)
@@ -301,7 +372,10 @@ 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(result).toEqual([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);
         });
         it("should handle list with items added at end", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -310,7 +384,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 result = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2, newChild3]));
             // Existing items should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild2.patchedWith).toBe(newChild2);
@@ -320,7 +394,10 @@ 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(result).toEqual([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);
         });
         it("should handle list with item removed from middle", () => {
             const oldChild1 = new MockVNode("item-1");
@@ -329,7 +406,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 result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = parent.patchChildren(toVNodes([newChild1, newChild2]));
             // item-1 and item-3 should be patched (reused)
             expect(oldChild1.patchedWith).toBe(newChild1);
             expect(oldChild3.patchedWith).toBe(newChild2);
@@ -339,33 +416,42 @@ 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(result).toEqual([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);
         });
         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]));
+            const { children, operations } = 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]);
+            expect(children).toEqual([newChild1, newChild2, newChild3]);
+            // Should have insert operation
+            expect(operations).toHaveLength(1);
+            expect(operations[0].type).toBe("insert");
         });
         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([]));
+            const { children, operations } = 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([]);
+            expect(children).toEqual([]);
+            // Should have remove operation
+            expect(operations).toHaveLength(1);
+            expect(operations[0].type).toBe("remove");
         });
     });
     describe("Object reference preservation", () => {
@@ -375,13 +461,66 @@ 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 result = parent.patchChildren(toVNodes([newChild1, newChild2]));
+            const { children, operations } = 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
+            expect(children[0]).toBe(oldChild1); // Same object reference
+            expect(children[1]).toBe(oldChild2); // Same object reference
             // NOT the new children
-            expect(result[0]).not.toBe(newChild1);
-            expect(result[1]).not.toBe(newChild2);
+            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);
         });
     });
 });

package/dist/vdom/AbstractVNode.d.ts

@@ -1,5 +1,21 @@
 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;
@@ -9,7 +25,7 @@ export declare abstract class AbstractVNode {
     abstract mount(parent?: VNode): Node | Node[];
     abstract patch(oldNode: VNode): void;
     abstract unmount(): void;
-    abstract rerender(): void;
+    applyDOMOperations(operations: DOMOperation[], atVNode?: VNode): void;
     protected getHTMLElement(): HTMLElement;
     /**
      * A VNode can represent multiple elements (fragment of component)
@@ -17,6 +33,9 @@ export declare abstract class AbstractVNode {
     getElements(): Node[];
     getParentElement(): HTMLElement;
     protected canPatch(oldNode: VNode, newNode: VNode): boolean;
-    patchChildren(newChildren: VNode[]): VNode[];
+    patchChildren(newChildren: VNode[]): {
+        children: VNode[];
+        operations: DOMOperation[];
+    };
 }
 //# 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":"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"}
+{"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"}