rask-ui 0.2.5 → 0.2.7

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)
@@ -20,6 +31,14 @@ export declare abstract class AbstractVNode {
     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;QACnC,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,mBAAmB,EAAE,OAAO,CAAC;KAC9B;CAqEF"}
+{"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;IAmBrB,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;
@@ -20,7 +21,15 @@ export class AbstractVNode {
         if (!this.children) {
             throw new Error("This VNode has no element or children");
         }
-        return this.children.map((child) => child.getElements()).flat();
+        // Optimized: avoid intermediate arrays from map+flat
+        const result = [];
+        for (let i = 0; i < this.children.length; i++) {
+            const childElms = this.children[i].getElements();
+            for (let j = 0; j < childElms.length; j++) {
+                result.push(childElms[j]);
+            }
+        }
+        return result;
     }
     getParentElement() {
         let parent = this.parent;
@@ -57,12 +66,16 @@ 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 { children: newChildren, hasChangedStructure: true };
+            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 { children: [], hasChangedStructure: true };
+            return { children: [], hasChangedStructure: true, operations: [] };
         }
         const oldKeys = {};
         prevChildren.forEach((prevChild, index) => {
@@ -73,43 +86,169 @@ export class AbstractVNode {
         });
         // Build result array in the NEW order
         const result = [];
-        let hasChangedStructure = false;
+        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);
-                hasChangedStructure = true;
+                isNewNode.push(true);
+                operations.push({ type: "add", elm });
             }
             else if (prevChild?.vnode === newChild) {
                 // Same instance - no patching needed, just reuse
                 result.push(prevChild.vnode);
+                isNewNode.push(false);
+                reusedOldIndices.push(prevChild.index);
                 delete oldKeys[key];
-                hasChangedStructure = hasChangedStructure || prevChild.index !== index;
             }
             else if (this.canPatch(prevChild.vnode, newChild)) {
                 // Compatible types - patch and reuse old VNode
                 prevChild.vnode.patch(newChild);
                 result.push(prevChild.vnode);
+                isNewNode.push(false);
+                reusedOldIndices.push(prevChild.index);
                 delete oldKeys[key];
-                hasChangedStructure = hasChangedStructure || prevChild.index !== index;
             }
             else {
                 // Incompatible types - replace completely
-                newChild.mount(this);
+                const newElm = newChild.mount(this);
                 prevChild.vnode.unmount();
                 result.push(newChild);
+                isNewNode.push(false); // Replacement, not an insertion
                 delete oldKeys[key];
-                hasChangedStructure = true;
+                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].vnode.unmount();
-            hasChangedStructure = true;
+            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 { children: result, hasChangedStructure };
     }
 }

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;IAmI7B,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;AAIvC,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;IA6I7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -3,6 +3,7 @@ import { AbstractVNode } from "./AbstractVNode";
 import { FragmentVNode } from "./FragmentVNode";
 import { RootVNode } from "./RootVNode";
 import { normalizeChildren } from "./utils";
+import { flattenNodes } from "./dom-utils";
 import { currentRoot } from "./RootVNode";
 export function getCurrentComponent() {
     if (!currentRoot) {
@@ -50,8 +51,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;
@@ -95,12 +96,17 @@ export class ComponentVNode extends AbstractVNode {
                     isObserverQueued = false;
                     this.root?.setAsCurrent();
                     const newChildren = executeRender();
-                    const prevChildren = this.children;
-                    const { children, hasChangedStructure } = this.patchChildren(newChildren);
+                    const { children, hasChangedStructure, operations } = this.patchChildren(newChildren);
                     this.children = children;
-                    if (hasChangedStructure) {
+                    // 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();
                 });
             }),
@@ -153,9 +159,12 @@ export class ComponentVNode extends AbstractVNode {
         this.children = executeRender();
         this.root?.popComponent();
         this.root?.clearCurrent();
-        const childElements = this.children
-            .map((child) => child.mount(this))
-            .flat();
+        // Optimized: avoid intermediate arrays from map+flat
+        const childResults = [];
+        for (let i = 0; i < this.children.length; i++) {
+            childResults.push(this.children[i].mount(this));
+        }
+        const childElements = flattenNodes(childResults);
         // Queue onMount callbacks after children are mounted
         // This ensures refs and other child lifecycle hooks run before parent onMount
         instance.onMounts.forEach((cb) => {

package/dist/vdom/ElementVNode.d.ts

@@ -1,14 +1,16 @@
-import { AbstractVNode } from "./AbstractVNode";
-import { Props, VNode } from "./types";
+import { AbstractVNode, PatchOperation } from "./AbstractVNode";
+import { Props, VNode, VFlags } from "./types";
 export declare class ElementVNode extends AbstractVNode {
     tag: string;
     props: Props;
     children: VNode[];
     key?: string;
+    flags: VFlags;
     private ref?;
     private eventListeners?;
     constructor(tag: string, { ref, ...props }: Props, children: VNode[], key?: string);
-    rerender(): void;
+    private computeFlags;
+    rerender(operations?: PatchOperation[]): void;
     mount(parent?: VNode): Node;
     /**
      * An ELEMENT patch goes through three operations
@@ -19,12 +21,7 @@ export declare class ElementVNode extends AbstractVNode {
     unmount(): void;
     private setProp;
     private patchProps;
+    private patchStyle;
     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;IAY3B,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,EAAE,MAAM,SAAS,CAAC;AAU/C,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,KAAK,EAAE,MAAM,CAAC;IACd,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;IAad,OAAO,CAAC,YAAY;IAwBpB,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;IAwB3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAsClB,OAAO,CAAC,UAAU;IAoClB,OAAO,CAAC,gBAAgB;CAgBzB"}

package/dist/vdom/ElementVNode.js

@@ -7,6 +7,7 @@ export class ElementVNode extends AbstractVNode {
     props;
     children;
     key;
+    flags;
     ref;
     eventListeners;
     constructor(tag, { ref, ...props }, children, key) {
@@ -16,9 +17,39 @@ export class ElementVNode extends AbstractVNode {
         this.children = children;
         this.key = key;
         this.ref = ref;
+        // Pre-compute flags for fast-path checks during patching
+        this.flags = this.computeFlags(props);
     }
-    rerender() {
-        this.syncDOMChildren();
+    computeFlags(props) {
+        let flags = 0 /* VFlags.None */;
+        const propKeys = Object.keys(props);
+        if (propKeys.length > 0) {
+            flags |= 1 /* VFlags.HasProps */;
+            for (let i = 0; i < propKeys.length; i++) {
+                const key = propKeys[i];
+                if (key === "class" || key === "className") {
+                    flags |= 2 /* VFlags.HasClass */;
+                }
+                else if (key === "style") {
+                    flags |= 4 /* VFlags.HasStyle */;
+                }
+                else if (isEventProp(key)) {
+                    flags |= 8 /* VFlags.HasEvents */;
+                }
+                else if (key.startsWith("data-") || key.startsWith("aria-")) {
+                    flags |= 16 /* VFlags.HasDataAttrs */;
+                }
+            }
+        }
+        return flags;
+    }
+    rerender(operations) {
+        if (operations) {
+            this.applyPatchOperations(this.getHTMLElement(), operations);
+        }
+        else {
+            this.syncDOMChildren();
+        }
     }
     mount(parent) {
         this.parent = parent;
@@ -55,13 +86,23 @@ export class ElementVNode extends AbstractVNode {
      * - Patch the children
      */
     patch(newNode) {
-        this.patchProps(newNode.props);
+        // Save old flags before updating
+        const oldFlags = this.flags;
+        // Only patch props if either old or new node has props
+        if ((oldFlags | newNode.flags) & 1 /* VFlags.HasProps */) {
+            this.patchProps(newNode.props, oldFlags, newNode.flags);
+        }
+        // Update flags and props after patching
+        this.flags = newNode.flags;
         this.props = newNode.props;
-        const { children, hasChangedStructure } = this.patchChildren(newNode.children);
+        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());
@@ -102,8 +143,64 @@ export class ElementVNode extends AbstractVNode {
         }
         setElementProp(elm, prop, value);
     };
-    patchProps(newProps) {
-        diffObjectKeys(this.props, newProps, this.setProp);
+    patchProps(newProps, oldFlags, newFlags) {
+        // Early bailout for reference equality
+        if (this.props === newProps) {
+            return;
+        }
+        const oldProps = this.props;
+        const elm = this.getHTMLElement();
+        // Handle class separately for efficiency (check if either old or new has class)
+        if ((oldFlags | newFlags) & 2 /* VFlags.HasClass */) {
+            const oldClass = oldProps.class ?? oldProps.className;
+            const newClass = newProps.class ?? newProps.className;
+            if (oldClass !== newClass) {
+                setElementClass(elm, newClass);
+            }
+        }
+        // Handle style separately with per-property diffing (check if either old or new has style)
+        if ((oldFlags | newFlags) & 4 /* VFlags.HasStyle */) {
+            this.patchStyle(oldProps.style, newProps.style);
+        }
+        // Handle regular props (excluding class, className, style, children)
+        diffObjectKeys(oldProps, newProps, (key, value, oldValue) => {
+            // Skip props we've already handled
+            if (key === "class" ||
+                key === "className" ||
+                key === "style" ||
+                key === "children") {
+                return;
+            }
+            this.setProp(key, value);
+        });
+    }
+    patchStyle(oldStyle, newStyle) {
+        // Early bailout for reference equality
+        if (oldStyle === newStyle) {
+            return;
+        }
+        const elm = this.getHTMLElement();
+        // If either is a string, fall back to full replacement
+        if (typeof oldStyle === "string" || typeof newStyle === "string") {
+            setElementStyle(elm, newStyle);
+            return;
+        }
+        // Per-property style diffing for objects
+        const os = oldStyle || {};
+        const ns = newStyle || {};
+        // Remove old styles not in new
+        for (const key in os) {
+            if (!(key in ns)) {
+                elm.style[key] = "";
+            }
+        }
+        // Set new/changed styles
+        for (const key in ns) {
+            const newVal = ns[key];
+            if (newVal !== os[key]) {
+                elm.style[key] = newVal;
+            }
+        }
     }
     addEventListener(type, cb) {
         if (!this.eventListeners) {
@@ -120,32 +217,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;IAS5B,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;AAGhC,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;IAgB7B,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAG7C,KAAK,CAAC,OAAO,EAAE,aAAa;IAiB5B,OAAO;CAMR"}

package/dist/vdom/FragmentVNode.js

@@ -1,5 +1,6 @@
 import { AbstractVNode } from "./AbstractVNode";
 import { RootVNode } from "./RootVNode";
+import { flattenNodes } from "./dom-utils";
 export const Fragment = Symbol("Fragment");
 export class FragmentVNode extends AbstractVNode {
     children;
@@ -17,17 +18,27 @@ export class FragmentVNode extends AbstractVNode {
         else {
             this.root = parent?.root;
         }
-        return this.children.map((child) => child.mount(this)).flat();
+        // Optimized: avoid intermediate arrays from map+flat
+        const childResults = [];
+        for (let i = 0; i < this.children.length; i++) {
+            childResults.push(this.children[i].mount(this));
+        }
+        return flattenNodes(childResults);
     }
-    rerender() {
-        this.parent?.rerender();
+    rerender(operations) {
+        this.parent?.rerender(operations);
     }
     patch(newNode) {
-        const { children, hasChangedStructure } = this.patchChildren(newNode.children);
+        const { children, hasChangedStructure, operations } = this.patchChildren(newNode.children);
         this.children = children;
-        if (hasChangedStructure) {
-            this.rerender();
-        }
+        // 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;AAKrD,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;IAStB,KAAK,IAAI,IAAI;IACb,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAS7C,OAAO,IAAI,IAAI;CAChB"}