neo.mjs 5.15.1 → 5.15.3

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.15.1'
+         * @member {String} version='5.15.3'
          */
-        version: '5.15.1'
+        version: '5.15.3'
     }
 
     /**

package/apps/realworld2/view/article/PreviewList.mjs

@@ -45,7 +45,7 @@ class PreviewList extends List {
         });
 
         if (!silent) {
-            me.promiseVdomUpdate().then(() => {
+            me.promiseUpdate().then(() => {
                 me.fire('createItems');
             });
         }

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.15.1'
+         * @member {String} version='5.15.3'
          */
-        version: '5.15.1'
+        version: '5.15.3'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.15.1",
+    "version": "5.15.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.15.1'
+     * @default '5.15.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.15.1'
+    version: '5.15.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -645,7 +645,10 @@ function autoGenerateGetSet(proto, key) {
                     me[_key] = value;
                 }
 
-                if (!Neo.isEqual(value, oldValue)) {
+                if (
+                    (key === 'vnode' && value !== oldValue) || // vnode trees can be huge, avoid a deep comparison
+                    !Neo.isEqual(value, oldValue)
+                ) {
                     me[afterSet]?.(value, oldValue);
                     me.afterSetConfig?.(key, value, oldValue);
                 }

package/src/calendar/view/MainContainer.mjs

@@ -261,7 +261,7 @@ class MainContainer extends Container {
             if (value) {
                 delete sideBar.vdom.removeDom;
 
-                me.promiseVdomUpdate().then(() => {
+                me.promiseUpdate().then(() => {
                     sideBar.mounted = true;
 
                     setTimeout(() => {
@@ -274,7 +274,7 @@ class MainContainer extends Container {
                 sideBar._style      = style; // silent update
                 sideBar._vdom.style = style; // silent update
 
-                me.promiseVdomUpdate().then(() => {
+                me.promiseUpdate().then(() => {
                     setTimeout(() => {
                         sideBar.vdom.removeDom = true;
                         sideBar.update();

package/src/calendar/view/SettingsContainer.mjs

@@ -57,7 +57,7 @@ class SettingsContainer extends Container {
         me._style      = style; // silent update
         me._vdom.style = style; // silent update
 
-        Neo.getComponent(me.parentId).promiseVdomUpdate().then(() => {
+        Neo.getComponent(me.parentId).promiseUpdate().then(() => {
             setTimeout(() => {
                 me.collapsed = true;
 
@@ -145,7 +145,7 @@ class SettingsContainer extends Container {
 
         delete me.vdom.removeDom;
 
-        Neo.getComponent(me.parentId).promiseVdomUpdate().then(() => {
+        Neo.getComponent(me.parentId).promiseUpdate().then(() => {
             me.collapsed = false;
             me.mounted   = true;
 

package/src/calendar/view/YearComponent.mjs

@@ -512,7 +512,7 @@ class YearComponent extends Component {
                     vdom.cn[1].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[0]);
                     vdom.cn.splice(0, 1);
 
-                    me.promiseVdomUpdate(vdom).then(() => {
+                    me.promiseUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();
@@ -783,7 +783,7 @@ class YearComponent extends Component {
 
             me.isUpdating = true;
 
-            me.promiseVdomUpdate(me.vdom).then(() => {
+            me.promiseUpdate(me.vdom).then(() => {
                 me.isUpdating = false;
             });
         }

package/src/calendar/view/month/Component.mjs

@@ -689,7 +689,7 @@ class Component extends BaseComponent {
                     week.header && container.cn.unshift(week.header);
                 }
 
-                me.promiseVdomUpdate(me.vdom).then(() => {
+                me.promiseUpdate(me.vdom).then(() => {
                     Neo.main.DomAccess.scrollTo({
                         direction: 'top',
                         id       : me.vdom.cn[1].id,

package/src/calendar/view/week/Component.mjs

@@ -805,7 +805,7 @@ class Component extends BaseComponent {
             if (scrollValue) {
                 me.isUpdating = true;
 
-                me.promiseVdomUpdate().then(() => {
+                me.promiseUpdate().then(() => {
                     Neo.main.DomAccess.scrollBy({
                         direction: 'left',
                         id       : me.getScrollContainer().id,

package/src/component/Base.mjs

@@ -313,6 +313,11 @@ class Base extends CoreBase {
      */
     childUpdateCache = []
 
+    /**
+     * @member {Function[]} resolveUpdateCache=[]
+     */
+    resolveUpdateCache = []
+
     /**
      * Apply component based listeners
      * @member {Object} listeners={}
@@ -635,6 +640,8 @@ class Base extends CoreBase {
                     }, 100)
                 }
 
+                me.doResolveUpdateCache();
+
                 me.fire('mounted', me.id)
             }
         }
@@ -709,45 +716,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetVdom(value, oldValue) {
-        let me   = this,
-            app  = Neo.apps[me.appName],
-            vdom = value,
-            listenerId;
-
-        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
-        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
-        // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
-            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]
-            });
-
-            vdom = Object.assign(me._vdom, vdom)
-        }
-
-        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
+        this.updateVdom(value)
     }
 
     /**
@@ -1097,6 +1066,14 @@ class Base extends CoreBase {
         super.destroy()
     }
 
+    /**
+     * Triggers all stored resolve() callbacks
+     */
+    doResolveUpdateCache() {
+        this.resolveUpdateCache.forEach(item => item());
+        this.resolveUpdateCache = [];
+    }
+
     /**
      * Convenience shortcut for Neo.manager.Component.down
      * @param {Object|String} config
@@ -1107,6 +1084,55 @@ class Base extends CoreBase {
         return ComponentManager.down(this, config, returnFirstMatch)
     }
 
+    /**
+     * Internal method to send update requests to the vdom worker
+     * @param {Object} vdom
+     * @param {Neo.vdom.VNode} vnode
+     * @param {function} [resolve] used by promiseUpdate()
+     * @param {function} [reject] used by promiseUpdate()
+     * @private
+     */
+    #executeVdomUpdate(vdom, vnode, resolve, reject) {
+        let me   = this,
+            opts = {vdom, vnode},
+            deltas;
+
+        me.isVdomUpdating = true;
+
+        // we can not set the config directly => it could already be false,
+        // and we still want to pass it further into subtrees
+        me._needsVdomUpdate = false;
+        me.afterSetNeedsVdomUpdate?.(false, true)
+
+        if (Neo.currentWorker.isSharedWorker) {
+            opts.appName = me.appName
+        }
+
+        Neo.vdom.Helper.update(opts).catch(err => {
+            console.log('Error attempting to update component dom', err, me);
+            me.isVdomUpdating = false;
+
+            reject?.()
+        }).then(data => {
+            // checking if the component got destroyed before the update cycle is done
+            if (me.id) {
+                // console.log('Component vnode updated', data);
+                me.vnode          = data.vnode;
+                me.isVdomUpdating = false;
+
+                deltas = data.deltas;
+
+                if (!Neo.config.useVdomWorker && deltas.length > 0) {
+                    Neo.applyDeltas(me.appName, deltas).then(() => {
+                        me.resolveVdomUpdate(resolve)
+                    })
+                } else {
+                    me.resolveVdomUpdate(resolve)
+                }
+            }
+        })
+    }
+
     /**
      * Calls focus() on the top level DOM node of this component or on a given node via id
      * @param {String} id=this.id
@@ -1382,11 +1408,13 @@ class Base extends CoreBase {
     }
 
     /**
-     * Checks for vdom updates inside the parent chain and if found, registers the component for a vdom update once done
+     * Checks for vdom updates inside the parent chain and if found.
+     * Registers the component for a vdom update once done.
      * @param {String} parentId=this.parentId
+     * @param {Function} [resolve] gets passed by updateVdom()
      * @returns {Boolean}
      */
-    isParentVdomUpdating(parentId=this.parentId) {
+    isParentVdomUpdating(parentId=this.parentId, resolve) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
@@ -1398,6 +1426,10 @@ class Base extends CoreBase {
                     }
 
                     NeoArray.add(parent.childUpdateCache, me.id);
+
+                    // Adding the resolve fn to its own cache, since the parent will trigger
+                    // a new update() directly on this cmp
+                    resolve && me.resolveUpdateCache.push(resolve)
                     return true
                 } else {
                     return me.isParentVdomUpdating(parent.parentId)
@@ -1489,15 +1521,19 @@ class Base extends CoreBase {
     /**
      * Checks the needsVdomUpdate config inside the parent tree
      * @param {String} parentId=this.parentId
+     * @param {Function} [resolve] gets passed by updateVdom()
      * @returns {Boolean}
      */
-    needsParentUpdate(parentId=this.parentId) {
+    needsParentUpdate(parentId=this.parentId, resolve) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
                 if (parent.needsVdomUpdate) {
+                    parent.resolveUpdateCache.push(...me.resolveUpdateCache);
+                    resolve && parent.resolveUpdateCache.push(resolve);
+                    me.resolveUpdateCache = [];
                     return true
                 } else {
                     return me.needsParentUpdate(parent.parentId)
@@ -1596,35 +1632,9 @@ class Base extends CoreBase {
      * @param {Neo.vdom.VNode} [vnode= this.vnode]
      * @returns {Promise<any>}
      */
-    promiseVdomUpdate(vdom=this.vdom, vnode=this.vnode) {
-        let me    = this,
-            _vdom = me.vdom;
-
-        // todo: updateVdom() should handle this
-        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
-        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
-        // the content over seems to be the best strategy
-        if (_vdom !== vdom) {
-            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
-
-            Object.keys(_vdom).forEach(key => {
-                delete _vdom[key];
-            });
-
-            vdom = Object.assign(me._vdom, vdom)
-        }
-
-        if (me.silentVdomUpdate) {
-            return Promise.resolve()
-        }
-
+    promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
         return new Promise((resolve, reject) => {
-            if (me.mounted && me.vnode) {
-                me.updateVdom(vdom, vnode, resolve, reject)
-            } else {
-                me.update();
-                resolve()
-            }
+            this.updateVdom(vdom, vnode, resolve, reject)
         })
     }
 
@@ -1716,6 +1726,9 @@ class Base extends CoreBase {
 
             delete me.vdom.removeDom;
 
+            me._needsVdomUpdate = false;
+            me.afterSetNeedsVdomUpdate?.(false, true)
+
             Neo.vdom.Helper.create({
                 appName    : me.appName,
                 autoMount,
@@ -1739,11 +1752,14 @@ class Base extends CoreBase {
     resolveVdomUpdate(resolve) {
         let me = this;
 
+        me.doResolveUpdateCache();
+
         resolve?.();
 
         if (me.needsVdomUpdate) {
             me.childUpdateCache = [];     // if a new update is scheduled, we can clear the cache => these updates are included
-            me.vdom             = me.vdom // trigger the next update cycle
+
+            me.update()
         } else {
             [...me.childUpdateCache].forEach(id => {
                 Neo.getComponent(id)?.update();
@@ -1776,7 +1792,7 @@ class Base extends CoreBase {
                 return Promise.resolve()
             }
 
-            return me.promiseVdomUpdate()
+            return me.promiseUpdate()
         }
     }
 
@@ -1975,11 +1991,12 @@ class Base extends CoreBase {
     updateStyle(value, oldValue, id=this.id) {
         let me    = this,
             delta = Style.compareStyles(value, oldValue),
-            vdom  = VDomUtil.findVdomChild(me.vdom, id),
-            vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id),
-            opts, vnodeStyle;
+            opts, vdom, vnode, vnodeStyle;
 
         if (delta) {
+            vdom  = VDomUtil.findVdomChild(me.vdom, id);
+            vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id);
+
             if (!me.hasUnmountedVdomChanges) {
                 me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
             }
@@ -2018,55 +2035,65 @@ class Base extends CoreBase {
 
     /**
      * Gets called after the vdom config gets changed in case the component is already mounted (delta updates).
-     * @param {Object} vdom
-     * @param {Neo.vdom.VNode} vnode
-     * @param {function} [resolve] used by promiseVdomUpdate()
-     * @param {function} [reject] used by promiseVdomUpdate()
+     * @param {Object} vdom=this.vdom
+     * @param {Neo.vdom.VNode} vnode=this.vnode
+     * @param {function} [resolve] used by promiseUpdate()
+     * @param {function} [reject] used by promiseUpdate()
      * @protected
      */
-    updateVdom(vdom, vnode, resolve, reject) {
-        let me = this,
-            deltas, opts;
+    updateVdom(vdom=this.vdom, vnode=this.vnode, resolve, reject) {
+        let me      = this,
+            app     = Neo.apps[me.appName],
+            mounted = me.mounted,
+            listenerId;
 
-        // console.log('updateVdom', me.id, Neo.clone(vdom, true), Neo.clone(vnode, true));
-        // console.log('updateVdom', me.id, me.isVdomUpdating);
+        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
+        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
+        // the content over seems to be the best strategy
+        if (me._vdom !== vdom) {
+            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]
+            });
 
-        if (me.isVdomUpdating) {
+            vdom = Object.assign(me._vdom, vdom)
+        }
+
+        if (resolve && me.isVdomUpdating) {
+            me.resolveUpdateCache.push(resolve)
+        }
+
+        if (me.isVdomUpdating || me.silentVdomUpdate) {
             me.needsVdomUpdate = true
         } else {
-            me.isVdomUpdating  = true;
-            me.needsVdomUpdate = false;
+            if (!mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
+                me.hasRenderingListener = true;
 
-            opts = { vdom, vnode };
+                listenerId = app.on('mounted', () => {
+                    app.un('mounted', listenerId);
 
-            if (Neo.currentWorker.isSharedWorker) {
-                opts.appName = me.appName
-            }
-
-            Neo.vdom.Helper.update(opts).catch(err => {
-                console.log('Error attempting to update component dom', err, me);
-                me.isVdomUpdating = false;
+                    me.timeout(50).then(() => {
+                        me.vnode && me.updateVdom(me.vdom, me.vnode, resolve, reject)
+                    })
+                })
+            } else {
+                if (resolve && (!mounted || !vnode)) {
+                    me.resolveUpdateCache.push(resolve)
+                }
 
-                reject?.()
-            }).then(data => {
-                // checking if the component got destroyed before the update cycle is done
-                if (me.id) {
-                    // console.log('Component vnode updated', data);
-                    me.vnode          = data.vnode;
-                    me.isVdomUpdating = false;
-
-                    deltas = data.deltas;
-
-                    if (!Neo.config.useVdomWorker && deltas.length > 0) {
-                        Neo.applyDeltas(me.appName, deltas).then(() => {
-                            me.resolveVdomUpdate(resolve)
-                        })
-                    } else {
-                        me.resolveVdomUpdate(resolve)
-                    }
+                if (
+                    mounted
+                    && vnode
+                    && !me.needsParentUpdate(me.parentId, resolve)
+                    && !me.isParentVdomUpdating(me.parentId, resolve)
+                ) {
+                    me.#executeVdomUpdate(vdom, vnode, resolve, reject)
                 }
-            })
+            }
         }
+
+        me.hasUnmountedVdomChanges = !mounted && me.hasBeenMounted
     }
 }
 

package/src/component/Circle.mjs

@@ -255,7 +255,7 @@ class Circle extends Component {
                 me.createItems(oldValue, true);
                 me.updateItemPositions(true);
 
-                me.promiseVdomUpdate().then(() => {
+                me.promiseUpdate().then(() => {
                     if (!me.collapsed) {
                         me.updateItemOpacity(1, true, oldValue);
                         me.update();
@@ -720,7 +720,7 @@ class Circle extends Component {
 
             me.circleCenterHasTransitionCls = false;
 
-            me.promiseVdomUpdate().then(() => {
+            me.promiseUpdate().then(() => {
                 me.updateItemAngle(true);
                 circleCenterEl.style.transform = transform;
                 me.update();

package/src/component/DateSelector.mjs

@@ -447,7 +447,7 @@ class DateSelector extends Component {
                     vdom.cn[2].cn[0].cn[slideDirection === 'right'? 'unshift' : 'push'](vdom.cn[1]);
                     vdom.cn.splice(1, 1);
 
-                    me.promiseVdomUpdate().then(() => {
+                    me.promiseUpdate().then(() => {
                         me.changeMonthTransitionCallback({data: data[0], slideDirection: slideDirection});
                         me.updateHeaderMonthTransitionCallback(headerMonthOpts);
                         me.update();
@@ -533,7 +533,7 @@ class DateSelector extends Component {
                     vdom.cn[2].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[1]);
                     vdom.cn.splice(1, 1);
 
-                    me.promiseVdomUpdate(vdom).then(() => {
+                    me.promiseUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();
@@ -844,7 +844,7 @@ class DateSelector extends Component {
 
             me.isUpdating = true;
 
-            me.promiseVdomUpdate(me.vdom).then(() => {
+            me.promiseUpdate(me.vdom).then(() => {
                 me.isUpdating = false;
             });
         }

package/src/component/Gallery.mjs

@@ -440,7 +440,7 @@ class Gallery extends Component {
             itemsRoot.cn.push(vdomItem);
         }
 
-        me.promiseVdomUpdate(vdom).then(() => {
+        me.promiseUpdate(vdom).then(() => {
             me[itemsMounted] = true;
         });
     }

package/src/component/Helix.mjs

@@ -581,7 +581,7 @@ class Helix extends Component {
 
             me[lockWheel] = false;
 
-            me.promiseVdomUpdate(vdom).then(() => {
+            me.promiseUpdate(vdom).then(() => {
                 me[itemsMounted] = true;
                 me.fire('itemsMounted');
 

package/src/container/Base.mjs

@@ -422,7 +422,7 @@ class Base extends Component {
         }
 
         if (!silent) {
-            me.promiseVdomUpdate().then(() => {
+            me.promiseUpdate().then(() => {
                 me.fire('insert', { index, item });
             });
         }

package/src/container/_export.mjs

@@ -1,6 +1,5 @@
 import Container from './Base.mjs';
 import Panel     from './Panel.mjs';
-import Toolbar   from './Toolbar.mjs';
 import Viewport  from './Viewport.mjs';
 
-export {Container, Panel, Toolbar, Viewport};
+export {Container, Panel, Viewport};

package/src/data/connection/_export.mjs

@@ -1,4 +1,4 @@
-import Socket from './Socket.mjs';
-import Xhr    from './Xhr.mjs';
+import WebSocket from './WebSocket.mjs';
+import Xhr       from './Xhr.mjs';
 
-export {Socket, Xhr};
+export {WebSocket, Xhr};

package/src/form/field/Date.mjs

@@ -197,7 +197,7 @@ class DateField extends Picker {
         if (me.hidePickerOnSelect) {
             VDomUtil.removeVdomChild(vdom, me.getPickerId());
 
-            me.promiseVdomUpdate().then(data => {
+            me.promiseUpdate().then(data => {
                 me.value = opts.value;
             });
         } else {

package/src/form/field/Text.mjs

@@ -23,7 +23,7 @@ class Text extends Base {
      * @protected
      * @static
      */
-    static labelPositions = ['bottom', 'inline', 'left', 'right', 'top']
+    static labelPositions       = ['bottom', 'inline', 'left', 'right', 'top']
 
     static config = {
         /**
@@ -220,14 +220,18 @@ class Text extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
-            {tag: 'label', cls: [], style: {}},
-            {tag: 'label', cls: []},
-            {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
-            {cls: ['neo-textfield-error-wrapper'], removeDom: true, cn: [
-                {cls: ['neo-textfield-error']}
-            ]}
-        ]}
+            {
+                cn: [
+                    {tag: 'label', cls: [], style: {}},
+                    {tag: 'label', cls: []},
+                    {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
+                    {
+                        cls: ['neo-textfield-error-wrapper'], removeDom: true, cn: [
+                            {cls: ['neo-textfield-error']}
+                        ]
+                    }
+                ]
+            }
     }
 
     /**
@@ -246,9 +250,9 @@ class Text extends Base {
         let me = this;
 
         me.addDomListeners([
-            {input     : me.onInputValueChange, scope: me},
-            {mouseenter: me.onMouseEnter,       scope: me},
-            {mouseleave: me.onMouseLeave,       scope: me}
+            {input: me.onInputValueChange, scope: me},
+            {mouseenter: me.onMouseEnter, scope: me},
+            {mouseleave: me.onMouseLeave, scope: me}
         ]);
     }
 
@@ -530,7 +534,7 @@ class Text extends Base {
                     delete me.getCenterBorderEl()?.width;
                 }
 
-                me.promiseVdomUpdate().then(() => {
+                me.promiseUpdate().then(() => {
                     me.updateCenterBorderElWidth(isEmpty)
                 })
             } else {
@@ -637,7 +641,7 @@ class Text extends Base {
      * @protected
      */
     afterSetReadOnly(value, oldValue) {
-        let me = this,
+        let me  = this,
             cls = me.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-readonly');
@@ -663,7 +667,7 @@ class Text extends Base {
 
         me.validate(false);
         me.changeInputElKey('required', value ? value : null);
-        me.labelText        = me.labelText; // apply the optional text if needed
+        me.labelText = me.labelText; // apply the optional text if needed
 
         me.silentVdomUpdate = false;
 
@@ -753,10 +757,10 @@ class Text extends Base {
             });
 
             postTriggers.sort((a, b) => b.weight - a.weight); // DESC
-            preTriggers .sort((a, b) => a.weight - b.weight); // ASC
+            preTriggers.sort((a, b) => a.weight - b.weight); // ASC
 
             postTriggers = postTriggers.map(a => a.vdom);
-            preTriggers  = preTriggers .map(a => a.vdom);
+            preTriggers  = preTriggers.map(a => a.vdom);
 
             if (inputEl.tag === 'input') {
                 // wrap the input tag
@@ -774,13 +778,13 @@ class Text extends Base {
         } else {
             if (inputEl.tag !== 'input') {
                 // replacing the input wrapper div with the input tag
-                width = inputEl.width;
-                vdom.cn[2] = me.getInputEl();
+                width            = inputEl.width;
+                vdom.cn[2]       = me.getInputEl();
                 vdom.cn[2].width = width;
             }
         }
 
-        me.promiseVdomUpdate().then(() => {
+        me.promiseUpdate().then(() => {
             me.updateTriggerVnodes()
         })
     }
@@ -807,7 +811,7 @@ class Text extends Base {
         cls = me.cls;
 
         NeoArray[me.hasContent() ? 'add' : 'remove'](cls, 'neo-has-content');
-        NeoArray[isDirty         ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
         me.cls = cls;
 
         me.silentVdomUpdate = false;
@@ -1242,7 +1246,7 @@ class Text extends Base {
             vnode.vnode.attributes.value = value;
         }
 
-       me.value = me.inputValueAdjustor(value)
+        me.value = me.inputValueAdjustor(value)
     }
 
     /**
@@ -1278,7 +1282,7 @@ class Text extends Base {
      * @param {Array} [triggerSource] pass a shallow copy of this.triggers
      * @returns {Boolean} true in case a trigger was found & removed
      */
-    removeTrigger(type, silent=false, triggerSource) {
+    removeTrigger(type, silent = false, triggerSource) {
         let me       = this,
             hasMatch = false,
             triggers = triggerSource || me.triggers || [],
@@ -1308,7 +1312,7 @@ class Text extends Base {
      * You can optionally pass a new value, which will adjust the originalConfig.value if needed.
      * @param {String|null} [value=null]
      */
-    reset(value=null) {
+    reset(value = null) {
         let me = this;
 
         if (me.clearToOriginalValue) {
@@ -1331,7 +1335,7 @@ class Text extends Base {
      * @param {Boolean} [silent=false] true to get the value, but not apply it to the DOM
      * @protected
      */
-    updateCenterBorderElWidth(silent=false) {
+    updateCenterBorderElWidth(silent = false) {
         let me = this;
 
         me.mounted && me.getDomRect(me.getCenterBorderEl().id).then(data => {
@@ -1348,7 +1352,7 @@ class Text extends Base {
      @param {String|null} value
      @param {Boolean} silent=false
      */
-    updateError(value, silent=false) {
+    updateError(value, silent = false) {
         let me  = this,
             cls = me.cls,
             errorNode, errorWrapper;
@@ -1394,9 +1398,9 @@ class Text extends Base {
      * todo: this could be handled by component.Base
      */
     updateTriggerVnodes() {
-        let me           = this,
-            triggerRoot  = me.vnode?.childNodes[1],
-            childNodes   = triggerRoot?.childNodes || [],
+        let me          = this,
+            triggerRoot = me.vnode?.childNodes[1],
+            childNodes  = triggerRoot?.childNodes || [],
             trigger;
 
         childNodes.forEach(vnode => {
@@ -1415,7 +1419,7 @@ class Text extends Base {
      * @param {Boolean} silent=true
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    validate(silent=true) {
+    validate(silent = true) {
         let me           = this,
             maxLength    = me.maxLength,
             minLength    = me.minLength,
@@ -1433,30 +1437,28 @@ class Text extends Base {
             me.clean = false;
         }
 
-        if (Neo.isFunction(me.validator)) {
-            errorText = me.validator(me);
-
-            if (errorText !== true) {
-                me._error = errorText;
-                returnValue = false;
-            }
-        }
-
         if (isEmpty) {
             if (required) {
-                me._error = me.errorTextRequired;
+                me._error   = me.errorTextRequired;
                 returnValue = false;
             }
         } else {
             if (Neo.isNumber(maxLength) && valueLength > maxLength) {
-                me._error = me.errorTextMaxLength(errorParam);
+                me._error   = me.errorTextMaxLength(errorParam);
                 returnValue = false;
             } else if (Neo.isNumber(minLength) && valueLength < minLength) {
-                me._error = me.errorTextMinLength(errorParam);
+                me._error   = me.errorTextMinLength(errorParam);
                 returnValue = false;
             } else if (inputPattern && !inputPattern.test(value)) {
-                me._error = me.errorTextInputPattern(errorParam);
+                me._error   = me.errorTextInputPattern(errorParam);
                 returnValue = false;
+            } else if (Neo.isFunction(me.validator)) {
+                errorText = me.validator(me);
+
+                if (errorText !== true) {
+                    me._error   = errorText;
+                    returnValue = false;
+                }
             }
         }
 

package/src/form/field/ZipCode.mjs

@@ -13,6 +13,8 @@ class ZipCode extends Text {
      * @static
      */
     static countryCodes = {
+        AT: /^\d{4}$/,
+        CH: /^\d{4}$/,
         DE: /^(?!01000|99999)(0[1-9]\d{3}|[1-9]\d{4})$/
     }
 
@@ -40,12 +42,12 @@ class ZipCode extends Text {
          * The data.Model field inside the related country field which provides the country code (e.g. 'DE')
          * @member {String} countryKeyProperty='id'
          */
-        countryKeyProperty: 'id',
+        countryKeyProperty: "id",
         /**
          * data passes inputPattern, maxLength, minLength & valueLength properties
-         * @member {Function} errorTextInputPattern=data=>`Not a valid zip code`
+         * @member {Function} errorTextInputPattern=data=>'Not a valid zip code'
          */
-        errorTextInputPattern: data => `Not a valid zip code`
+        errorTextInputPattern: (data) => 'Not a valid zip code'
     }
 
     /**
@@ -59,7 +61,7 @@ class ZipCode extends Text {
 
         me.inputPattern = ZipCode.countryCodes[value] || null;
 
-        oldValue !== undefined && me.value && !me.clean && me.validate(false);
+        oldValue !== undefined && me.value && !me.clean && me.validate(false)
     }
 
     /**
@@ -99,14 +101,14 @@ class ZipCode extends Text {
             return me.up().getReference(value)
         }
 
-        return value;
+        return value
     }
 
     /**
      * @param {Object} data
      */
     onCountryFieldChange(data) {
-        this.countryCode = data.record?.[this.countryKeyProperty] || null;
+        this.countryCode = data.record?.[this.countryKeyProperty] || null
     }
 }
 

package/src/grid/View.mjs

@@ -150,7 +150,7 @@ class View extends Component {
         container.dockLeftMargin  = dockLeftMargin;
         container.dockRightMargin = dockRightMargin;
 
-        me.promiseVdomUpdate().then(() => {
+        me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
                 // this logic only works for selection.table.RowModel
                 Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});

package/src/list/Base.mjs

@@ -485,7 +485,7 @@ class Base extends Component {
                 listItem && vdom.cn.push(listItem);
             });
 
-            !silent && me.promiseVdomUpdate().then(() => {
+            !silent && me.promiseUpdate().then(() => {
                 me.fire('createItems');
             });
         }

package/src/main/mixin/DeltaUpdates.mjs

@@ -215,12 +215,14 @@ class DeltaUpdates extends Base {
                     case 'style':
                         if (Neo.isObject(value)) {
                             Object.entries(value).forEach(([key, val]) => {
+                                let important;
+
                                 if (Neo.isString(val) && val.includes('!important')) {
                                     val = val.replace('!important', '').trim();
-                                    node.style.setProperty(Neo.decamel(key), val, 'important');
-                                } else {
-                                    node.style[Neo.decamel(key)] = val;
+                                    important = 'important';
                                 }
+
+                                node.style.setProperty(Neo.decamel(key), val, important);
                             });
                         }
                         break;

package/src/table/View.mjs

@@ -214,7 +214,7 @@ class View extends Component {
         container.dockLeftMargin  = dockLeftMargin;
         container.dockRightMargin = dockRightMargin;
 
-        me.promiseVdomUpdate().then(() => {
+        me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
                 // this logic only works for selection.table.RowModel
                 Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});