rask-ui 0.2.1 → 0.2.3

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;IAyH7B,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) {
@@ -78,28 +75,39 @@ export class ComponentVNode extends AbstractVNode {
             }
             return normalizeChildren(renderResult);
         };
+        let isObserverQueued = false;
         const instance = (this.instance = {
             parent,
             contexts: null,
             onCleanups: [],
             onMounts: [],
             observer: new Observer(() => {
-                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) {
-                    this.parent?.rerender();
+                if (isObserverQueued) {
+                    return;
                 }
-                this.root?.flushLifecycle();
-                this.root?.clearCurrent();
+                isObserverQueued = true;
+                this.root?.queueObserver(() => {
+                    if (instance.observer.isDisposed) {
+                        return;
+                    }
+                    isObserverQueued = false;
+                    this.root?.setAsCurrent();
+                    const newChildren = executeRender();
+                    const prevChildren = this.children;
+                    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 &&
+                        this.children.length === 1 &&
+                        prevChildren[0] instanceof ElementVNode &&
+                        this.children[0] instanceof ElementVNode &&
+                        this.canPatch(prevChildren[0], this.children[0]);
+                    if (!canSelfUpdate) {
+                        this.parent?.applyDOMOperations(operations, this);
+                    }
+                    this.root?.clearCurrent();
+                });
             }),
             reactiveProps: createReactiveProps(this.props),
             get error() {

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

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;IAOhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAW3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;CAgBzB"}
+{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,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,12 +17,6 @@ export class ElementVNode extends AbstractVNode {
         this.key = key;
         this.ref = ref;
     }
-    rerender() {
-        const childrenElms = this.children
-            .map((child) => child.getElements())
-            .flat();
-        this.elm.replaceChildren(...childrenElms);
-    }
     mount(parent) {
         this.parent = parent;
         if (parent instanceof RootVNode) {
@@ -60,11 +54,9 @@ export class ElementVNode extends AbstractVNode {
     patch(newNode) {
         this.patchProps(newNode.props);
         this.props = newNode.props;
-        this.children = this.patchChildren(newNode.children);
-        const childrenElms = this.children
-            .map((child) => child.getElements())
-            .flat();
-        this.elm.replaceChildren(...childrenElms);
+        const { children, operations } = this.patchChildren(newNode.children);
+        this.children = children;
+        this.applyDOMOperations(operations);
     }
     unmount() {
         this.children.forEach((child) => child.unmount());

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;
@@ -6,9 +6,12 @@ export declare class RootVNode extends AbstractVNode {
     children: VNode[];
     componentStack: ComponentInstance[];
     private lifecycleQueue;
+    private hasPendingMicroTask;
+    private pendingObservers;
     constructor(rootNode: VNode, container: HTMLElement);
     queueMount(cb: () => void): void;
     queueUnmount(cb: () => void): void;
+    queueObserver(cb: () => void): void;
     flushLifecycle(): void;
     pushComponent(instance: ComponentInstance): void;
     popComponent(): void;
@@ -16,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;gBAEU,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;IAMnD,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI;IAIzB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI;IAI3B,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

@@ -9,6 +9,8 @@ export class RootVNode extends AbstractVNode {
         toMount: [],
         toUnmount: [],
     };
+    hasPendingMicroTask = false;
+    pendingObservers = [];
     constructor(rootNode, container) {
         super();
         this.elm = container;
@@ -20,6 +22,19 @@ export class RootVNode extends AbstractVNode {
     queueUnmount(cb) {
         this.lifecycleQueue.toUnmount.push(cb);
     }
+    queueObserver(cb) {
+        this.pendingObservers.push(cb);
+        if (!this.hasPendingMicroTask) {
+            this.hasPendingMicroTask = true;
+            queueMicrotask(() => {
+                this.hasPendingMicroTask = false;
+                const pendingObservers = this.pendingObservers;
+                this.pendingObservers = [];
+                pendingObservers.forEach((pendingObserver) => pendingObserver());
+                this.flushLifecycle();
+            });
+        }
+    }
     flushLifecycle() {
         this.lifecycleQueue.toUnmount.forEach((cb) => cb());
         this.lifecycleQueue.toUnmount = [];
@@ -44,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;IAIxB,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

@@ -19,10 +19,12 @@ export class TextVNode extends AbstractVNode {
         return textNode;
     }
     patch(newNode) {
+        if (newNode.text === this.text) {
+            return;
+        }
         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.1",
+  "version": "0.2.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",