neo.mjs 10.4.0 → 10.4.1

package/.github/RELEASE_NOTES/v10.4.1.md

@@ -0,0 +1,16 @@
+# Neo.mjs v10.4.1 Release Notes
+
+## Highlights
+
+This patch release polishes the "instant preview" feature for grids introduced in v10.4.0, ensuring the grid's scrollbar and accessibility properties are correctly sized from the very first paint when loading large datasets. The non-buffered `table.Body` also receives a major performance boost for clearing data.
+
+## Enhancements & Bug Fixes
+
+### 1. Polished "Instant Preview" for Large Datasets in Grids
+The chunked loading mechanism for stores and grids has been refined. When adding a large dataset, the initial `load` event now carries the final total record count. The `grid.Container` uses this information immediately to set the correct `aria-rowcount` and to size the vertical scrollbar accurately, preventing layout shifts and providing a more stable and accessible user experience from the very first render.
+
+### 2. Standardized Internal Store `load` Event
+To support the "instant preview" refinements, the `data.Store` `load` event payload has been standardized internally. It now consistently uses an object containing an `items` property (e.g., `{items: [...]}`). Framework components have been updated to use this new signature.
+
+### 3. Performance Fast Path for `table.Body`
+The non-buffered `table.Body` is now significantly faster when clearing its data. It uses the same "fast path" optimization as `grid.Body`, directly clearing the DOM instead of processing a large and unnecessary VDOM diff when an empty dataset is loaded. This aligns the performance of the two components.

package/ServiceWorker.mjs

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

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

@@ -108,7 +108,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.4.0'
+                text  : 'v10.4.1'
             }]
         }],
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "10.4.0",
+    "version": "10.4.1",
     "description": "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/data/Store.mjs

@@ -144,9 +144,13 @@ class Store extends Base {
 
         if (items.length > threshold) {
             const me    = this,
+                  total = me.count + items.length,
                   chunk = items.splice(0, threshold);
 
-            // 1. Add the first chunk. This fires 'mutate' -> 'load' and triggers the initial grid render.
+            me.chunkingTotal = total;
+
+            // 1. Add the first chunk. This fires 'mutate' -> 'load' (via onCollectionMutate)
+            //    and triggers the initial grid render. The 'load' event will contain the final total count.
             super.add(me.createRecord(chunk));
 
             // 2. Suspend events to prevent the next 'add' from firing 'load'.
@@ -158,13 +162,15 @@ class Store extends Base {
             // 4. Resume events.
             me.suspendEvents = false;
 
-            // 5. Manually fire a final 'load' event to update the grid's scrollbar.
-            me.fire('load', me.items);
+            // 5. Manually fire a final 'load' event to update the grid's scrollbar and notify other listeners.
+            me.fire('load', {items: me.items, total: me.chunkingTotal});
+
+            delete me.chunkingTotal;
 
-            return me.count
+            return me.count;
         }
 
-        return super.add(this.createRecord(item))
+        return super.add(this.createRecord(item));
     }
 
     /**
@@ -447,7 +453,11 @@ class Store extends Base {
         let me = this;
 
         if (me.isConstructed && !me.isLoading) {
-            me.fire('load', me.items)
+            if (me.chunkingTotal) {
+                me.fire('load', {items: me.items, total: me.chunkingTotal});
+            } else {
+                me.fire('load', {items: me.items});
+            }
         }
     }
 
@@ -478,7 +488,7 @@ class Store extends Base {
         // => break the sync flow to ensure potential listeners got applied
         Promise.resolve().then(() => {
             if (me.isLoaded) {
-                me.fire('load', me.items)
+                me.fire('load', {items: me.items})
             } else if (me.autoLoad) {
                 me.load()
             }

package/src/grid/Body.mjs

@@ -932,7 +932,9 @@ class GridBody extends Component {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
      * @protected
      */
     onStoreLoad(data) {
@@ -944,7 +946,7 @@ class GridBody extends Component {
          * This logic bypasses the standard update() cycle by directly clearing the vdom,
          * vnode cache and the real DOM via textContent.
          */
-        if (data?.length < 1) {
+        if (data?.items.length < 1) {
             const vdomRoot = me.getVdomRoot();
 
             // No change, opt out

package/src/grid/Container.mjs

@@ -565,13 +565,16 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
      * @protected
      */
     onStoreLoad(data) {
-        let me = this;
+        let me         = this,
+            totalCount = data.total ? data.total : this.store.count;
 
-        me.updateRowCount();
+        me.updateRowCount(totalCount);
 
         if (me.store.sorters?.length < 1) {
             me.removeSortingCss()
@@ -664,13 +667,15 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * @param {Boolean} silent=false
+     * @param {Number} [count] The total number of rows in the store. Optional, will use store.count if not provided.
+     * @param {Boolean} [silent=false]
      */
-    updateRowCount(silent=false) {
-        let me = this;
+    updateRowCount(count, silent=false) {
+        let me         = this,
+            finalCount = count ? count : me.store.count;
 
-        this.getVdomRoot()['aria-rowcount'] = me.store.getCount() + 2; // 1 based & the header row counts as well
-        !silent && this.update()
+        me.getVdomRoot()['aria-rowcount'] = finalCount + 2;
+        !silent && me.update()
     }
 }
 

package/src/grid/VerticalScrollbar.mjs

@@ -100,18 +100,19 @@ class VerticalScrollbar extends Component {
                 filter: me.updateScrollHeight,
                 load  : me.updateScrollHeight,
                 scope : me
-            });
-
-            value.getCount() > 0 && me.updateScrollHeight()
+            })
         }
     }
 
     /**
-     *
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
+     * @protected
      */
-    updateScrollHeight() {
+    updateScrollHeight(data) {
         let me           = this,
-            countRecords = me.store.getCount(),
+            countRecords = data.total ? data.total : me.store.count,
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {

package/src/table/Body.mjs

@@ -558,12 +558,39 @@ class TableBody extends Component {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
      * @protected
      */
     onStoreLoad(data) {
         let me = this;
 
+        /*
+         * Fast path to handle clearing all rows (e.g., store.removeAll()).
+         * A full vdom diff against all existing rows is a performance bottleneck.
+         * This logic bypasses the standard update() cycle by directly clearing the vdom,
+         * vnode cache and the real DOM via textContent.
+         */
+        if (data?.items.length < 1) {
+            const vdomRoot = me.getVdomRoot();
+
+            // No change, opt out
+            if (vdomRoot.cn.length < 1) {
+                return
+            }
+
+            vdomRoot.cn = [];
+            me.getVnodeRoot().childNodes = [];
+
+            Neo.applyDeltas(me.appName, {
+                id         : vdomRoot.id,
+                textContent: ''
+            });
+
+            return
+        }
+
         me.createViewData();
 
         if (me.mounted) {