rask-ui 0.2.2 → 0.2.3

package/dist/observation.test.js

@@ -1,150 +1,113 @@
-import { describe, it, expect, vi } from 'vitest';
-import { Signal, Observer, getCurrentObserver } from './observation';
-describe('Signal', () => {
-    it('should allow subscribing to notifications', () => {
-        const signal = new Signal();
-        const callback = vi.fn();
-        signal.subscribe(callback);
-        signal.notify();
-        expect(callback).toHaveBeenCalledTimes(1);
-    });
-    it('should return a disposer function', () => {
-        const signal = new Signal();
-        const callback = vi.fn();
-        const dispose = signal.subscribe(callback);
-        dispose();
-        signal.notify();
-        expect(callback).not.toHaveBeenCalled();
-    });
-    it('should handle multiple subscribers', () => {
-        const signal = new Signal();
-        const callback1 = vi.fn();
-        const callback2 = vi.fn();
-        signal.subscribe(callback1);
-        signal.subscribe(callback2);
-        signal.notify();
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(1);
-    });
-    it('should allow unsubscribing individual callbacks', () => {
-        const signal = new Signal();
-        const callback1 = vi.fn();
-        const callback2 = vi.fn();
-        const dispose1 = signal.subscribe(callback1);
-        signal.subscribe(callback2);
-        dispose1();
-        signal.notify();
-        expect(callback1).not.toHaveBeenCalled();
-        expect(callback2).toHaveBeenCalledTimes(1);
-    });
+import { describe, it, expect, vi } from "vitest";
+import { Signal, Observer, getCurrentObserver } from "./observation";
+describe("Signal", () => {
+  it("should allow subscribing to notifications", () => {
+    const signal = new Signal();
+    const callback = vi.fn();
+    signal.subscribe(callback);
+    signal.notify();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+  it("should return a disposer function", () => {
+    const signal = new Signal();
+    const callback = vi.fn();
+    const dispose = signal.subscribe(callback);
+    dispose();
+    signal.notify();
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("should handle multiple subscribers", () => {
+    const signal = new Signal();
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+    signal.subscribe(callback1);
+    signal.subscribe(callback2);
+    signal.notify();
+    expect(callback1).toHaveBeenCalledTimes(1);
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+  it("should allow unsubscribing individual callbacks", () => {
+    const signal = new Signal();
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+    const dispose1 = signal.subscribe(callback1);
+    signal.subscribe(callback2);
+    dispose1();
+    signal.notify();
+    expect(callback1).not.toHaveBeenCalled();
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
 });
-describe('Observer', () => {
-    it('should queue notifications in microtasks', async () => {
-        let callCount = 0;
-        const observer = new Observer(() => {
-            callCount++;
-        });
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        // Trigger multiple notifications
-        signal.notify();
-        signal.notify();
-        signal.notify();
-        // Should not be called synchronously
-        expect(callCount).toBe(0);
-        // Wait for microtask
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        // Should be called only once due to queuing
-        expect(callCount).toBe(1);
-    });
-    it('should track signals during observation', () => {
-        const callback = vi.fn();
-        const observer = new Observer(callback);
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        signal.notify();
-        return new Promise((resolve) => {
-            queueMicrotask(() => {
-                expect(callback).toHaveBeenCalledTimes(1);
-                resolve(undefined);
-            });
-        });
-    });
-    it('should clear signals when observing again', async () => {
-        let callCount = 0;
-        const observer = new Observer(() => {
-            callCount++;
-        });
-        const signal1 = new Signal();
-        const signal2 = new Signal();
-        // First observation
-        let dispose = observer.observe();
-        observer.subscribeSignal(signal1);
-        dispose();
-        // Second observation - should clear previous signals
-        dispose = observer.observe();
-        observer.subscribeSignal(signal2);
-        dispose();
-        // Notify first signal - should not trigger observer
-        signal1.notify();
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        expect(callCount).toBe(0);
-        // Notify second signal - should trigger observer
-        signal2.notify();
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        expect(callCount).toBe(1);
-    });
-    it('should dispose of all signal subscriptions', async () => {
-        const callback = vi.fn();
-        const observer = new Observer(callback);
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        observer.dispose();
-        signal.notify();
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        expect(callback).not.toHaveBeenCalled();
-    });
-    it('should set current observer during observation', () => {
-        const observer = new Observer(() => { });
-        expect(getCurrentObserver()).toBeUndefined();
-        const dispose = observer.observe();
-        expect(getCurrentObserver()).toBe(observer);
-        dispose();
-        expect(getCurrentObserver()).toBeUndefined();
-    });
-    it('should handle nested observations with stack', () => {
-        const observer1 = new Observer(() => { });
-        const observer2 = new Observer(() => { });
-        const dispose1 = observer1.observe();
-        expect(getCurrentObserver()).toBe(observer1);
-        const dispose2 = observer2.observe();
-        expect(getCurrentObserver()).toBe(observer2);
-        dispose2();
-        expect(getCurrentObserver()).toBe(observer1);
-        dispose1();
-        expect(getCurrentObserver()).toBeUndefined();
+describe("Observer", () => {
+  it("should track signals during observation", () => {
+    const callback = vi.fn();
+    const observer = new Observer(callback);
+    const signal = new Signal();
+    const dispose = observer.observe();
+    observer.subscribeSignal(signal);
+    dispose();
+    signal.notify();
+    return new Promise((resolve) => {
+      queueMicrotask(() => {
+        expect(callback).toHaveBeenCalledTimes(1);
+        resolve(undefined);
+      });
     });
-    it('should prevent duplicate notifications while queued', async () => {
-        let callCount = 0;
-        const observer = new Observer(() => {
-            callCount++;
-        });
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        // Rapid-fire notifications
-        for (let i = 0; i < 100; i++) {
-            signal.notify();
-        }
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        // Should only be called once
-        expect(callCount).toBe(1);
+  });
+  it("should clear signals when observing again", async () => {
+    let callCount = 0;
+    const observer = new Observer(() => {
+      callCount++;
     });
+    const signal1 = new Signal();
+    const signal2 = new Signal();
+    // First observation
+    let dispose = observer.observe();
+    observer.subscribeSignal(signal1);
+    dispose();
+    // Second observation - should clear previous signals
+    dispose = observer.observe();
+    observer.subscribeSignal(signal2);
+    dispose();
+    // Notify first signal - should not trigger observer
+    signal1.notify();
+    await new Promise((resolve) => queueMicrotask(() => resolve()));
+    expect(callCount).toBe(0);
+    // Notify second signal - should trigger observer
+    signal2.notify();
+    await new Promise((resolve) => queueMicrotask(() => resolve()));
+    expect(callCount).toBe(1);
+  });
+  it("should dispose of all signal subscriptions", async () => {
+    const callback = vi.fn();
+    const observer = new Observer(callback);
+    const signal = new Signal();
+    const dispose = observer.observe();
+    observer.subscribeSignal(signal);
+    dispose();
+    observer.dispose();
+    signal.notify();
+    await new Promise((resolve) => queueMicrotask(() => resolve()));
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("should set current observer during observation", () => {
+    const observer = new Observer(() => {});
+    expect(getCurrentObserver()).toBeUndefined();
+    const dispose = observer.observe();
+    expect(getCurrentObserver()).toBe(observer);
+    dispose();
+    expect(getCurrentObserver()).toBeUndefined();
+  });
+  it("should handle nested observations with stack", () => {
+    const observer1 = new Observer(() => {});
+    const observer2 = new Observer(() => {});
+    const dispose1 = observer1.observe();
+    expect(getCurrentObserver()).toBe(observer1);
+    const dispose2 = observer2.observe();
+    expect(getCurrentObserver()).toBe(observer2);
+    dispose2();
+    expect(getCurrentObserver()).toBe(observer1);
+    dispose1();
+    expect(getCurrentObserver()).toBeUndefined();
+  });
 });

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"}

package/dist/vdom/AbstractVNode.js

@@ -1,9 +1,77 @@
+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");
@@ -18,6 +86,7 @@ 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();
@@ -55,52 +124,132 @@ export class AbstractVNode {
     patchChildren(newChildren) {
         const prevChildren = this.children;
         // When there are only new children, we just mount them
-        if (newChildren && prevChildren.length === 0) {
+        if (prevChildren.length === 0) {
             newChildren.forEach((child) => child.mount(this));
-            return newChildren;
+            return {
+                children: newChildren,
+                operations: [
+                    {
+                        type: "insert",
+                        elms: newChildren.map((child) => child.getElements()).flat(),
+                    },
+                ],
+            };
         }
         // If we want to remove all children, we just unmount the previous ones
         if (!newChildren.length && prevChildren.length) {
             prevChildren.forEach((child) => child.unmount());
-            return [];
+            return {
+                children: [],
+                operations: [
+                    {
+                        type: "remove",
+                        elms: prevChildren.map((child) => child.getElements()).flat(),
+                    },
+                ],
+            };
         }
+        const operations = [];
         const oldKeys = {};
+        // Build oldKeys map and handle duplicate keys
         prevChildren.forEach((prevChild, index) => {
-            oldKeys[prevChild.key || index] = prevChild;
+            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;
         });
-        // Build result array in the NEW order
+        // 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) ===
         const result = [];
+        const newChildrenMeta = [];
         newChildren.forEach((newChild, index) => {
             const key = newChild.key || index;
-            const prevChild = oldKeys[key];
-            if (!prevChild) {
+            const oldChild = oldKeys[key];
+            if (!oldChild) {
                 // New child - mount and add to result
                 newChild.mount(this);
                 result.push(newChild);
+                newChildrenMeta.push({ isNew: true });
             }
-            else if (prevChild === newChild) {
-                // Same instance - no patching needed, just reuse
-                result.push(prevChild);
-                delete oldKeys[key];
-            }
-            else if (this.canPatch(prevChild, newChild)) {
+            else if (this.canPatch(oldChild, newChild)) {
                 // Compatible types - patch and reuse old VNode
-                prevChild.patch(newChild);
-                result.push(prevChild);
+                if (oldChild !== newChild) {
+                    oldChild.patch(newChild);
+                }
+                result.push(oldChild);
                 delete oldKeys[key];
+                newChildrenMeta.push({ isNew: false });
             }
             else {
                 // Incompatible types - replace completely
                 newChild.mount(this);
-                prevChild.unmount();
+                oldChild.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,
+                });
             }
+            // 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() });
         }
-        return result;
+        return {
+            children: result,
+            operations,
+        };
     }
 }

package/dist/vdom/ComponentVNode.d.ts

@@ -40,7 +40,6 @@ 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,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;IAyI7B,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,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"}

package/dist/vdom/ComponentVNode.js

@@ -51,9 +51,6 @@ export class ComponentVNode extends AbstractVNode {
         this.children = [];
         this.key = key;
     }
-    rerender() {
-        this.parent?.rerender();
-    }
     mount(parent) {
         this.parent = parent;
         if (parent instanceof RootVNode) {
@@ -97,7 +94,8 @@ export class ComponentVNode extends AbstractVNode {
                     this.root?.setAsCurrent();
                     const newChildren = executeRender();
                     const prevChildren = this.children;
-                    this.children = this.patchChildren(newChildren);
+                    const { children, operations } = 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 &&
@@ -106,7 +104,7 @@ export class ComponentVNode extends AbstractVNode {
                         this.children[0] instanceof ElementVNode &&
                         this.canPatch(prevChildren[0], this.children[0]);
                     if (!canSelfUpdate) {
-                        this.parent?.rerender();
+                        this.parent?.applyDOMOperations(operations, this);
                     }
                     this.root?.clearCurrent();
                 });

package/dist/vdom/ElementVNode.d.ts

@@ -8,7 +8,6 @@ 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
@@ -20,11 +19,5 @@ 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,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;IAM3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;IAgBxB;;;;OAIG;IACH,OAAO,CAAC,eAAe;CAyBxB"}
+{"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"}

package/dist/vdom/ElementVNode.js

@@ -17,9 +17,6 @@ export class ElementVNode extends AbstractVNode {
         this.key = key;
         this.ref = ref;
     }
-    rerender() {
-        this.syncDOMChildren();
-    }
     mount(parent) {
         this.parent = parent;
         if (parent instanceof RootVNode) {
@@ -57,8 +54,9 @@ export class ElementVNode extends AbstractVNode {
     patch(newNode) {
         this.patchProps(newNode.props);
         this.props = newNode.props;
-        this.children = this.patchChildren(newNode.children);
-        this.syncDOMChildren();
+        const { children, operations } = this.patchChildren(newNode.children);
+        this.children = children;
+        this.applyDOMOperations(operations);
     }
     unmount() {
         this.children.forEach((child) => child.unmount());
@@ -117,32 +115,4 @@ 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,7 +6,6 @@ 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,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,OAAO,EAAE,aAAa;IAG5B,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,KAAK,CAAC,OAAO,EAAE,aAAa;IAK5B,OAAO;CAMR"}

package/dist/vdom/FragmentVNode.js

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

package/dist/vdom/RootVNode.d.ts

@@ -1,4 +1,4 @@
-import { AbstractVNode } from "./AbstractVNode";
+import { AbstractVNode, DOMOperation } 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;
-    rerender(): void;
+    applyDOMOperations(operations: DOMOperation[], atVNode: VNode): 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,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"}
+{"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"}

package/dist/vdom/RootVNode.js

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

package/dist/vdom/TextVNode.d.ts

@@ -5,7 +5,6 @@ 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,QAAQ,IAAI,IAAI;IAChB,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,OAAO;CAMR"}

package/dist/vdom/TextVNode.js

@@ -25,7 +25,6 @@ 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.2",
+  "version": "0.2.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",