@vaadin/component-base 24.3.2 → 24.4.0-dev.223e39f050

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.3.2",
+  "version": "24.4.0-dev.223e39f050",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "615ee9dd4611f52db90445b0db13dcbb91ca74d4"
+  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
 }

package/src/data-provider-controller/cache.js

@@ -16,13 +16,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items.
-   *
-   * @type {number}
-   */
-  size = 0;
-
   /**
    * The number of items to display per page.
    *
@@ -58,6 +51,14 @@ export class Cache {
    */
   __subCacheByIndex = {};
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  __size = 0;
+
   /**
    * The total number of items, including items from expanded sub-caches.
    *
@@ -136,6 +137,46 @@ export class Cache {
     return this.flatSize;
   }
 
+  /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  get size() {
+    return this.__size;
+  }
+
+  /**
+   * Sets the number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  set size(size) {
+    const oldSize = this.__size;
+    if (oldSize === size) {
+      return;
+    }
+
+    this.__size = size;
+
+    if (this.context.placeholder !== undefined) {
+      this.items.length = size;
+      for (let i = 0; i < size; i++) {
+        // eslint-disable-next-line logical-assignment-operators
+        this.items[i] = this.items[i] || this.context.placeholder;
+      }
+    }
+
+    Object.keys(this.pendingRequests).forEach((page) => {
+      const startIndex = parseInt(page) * this.pageSize;
+      if (startIndex >= this.size) {
+        delete this.pendingRequests[page];
+      }
+    });
+  }
+
   /**
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */

package/src/data-provider-controller/data-provider-controller.js

@@ -65,12 +65,27 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  constructor(host, { size, pageSize, isExpanded, getItemId, dataProvider, dataProviderParams }) {
+  /**
+   * Indicates whether any data has been loaded since the last cache clear.
+   *
+   * @type {boolean}
+   */
+  hasData = false;
+
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   *
+   * @type {undefined | object}
+   */
+  placeholder;
+
+  constructor(host, { size, pageSize, isExpanded, getItemId, placeholder, dataProvider, dataProviderParams }) {
     super();
     this.host = host;
     this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
+    this.placeholder = placeholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
     this.rootCache = this.__createRootCache(size);
@@ -87,6 +102,7 @@ export class DataProviderController extends EventTarget {
   get __cacheContext() {
     return {
       isExpanded: this.isExpanded,
+      placeholder: this.placeholder,
       // The controller instance is needed to ensure deprecated cache methods work.
       __controller: this,
     };
@@ -133,6 +149,7 @@ export class DataProviderController extends EventTarget {
    */
   clearCache() {
     this.rootCache = this.__createRootCache(this.rootCache.size);
+    this.hasData = false;
   }
 
   /**
@@ -187,7 +204,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (!item) {
+    if (this.__isPlaceholder(item)) {
       this.__loadCachePage(cache, page);
     }
   }
@@ -202,7 +219,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexHierarchy(flatIndex) {
     const { cache, item, index } = this.getFlatIndexContext(flatIndex);
 
-    if (item && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (!this.__isPlaceholder(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
       this.__loadCachePage(subCache, 0);
     }
@@ -237,16 +254,22 @@ export class DataProviderController extends EventTarget {
     }
 
     const callback = (items, size) => {
+      if (cache.pendingRequests[page] !== callback) {
+        return;
+      }
+
+      cache.setPage(page, items);
+
       if (size !== undefined) {
         cache.size = size;
       } else if (params.parentItem) {
         cache.size = items.length;
       }
 
-      cache.setPage(page, items);
-
       this.recalculateFlatSize();
 
+      this.hasData = true;
+
       this.dispatchEvent(new CustomEvent('page-received'));
 
       delete cache.pendingRequests[page];
@@ -260,4 +283,9 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
+
+  /** @private */
+  __isPlaceholder(item) {
+    return this.placeholder ? item === this.placeholder : !item;
+  }
 }

package/src/define.js

@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.3.2';
+        return '24.4.0-alpha1';
       },
     });