neo.mjs 5.14.3 → 5.15.1

package/src/component/Base.mjs

@@ -231,10 +231,10 @@ class Base extends CoreBase {
         mounted_: false,
         /**
          * Internal flag which will get set to true in case an update call arrives while another update is running
-         * @member {Boolean} needsVdomUpdate=false
+         * @member {Boolean} needsVdomUpdate_=false
          * @protected
          */
-        needsVdomUpdate: false,
+        needsVdomUpdate_: false,
         /**
          * The parent component id or document.body
          * @member {String} parentId='document.body'
@@ -318,10 +318,10 @@ class Base extends CoreBase {
      * @member {Object} listeners={}
      */
     get listeners() {
-        return this._listeners || {};
+        return this._listeners || {}
     }
     set listeners(value) {
-        this._listeners = value;
+        this._listeners = value
     }
 
     /**
@@ -330,7 +330,7 @@ class Base extends CoreBase {
      * @protected
      */
     get rendered() {
-        return this._rendered || false;
+        return this._rendered || false
     }
     set rendered(value) {
         let me = this;
@@ -338,7 +338,7 @@ class Base extends CoreBase {
         me._rendered = value;
 
         if (value === true) {
-            me.fire('rendered', me.id);
+            me.fire('rendered', me.id)
         }
     }
 
@@ -347,10 +347,10 @@ class Base extends CoreBase {
      * @member {Object} vdom=this._vdom
      */
     get vdom() {
-        return this._vdom;
+        return this._vdom
     }
     set vdom(value) {
-        this.afterSetVdom(value, value);
+        this.afterSetVdom(value, value)
     }
 
     /**
@@ -361,7 +361,7 @@ class Base extends CoreBase {
         let cls = this.cls;
 
         NeoArray.add(cls, value);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -370,14 +370,14 @@ class Base extends CoreBase {
      */
     addDomListeners(value) {
         if (!Array.isArray(value)) {
-            value = [value];
+            value = [value]
         }
 
         let domListeners = this.domListeners;
 
         domListeners.push(...value);
 
-        this.domListeners = domListeners;
+        this.domListeners = domListeners
     }
 
     /**
@@ -393,7 +393,7 @@ class Base extends CoreBase {
 
         // todo: add a check if something has changed
 
-        return this.style = Object.assign(this.style, value);
+        return this.style = Object.assign(this.style, value)
     }
 
     /**
@@ -403,7 +403,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__);
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
     /**
@@ -422,18 +422,18 @@ class Base extends CoreBase {
 
         if (vdom !== vdomRoot) {
             // we are using a wrapper node
-            vdomRoot.cls = [...value];
+            vdomRoot.cls = [...value]
         } else {
             // we need to merge changes
             cls = NeoArray.union(me.wrapperCls, value);
             NeoArray.remove(cls, NeoArray.difference(oldValue, value));
-            vdom.cls = cls;
+            vdom.cls = cls
         }
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
-        } else if (me.mounted) {
-            me.updateCls(value, oldValue, vdomRoot.id);
+            me.needsVdomUpdate = true
+        } else if (me.mounted && me.vnode) {
+            me.updateCls(value, oldValue, vdomRoot.id)
         }
     }
 
@@ -449,7 +449,7 @@ class Base extends CoreBase {
             let binding = this.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(binding.key, value);
+                this.getModel()?.setData(binding.key, value)
             }
         }
     }
@@ -464,7 +464,7 @@ class Base extends CoreBase {
         let cls = this.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-disabled');
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -478,7 +478,7 @@ class Base extends CoreBase {
 
         me.getController()?.parseDomListeners(me);
 
-        DomEventManager.updateDomListeners(me, value, oldValue);
+        DomEventManager.updateDomListeners(me, value, oldValue)
     }
 
     /**
@@ -497,8 +497,8 @@ class Base extends CoreBase {
                     appName: me.appName,
                     owner  : me,
                     ...me.dropZoneConfig
-                });
-            });
+                })
+            })
         }
     }
 
@@ -519,7 +519,7 @@ class Base extends CoreBase {
                 parent = Neo.getComponent(parentIds[i]);
 
                 if (parent) {
-                    parent._hasUnmountedVdomChanges = value; // silent update
+                    parent._hasUnmountedVdomChanges = value // silent update
                 }
             }
         }
@@ -532,7 +532,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetHeight(value, oldValue) {
-        this.changeVdomRootKey('height', value);
+        this.changeVdomRootKey('height', value)
     }
 
     /**
@@ -545,9 +545,9 @@ class Base extends CoreBase {
         let me = this;
 
         if (value && oldValue === undefined && me.hideMode === 'removeDom') {
-            me.vdom.removeDom = true;
+            me.vdom.removeDom = true
         } else if (!(!value && oldValue === undefined)) {
-            me[value ? 'hide' : 'show']();
+            me[value ? 'hide' : 'show']()
         }
     }
 
@@ -558,7 +558,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetHtml(value, oldValue) {
-        this.changeVdomRootKey('html', value);
+        this.changeVdomRootKey('html', value)
     }
 
     /**
@@ -572,7 +572,7 @@ class Base extends CoreBase {
         this.changeVdomRootKey('id', value);
 
         oldValue && ComponentManager.unregister(oldValue);
-        ComponentManager.register(this);
+        ComponentManager.register(this)
     }
 
     /**
@@ -582,7 +582,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetMaxHeight(value, oldValue) {
-        this.changeVdomRootKey('maxHeight', value);
+        this.changeVdomRootKey('maxHeight', value)
     }
 
     /**
@@ -592,7 +592,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetMaxWidth(value, oldValue) {
-        this.changeVdomRootKey('maxWidth', value);
+        this.changeVdomRootKey('maxWidth', value)
     }
 
     /**
@@ -602,7 +602,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetMinHeight(value, oldValue) {
-        this.changeVdomRootKey('minHeight', value);
+        this.changeVdomRootKey('minHeight', value)
     }
 
     /**
@@ -612,7 +612,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetMinWidth(value, oldValue) {
-        this.changeVdomRootKey('minWidth', value);
+        this.changeVdomRootKey('minWidth', value)
     }
 
     /**
@@ -631,11 +631,11 @@ class Base extends CoreBase {
                 if (me.domListeners?.length > 0) {
                     // todo: the main thread reply of mount arrives after pushing the task into the queue which does not ensure the dom is mounted
                     setTimeout(() => {
-                        DomEventManager.mountDomListeners(me);
-                    }, 100);
+                        DomEventManager.mountDomListeners(me)
+                    }, 100)
                 }
 
-                me.fire('mounted', me.id);
+                me.fire('mounted', me.id)
             }
         }
     }
@@ -647,7 +647,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetRole(value, oldValue) {
-        this.changeVdomRootKey('role', value);
+        this.changeVdomRootKey('role', value)
     }
 
     /**
@@ -658,7 +658,7 @@ class Base extends CoreBase {
      */
     afterSetStyle(value, oldValue) {
         if (!(!value && oldValue === undefined)) {
-            this.updateStyle(value, oldValue);
+            this.updateStyle(value, oldValue)
         }
     }
 
@@ -673,11 +673,11 @@ class Base extends CoreBase {
             let me = this;
 
             if (Neo.ns('Neo.tooltip.Base')) {
-                me.createTooltips(value);
+                me.createTooltips(value)
             } else {
                 import('../tooltip/Base.mjs').then((module) => {
-                    me.createTooltips(value);
-                });
+                    me.createTooltips(value)
+                })
             }
         }
     }
@@ -696,10 +696,10 @@ class Base extends CoreBase {
         NeoArray.remove(cls, `neo-${me.ntype}-${oldValue}`);
 
         if (value && value !== '') {
-            NeoArray.add(cls, `neo-${me.ntype}-${value}`);
+            NeoArray.add(cls, `neo-${me.ntype}-${value}`)
         }
 
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -721,31 +721,33 @@ class Base extends CoreBase {
             Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
 
             Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key];
+                delete me._vdom[key]
             });
 
-            vdom = Object.assign(me._vdom, vdom);
+            vdom = Object.assign(me._vdom, vdom)
         }
 
-        if (me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
-        } else {
-            if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
-                me.hasRenderingListener = true;
-
-                listenerId = app.on('mounted', () => {
-                    app.un('mounted', listenerId);
-
-                    setTimeout(() => {
-                        me.vnode && me.updateVdom(me.vdom, me.vnode);
-                    }, 50);
-                });
-            } else if (me.mounted && me.vnode && !me.isParentVdomUpdating()) {
-                me.updateVdom(vdom, me.vnode);
+        if (!me.needsParentUpdate()) {
+            if (me.silentVdomUpdate) {
+                me.needsVdomUpdate = true
+            } else {
+                if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
+                    me.hasRenderingListener = true;
+
+                    listenerId = app.on('mounted', () => {
+                        app.un('mounted', listenerId);
+
+                        setTimeout(() => {
+                            me.vnode && me.updateVdom(me.vdom, me.vnode)
+                        }, 50)
+                    });
+                } else if (me.mounted && me.vnode && !me.isParentVdomUpdating()) {
+                    me.updateVdom(vdom, me.vnode)
+                }
             }
-
-            me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
         }
+
+        me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
     }
 
     /**
@@ -755,7 +757,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetVnode(value, oldValue) {
-        oldValue !== undefined && this.syncVnodeTree();
+        oldValue !== undefined && this.syncVnodeTree()
     }
 
     /**
@@ -765,7 +767,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWidth(value, oldValue) {
-        this.changeVdomRootKey('width', value);
+        this.changeVdomRootKey('width', value)
     }
 
     /**
@@ -787,8 +789,7 @@ class Base extends CoreBase {
             // we need to merge changes
             cls = NeoArray.union(cls, value);
             NeoArray.remove(cls, NeoArray.difference(oldValue, value));
-            vdom.cls = cls;
-
+            vdom.cls = cls
         } else {
             // we are not using a wrapper => cls & wrapperCls share the same node
             value = value ? value : [];
@@ -797,14 +798,14 @@ class Base extends CoreBase {
             NeoArray.add(cls, value);
 
             if (vdom) {
-                vdom.cls = cls;
+                vdom.cls = cls
             }
         }
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
+            me.needsVdomUpdate = true
         } else if (me.mounted) {
-            me.updateCls(value, oldValue);
+            me.updateCls(value, oldValue)
         }
     }
 
@@ -821,9 +822,9 @@ class Base extends CoreBase {
 
             if (!vdom.id) {
                 vdom.style = value;
-                me.update();
+                me.update()
             } else {
-                me.updateStyle(value, oldValue, vdom.id);
+                me.updateStyle(value, oldValue, vdom.id)
             }
         }
     }
@@ -834,7 +835,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeGetCls(value) {
-        return value ? [...value]: [];
+        return value ? [...value] : []
     }
 
     /**
@@ -845,7 +846,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeGetData(value) {
-        return this.getModel().getHierarchyData();
+        return this.getModel().getHierarchyData()
     }
 
     /**
@@ -854,7 +855,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeGetStyle(value) {
-        return {...value};
+        return {...value}
     }
 
     /**
@@ -863,7 +864,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeGetWrapperCls(value) {
-        return value ? [...value]: [];
+        return value ? [...value]: []
     }
 
     /**
@@ -872,7 +873,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeGetWrapperStyle(value) {
-        return {...Object.assign(this.vdom.style || {}, value)};
+        return {...Object.assign(this.vdom.style || {}, value)}
     }
 
     /**
@@ -882,7 +883,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeSetCls(value, oldValue) {
-        return NeoArray.union(value || [], this.baseCls);
+        return NeoArray.union(value || [], this.baseCls)
     }
 
     /**
@@ -899,10 +900,10 @@ class Base extends CoreBase {
         if (value) {
             return ClassSystemUtil.beforeSetInstance(value, null, {
                 component: this
-            });
+            })
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -913,10 +914,10 @@ class Base extends CoreBase {
      */
     beforeSetDomListeners(value, oldValue) {
         if (Neo.isObject(value)) {
-            value = [value];
+            value = [value]
         }
 
-        return value || [];
+        return value || []
     }
 
     /**
@@ -926,7 +927,7 @@ class Base extends CoreBase {
      * @protected
      */
      beforeSetHideMode(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'hideMode');
+        return this.beforeSetEnumValue(value, oldValue, 'hideMode')
     }
 
     /**
@@ -942,10 +943,10 @@ class Base extends CoreBase {
         if (value) {
             value = ClassSystemUtil.beforeSetInstance(value, KeyNavigation, {
                 keys: value
-            });
+            })
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -964,13 +965,13 @@ class Base extends CoreBase {
                 defaultValues = {component: me};
 
             if (me.modelData) {
-                defaultValues.data = me.modelData;
+                defaultValues.data = me.modelData
             }
 
-            return ClassSystemUtil.beforeSetInstance(value, 'Neo.model.Component', defaultValues);
+            return ClassSystemUtil.beforeSetInstance(value, 'Neo.model.Component', defaultValues)
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -984,11 +985,11 @@ class Base extends CoreBase {
             value.forEach((item, index) => {
                 value[index] = ClassSystemUtil.beforeSetInstance(item, null, {
                     owner: this
-                });
-            });
+                })
+            })
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -1016,12 +1017,12 @@ class Base extends CoreBase {
             root = me.getVdomRoot();
 
         if (value) {
-            root[key] = value;
+            root[key] = value
         } else {
-            delete root[key];
+            delete root[key]
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -1047,10 +1048,10 @@ class Base extends CoreBase {
                 ...item
             });
 
-            tooltips.push(tip);
+            tooltips.push(tip)
         });
 
-        me._tooltips = tooltips; // silent update
+        me._tooltips = tooltips // silent update
     }
 
     /**
@@ -1077,23 +1078,23 @@ class Base extends CoreBase {
         me.bind && parentModel?.removeBindings(me.id);
 
         me.plugins?.forEach(plugin => {
-            plugin.destroy();
+            plugin.destroy()
         });
 
         if (updateParentVdom && parentId) {
             if (parentId === 'document.body') {
-                Neo.applyDeltas(me.appName, {action: 'removeNode', id: me.vdom.id});
+                Neo.applyDeltas(me.appName, {action: 'removeNode', id: me.vdom.id})
             } else {
                 parentVdom = parent.vdom;
 
                 VDomUtil.removeVdomChild(parentVdom, me.vdom.id);
-                parent[silent ? '_vdom' : 'vdom'] = parentVdom;
+                parent[silent ? '_vdom' : 'vdom'] = parentVdom
             }
         }
 
         ComponentManager.unregister(me);
 
-        super.destroy();
+        super.destroy()
     }
 
     /**
@@ -1103,7 +1104,7 @@ class Base extends CoreBase {
      * @returns {Neo.component.Base|null} The matching instance or null
      */
     down(config, returnFirstMatch=true) {
-        return ComponentManager.down(this, config, returnFirstMatch);
+        return ComponentManager.down(this, config, returnFirstMatch)
     }
 
     /**
@@ -1114,7 +1115,7 @@ class Base extends CoreBase {
         Neo.main.DomAccess.focus({
             id
         }).catch(err => {
-            console.log('Error attempting to receive focus for component', err, this);
+            console.log('Error attempting to receive focus for component', err, this)
         })
     }
 
@@ -1123,7 +1124,7 @@ class Base extends CoreBase {
      * @returns {Neo.controller.Application}
      */
     getApp() {
-        return Neo.apps[this.appName];
+        return Neo.apps[this.appName]
     }
 
     /**
@@ -1140,18 +1141,18 @@ class Base extends CoreBase {
             parentComponent;
 
         if (config && (!ntype || ntype === config.ntype)) {
-            return config;
+            return config
         }
 
         if (me.parentId) {
             parentComponent = Neo.getComponent(me.parentId) || Neo.get(me.parentId);
 
             if (parentComponent) {
-                return parentComponent.getConfigInstanceByNtype(configName, ntype);
+                return parentComponent.getConfigInstanceByNtype(configName, ntype)
             }
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -1160,7 +1161,7 @@ class Base extends CoreBase {
      * @returns {Neo.controller.Component|null}
      */
     getController(ntype) {
-        return this.getConfigInstanceByNtype('controller', ntype);
+        return this.getConfigInstanceByNtype('controller', ntype)
     }
 
     /**
@@ -1170,7 +1171,7 @@ class Base extends CoreBase {
      * @returns {Promise<*>}
      */
     getDomRect(id=this.id, appName=this.appName) {
-        return Neo.main.DomAccess.getBoundingClientRect({appName, id});
+        return Neo.main.DomAccess.getBoundingClientRect({appName, id})
     }
 
     /**
@@ -1180,10 +1181,10 @@ class Base extends CoreBase {
      */
     getModel(ntype) {
         if (!Neo.currentWorker.isUsingViewModels) {
-            return null;
+            return null
         }
 
-        return this.getConfigInstanceByNtype('model', ntype);
+        return this.getConfigInstanceByNtype('model', ntype)
     }
 
     /**
@@ -1228,7 +1229,7 @@ class Base extends CoreBase {
      * @returns {Neo.component.Base[]}
      */
     getParents() {
-        return ComponentManager.getParents(this);
+        return ComponentManager.getParents(this)
     }
 
     /**
@@ -1247,16 +1248,16 @@ class Base extends CoreBase {
             for (const key in opts) {
                 if (plugin[key] !== opts[key]) {
                     hasMatch = false;
-                    break;
+                    break
                 }
             }
 
             if (hasMatch) {
-                return plugin;
+                return plugin
             }
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -1279,7 +1280,7 @@ class Base extends CoreBase {
 
         for (const item of me.cls || []) {
             if (item.startsWith(themeMatch)) {
-                return item;
+                return item
             }
         }
 
@@ -1292,24 +1293,24 @@ class Base extends CoreBase {
             for (const node of parentNodes || []) {
                 for (const item of node.cls || []) {
                     if (item.startsWith(themeMatch)) {
-                        return item;
+                        return item
                     }
                 }
             }
         }
 
-        return Neo.config.themes?.[0];
+        return Neo.config.themes?.[0]
     }
 
     /**
      * Search a vdom child node by id for a given vdom tree
      * @param {String} id
-     * @param {Object} [vdom]
+     * @param {Object} vdom=this.vdom
      * @returns {Object}
      */
-    getVdomChild(id, vdom) {
-        let node = VDomUtil.findVdomChild(vdom || this.vdom, id);
-        return node?.vdom;
+    getVdomChild(id, vdom=this.vdom) {
+        let node = VDomUtil.findVdomChild(vdom, id);
+        return node?.vdom
     }
 
     /**
@@ -1318,7 +1319,7 @@ class Base extends CoreBase {
      * @returns {Object} The new vdom root
      */
     getVdomRoot() {
-        return this.vdom;
+        return this.vdom
     }
 
     /**
@@ -1327,7 +1328,7 @@ class Base extends CoreBase {
      * @returns {Object} The new vnode root
      */
     getVnodeRoot() {
-        return this.vnode;
+        return this.vnode
     }
 
     /**
@@ -1342,13 +1343,13 @@ class Base extends CoreBase {
 
         if (me.hideMode !== 'visibility') {
             let removeFn = function() {
-                me.unmount();
+                me.unmount()
             }
 
             if (timeout) {
-                setTimeout(removeFn, timeout);
+                setTimeout(removeFn, timeout)
             } else {
-                removeFn();
+                removeFn()
             }
         } else {
             let style = me.style;
@@ -1356,14 +1357,14 @@ class Base extends CoreBase {
             me.style = style;
         }
 
-        me._hidden = true;
+        me._hidden = true
     }
 
     /**
      *
      */
     init() {
-        this.autoRender && this.render();
+        this.autoRender && this.render()
     }
 
     /**
@@ -1377,7 +1378,7 @@ class Base extends CoreBase {
         let me = this;
 
         me.getController()?.parseConfig(me);
-        me.getModel()     ?.parseConfig(me);
+        me.getModel()     ?.parseConfig(me)
     }
 
     /**
@@ -1434,7 +1435,7 @@ class Base extends CoreBase {
         delete config.vdom;
         delete config.wrapperStyle;
 
-        return config;
+        return config
     }
 
     /**
@@ -1466,7 +1467,7 @@ class Base extends CoreBase {
             });
             // end todo
 
-            me.render(true);
+            me.render(true)
         } else {
             await Neo.currentWorker.promiseMessage('main', {
                 action     : 'mountDom',
@@ -1481,16 +1482,38 @@ class Base extends CoreBase {
 
             await me.timeout(30);
 
-            me.mounted = true;
+            me.mounted = true
         }
     }
 
+    /**
+     * Checks the needsVdomUpdate config inside the parent tree
+     * @param {String} parentId=this.parentId
+     * @returns {Boolean}
+     */
+    needsParentUpdate(parentId=this.parentId) {
+        if (parentId !== 'document.body') {
+            let me     = this,
+                parent = Neo.getComponent(parentId);
+
+            if (parent) {
+                if (parent.needsVdomUpdate) {
+                    return true
+                } else {
+                    return me.needsParentUpdate(parent.parentId)
+                }
+            }
+        }
+
+        return false
+    }
+
     /**
      *
      */
     onConstructed() {
         super.onConstructed();
-        this.keys?.register(this);
+        this.keys?.register(this)
     }
 
     /**
@@ -1533,7 +1556,7 @@ class Base extends CoreBase {
             if (!app.rendered) {
                 app.rendering = false;
                 app.rendered  = true;
-                app.fire('render');
+                app.fire('render')
             }
 
             me.vnode = data;
@@ -1547,7 +1570,7 @@ class Base extends CoreBase {
                 child = Neo.getComponent(childIds[i]);
 
                 if (child) {
-                    child.rendered = true;
+                    child.rendered = true
                 }
             }
 
@@ -1561,7 +1584,7 @@ class Base extends CoreBase {
 
                 if (!app.mounted) {
                     app.mounted = true;
-                    app.fire('mounted');
+                    app.fire('mounted')
                 }
             }
         }
@@ -1588,21 +1611,21 @@ class Base extends CoreBase {
                 delete _vdom[key];
             });
 
-            vdom = Object.assign(me._vdom, vdom);
+            vdom = Object.assign(me._vdom, vdom)
         }
 
         if (me.silentVdomUpdate) {
-            return Promise.resolve();
+            return Promise.resolve()
         }
 
         return new Promise((resolve, reject) => {
             if (me.mounted && me.vnode) {
-                me.updateVdom(vdom, vnode, resolve, reject);
+                me.updateVdom(vdom, vnode, resolve, reject)
             } else {
                 me.update();
-                resolve();
+                resolve()
             }
-        });
+        })
     }
 
     /**
@@ -1613,7 +1636,7 @@ class Base extends CoreBase {
         let cls = this.cls;
 
         NeoArray.remove(cls, value);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -1635,12 +1658,12 @@ class Base extends CoreBase {
             for (; i < len; i++) {
                 if (Neo.isEqual(item, domListeners[i])) {
                     domListeners.splice(i, 1);
-                    break;
+                    break
                 }
             }
         });
 
-        me.domListeners = domListeners;
+        me.domListeners = domListeners
     }
 
     /**
@@ -1659,15 +1682,15 @@ class Base extends CoreBase {
         Object.entries(style).forEach(key => {
             if (value.indexOf(key) > -1) {
                 delete style[key];
-                doUpdate = true;
+                doUpdate = true
             }
         });
 
         if (doUpdate) {
-            this.style = style;
+            this.style = style
         }
 
-        return style;
+        return style
     }
 
     /**
@@ -1685,7 +1708,7 @@ class Base extends CoreBase {
         me.rendering = true;
 
         if (!app.rendered) {
-            app.rendering = true;
+            app.rendering = true
         }
 
         if (me.vdom) {
@@ -1703,8 +1726,8 @@ class Base extends CoreBase {
                 me.onRender(data, useVdomWorker ? autoMount : false);
                 me.isVdomUpdating = false;
 
-                autoMount && !useVdomWorker && me.mount();
-            });
+                autoMount && !useVdomWorker && me.mount()
+            })
         }
     }
 
@@ -1720,7 +1743,6 @@ class Base extends CoreBase {
 
         if (me.needsVdomUpdate) {
             me.childUpdateCache = [];     // if a new update is scheduled, we can clear the cache => these updates are included
-            me.needsVdomUpdate  = false;
             me.vdom             = me.vdom // trigger the next update cycle
         } else {
             [...me.childUpdateCache].forEach(id => {
@@ -1747,14 +1769,14 @@ class Base extends CoreBase {
         me.silentVdomUpdate = false;
 
         if (silent || !me.needsVdomUpdate) {
-            return Promise.resolve();
+            return Promise.resolve()
         } else {
             if (needsRendering) {
                 me.show();
-                return Promise.resolve();
+                return Promise.resolve()
             }
 
-            return me.promiseVdomUpdate();
+            return me.promiseVdomUpdate()
         }
     }
 
@@ -1763,7 +1785,7 @@ class Base extends CoreBase {
      * @param {Object} values={}
      */
     setSilent(values={}) {
-        return this.set(values, true);
+        return this.set(values, true)
     }
 
     /**
@@ -1778,17 +1800,17 @@ class Base extends CoreBase {
             delete me.vdom.removeDom;
 
             if (me.silentVdomUpdate) {
-                me.needsVdomUpdate = true;
+                me.needsVdomUpdate = true
             } else {
                 !me.mounted && me.render(true)
             }
         } else {
             let style = me.style;
             delete style.visibility;
-            me.style = style;
+            me.style = style
         }
 
-        me._hidden = false;
+        me._hidden = false
     }
 
     /**
@@ -1797,7 +1819,7 @@ class Base extends CoreBase {
      * @param {Object} [vdom=this.vdom]
      */
     syncVdomIds(vnode=this.vnode, vdom=this.vdom) {
-        VDomUtil.syncVdomIds(vnode, vdom);
+        VDomUtil.syncVdomIds(vnode, vdom)
     }
 
     /**
@@ -1810,7 +1832,7 @@ class Base extends CoreBase {
             childVnode, start;
 
         if (debug) {
-            start = performance.now();
+            start = performance.now()
         }
 
         me.syncVdomIds();
@@ -1824,12 +1846,12 @@ class Base extends CoreBase {
 
                 if (!component.rendered) {
                     component._rendered = true;
-                    component.fire('rendered', component.id);
+                    component.fire('rendered', component.id)
                 }
 
-                component.mounted = true;
+                component.mounted = true
             } else {
-                console.warn('syncVnodeTree: Could not replace the child vnode for', component.id);
+                console.warn('syncVnodeTree: Could not replace the child vnode for', component.id)
             }
         });
 
@@ -1848,7 +1870,7 @@ class Base extends CoreBase {
                 // check for dynamically rendered components which get inserted into the component tree
                 else if (index === 0 && me.vnode.outerHTML) {
                     // console.log('dyn item', me.vnode, me.parentIndex);
-                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
+                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode)
                 }
 
                 else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
@@ -1860,7 +1882,7 @@ class Base extends CoreBase {
 
         if (debug) {
             let end = performance.now();
-            console.log('syncVnodeTree', me.id, end - start);
+            console.log('syncVnodeTree', me.id, end - start)
         }
     }
 
@@ -1873,7 +1895,7 @@ class Base extends CoreBase {
         let cls = this.cls;
 
         NeoArray.toggle(cls, value, add);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -1895,8 +1917,8 @@ class Base extends CoreBase {
                 id    : me.vdom.id
             }]
         }).catch(err => {
-            console.log('Error attempting to unmount component', err, me);
-        });
+            console.log('Error attempting to unmount component', err, me)
+        })
     }
 
     /**
@@ -1905,14 +1927,14 @@ class Base extends CoreBase {
      * @returns {Neo.core.Base} The matching instance or null
      */
     up(config) {
-        return ComponentManager.up(this.id, config);
+        return ComponentManager.up(this.id, config)
     }
 
     /**
      *
      */
     update() {
-        this.afterSetVdom(this.vdom, null);
+        this.afterSetVdom(this.vdom, null)
     }
 
     /**
@@ -1925,9 +1947,9 @@ class Base extends CoreBase {
     updateCls(cls, oldCls, id=this.id) {
         let me          = this,
             vnode       = me.vnode,
-            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
+            vnodeTarget = vnode && VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
 
-        if (!Neo.isEqual(cls, oldCls)) {
+        if (vnode && !Neo.isEqual(cls, oldCls)) {
             if (vnodeTarget) {
                 vnodeTarget.className = cls; // keep the vnode in sync
                 me.vnode = vnode;
@@ -1939,7 +1961,7 @@ class Base extends CoreBase {
                     add   : NeoArray.difference(cls, oldCls),
                     remove: NeoArray.difference(oldCls, cls)
                 }
-            });
+            })
         }
     }
 
@@ -1959,13 +1981,13 @@ class Base extends CoreBase {
 
         if (delta) {
             if (!me.hasUnmountedVdomChanges) {
-                me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
+                me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
             }
 
             vdom.vdom.style = value; // keep the vdom in sync
 
             if (me.silentVdomUpdate) {
-                me.needsVdomUpdate = true;
+                me.needsVdomUpdate = true
             } else if (me.mounted) {
                 vnodeStyle = vnode.vnode.style;
 
@@ -1974,9 +1996,9 @@ class Base extends CoreBase {
                 // using vnode.vnode.style = style would lose them.
                 Object.entries(delta).forEach(([key, value]) => {
                     if (value === null) {
-                        delete vnode.vnode.style[key];
+                        delete vnode.vnode.style[key]
                     } else {
-                        vnodeStyle[key] = value;
+                        vnodeStyle[key] = value
                     }
                 });
 
@@ -1986,10 +2008,10 @@ class Base extends CoreBase {
                 };
 
                 if (Neo.currentWorker.isSharedWorker) {
-                    opts.appName = me.appName;
+                    opts.appName = me.appName
                 }
 
-                Neo.currentWorker.sendMessage('main', opts);
+                Neo.currentWorker.sendMessage('main', opts)
             }
         }
     }
@@ -2010,14 +2032,15 @@ class Base extends CoreBase {
         // console.log('updateVdom', me.id, me.isVdomUpdating);
 
         if (me.isVdomUpdating) {
-            me.needsVdomUpdate = true;
+            me.needsVdomUpdate = true
         } else {
-            me.isVdomUpdating = true;
+            me.isVdomUpdating  = true;
+            me.needsVdomUpdate = false;
 
             opts = { vdom, vnode };
 
             if (Neo.currentWorker.isSharedWorker) {
-                opts.appName = me.appName;
+                opts.appName = me.appName
             }
 
             Neo.vdom.Helper.update(opts).catch(err => {
@@ -2037,7 +2060,7 @@ class Base extends CoreBase {
                     if (!Neo.config.useVdomWorker && deltas.length > 0) {
                         Neo.applyDeltas(me.appName, deltas).then(() => {
                             me.resolveVdomUpdate(resolve)
-                        });
+                        })
                     } else {
                         me.resolveVdomUpdate(resolve)
                     }