neo.mjs 6.18.2 → 6.19.0

package/src/vdom/Helper.mjs

@@ -3,7 +3,6 @@ import NeoArray  from '../util/Array.mjs';
 import NeoString from '../util/String.mjs';
 import Style     from '../util/Style.mjs';
 import VNode     from './VNode.mjs';
-import VNodeUtil from '../util/VNode.mjs';
 
 /**
  * The central class for the VDom worker to create vnodes & delta updates.
@@ -97,7 +96,7 @@ class Helper extends Base {
         delete opts.parentIndex;
         delete opts.windowId;
 
-        node           = me.parseHelper(opts);
+        node           = me.createVnode(opts);
         node.outerHTML = me.createStringFromVnode(node);
 
         if (autoMount) {
@@ -122,414 +121,186 @@ class Helper extends Base {
     }
 
     /**
-     * @param {Object} config
-     * @param {Array} config.deltas
-     * @param {Number} config.index
-     * @param {Object} config.newVnode
-     * @param {Object} config.newVnodeRoot
-     * @param {Object} config.oldVnode
-     * @param {Object} config.oldVnodeRoot
-     * @param {String} config.parentId
-     * @returns {Array} deltas
+     * @param {Object}         config
+     * @param {Object}         config.deltas
+     * @param {Neo.vdom.VNode} config.oldVnode
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Map}            config.vnodeMap
+     * @returns {Object} deltas
      */
-    createDeltas(config) {
-        let {deltas=[], index, newVnode, oldVnode, parentId} = config,
-            me            = this,
-            newVnodeRoot  = config.newVnodeRoot || newVnode,
-            oldVnodeRoot  = config.oldVnodeRoot || oldVnode,
-            attributes, delta, value, i, indexDelta, keys, len, movedNode, movedOldNode, styles, add, remove, returnValue, tmp, wrappedNode;
-
-        // console.log('createDeltas', newVnode && newVnode.id, oldVnode && oldVnode.id, newVnode, oldVnode);
-
-        if (newVnode && !oldVnode) { // new node at top level or at the end of a child array
-            if (oldVnodeRoot) {
-                movedOldNode = me.findVnode(oldVnodeRoot, newVnode.id, oldVnode)
-            }
-
-            if (!movedOldNode) {
-                // console.log('insertNode', newVnode);
-
-                deltas.push({
-                    action   : 'insertNode',
-                    id       : newVnode.id,
-                    index,
-                    outerHTML: me.createStringFromVnode(newVnode),
-                    parentId
-                })
-            }
-        } else if (!newVnode && oldVnode) {
-            if (newVnodeRoot) {
-                movedNode = me.findVnode(newVnodeRoot, oldVnode.id, newVnode)
-            }
-
-            // use case: calendar week view => move an event into a column on the right side
-
-            if (movedNode) {
-                deltas.push({
-                    action: 'moveNode',
-                    id      : oldVnode.id,
-                    index   : movedNode.index,
-                    parentId: movedNode.parentNode.id
-                });
-
-                movedOldNode = me.findVnode(oldVnodeRoot, movedNode.parentNode.id);
-
-                me.createDeltas({
-                    deltas,
-                    newVnode: movedNode.vnode,
-                    newVnodeRoot,
-                    oldVnode,
-                    oldVnodeRoot,
-                    parentId: movedNode.parentNode.id
-                });
-
-                movedOldNode.vnode.childNodes.splice(movedNode.index, 0, movedNode.vnode)
-            } else {
-                // console.log('top level removed node', oldVnode.id, oldVnode);
-
-                delta = {
-                    action: 'removeNode',
-                    id    : oldVnode.id
-                };
-
-                // We only need a parentId for vtype text
-                if (oldVnode.vtype === 'text') {
-                    let removedNodeDetails = me.findVnode(oldVnodeRoot, oldVnode.id);
-
-                    delta.parentId = removedNodeDetails?.parentNode.id
-                }
-
-                deltas.push(delta)
-            }
+    compareAttributes(config) {
+        let {deltas, oldVnode, vnode, vnodeMap} = config,
+            attributes, delta, value, keys, styles, add, remove;
+
+        if (vnode.vtype === 'text' && vnode.innerHTML !== oldVnode.innerHTML) {
+            deltas.default.push({
+                action  : 'updateVtext',
+                id      : vnode.id,
+                parentId: vnodeMap.get(vnode.id).parentNode.id,
+                value   : vnode.innerHTML
+            })
         } else {
-            if (newVnode && oldVnode && newVnode.id !== oldVnode.id) {
-                movedNode    = me.findVnode(newVnodeRoot, oldVnode.id, newVnode);
-                movedOldNode = me.findVnode(oldVnodeRoot, newVnode.id, oldVnode);
-
-                // console.log('movedNode', movedNode);
-                // console.log('movedOldNode', movedOldNode);
-
-                if (!movedNode && !movedOldNode) {
-                    // console.log('replace node', oldVnode.id, '('+newVnode.id+')');
-
-                    deltas.push({
-                        action: 'removeNode',
-                        id    : oldVnode.id,
-                    });
-
-                    deltas.push({
-                        action   : 'insertNode',
-                        id       : newVnode.id,
-                        index,
-                        outerHTML: me.createStringFromVnode(newVnode),
-                        parentId
-                    });
-
-                    return {
-                        indexDelta: 0
-                    }
+            keys = Object.keys(vnode);
+
+            Object.keys(oldVnode).forEach(prop => {
+                if (!vnode.hasOwnProperty(prop)) {
+                    keys.push(prop)
+                } else if (prop === 'attributes') { // find removed attributes
+                    Object.keys(oldVnode[prop]).forEach(attr => {
+                        if (!vnode[prop].hasOwnProperty(attr)) {
+                            vnode[prop][attr] = null
+                        }
+                    })
                 }
+            });
 
-                // this case matches a typical array re-sorting
-                else if (movedNode && movedOldNode && movedNode.parentNode.id === movedOldNode.parentNode.id) {
-                    deltas.push({
-                        action: 'moveNode',
-                        id    : movedOldNode.vnode.id,
-                        index,
-                        parentId
-                    });
-
-                    me.createDeltas({
-                        deltas,
-                        newVnode,
-                        newVnodeRoot,
-                        oldVnode: movedOldNode.vnode,
-                        oldVnodeRoot,
-                        parentId: movedNode.parentNode.id
-                    });
-
-                    // see: https://github.com/neomjs/neo/issues/3116
-                    movedOldNode.parentNode.childNodes.splice(index, 0, movedOldNode)
-                } else if (!movedNode && movedOldNode) {
-                    if (newVnode.id === movedOldNode.vnode.id) {
-                        indexDelta = 0;
-
-                        if (VNodeUtil.findChildVnodeById(oldVnode, newVnode.id)) {
-                            // the old vnode replaced a parent vnode
-                            // e.g.: vdom.cn[1] = vdom.cn[1].cn[0];
-
-                            deltas.push({
-                                action: 'replaceChild',
-                                fromId: oldVnode.id,
-                                parentId,
-                                toId  : newVnode.id
-                            })
-                        } else {
-                            // the old vnode got moved into a different higher level branch
-                            // and its parent got removed
-                            // e.g.:
-                            // vdom.cn[1] = vdom.cn[2].cn[0];
-                            // vdom.cn.splice(2, 1);
-
-                            let movedOldNodeDetails = VNodeUtil.findChildVnode(oldVnodeRoot, movedOldNode.vnode.id),
-                                oldVnodeDetails     = VNodeUtil.findChildVnode(oldVnodeRoot, oldVnode.id);
+            keys.forEach(prop => {
+                delta = {};
+                value = vnode[prop];
 
-                            indexDelta = 1;
+                switch (prop) {
+                    case 'attributes':
+                        attributes = {};
 
-                            if (movedOldNodeDetails.parentNode.id === oldVnodeDetails.parentNode.id) {
-                                // console.log('potential move node', index, movedOldNodeDetails.index);
-
-                                let newVnodeDetails = VNodeUtil.findChildVnode(newVnodeRoot, newVnode.id),
-                                    targetIndex = index + 1; // +1 since the current index will already get removed
-
-                                // console.log(newVnodeDetails.parentNode);
-
-                                i   = index + 1;
-                                tmp = oldVnodeDetails.parentNode.childNodes;
-                                len = movedOldNodeDetails.index;
-
-                                for (; i < len; i++) {
-                                    // console.log(tmp[i]);
-                                    if (!VNodeUtil.findChildVnode(newVnodeDetails.parentNode, tmp[i].id)) {
-                                        // console.log('not found');
-                                        targetIndex ++
-                                    }
+                        Object.entries(value).forEach(([key, value]) => {
+                            if (!(oldVnode.attributes.hasOwnProperty(key) && oldVnode.attributes[key] === value)) {
+                                if (value !== null && !Neo.isString(value) && Neo.isEmpty(value)) {
+                                    // ignore empty arrays & objects
+                                } else {
+                                    attributes[key] = value
                                 }
+                            }
+                        });
 
-                                // console.log(movedOldNodeDetails.index, targetIndex);
-
-                                movedOldNodeDetails.parentNode.childNodes.splice(movedOldNodeDetails.index, 1);
+                        if (Object.keys(attributes).length > 0) {
+                            delta.attributes = attributes;
 
-                                // do not move a node in case its previous sibling nodes will get removed
-                                if (movedOldNodeDetails.index !== targetIndex) {
-                                    deltas.push({
-                                        action: 'moveNode',
-                                        id    : movedOldNode.vnode.id,
-                                        index,
-                                        parentId
-                                    })
+                            Object.entries(attributes).forEach(([key, value]) => {
+                                if (value === null || value === '') {
+                                    delete vnode.attributes[key]
                                 }
-
-                                // console.log(movedOldNodeDetails);
-
-                                indexDelta = 0
-                            }
-
-                            deltas.push({
-                                action: 'removeNode',
-                                id    : oldVnode.id,
-                                parentId
                             })
                         }
+                        break
+                    case 'nodeName':
+                    case 'innerHTML':
+                        if (value !== oldVnode[prop]) {
+                            delta[prop] = value
+                        }
+                        break
+                    case 'style':
+                        styles = Style.compareStyles(value, oldVnode.style);
+                        if (styles) {
+                            delta.style = styles
+                        }
+                        break
+                    case 'className':
+                        if (oldVnode.className) {
+                            add    = NeoArray.difference(value, oldVnode.className);
+                            remove = NeoArray.difference(oldVnode.className, value)
+                        } else {
+                            add    =  value;
+                            remove = []
+                        }
 
-                        me.createDeltas({
-                            deltas,
-                            newVnode,
-                            newVnodeRoot,
-                            oldVnode: movedOldNode.vnode,
-                            oldVnodeRoot,
-                            parentId
-                        });
-
-                        return {indexDelta}
-                    } else {
-                        // console.log('removed node', oldVnode.id, '('+newVnode.id+')');
-
-                        deltas.push({
-                            action: 'removeNode',
-                            id    : oldVnode.id
-                        });
+                        if (add.length > 0 || remove.length > 0) {
+                            delta.cls = {};
 
-                        return {
-                            indexDelta: 1
+                            if (add   .length > 0) {delta.cls.add    = add}
+                            if (remove.length > 0) {delta.cls.remove = remove}
                         }
-                    }
-                } else if (!movedOldNode) {
-                    // new node inside of a child array
-                    // console.log('new node', index, parentId, newVnode);
+                        break
+                }
 
-                    wrappedNode = movedNode && VNodeUtil.findChildVnodeById(newVnode, oldVnode.id);
+                if (Object.keys(delta).length > 0) {
+                    delta.id = vnode.id;
+                    deltas.default.push(delta)
+                }
+            })
+        }
 
-                    if (wrappedNode) {
-                        // an existing vnode got wrapped into a new vnode
-                        // => we need to remove the old one, since it will get recreated
+        return deltas
+    }
 
-                        // console.log('movedNode removeNode', movedNode.vnode.id);
+    /**
+     * @param {Object}         config
+     * @param {Object}         [config.deltas={default: [], remove: []}]
+     * @param {Neo.vdom.VNode} config.oldVnode
+     * @param {Map}            [config.oldVnodeMap]
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Map}            [config.vnodeMap]
+     * @returns {Object} deltas
+     */
+    createDeltas(config) {
+        let {deltas={default: [], remove: []}, oldVnode, vnode} = config,
+            oldVnodeId = oldVnode?.id,
+            vnodeId    = vnode?.id;
+
+        // Edge case: setting `removeDom: true` on a top-level vdom node
+        if (!vnode && oldVnodeId) {
+            deltas.remove.push({action: 'removeNode', id: oldVnodeId});
+            return deltas
+        }
 
-                        deltas.push({
-                            action: 'removeNode',
-                            id    : movedNode.vnode.id
-                        })
-                    }
+        if (vnode.static) {
+            return deltas
+        }
 
-                    deltas.push({
-                        action   : 'insertNode',
-                        id       : newVnode.id,
-                        index,
-                        outerHTML: me.createStringFromVnode(newVnode),
-                        parentId
-                    });
+        if (vnodeId !== oldVnodeId) {
+            throw new Error(`createDeltas() must get called for the same node. ${vnodeId}, ${oldVnodeId}`);
+        }
 
-                    return {
-                        indexDelta: wrappedNode ? 0 : -1
-                    }
-                } else if (movedNode) {
-                    indexDelta = 0;
+        let me            = this,
+            oldVnodeMap   = config.oldVnodeMap  || me.createVnodeMap({vnode: oldVnode}),
+            vnodeMap      = config.vnodeMap     || me.createVnodeMap({vnode}),
+            childNodes    = vnode   .childNodes || [],
+            oldChildNodes = oldVnode.childNodes || [],
+            i             = 0,
+            indexDelta    = 0,
+            len           = Math.max(childNodes.length, oldChildNodes.length),
+            childNode, nodeInNewTree, oldChildNode;
+
+        me.compareAttributes({deltas, oldVnode, vnode, vnodeMap});
+
+        if (childNodes.length === 0 && oldChildNodes.length > 1) {
+            deltas.remove.push({action: 'removeAll', parentId: vnodeId});
+            return deltas
+        }
 
-                    // check if the vnode got moved inside the vnode tree
+        for (; i < len; i++) {
+            childNode    = childNodes[i];
+            oldChildNode = oldChildNodes[i + indexDelta];
 
-                    let newVnodeDetails = VNodeUtil.findChildVnode(newVnodeRoot, newVnode.id);
+            if (!childNode && !oldChildNode) {
+                break
+            }
 
-                    let sameParent = newVnodeDetails.parentNode.id === movedNode.parentNode.id;
+            // Same node, continue recursively
+            if (childNode && childNode.id === oldChildNode?.id) {
+                me.createDeltas({deltas, oldVnode: oldChildNode, oldVnodeMap, vnode: childNode, vnodeMap});
+                continue
+            }
 
-                    if (sameParent) {
-                        if (newVnodeDetails.index > movedNode.index) {
-                            // todo: needs testing => index gaps > 1
-                            indexDelta = newVnodeDetails.index - movedNode.index
-                        }
-                    }
+            if (oldChildNode) {
+                nodeInNewTree = vnodeMap.get(oldChildNode.id);
 
-                    if (!sameParent || newVnodeDetails.parentNode.childNodes[movedNode.index].id !== movedNode.vnode.id) {
-                        deltas.push({
-                            action: 'moveNode',
-                            id      : movedNode.vnode.id,
-                            index   : movedNode.index,
-                            parentId: movedNode.parentNode.id
-                        })
-                    }
+                // Remove node, if no longer inside the new tree
+                if (!nodeInNewTree) {
+                    me.removeNode({deltas, oldVnode: oldChildNode, oldVnodeMap});
+                    i--;
+                    continue
+                }
 
-                    me.createDeltas({
-                        deltas,
-                        newVnode: movedNode.vnode,
-                        newVnodeRoot,
-                        oldVnode,
-                        oldVnodeRoot,
-                        parentId: movedNode.parentNode.id
-                    });
-
-                    return {
-                        indexDelta: 0
-                    }
+                // The old child node got moved into a different not processed array. It will get picked up there.
+                if (childNode && vnodeId !== nodeInNewTree.parentNode.id) {
+                    i--;
+                    indexDelta++;
+                    continue
                 }
             }
 
-            if (newVnode && oldVnode && newVnode.id === oldVnode.id) {
-                if (newVnode.vtype === 'text' && newVnode.innerHTML !== oldVnode.innerHTML) {
-                    deltas.push({
-                        action  : 'updateVtext',
-                        id      : newVnode.id,
-                        parentId: VNodeUtil.findChildVnode(newVnodeRoot, newVnode.id).parentNode.id,
-                        value   : newVnode.innerHTML
-                    })
-                } else {
-                    keys = Object.keys(newVnode);
-
-                    Object.keys(oldVnode).forEach(prop => {
-                        if (!newVnode.hasOwnProperty(prop)) {
-                            keys.push(prop)
-                        } else if (prop === 'attributes') { // find removed attributes
-                            Object.keys(oldVnode[prop]).forEach(attr => {
-                                if (!newVnode[prop].hasOwnProperty(attr)) {
-                                    newVnode[prop][attr] = null;
-                                }
-                            })
-                        }
-                    });
-
-                    keys.forEach(prop => {
-                        delta = {};
-                        value = newVnode[prop];
-
-                        switch (prop) {
-                            case 'attributes':
-                                attributes = {};
-
-                                Object.entries(value).forEach(([key, value]) => {
-                                    if (!(oldVnode.attributes.hasOwnProperty(key) && oldVnode.attributes[key] === value)) {
-                                        if (value !== null && !Neo.isString(value) && Neo.isEmpty(value)) {
-                                            // ignore empty arrays & objects
-                                        } else {
-                                            attributes[key] = value
-                                        }
-                                    }
-                                });
-
-                                if (Object.keys(attributes).length > 0) {
-                                    delta.attributes = attributes;
-
-                                    Object.entries(attributes).forEach(([key, value]) => {
-                                        if (value === null || value === '') {
-                                            delete newVnode.attributes[key]
-                                        }
-                                    })
-                                }
-                                break
-                            case 'childNodes':
-                                i          = 0;
-                                indexDelta = 0;
-                                len        = Math.max(value.length, oldVnode.childNodes.length);
-
-                                for (; i < len; i++) {
-                                    returnValue = me.createDeltas({
-                                        deltas,
-                                        index   : i,
-                                        newVnode: value[i],
-                                        newVnodeRoot,
-                                        oldVnode: oldVnode.childNodes[i + indexDelta],
-                                        oldVnodeRoot,
-                                        parentId: newVnode.id
-                                    });
-
-                                    if (returnValue && returnValue.indexDelta) {
-                                        indexDelta += returnValue.indexDelta
-                                    }
-                                }
-
-                                if (indexDelta < 0) {
-                                    // this case happens for infinite scrolling upwards:
-                                    // add new nodes at the start, remove nodes at the end
-                                    for (i=value.length + indexDelta; i < oldVnode.childNodes.length; i++) {
-                                        deltas.push({
-                                            action: 'removeNode',
-                                            id    : oldVnode.childNodes[i].id
-                                        })
-                                    }
-                                }
-
-                                break
-                            case 'nodeName':
-                            case 'innerHTML':
-                                if (value !== oldVnode[prop]) {
-                                    delta[prop] = value
-                                }
-                                break
-                            case 'style':
-                                styles = Style.compareStyles(value, oldVnode.style);
-                                if (styles) {
-                                    delta.style = styles
-                                }
-                                break
-                            case 'className':
-                                if (oldVnode.className) {
-                                    add    = NeoArray.difference(value, oldVnode.className);
-                                    remove = NeoArray.difference(oldVnode.className, value)
-                                } else {
-                                    add    =  value;
-                                    remove = []
-                                }
-
-                                if (add.length > 0 || remove.length > 0) {
-                                    delta.cls = {add, remove}
-                                }
-                                break
-                        }
-
-                        if (Object.keys(delta).length > 0) {
-                            delta.id = newVnode.id;
-                            deltas.push(delta)
-                        }
-                    })
-                }
+            if (childNode) {
+                me[oldVnodeMap.get(childNode.id) ? 'moveNode' : 'insertNode']({deltas, oldVnodeMap, vnode: childNode, vnodeMap})
             }
         }
 
@@ -590,28 +361,35 @@ class Helper extends Base {
     }
 
     /**
-     * @param {Object} vnode
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map}            [movedNodes]
      */
-    createStringFromVnode(vnode) {
-        let me = this;
+    createStringFromVnode(vnode, movedNodes) {
+        let me = this,
+            id = vnode?.id;
+
+        if (id && movedNodes?.get(id)) {
+            return ''
+        }
 
         switch (vnode.vtype) {
             case 'root':
-                return me.createStringFromVnode(vnode.childNodes[0])
+                return me.createStringFromVnode(vnode.childNodes[0], movedNodes)
             case 'text':
                 return vnode.innerHTML === undefined ? '' : String(vnode.innerHTML)
             case 'vnode':
-                return me.createOpenTag(vnode) + me.createTagContent(vnode) + me.createCloseTag(vnode)
+                return me.createOpenTag(vnode) + me.createTagContent(vnode, movedNodes) + me.createCloseTag(vnode)
             default:
                 return ''
         }
     }
 
     /**
-     * @param {Object} vnode
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map}            [movedNodes]
      * @protected
      */
-    createTagContent(vnode) {
+    createTagContent(vnode, movedNodes) {
         if (vnode.innerHTML) {
             return vnode.innerHTML
         }
@@ -623,7 +401,7 @@ class Helper extends Base {
 
         for (; i < len; i++) {
             childNode = vnode.childNodes[i];
-            outerHTML = this.createStringFromVnode(childNode);
+            outerHTML = this.createStringFromVnode(childNode, movedNodes);
 
             if (childNode.innerHTML !== outerHTML) {
                 if (this.returnChildNodeOuterHtml) {
@@ -637,53 +415,11 @@ class Helper extends Base {
         return string
     }
 
-    /**
-     * @param {Neo.vdom.VNode} vnode
-     * @param {String} id
-     * @param {Neo.vdom.VNode} parentNode
-     * @param {Number} index
-     * @returns {Object}
-     *     {Number} index
-     *     {String} parentId
-     *     {Neo.vdom.VNode} vnode
-     */
-    findVnode(vnode, id, parentNode, index) {
-        if (!index) {
-            index = 0
-        }
-
-        let returnValue = null,
-            children, childValue, i, len;
-
-        if (vnode.id === id) {
-            returnValue = {index, parentNode, vnode}
-        } else if (vnode.vtype !== 'text') {
-            children = vnode.childNodes;
-            i        = 0;
-            len      = children?.length || 0;
-
-            for (; i < len; i++) {
-                childValue = this.findVnode(children[i], id, vnode, i);
-
-                if (childValue && childValue.vnode.id === id) {
-                    returnValue = childValue;
-                    break
-                }
-            }
-        }
-
-        if (returnValue && returnValue.parentId === 'root') {
-            returnValue.index = null
-        }
-
-        return returnValue;
-    }
-
     /**
      * @param {Object} opts
      * @returns {Object|Neo.vdom.VNode|null}
      */
-    parseHelper(opts) {
+    createVnode(opts) {
         if (opts.removeDom === true) {
             return null
         }
@@ -735,7 +471,7 @@ class Helper extends Base {
                         value.forEach(item => {
                             if (item.removeDom !== true) {
                                 delete item.removeDom; // could be false
-                                potentialNode = me.parseHelper(item);
+                                potentialNode = me.createVnode(item);
 
                                 if (potentialNode) { // don't add null values
                                     newValue.push(potentialNode)
@@ -771,6 +507,9 @@ class Helper extends Base {
                     case 'id':
                         node.id = value;
                         break
+                    case 'static':
+                        node.static = value;
+                        break
                     case 'style':
                         style = node.style;
                         if (Neo.isString(value)) {
@@ -791,6 +530,154 @@ class Helper extends Base {
         return new VNode(node)
     }
 
+    /**
+     * Creates a flap map of the tree, containing ids as keys and infos as values
+     * @param {Object}         config
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Neo.vdom.VNode} [config.parentNode=null]
+     * @param {Number}         [config.index=0]
+     * @param {Map}            [config.map=new Map()]
+     * @returns {Map}
+     *     {String}         id vnode.id (convenience shortcut)
+     *     {Number}         index
+     *     {String}         parentId
+     *     {Neo.vdom.VNode} vnode
+     */
+    createVnodeMap(config) {
+        let {vnode, parentNode=null, index=0, map=new Map()} = config,
+            id = vnode?.id;
+
+        map.set(id, {id, index, parentNode, vnode});
+
+        vnode?.childNodes?.forEach((childNode, index) => {
+            this.createVnodeMap({vnode: childNode, parentNode: vnode, index, map})
+        });
+
+        return map
+    }
+
+    /**
+     * The logic will parse the vnode (tree) to find existing items inside a given map.
+     * It will not search for further childNodes inside an already found vnode.
+     * @param {Object}         config
+     * @param {Map}            [config.movedNodes=new Map()]
+     * @param {Map}            config.oldVnodeMap
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Map}            config.vnodeMap
+     * @returns {Map}
+     */
+    findMovedNodes(config) {
+        let {movedNodes=new Map(), oldVnodeMap, vnode, vnodeMap} = config,
+            id = vnode?.id;
+
+        if (id) {
+            let currentNode = oldVnodeMap.get(id)
+
+            if (currentNode) {
+                movedNodes.set(id, vnodeMap.get(id))
+            } else {
+                vnode.childNodes.forEach(childNode => {
+                    if (childNode.vtype !== 'text') {
+                        this.findMovedNodes({movedNodes, oldVnodeMap, vnode: childNode, vnodeMap})
+                    }
+                })
+            }
+        }
+
+        return movedNodes
+    }
+
+    /**
+     * @param {Object}         config
+     * @param {Object}         config.deltas
+     * @param {Map}            config.oldVnodeMap
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Map}            config.vnodeMap
+     */
+    insertNode(config) {
+        let {deltas, oldVnodeMap, vnode, vnodeMap} = config,
+            details    = vnodeMap.get(vnode.id),
+            {index}    = details,
+            parentId   = details.parentNode.id,
+            me         = this,
+            movedNodes = me.findMovedNodes({oldVnodeMap, vnode, vnodeMap}),
+            outerHTML  = me.createStringFromVnode(vnode, movedNodes);
+
+        deltas.default.push({action: 'insertNode', index, outerHTML, parentId});
+
+        // Insert the new node into the old tree, to simplify future OPs
+        oldVnodeMap.get(parentId).vnode.childNodes.splice(index, 0, vnode);
+
+        movedNodes.forEach(details => {
+            let {id}     = details,
+                parentId = details.parentNode.id;
+
+            deltas.default.push({action: 'moveNode', id, index: details.index, parentId});
+
+            me.createDeltas({deltas, oldVnode: oldVnodeMap.get(id).vnode, oldVnodeMap, vnode: details.vnode, vnodeMap})
+        })
+    }
+
+    /**
+     * @param {Object}         config
+     * @param {Object}         config.deltas
+     * @param {Map}            config.oldVnodeMap
+     * @param {Neo.vdom.VNode} config.vnode
+     * @param {Map}            config.vnodeMap
+     */
+    moveNode(config) {
+        let {deltas, oldVnodeMap, vnode, vnodeMap} = config,
+            details             = vnodeMap.get(vnode.id),
+            {index, parentNode} = details,
+            parentId            = parentNode.id,
+            movedNode           = oldVnodeMap.get(vnode.id),
+            movedParentNode     = movedNode.parentNode,
+            {childNodes}        = movedParentNode;
+
+        if (parentId !== movedParentNode.id) {
+            // We need to remove the node from the old parent childNodes
+            // (which must not be the same as the node they got moved into)
+            NeoArray.remove(childNodes, movedNode.vnode);
+
+            let oldParentNode = oldVnodeMap.get(parentId);
+
+            if (oldParentNode) {
+                // If moved into a new parent node, update the reference inside the flat map
+                movedNode.parentNode = oldParentNode.vnode;
+
+                childNodes = movedNode.parentNode.childNodes
+            }
+        }
+
+        deltas.default.push({action: 'moveNode', id: vnode.id, index, parentId});
+
+        // Add the node into the old vnode tree to simplify future OPs.
+        // NeoArray.insert() will switch to move() in case the node already exists.
+        NeoArray.insert(childNodes, index, movedNode.vnode);
+
+        this.createDeltas({deltas, oldVnode: movedNode.vnode, oldVnodeMap, vnode, vnodeMap})
+    }
+
+    /**
+     * @param {Object}         config
+     * @param {Object}         config.deltas
+     * @param {Neo.vdom.VNode} config.oldVnode
+     * @param {Map}            config.oldVnodeMap
+     */
+    removeNode(config) {
+        let {deltas, oldVnode, oldVnodeMap} = config,
+            delta        = {action: 'removeNode', id: oldVnode.id},
+            {parentNode} = oldVnodeMap.get(oldVnode.id);
+
+        if (oldVnode.vtype === 'text') {
+            delta.parentId = parentNode.id
+        }
+
+        deltas.remove.push(delta);
+
+        NeoArray.remove(parentNode.childNodes, oldVnode)
+    }
+
     /**
      * Creates a Neo.vdom.VNode tree for the given vdom template and compares the new vnode with the current one
      * to calculate the vdom deltas.
@@ -800,19 +687,15 @@ class Helper extends Base {
      * @returns {Object|Promise<Object>}
      */
     update(opts) {
-        let me   = this,
-            node = me.parseHelper(opts.vdom),
-
-        deltas = me.createDeltas({
-            newVnode: node,
-            oldVnode: opts.vnode
-        }),
-
-        returnObj = {
-            deltas,
-            updateVdom: true,
-            vnode     : node
-        };
+        let me     = this,
+            vnode  = me.createVnode(opts.vdom),
+            deltas = me.createDeltas({oldVnode: opts.vnode, vnode});
+
+        // Trees to remove could contain nodes which we want to re-use (move),
+        // so we need to execute the removeNode OPs last.
+        deltas = deltas.default.concat(deltas.remove);
+
+        let returnObj = {deltas, updateVdom: true, vnode};
 
         return Neo.config.useVdomWorker ? returnObj : Promise.resolve(returnObj)
     }