neo.mjs 4.3.10 → 4.3.12

package/README.md

@@ -12,7 +12,7 @@
 </p>
 
 # Welcome to neo.mjs!
-neo.mjs enables you to create scalable & high performant Apps using more than just one CPU.
+neo.mjs enables you to create scalable & high performant Apps using more than just one CPU core.
 No need to take care of a workers setup, and the cross channel communication on your own.
 
 <p align="center">

package/apps/ServiceWorker.mjs

@@ -24,7 +24,11 @@ class ServiceWorker extends ServiceBase {
          * @member {Boolean} singleton=true
          * @protected
          */
-        singleton: true
+        singleton: true,
+        /**
+         * @member {String} version='4.3.11'
+         */
+        version: '4.3.11'
     }}
 }
 

package/apps/website/data/blog.json

@@ -374,7 +374,7 @@
         "publisher"   : "ITNEXT",
         "selectedInto": [],
         "type"        : "Blog Post",
-        "url"         : "https://tobiasuhlig.medium.com/enhance-your-frontend-state-management-with-view-models-7bf49e1a0991?source=friends_link&sk=ac04c44c7cd7af4c34068a87b1207c7e"
+        "url"         : "https://itnext.io/enhance-your-frontend-state-management-with-view-models-7bf49e1a0991?source=friends_link&sk=ac04c44c7cd7af4c34068a87b1207c7e"
     },
     {
         "author"      : "Tobias Uhlig",

package/buildScripts/injectPackageVersion.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+import chalk   from 'chalk';
+import envinfo from 'envinfo';
+import fs      from 'fs-extra';
+import os      from 'os';
+import path    from 'path';
+
+const
+    __dirname   = path.resolve(),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    insideNeo   = packageJson.name === 'neo.mjs',
+    neoPath     = insideNeo ? './' : './node_modules/neo.mjs/',
+    programName = `${packageJson.name} inject-package-version`;
+
+let startDate            = new Date(),
+    configPath           = path.join(__dirname, 'src/DefaultConfig.mjs'),
+    contentArray         = fs.readFileSync(configPath).toString().split(os.EOL),
+    i                    = 0,
+    len                  = contentArray.length,
+    serviceWorkerFolders = ['apps'],
+    versionString        = `'${packageJson.version}'`,
+    serviceContentArray, serviceWorkerPath
+
+if (!insideNeo) {
+    // todo
+} else {
+    serviceWorkerFolders.push('examples');
+}
+
+for (; i < len; i++) {
+    if (contentArray[i].includes('version:')) {
+        // we want to update the comment inside the DefaultConfig.mjs as well
+        contentArray[i - 5] = contentArray[i - 5].replace(/'\d.+'/, versionString);
+        contentArray[i]     = contentArray[i]    .replace(/'\d.+'/, versionString);
+        break;
+    }
+}
+
+fs.writeFileSync(configPath, contentArray.join(os.EOL));
+
+serviceWorkerFolders.forEach(folder => {
+    serviceWorkerPath    = path.join(__dirname, folder, 'ServiceWorker.mjs');
+    serviceContentArray  = fs.readFileSync(serviceWorkerPath).toString().split(os.EOL);
+
+    i   = 0;
+    len = serviceContentArray.length;
+
+    for (; i < len; i++) {
+        if (serviceContentArray[i].includes('version:')) {
+            // we want to update the comment inside ServiceWorker.mjs as well
+            serviceContentArray[i - 2] = serviceContentArray[i - 2].replace(/'\d.+'/, versionString);
+            serviceContentArray[i]     = serviceContentArray[i]    .replace(/'\d.+'/, versionString);
+            break;
+        }
+    }
+
+    fs.writeFileSync(serviceWorkerPath, serviceContentArray.join(os.EOL));
+});
+
+const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+console.log(`\nTotal time for ${programName}: ${processTime}s`);
+
+process.exit(0);

package/examples/ServiceWorker.mjs

@@ -24,7 +24,11 @@ class ServiceWorker extends ServiceBase {
          * @member {Boolean} singleton=true
          * @protected
          */
-        singleton: true
+        singleton: true,
+        /**
+         * @member {String} version='4.3.11'
+         */
+        version: '4.3.11'
     }}
 }
 

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -31,43 +31,6 @@ class CountryGallery extends Gallery {
          * @member {Number} itemHeight=240
          */
         itemHeight: 280,
-        /**
-         * @member {Object} itemTpl_
-         */
-        itemTpl:
-        {cls: ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'], tabIndex: '-1', cn: [
-            {cls: ['neo-item-wrapper'], style: {}, cn: [
-                {tag: 'div', cls: ['neo-country-gallery-item'], style: {}, cn: [
-                    {cls: ['neo-item-header'], cn: [
-                        {tag: 'img', cls: ['neo-flag']},
-                        {}
-                    ]},
-                    {tag: 'table', cls: ['neo-content-table'], cn: [
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
-                            {tag: 'td', cls: ['neo-align-right']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
-                            {tag: 'td', cls: ['neo-align-right']}
-                        ]},
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
-                        ]},
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
-                        ]}
-                    ]}
-                ]}
-            ]}
-        ]},
         /**
          * The item width of the gallery
          * @member {Number} itemWidth=320
@@ -97,29 +60,43 @@ class CountryGallery extends Gallery {
      * @returns {Object} vdomItem
      */
     createItem(vdomItem, record, index) {
-        let me         = this,
-            firstChild = vdomItem.cn[0].cn[0],
-            table      = firstChild.cn[1];
-
-        vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
-
-        vdomItem.cn[0].style.height = me.itemHeight + 'px';
+        let me    = this,
+            cls   = ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
+            style = {height: (me.itemHeight - 70) + 'px', width: me.itemWidth  + 'px'};
 
-        firstChild.style.height = (me.itemHeight - 70) + 'px';
-        firstChild.style.width  = me.itemWidth  + 'px';
-
-        firstChild.cn[0].cn[0].src  = me.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
-
-        table.cn[0].cn[1].html = record.cases;
-        table.cn[1].cn[1].html = record.deaths;
-        table.cn[2].cn[1].html = record.recovered;
-
-        table.cn[0].cn[4].html = record.todayCases;
-        table.cn[1].cn[4].html = record.todayDeaths;
-        table.cn[2].cn[4].html = record.critical;
-
-        return vdomItem;
+        return {cls, id: me.getItemVnodeId(record[me.keyProperty]), tabIndex: '-1', cn: [
+            {cls: ['neo-item-wrapper'], style: {height: me.itemHeight + 'px'}, cn: [
+                {tag: 'div', cls: ['neo-country-gallery-item'], style, cn: [
+                    {cls: ['neo-item-header'], cn: [
+                        {tag: 'img', cls: ['neo-flag'], src: me.getCountryFlagUrl(record.country)},
+                        {html: record.country}
+                    ]},
+                    {tag: 'table', cls: ['neo-content-table'], cn: [
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', cls: ['neo-align-right'], html: record.cases},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', cls: ['neo-align-right'], html: record.todayCases}
+                        ]},
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.deaths},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.todayDeaths}
+                        ]},
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: record.recovered},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: record.critical}
+                        ]}
+                    ]}
+                ]}
+            ]}
+        ]};
     }
 
     /**

package/examples/form/field/date/MainContainer.mjs

@@ -121,7 +121,7 @@ class MainContainer extends ConfigurationViewport {
             labelText           : 'Label',
             labelWidth          : 70,
             value               : DateUtil.convertToyyyymmdd(new Date()),
-            width               : 250
+            width               : 270
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.10",
+    "version": "4.3.12",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -20,6 +20,7 @@
         "create-app": "node ./buildScripts/createApp.mjs",
         "create-class": "node ./buildScripts/createClass.mjs",
         "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
+        "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
         "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch-themes": "node ./buildScripts/watchThemes.mjs"
@@ -43,19 +44,19 @@
         "@fortawesome/fontawesome-free": "^6.2.0",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
-        "autoprefixer": "^10.4.12",
-        "chalk": "^5.1.0",
+        "autoprefixer": "^10.4.13",
+        "chalk": "^5.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.4.1",
-        "cssnano": "^5.1.13",
+        "cssnano": "^5.1.14",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.3",
+        "inquirer": "^9.1.4",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.17",
-        "sass": "^1.55.0",
+        "postcss": "^8.4.18",
+        "sass": "^1.56.0",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.11.1",

package/resources/scss/src/draggable/tree/DragZone.scss

@@ -1,5 +1,7 @@
 .neo-dragproxy.neo-tree-list {
     .neo-list {
+        overflow: hidden;
+
         .neo-list-item {
             margin-right: 0;
         }
@@ -10,4 +12,4 @@
             content: "\f07b" !important;
         }
     }
-}
+}

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -143,14 +143,15 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgePosition(value, oldValue) {
-        let me      = this,
-            badgeEl = me.getBadgeNode(),
-            cls     = badgeEl.cls || [];
+        let me        = this,
+            badgeNode = me.getBadgeNode(),
+            cls       = badgeNode.cls || [];
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
 
-        badgeEl.cls = cls;
+        badgeNode.cls = cls;
+
         me.update();
     }
 

package/src/component/Base.mjs

@@ -392,8 +392,8 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetCls(value, oldValue) {
-        oldValue = oldValue ? oldValue : [];
-        value    = value    ? value    : [];
+        oldValue = oldValue || [];
+        value    = value    || [];
 
         let me       = this,
             vdom     = me.vdom,
@@ -695,9 +695,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetVnode(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.syncVnodeTree();
-        }
+        oldValue !== undefined && this.syncVnodeTree();
     }
 
     /**
@@ -717,8 +715,8 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWrapperCls(value, oldValue) {
-        oldValue = oldValue ? oldValue : [];
-        value    = value    ? value    : [];
+        oldValue = oldValue || [];
+        value    = value    || [];
 
         let me       = this,
             vdom     = me.vdom,
@@ -1551,8 +1549,7 @@ class Base extends CoreBase {
      * @returns {Promise<*>}
      */
     set(values={}, silent=false) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.silentVdomUpdate = true;
 
@@ -1723,8 +1720,7 @@ class Base extends CoreBase {
     updateCls(cls, oldCls, id=this.id) {
         let me          = this,
             vnode       = me.vnode,
-            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode,
-            opts;
+            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
 
         if (!Neo.isEqual(cls, oldCls)) {
             if (vnodeTarget) {
@@ -1732,25 +1728,12 @@ class Base extends CoreBase {
                 me.vnode = vnode;
             }
 
-            opts = {
-                action: 'updateDom',
-                deltas: [{
-                    id,
-                    cls: {
-                        add   : NeoArray.difference(cls, oldCls),
-                        remove: NeoArray.difference(oldCls, cls)
-                    }
-                }]
-            };
-
-            if (Neo.currentWorker.isSharedWorker) {
-                opts.appName = me.appName;
-            }
-
-            Neo.currentWorker.promiseMessage('main', opts).then(() => {
-                //console.log(me.vnode);
-            }).catch(err => {
-                console.log('Error attempting to update Component cls', err, me);
+            Neo.applyDeltas(me.appName, {
+                id,
+                cls: {
+                    add   : NeoArray.difference(cls, oldCls),
+                    remove: NeoArray.difference(oldCls, cls)
+                }
             });
         }
     }

package/src/container/Panel.mjs

@@ -68,6 +68,10 @@ class Panel extends Container {
      * @returns {Object}
      */
     static createHeaderConfig(header) {
+        if (Neo.typeOf(header) === 'NeoInstance') {
+            return header;
+        }
+
         let config = {
             ntype: 'toolbar',
             cls  : ['neo-panel-header-toolbar', 'neo-toolbar'],

package/src/dialog/Base.mjs

@@ -1,5 +1,6 @@
 import Panel    from '../container/Panel.mjs';
 import NeoArray from '../util/Array.mjs';
+import Toolbar  from './header/Toolbar.mjs';
 import VDomUtil from '../util/VDom.mjs';
 
 let DragZone;
@@ -12,11 +13,11 @@ class Base extends Panel {
     static getStaticConfig() {return {
         /**
          * Valid values for closeAction
-         * @member {String[]} closeActions=['close', 'hide']
+         * @member {String[]} closeActions=['close','hide']
          * @protected
          * @static
          */
-        iconPositions: ['top', 'right', 'bottom', 'left']
+        closeActions: ['close', 'hide']
     }}
 
     static getConfig() {return {
@@ -80,6 +81,10 @@ class Base extends Panel {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * @member {Object} headerConfig=null
+         */
+        headerConfig: null,
         /**
          * @member {Neo.toolbar.Base|null} headerToolbar=null
          */
@@ -112,7 +117,7 @@ class Base extends Panel {
         /**
          * @member {String} title='Dialog Title'
          */
-        title_: 'Dialog Title',
+        title: 'Dialog Title',
         /**
          * @member {Object} _vdom
          */
@@ -233,14 +238,10 @@ class Base extends Panel {
         let me = this;
 
         if (value && me.animateTargetId) {
-            Neo.currentWorker.promiseMessage('main', {
-                action : 'updateDom',
-                appName: me.appName,
-                deltas : [{
-                    action: 'removeNode',
-                    id    : me.getAnimateTargetId()
-                }]
-            });
+            Neo.applyDeltas(me.appName, {
+                action: 'removeNode',
+                id    : me.getAnimateTargetId()
+            })
         }
     }
 
@@ -269,18 +270,6 @@ class Base extends Panel {
         });
     }
 
-    /**
-     * Triggered after the title config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetTitle(value, oldValue) {
-        if (oldValue) {
-            this.down({flag: 'title-label'}).text = value;
-        }
-    }
-
     /**
      *
      */
@@ -404,26 +393,36 @@ class Base extends Panel {
 
         me.draggable && cls.push('neo-draggable');
 
-        headers.unshift({
-            cls  : cls,
-            dock : 'top',
-            id   : me.getHeaderToolbarId(),
-            items: [{
-                ntype: 'label',
-                flag : 'title-label',
-                text : me.title
-            }, '->', {
-                iconCls: 'far fa-window-maximize',
-                handler: me.maximize.bind(me)
-            }, {
-                iconCls: 'far fa-window-close',
-                handler: me.closeOrHide.bind(me)
-            }]
+        me.headerToolbar = Neo.create({
+            module   : Toolbar,
+            appName  : me.appName,
+            cls,
+            dock     : 'top',
+            id       : me.getHeaderToolbarId(),
+            listeners: {headerAction: me.executeHeaderAction, scope: me},
+            title    : me.title,
+            ...me.headerConfig
         });
 
+        headers.unshift(me.headerToolbar);
+
         me.headers = headers;
     }
 
+    /**
+     * {Object} data
+     */
+    executeHeaderAction(data) {
+        let me = this,
+
+        map = {
+            close   : me.closeOrHide,
+            maximize: me.maximize
+        };
+
+        map[data.action].call(me, data);
+    }
+
     /**
      * Returns the id of the animation node
      * @returns {String}
@@ -490,7 +489,7 @@ class Base extends Panel {
     }
 
     /**
-     * @param {Object} data
+     * @param {Object} [data]
      */
     maximize(data) {
         let me = this;

package/src/dialog/header/Toolbar.mjs

@@ -0,0 +1,105 @@
+import Base from '../../toolbar/Base.mjs';
+
+/**
+ * @class Neo.dialog.header.Toolbar
+ * @extends Neo.toolbar.Base
+ */
+class Toolbar extends Base {
+    /**
+     * @member {Object} actionMap
+     */
+    actionMap = {
+        close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
+        maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
+    }
+    /**
+     * You can define the action order and directly add custom actions.
+     * @example
+     * {
+     *     actions: [
+     *         'close',
+     *         'maximize',
+     *         {action: 'help', iconCls: 'far fa-circle-question'}
+     *     ]
+     * }
+     *
+     * You can also extend the actionMap if needed.
+     * @member {Object[]|String[]|null} actions=['maximize','close']
+     */
+    actions = ['maximize', 'close']
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.dialog.header.Toolbar'
+         * @protected
+         */
+        className: 'Neo.dialog.header.Toolbar',
+        /**
+         * @member {String|null} title=null
+         */
+        title_: null
+    }}
+
+    /**
+     * Triggered after the title config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTitle(value, oldValue) {
+        oldValue && this.down({flag: 'title-label'})?.set({
+            removeDom: !value,
+            text     : value
+        })
+    }
+
+    /**
+     *
+     */
+    createItems() {
+        let me      = this,
+            handler = me.fireAction.bind(me),
+            items   = me.items || [];
+
+        items.push({
+            ntype    : 'label',
+            cls      : ['neo-panel-header-text', 'neo-label'],
+            flag     : 'title-label',
+            removeDom: !me.title,
+            text     : me.title
+        });
+
+        if (me.actions) {
+            items.push('->');
+
+            me.actions.forEach(action => {
+                if (Neo.typeOf(action) !== 'Object') {
+                    action = me.actionMap[action]()
+                }
+
+                items.push({handler, ...action})
+            })
+        }
+
+        me.items = items;
+
+        super.createItems();
+    }
+
+    /**
+     * @param {Object} data
+     */
+    fireAction(data) {
+        let component = data.component;
+
+        this.fire('headerAction', {
+            action: component.action,
+            component,
+            scope : this
+        })
+    }
+}
+
+Neo.applyClassConfig(Toolbar);
+
+export default Toolbar;

package/src/form/field/Text.mjs

@@ -243,9 +243,10 @@ class Text extends Base {
      * @protected
      */
     afterSetHideLabel(value, oldValue) {
-        let me = this;
+        let me   = this,
+            node = me.labelPosition === 'inline' ? me.getCenterBorderEl() : me.vdom.cn[0];
 
-        me.vdom.cn[0].removeDom = value;
+        node.removeDom = value;
         me.updateInputWidth();
     }
 
@@ -309,16 +310,15 @@ class Text extends Base {
 
             vdom.cn[0] = me.getLabelEl(); // remove the wrapper
 
-            vdom.cn[0].width = me.labelWidth;
+            vdom.cn[0].removeDom = me.hideLabel;
+            vdom.cn[0].width     = me.labelWidth;
             me.updateInputWidth();
         } else if (value === 'inline') {
             centerBorderElCls = ['neo-center-border'];
             isEmpty           = me.isEmpty();
             vdom              = me.vdom;
 
-            if (!isEmpty) {
-                centerBorderElCls.push('neo-float-above');
-            }
+            !isEmpty && centerBorderElCls.push('neo-float-above');
 
             delete vdom.cn[0].width;
 
@@ -327,8 +327,9 @@ class Text extends Base {
                 cn : [{
                     cls: ['neo-left-border']
                 }, {
-                    cls: centerBorderElCls,
-                    cn : [vdom.cn[0]]
+                    cls      : centerBorderElCls,
+                    cn       : [vdom.cn[0]],
+                    removeDom: me.hideLabel
                 }, {
                     cls: ['neo-right-border']
                 }]
@@ -549,6 +550,8 @@ class Text extends Base {
         let me  = this,
             cls = me.cls;
 
+        me.silentVdomUpdate = true;
+
         me.getInputEl().value = value;
 
         if (Neo.isEmpty(value) !== Neo.isEmpty(oldValue)) {
@@ -556,9 +559,12 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        me.cls = cls;
+
         me.validate(); // silent
 
-        me.cls  = cls;
+        me.silentVdomUpdate = false;
+
         me.update();
 
         super.afterSetValue(value, oldValue); // fires the change event
@@ -994,7 +1000,8 @@ class Text extends Base {
      @param {Boolean} silent=false
      */
     updateError(value, silent=false) {
-        let me = this,
+        let me  = this,
+            cls = me.cls,
             errorNode, isValid;
 
         if (!(me.validBeforeMount && !me.mounted)) {
@@ -1002,7 +1009,8 @@ class Text extends Base {
 
             isValid = !value || value === '';
 
-            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+            NeoArray[!isValid ? 'add' : 'remove'](cls, 'neo-invalid');
+            me.cls = cls; // todo: silent update
 
             errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
 

package/src/grid/View.mjs

@@ -47,7 +47,7 @@ class View extends Component {
 
         for (; i < amountRows; i++) {
             record = inputData[i];
-            id = me.getRowId(record, i);
+            id     = me.getRowId(record, i);
 
             me.recordVnodeMap[id] = i;
 
@@ -109,7 +109,7 @@ class View extends Component {
 
                 config = {
                     id       : me.getCellId(record, column.field),
-                    cls      : rendererOutput.cls   || ['neo-grid-cell'],
+                    cls      : cellCls,
                     innerHTML: rendererOutput.html  || '',
                     style    : cellStyle,
                     tabIndex : '-1'

package/src/main/addon/ServiceWorker.mjs

@@ -42,10 +42,19 @@ class ServiceWorker extends Base {
                     serviceWorker.ready.then(() => {
                         serviceWorker.onmessage = WorkerManager.onWorkerMessage.bind(WorkerManager);
 
+                        if (!WorkerManager.getWorker('service')) {
+                            /*
+                             * navigator.serviceWorker.controller can be null in case we load a page for the first time
+                             * or in case of a force refresh.
+                             * See: https://www.w3.org/TR/service-workers/#navigator-service-worker-controller
+                             */
+                            WorkerManager.serviceWorker = registration.active;
+                        }
+
                         WorkerManager.sendMessage('service', {
                             action: 'registerNeoConfig',
                             data  : config
-                        });
+                        })
                     });
                 })
         }

package/src/table/View.mjs

@@ -70,7 +70,7 @@ class View extends Component {
 
         for (; i < amountRows; i++) {
             record = inputData[i];
-            id = me.getRowId(record, i);
+            id     = me.getRowId(record, i);
 
             me.recordVnodeMap[id] = i;
 
@@ -125,7 +125,7 @@ class View extends Component {
                     };
                 }
 
-                // todo: remove the if part as soon as all tables use stores (examples table)
+                // todo: remove the else part as soon as all tables use stores (examples table)
                 if (hasStore) {
                     cellId = me.getCellId(record, column.dataField);
                 } else {
@@ -135,7 +135,7 @@ class View extends Component {
                 config = {
                     tag      : 'td',
                     id       : cellId,
-                    cls      : rendererOutput.cls   || ['neo-table-cell'],
+                    cls      : cellCls,
                     innerHTML: rendererOutput.html  || '',
                     style    : rendererOutput.style || {},
                     tabIndex : '-1'

package/src/worker/Manager.mjs

@@ -16,6 +16,15 @@ const NeoConfig = Neo.config,
  * @singleton
  */
 class Manager extends Base {
+    /**
+     * navigator.serviceWorker.controller can be null in case we load a page for the first time
+     * or in case of a force refresh.
+     * See: https://www.w3.org/TR/service-workers/#navigator-service-worker-controller
+     * Only in this case main.addon.ServiceWorker will store the active registration once ready here.
+     * @member {ServiceWorker|null} serviceWorker=null
+     */
+    serviceWorker = null
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.worker.Manager'
@@ -224,7 +233,7 @@ class Manager extends Base {
      */
     getWorker(name) {
         if (name === 'service') {
-            return navigator.serviceWorker?.controller;
+            return navigator.serviceWorker?.controller || this.serviceWorker;
         }
 
         return name instanceof Worker ? name : this.workers[name].worker;

package/src/worker/ServiceBase.mjs

@@ -250,11 +250,17 @@ class ServiceBase extends Base {
      * @param {Object} msg
      * @param {ExtendableMessageEvent} event
      */
-    onRegisterNeoConfig(msg, event) {
+    async onRegisterNeoConfig(msg, event) {
+        let me = this;
+
         Neo.config = Neo.config || {};
         Object.assign(Neo.config, msg.data);
 
-        this.onConnect(event.source);
+        if (me.version !== Neo.config.version) {
+            await me.clearCaches()
+        }
+
+        me.onConnect(event.source);
     }
 
     /**