rask-ui 0.2.4 → 0.2.6

package/dist/vdom/AbstractVNode.d.ts

@@ -1,5 +1,16 @@
 import { RootVNode } from "./RootVNode";
 import { VNode } from "./types";
+export type PatchOperation = {
+    type: "add";
+    elm: Node | Node[];
+} | {
+    type: "replace";
+    oldElm: Node | Node[];
+    newElm: Node | Node[];
+} | {
+    type: "remove";
+    elm: Node | Node[];
+};
 export declare abstract class AbstractVNode {
     key?: string;
     parent?: VNode;
@@ -9,7 +20,7 @@ export declare abstract class AbstractVNode {
     abstract mount(parent?: VNode): Node | Node[];
     abstract patch(oldNode: VNode): void;
     abstract unmount(): void;
-    abstract rerender(): void;
+    abstract rerender(operations?: PatchOperation[]): void;
     protected getHTMLElement(): HTMLElement;
     /**
      * A VNode can represent multiple elements (fragment of component)
@@ -17,6 +28,17 @@ 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[];
+        hasChangedStructure: boolean;
+        operations: PatchOperation[];
+    };
+    applyPatchOperations(target: HTMLElement, operations: PatchOperation[]): void;
+    /**
+     * 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.
+     */
+    protected syncDOMChildren(): void;
 }
 //# 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,cAAc,GACtB;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC;CACpB,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC;IACtB,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC;CACvB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,CAAC;CACpB,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,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IACtD,SAAS,CAAC,cAAc;IAOxB;;OAEG;IACH,WAAW,IAAI,IAAI,EAAE;IAWrB,gBAAgB,IAAI,WAAW;IAiB/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,OAAO;IAoB3D,aAAa,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG;QACnC,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,mBAAmB,EAAE,OAAO,CAAC;QAC7B,UAAU,EAAE,cAAc,EAAE,CAAC;KAC9B;IAkJD,oBAAoB,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE;IAqCtE;;;;OAIG;IACH,SAAS,CAAC,eAAe;CA6B1B"}

package/dist/vdom/AbstractVNode.js

@@ -1,3 +1,4 @@
+import { elementsToFragment } from "./dom-utils";
 export class AbstractVNode {
     key;
     parent;
@@ -57,50 +58,189 @@ export class AbstractVNode {
         // When there are only new children, we just mount them
         if (newChildren && prevChildren.length === 0) {
             newChildren.forEach((child) => child.mount(this));
-            return newChildren;
+            return {
+                children: newChildren,
+                hasChangedStructure: true,
+                operations: [],
+            };
         }
         // 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: [], hasChangedStructure: true, operations: [] };
         }
         const oldKeys = {};
         prevChildren.forEach((prevChild, index) => {
-            oldKeys[prevChild.key || index] = prevChild;
+            oldKeys[prevChild.key || index] = {
+                vnode: prevChild,
+                index,
+            };
         });
         // Build result array in the NEW order
         const result = [];
+        const operations = [];
+        // Track indices of reused nodes in their original order
+        const reusedOldIndices = [];
+        // Track which result positions contain new nodes (not reused/replaced)
+        const isNewNode = [];
+        let forceStructuralChange = false;
         newChildren.forEach((newChild, index) => {
             const key = newChild.key || index;
             const prevChild = oldKeys[key];
             if (!prevChild) {
                 // New child - mount and add to result
-                newChild.mount(this);
+                const elm = newChild.mount(this);
                 result.push(newChild);
+                isNewNode.push(true);
+                operations.push({ type: "add", elm });
             }
-            else if (prevChild === newChild) {
+            else if (prevChild?.vnode === newChild) {
                 // Same instance - no patching needed, just reuse
-                result.push(prevChild);
+                result.push(prevChild.vnode);
+                isNewNode.push(false);
+                reusedOldIndices.push(prevChild.index);
                 delete oldKeys[key];
             }
-            else if (this.canPatch(prevChild, newChild)) {
+            else if (this.canPatch(prevChild.vnode, newChild)) {
                 // Compatible types - patch and reuse old VNode
-                prevChild.patch(newChild);
-                result.push(prevChild);
+                prevChild.vnode.patch(newChild);
+                result.push(prevChild.vnode);
+                isNewNode.push(false);
+                reusedOldIndices.push(prevChild.index);
                 delete oldKeys[key];
             }
             else {
                 // Incompatible types - replace completely
-                newChild.mount(this);
-                prevChild.unmount();
+                const newElm = newChild.mount(this);
+                prevChild.vnode.unmount();
                 result.push(newChild);
+                isNewNode.push(false); // Replacement, not an insertion
                 delete oldKeys[key];
+                const oldElm = prevChild.vnode.getElements();
+                // We need to fall back to structural change when the old node does
+                // not have any elements. This can happen when a component returns null,
+                // throws an error etc.
+                if (!oldElm.length) {
+                    forceStructuralChange = true;
+                    return;
+                }
+                operations.push({
+                    type: "replace",
+                    oldElm,
+                    newElm,
+                });
             }
         });
         // Unmount any old children that weren't reused
         for (const key in oldKeys) {
-            oldKeys[key].unmount();
+            oldKeys[key].vnode.unmount();
+            operations.push({
+                type: "remove",
+                elm: oldKeys[key].vnode.getElements(),
+            });
+        }
+        // Detect structural changes:
+        // 1. Reordering: reused nodes are not in their original relative order
+        // 2. Insertion in middle: new nodes inserted before existing nodes
+        let hasReordering = false;
+        let hasInsertionInMiddle = false;
+        if (!forceStructuralChange) {
+            for (let i = 1; i < reusedOldIndices.length; i++) {
+                if (reusedOldIndices[i] < reusedOldIndices[i - 1]) {
+                    hasReordering = true;
+                    break;
+                }
+            }
+        }
+        if (!hasReordering) {
+            // Find the last position that contains a reused/replaced node
+            let lastReusedResultIndex = -1;
+            for (let i = result.length - 1; i >= 0; i--) {
+                if (!isNewNode[i]) {
+                    lastReusedResultIndex = i;
+                    break;
+                }
+            }
+            // Check if any new nodes were inserted before the last reused/replaced node
+            if (lastReusedResultIndex >= 0) {
+                for (let i = 0; i < lastReusedResultIndex; i++) {
+                    if (isNewNode[i]) {
+                        hasInsertionInMiddle = true;
+                        break;
+                    }
+                }
+            }
+        }
+        const hasChangedStructure = forceStructuralChange || hasReordering || hasInsertionInMiddle;
+        if (hasChangedStructure) {
+            operations.length = 0;
+        }
+        return { children: result, hasChangedStructure, operations };
+    }
+    applyPatchOperations(target, operations) {
+        operations.forEach((operation) => {
+            switch (operation.type) {
+                case "add": {
+                    target.appendChild(elementsToFragment(operation.elm));
+                    break;
+                }
+                case "remove": {
+                    if (Array.isArray(operation.elm)) {
+                        const range = new Range();
+                        range.setStartBefore(operation.elm[0]);
+                        range.setEndAfter(operation.elm[operation.elm.length - 1]);
+                        range.deleteContents();
+                    }
+                    else {
+                        target.removeChild(operation.elm);
+                    }
+                    break;
+                }
+                case "replace": {
+                    if (Array.isArray(operation.oldElm)) {
+                        const range = new Range();
+                        range.setStartBefore(operation.oldElm[0]);
+                        range.setEndAfter(operation.oldElm[operation.oldElm.length - 1]);
+                        range.deleteContents();
+                        range.insertNode(elementsToFragment(operation.newElm));
+                    }
+                    else {
+                        target.replaceChild(elementsToFragment(operation.newElm), operation.oldElm);
+                    }
+                    break;
+                }
+            }
+        });
+    }
+    /**
+     * 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() {
+        if (!this.children) {
+            return;
+        }
+        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;
         }
-        return result;
     }
 }

package/dist/vdom/ComponentVNode.d.ts

@@ -1,5 +1,5 @@
 import { Observer } from "../observation";
-import { AbstractVNode } from "./AbstractVNode";
+import { AbstractVNode, PatchOperation } from "./AbstractVNode";
 import { Props, VNode } from "./types";
 export type ComponentChild = VNode | string | null | number | undefined | boolean;
 export type ComponentChildren = ComponentChild | ComponentChild[];
@@ -40,7 +40,7 @@ export declare class ComponentVNode extends AbstractVNode {
     children: VNode[];
     instance?: ComponentInstance;
     constructor(component: Component<any>, props: Props, children: VNode[], key?: string);
-    rerender(): void;
+    rerender(operations?: PatchOperation[]): 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,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGhE,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,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAG7C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IA0I7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -4,7 +4,6 @@ import { FragmentVNode } from "./FragmentVNode";
 import { RootVNode } from "./RootVNode";
 import { normalizeChildren } from "./utils";
 import { currentRoot } from "./RootVNode";
-import { ElementVNode } from "./ElementVNode";
 export function getCurrentComponent() {
     if (!currentRoot) {
         throw new Error("No current root");
@@ -51,8 +50,8 @@ export class ComponentVNode extends AbstractVNode {
         this.children = [];
         this.key = key;
     }
-    rerender() {
-        this.parent?.rerender();
+    rerender(operations) {
+        this.parent?.rerender(operations);
     }
     mount(parent) {
         this.parent = parent;
@@ -96,18 +95,17 @@ export class ComponentVNode extends AbstractVNode {
                     isObserverQueued = false;
                     this.root?.setAsCurrent();
                     const newChildren = executeRender();
-                    const prevChildren = this.children;
-                    this.children = this.patchChildren(newChildren);
-                    // Typically components return a single element, which does
-                    // not require the parent to apply elements to the DOM again
-                    const canSelfUpdate = prevChildren.length === 1 &&
-                        this.children.length === 1 &&
-                        prevChildren[0] instanceof ElementVNode &&
-                        this.children[0] instanceof ElementVNode &&
-                        this.canPatch(prevChildren[0], this.children[0]);
-                    if (!canSelfUpdate) {
+                    const { children, hasChangedStructure, operations } = this.patchChildren(newChildren);
+                    this.children = children;
+                    // So if a fragment is returned where we add new elements we can not safely
+                    // add them yet, check Fragment for a potential later optimization
+                    const hasAddOperation = operations.some((operation) => operation.type === "add");
+                    if (hasChangedStructure || hasAddOperation) {
                         this.parent?.rerender();
                     }
+                    else if (operations.length) {
+                        this.parent?.rerender(operations);
+                    }
                     this.root?.clearCurrent();
                 });
             }),

package/dist/vdom/ElementVNode.d.ts

@@ -1,4 +1,4 @@
-import { AbstractVNode } from "./AbstractVNode";
+import { AbstractVNode, PatchOperation } from "./AbstractVNode";
 import { Props, VNode } from "./types";
 export declare class ElementVNode extends AbstractVNode {
     tag: string;
@@ -8,7 +8,7 @@ export declare class ElementVNode extends AbstractVNode {
     private ref?;
     private eventListeners?;
     constructor(tag: string, { ref, ...props }: Props, children: VNode[], key?: string);
-    rerender(): void;
+    rerender(operations?: PatchOperation[]): void;
     mount(parent?: VNode): Node;
     /**
      * An ELEMENT patch goes through three operations
@@ -20,11 +20,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,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGhE,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,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAO7C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAc3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;CAgBzB"}

package/dist/vdom/ElementVNode.js

@@ -17,8 +17,13 @@ export class ElementVNode extends AbstractVNode {
         this.key = key;
         this.ref = ref;
     }
-    rerender() {
-        this.syncDOMChildren();
+    rerender(operations) {
+        if (operations) {
+            this.applyPatchOperations(this.getHTMLElement(), operations);
+        }
+        else {
+            this.syncDOMChildren();
+        }
     }
     mount(parent) {
         this.parent = parent;
@@ -57,8 +62,14 @@ 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, hasChangedStructure, operations } = this.patchChildren(newNode.children);
+        this.children = children;
+        if (hasChangedStructure) {
+            this.syncDOMChildren();
+        }
+        else {
+            this.applyPatchOperations(this.getHTMLElement(), operations);
+        }
     }
     unmount() {
         this.children.forEach((child) => child.unmount());
@@ -117,32 +128,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

@@ -1,4 +1,4 @@
-import { AbstractVNode } from "./AbstractVNode";
+import { AbstractVNode, PatchOperation } from "./AbstractVNode";
 import { VNode } from "./types";
 export declare const Fragment: unique symbol;
 export declare class FragmentVNode extends AbstractVNode {
@@ -6,7 +6,7 @@ export declare class FragmentVNode extends AbstractVNode {
     key?: string;
     constructor(children: VNode[], key?: string);
     mount(parent?: VNode): Node[];
-    rerender(): void;
+    rerender(operations?: PatchOperation[]): 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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKhE,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,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAG7C,KAAK,CAAC,OAAO,EAAE,aAAa;IAiB5B,OAAO;CAMR"}

package/dist/vdom/FragmentVNode.js

@@ -19,11 +19,20 @@ export class FragmentVNode extends AbstractVNode {
         }
         return this.children.map((child) => child.mount(this)).flat();
     }
-    rerender() {
-        this.parent?.rerender();
+    rerender(operations) {
+        this.parent?.rerender(operations);
     }
     patch(newNode) {
-        this.children = this.patchChildren(newNode.children);
+        const { children, hasChangedStructure, operations } = this.patchChildren(newNode.children);
+        this.children = children;
+        // So we can safely pass remove/replace operations up to the parent, but add
+        // is very tricky as parent has potentially other children as well. This can be
+        // handled with some additional detection, changing it to insertBefore. This can be
+        // done by passing this vnode up to the parent
+        this.rerender(hasChangedStructure ||
+            operations.some((operation) => operation.type === "add")
+            ? undefined
+            : operations);
     }
     unmount() {
         this.children.forEach((child) => child.unmount());

package/dist/vdom/RootVNode.d.ts

@@ -1,4 +1,4 @@
-import { AbstractVNode } from "./AbstractVNode";
+import { AbstractVNode, PatchOperation } 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;
+    rerender(operations?: PatchOperation[]): 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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAChE,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,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAS7C,OAAO,IAAI,IAAI;CAChB"}

package/dist/vdom/RootVNode.js

@@ -59,11 +59,13 @@ 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);
+    rerender(operations) {
+        if (operations) {
+            this.applyPatchOperations(this.getHTMLElement(), operations);
+        }
+        else {
+            this.syncDOMChildren();
+        }
         this.flushLifecycle();
     }
     unmount() { }

package/package.json

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

package/dist/component.d.ts

@@ -1,38 +0,0 @@
-import { type VNode } from "snabbdom";
-import { Observer } from "./observation";
-import { ChildNode } from "./render";
-/**
- * Component function type. Components receive reactive props that should not be destructured.
- *
- * @warning **Do not destructure props!** Props are wrapped in a reactive proxy, and destructuring
- * breaks reactivity. This is the same rule as Solid.js.
- *
- * @example
- * // ❌ Bad - destructuring props loses reactivity
- * function MyComponent({ count, name }) {
- *   return () => <div>{count} {name}</div>; // Won't update!
- * }
- *
- * // ✅ Good - access props directly in render
- * function MyComponent(props) {
- *   return () => <div>{props.count} {props.name}</div>; // Reactive!
- * }
- */
-export type Component<P> = ((props: P) => () => VNode) | (() => () => VNode);
-export type ComponentInstance = {
-    parent: ComponentInstance | null;
-    component: Component<any>;
-    contexts: Map<object, object> | null;
-    onMounts: Array<() => void>;
-    onCleanups: Array<() => void>;
-    hostNode?: VNode;
-    observer: Observer;
-    reactiveProps: object;
-    error: unknown;
-    notifyError(error: unknown): void;
-};
-export declare function getCurrentComponent(): ComponentInstance;
-export declare function onMount(cb: () => void): void;
-export declare function onCleanup(cb: () => void): void;
-export declare function createComponent(component: Component<any>, props: Record<string, unknown>, children: ChildNode[] | ChildNode): import("snabbdom").Thunk;
-//# sourceMappingURL=component.d.ts.map

package/dist/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,KAAK,EAAkB,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AACrE,OAAO,EAAc,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,GAAG,CAAC,MAAM,MAAM,KAAK,CAAC,CAAC;AAE7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,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;AAIF,wBAAgB,mBAAmB,sBAElC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAQrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAQvC;AAuGD,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,4BAWlC"}