neo.mjs 8.31.1 → 8.33.0

package/apps/finance/view/ViewportStateProvider.mjs

@@ -0,0 +1,32 @@
+import CompanyStore  from '../store/Companies.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
+
+/**
+ * @class Finance.view.ViewportStateProvider
+ * @extends Neo.state.Provider
+ */
+class ViewportStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Finance.view.ViewportStateProvider'
+         * @protected
+         */
+        className: 'Finance.view.ViewportStateProvider',
+        /**
+         * @member {Object} data
+         */
+        data: {},
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            companies: {
+                module   : CompanyStore,
+                autoLoad : true,
+                listeners: {load: 'onCompaniesStoreLoad'}
+            }
+        }
+    }
+}
+
+export default Neo.setupClass(ViewportStateProvider);

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-03-10",
+      "datePublished": "2025-03-25",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.31.1'
+                html  : 'v8.33.0'
             }]
         }],
         /**

package/apps/portal/view/home/MainContainer.mjs

@@ -51,8 +51,8 @@ class MainContainer extends Container {
         items: [
             {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
-            Helix,
             Colors,
+            Helix,
             How,
             Features,
             AfterMath

package/apps/portal/view/home/parts/Colors.mjs

@@ -42,18 +42,14 @@ class Colors extends FeatureSection {
          * @member {String} paragraph
          */
         paragraph: [
-            'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button ',
-            'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
-            'undocked into their own windows. In fact, the entire demo can be undocked.'
+            'Click the start button to see the view reflect changes in the data. And the app is multi-window: the table ',
+            'and charts can be undocked into their own windows. In fact, the entire demo can be undocked. ',
+            'All windows share the same data - less traffic and costs.'
         ].join(''),
         /**
          * @member {String} subHeadline='Socket Data'
          */
-        subHeadline: 'Shared Socket Data',
-        /**
-         * @member {String} textContainerPosition='end'
-         */
-        textContainerPosition: 'end'
+        subHeadline: 'Shared Socket Data'
     }
 }
 

package/apps/portal/view/home/parts/Helix.mjs

@@ -51,7 +51,11 @@ class Helix extends FeatureSection {
         /**
          * @member {String} subHeadline='40,000 Updates /s'
          */
-        subHeadline: '40,000 Updates /s'
+        subHeadline: '40,000 Updates /s',
+        /**
+         * @member {String} textContainerPosition='end'
+         */
+        textContainerPosition: 'end'
     }
 }
 

package/buildScripts/buildAll.mjs

@@ -14,7 +14,7 @@ const __dirname   = path.resolve(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.join(__dirname, 'package.json')),
       program     = new Command(),
-      neoPath     = path.resolve(packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/'),
+      neoPath     = path.resolve(packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/'),
       webpackPath = path.resolve(neoPath, 'buildScripts/webpack'),
       programName = `${packageJson.name} buildAll`,
       questions   = [];

package/buildScripts/buildThemes.mjs

@@ -14,7 +14,7 @@ const
     cwd          = process.cwd(),
     requireJson  = path => JSON.parse(fs.readFileSync((path))),
     packageJson  = requireJson(path.resolve(cwd, 'package.json')),
-    insideNeo    = packageJson.name === 'neo.mjs',
+    insideNeo    = packageJson.name.includes('neo.mjs'),
     neoPath      = path.resolve(insideNeo ? './' : './node_modules/neo.mjs/'),
     programName  = `${packageJson.name} buildThemes`,
     program      = new Command(),

package/buildScripts/createApp.mjs

@@ -12,7 +12,7 @@ const
     cwd          = process.cwd(),
     requireJson  = path => JSON.parse(fs.readFileSync((path))),
     packageJson  = requireJson(path.join(__dirname, 'package.json')),
-    insideNeo    = packageJson.name === 'neo.mjs',
+    insideNeo    = packageJson.name.includes('neo.mjs'),
     neoPath      = insideNeo ? './' : './node_modules/neo.mjs/',
     addonChoices = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
     program      = new Command(),

package/buildScripts/createAppMinimal.mjs

@@ -11,7 +11,7 @@ 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',
+    insideNeo     = packageJson.name.includes('neo.mjs'),
     neoPath       = insideNeo ? './' : './node_modules/neo.mjs/',
     addonChoices  = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
     program       = new Command(),

package/buildScripts/docs/jsdocx.mjs

@@ -8,7 +8,7 @@ const __dirname   = path.resolve(),
       cwd         = process.cwd(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo   = packageJson.name === 'neo.mjs',
+      insideNeo   = packageJson.name.includes('neo.mjs'),
       neoPath     = insideNeo ? '' : 'node_modules/neo.mjs/',
       appNames    = [],
       options = {

package/buildScripts/injectPackageVersion.mjs

@@ -11,7 +11,7 @@ const
     cwd         = process.cwd(),
     requireJson = path => JSON.parse(fs.readFileSync((path))),
     packageJson = requireJson(path.join(__dirname, 'package.json')),
-    insideNeo   = packageJson.name === 'neo.mjs',
+    insideNeo   = packageJson.name.includes('neo.mjs'),
     neoPath     = insideNeo ? './' : './node_modules/neo.mjs/',
     programName = `${packageJson.name} inject-package-version`;
 

package/buildScripts/watchThemes.mjs

@@ -8,7 +8,7 @@ import * as sass    from 'sass';
 let cwd         = process.cwd(),
     requireJson = path => JSON.parse(fs.readFileSync((path))),
     packageJson = requireJson(path.resolve(cwd, 'package.json')),
-    neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+    neoPath     = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
     mixinPath   = path.resolve(neoPath, 'resources/scss/mixins/_all.scss'),
     scssPath    = path.resolve(cwd, 'resources/scss');
 

package/buildScripts/webpack/buildThreads.mjs

@@ -11,7 +11,7 @@ const __dirname   = path.resolve(),
       cpOpts      = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath     = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       program     = new Command(),
       webpackPath = path.resolve(neoPath, 'buildScripts/webpack'),
       programName = `${packageJson.name} buildThreads`,

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -7,7 +7,7 @@ const cwd                   = process.cwd(),
       cpOpts                = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath               = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],

package/buildScripts/webpack/development/webpack.config.main.mjs

@@ -6,7 +6,7 @@ import WebpackHookPlugin from 'webpack-hook-plugin';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo      = packageJson.name === 'neo.mjs',
+      insideNeo      = packageJson.name.includes('neo.mjs'),
       neoPath        = insideNeo ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),

package/buildScripts/webpack/development/webpack.config.worker.mjs

@@ -5,7 +5,7 @@ import webpack from 'webpack';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath        = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       entry          = {};

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -7,7 +7,7 @@ const cwd                   = process.cwd(),
       cpOpts                = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath               = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],

package/buildScripts/webpack/production/webpack.config.main.mjs

@@ -6,7 +6,7 @@ import WebpackHookPlugin from 'webpack-hook-plugin';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo      = packageJson.name === 'neo.mjs',
+      insideNeo      = packageJson.name.includes('neo.mjs'),
       neoPath        = insideNeo ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),

package/buildScripts/webpack/production/webpack.config.worker.mjs

@@ -5,7 +5,7 @@ import webpack from 'webpack';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath        = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       entry          = {};

package/examples/README.md

@@ -1,17 +1,8 @@
 # Client Requirements
 
-Running the examples locally **without** a webpack build requires browsers to be able to start webworkers from
-Javascript Modules (.mjs files). This feature got released in Google Chrome v80 (February 4th, 2020),
-other browsers are not there yet (see sticky <a href="https://github.com/neomjs/neo/issues">issues</a>)
+Running the examples locally works fine in all environments inside all major browsers at this point:
+Chromium, Safari & Firefox
 
-- localhost/neo/examples/component/helix/
-
-More details on JS Modules (and their use within workers) here:
-https://v8.dev/features/modules
-
-Without the Chrome flag (or for other browsers like Firefox or Safari), you can run the examples using the webpack build
-version (which converts JS modules into plain JS files)
-- localhost/neo/dist/development/examples/component/helix/
 
 # Local Web-Server Requirements
 
@@ -19,13 +10,14 @@ Why do I need a local web-server?
 
 In short: it is possible to run the framework without a local web-server, but this would be a huge security issue.
 You can start Chrome using a flag (--allow-file-access-from-files), but this will allow the browser to access any
-file on your hard drive. To avoid this, a local web-server (like XAMPP) is the way to go.
+file on your hard drive. To avoid this, a local web-server is the way to go.
 
 **Webpack Dev Server**  
 `npm run server-start`
 
 **All Servers**  
-Ensure your server has a mime-type configured for Javascript Modules (.mjs) files. This should be set to the same as normal javascript (.js) files, normally 'application/-javascript'.
+Ensure your server has a mime-type configured for Javascript Modules (.mjs) files. This should be set to the same as
+normal javascript (.js) files, normally 'application/-javascript'.
 
 **JetBrains IDE**
 - Go to Preferences -> Build, Execution, Deployment -> Debugger
@@ -33,4 +25,3 @@ Ensure your server has a mime-type configured for Javascript Modules (.mjs) file
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.31.1",
+    "version": "8.33.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,13 +56,13 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.4.3",
+        "inquirer": "^12.5.0",
         "marked": "^15.0.7",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.85.1",
+        "sass": "^1.86.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.98.0",

package/resources/scss/src/grid/plugin/AnimateRows.scss

@@ -0,0 +1,10 @@
+.neo-grid-view {
+    &.neo-animate-rows {
+        .neo-grid-row {
+            transition:
+                background-color var(--neo-duration) var(--neo-easing),
+                opacity          var(--neo-duration) var(--neo-easing),
+                transform        var(--neo-duration) var(--neo-easing);
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/calendar/view/SettingsContainer.mjs

@@ -159,16 +159,14 @@ class SettingsContainer extends Container {
     onCardIndexChange(data) {
         let me            = this,
             container     = data.item,
-            mainContainer = me.getMainContainer(),
-            listenerId;
+            mainContainer = me.getMainContainer();
 
         if (mainContainer) {
             if (Neo.isFunction(container.createContent) && container.items.length < 1) {
                 if (Neo.typeOf(mainContainer[`${container.flag}Component`]) !== 'NeoInstance') {
-                    listenerId = mainContainer.on('cardLoaded', () => {
-                        mainContainer.un('cardLoaded', listenerId);
+                    mainContainer.on('cardLoaded', () => {
                         me.timeout(30).then(() => {container.createContent()})
-                    })
+                    }, me, {once: true})
                 } else {
                     me.timeout(30).then(() => {container.createContent()})
                 }

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

@@ -359,21 +359,19 @@ class Component extends BaseComponent {
                 import('./plugin/DragDrop.mjs'),
                 import('./plugin/EventResizable.mjs')
             ]).then(modules => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
                     module : modules[0].default,
                     appName,
-                    windowId,
                     ...me.pluginDragDropConfig
                 }, {
                     module       : modules[1].default,
                     appName,
                     delegationCls: 'neo-event',
                     directions   : ['b', 't'],
-                    windowId,
                     ...me.pluginEventResizableConfig
                 });
 

package/src/component/Base.mjs

@@ -2662,8 +2662,7 @@ class Component extends Base {
      */
     updateVdom(resolve, reject) {
         let me                              = this,
-            {app, mounted, parentId, vnode} = me,
-            listenerId;
+            {app, mounted, parentId, vnode} = me;
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
             resolve && me.resolveUpdateCache.push(resolve);
@@ -2672,13 +2671,11 @@ class Component extends Base {
             if (!mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
                 me.hasRenderingListener = true;
 
-                listenerId = app.on('mounted', () => {
-                    app.un('mounted', listenerId);
-
+                app.on('mounted', () => {
                     me.timeout(50).then(() => {
                         me.vnode && me.updateVdom(resolve, reject)
                     })
-                })
+                }, me, {once: true})
             } else {
                 if (resolve && (!mounted || !vnode)) {
                     me.resolveUpdateCache.push(resolve)

package/src/component/Helix.mjs

@@ -546,12 +546,11 @@ class Helix extends Component {
             angle, item, matrixItems, transformStyle, vdomItem, c, s, x, y, z;
 
         if (!me.mounted) {
-            const listenerId = me.on('mounted', () => {
-                me.un('mounted', listenerId);
+            me.on('mounted', () => {
                 me.timeout(100).then(() => {
                     me.createItems(startIndex)
                 })
-            })
+            }, me, {once: true})
         } else {
             for (; i < len; i++) {
                 item = me.store.items[i];

package/src/component/MagicMoveText.mjs

@@ -219,14 +219,21 @@ class MagicMoveText extends Component {
 
         let me = this;
 
-        value && me.getDomRect().then(rect => {
-            me.contentHeight = rect.height;
-            me.contentWidth  = rect.width;
+        if (value) {
+            me.getDomRect().then(rect => {
+                me.contentHeight = rect.height;
+                me.contentWidth  = rect.width;
+            })
+        } else {
+            me.measureCache  = {};
+            me.previousChars = []
+        }
 
-            me.autoCycle && me.startAutoCycle(value)
-        });
+        if(oldValue !== undefined) {
+            me.addResizeObserver(value);
 
-        oldValue !== undefined && me.addResizeObserver(value)
+            me.autoCycle && me.startAutoCycle(value)
+        }
     }
 
     /**

package/src/controller/Component.mjs

@@ -45,18 +45,16 @@ class Component extends Base {
         super.construct(config);
 
         let me          = this,
-            {component} = me,
-            listenerId;
+            {component} = me;
 
         me.references = {};
 
         if (component.isConstructed) {
             me.onComponentConstructed()
         } else {
-            listenerId = component.on('constructed', () => {
-                component.un('constructed', listenerId);
+            component.on('constructed', () => {
                 me.onComponentConstructed()
-            })
+            }, me, {once: true})
         }
     }
 

package/src/data/Store.mjs

@@ -430,7 +430,7 @@ class Store extends Base {
 
         // Being constructed does not mean that related afterSetStore() methods got executed
         // => break the sync flow to ensure potential listeners got applied
-        Promise.resolve().then(() => {
+        me.timeout(1).then(() => {
             if (me.getCount() > 0) {
                 me.fire('load', me.items)
             } else if (me.autoLoad) {

package/src/dialog/Base.mjs

@@ -286,15 +286,14 @@ class Dialog extends Panel {
     afterSetResizable(value, oldValue) {
         if (value && !this.getPlugin('resizable')) {
             import('../plugin/Resizable.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
                     module       : module.default,
                     appName,
                     delegationCls: 'neo-dialog',
-                    windowId,
                     ...me.resizablePluginConfig
                 });
 

package/src/grid/Container.mjs

@@ -22,6 +22,7 @@ class GridContainer extends BaseContainer {
         animatedChange: column.AnimatedChange,
         column        : column.Base,
         component     : column.Component,
+        currency      : column.Currency,
         index         : column.Index,
         progress      : column.Progress
     }
@@ -232,14 +233,13 @@ class GridContainer extends BaseContainer {
     afterSetCellEditing(value, oldValue) {
         if (value) {
             import('./plugin/CellEditing.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
-                    module : module.default,
-                    appName,
-                    windowId
+                    module: module.default,
+                    appName
                 });
 
                 me.plugins = plugins

package/src/grid/View.mjs

@@ -226,9 +226,7 @@ class GridView extends Component {
                     plugins = me.plugins || [];
 
                 plugins.push({
-                    module  : module.default,
-                    appName : me.appName,
-                    windowId: me.windowId,
+                    module: module.default,
                     ...me.pluginAnimateRowsConfig
                 });
 
@@ -436,10 +434,6 @@ class GridView extends Component {
             fieldValue             = record[dataField],
             cellConfig, rendererOutput;
 
-        if (fieldValue === null || fieldValue === undefined) {
-            fieldValue = ''
-        }
-
         rendererOutput = column.renderer.call(column.rendererScope || column, {
             column,
             columnIndex,

package/src/grid/column/AnimatedChange.mjs

@@ -66,12 +66,15 @@ class AnimatedChange extends Column {
                 cellId = view.getCellId(record, me.dataField);
                 node   = VdomUtil.find(view.vdom, cellId)?.vdom;
 
-                NeoArray.add(node.cls, me.getAnimationCls(record));
+                if (node) {
+                    NeoArray.add(node.cls, me.getAnimationCls(record));
+
+                    // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
+                    // It is crucial to restart the keyframe based animation
+                    // => The previous update call will remove the last animationCls
+                    view.update()
+                }
 
-                // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
-                // It is crucial to restart the keyframe based animation
-                // => The previous update call will remove the last animationCls
-                view.update();
                 break
             }
         }

package/src/grid/column/Base.mjs

@@ -73,8 +73,12 @@ class Column extends Base {
      * @param {Number|String}      data.value
      * @returns {*}
      */
-    cellRenderer(data) {
-        return data.value
+    cellRenderer({value}) {
+        if (value === null || value === undefined) {
+            return ''
+        }
+
+        return value
     }
 }