@vaadin/component-base 24.5.0-alpha3 → 24.5.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.5.0-alpha3",
+  "version": "24.5.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "9ccd96c77a1568e625fa44f6809e765c0ba91403"
+  "gitHead": "a2cd3079183a097b793073eeffd3bd59dec2b664"
 }

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.
    *
@@ -76,7 +77,7 @@ export class Cache {
   constructor(context, pageSize, size, parentCache, parentCacheIndex) {
     this.context = context;
     this.pageSize = pageSize;
-    this.size = size || 0;
+    this.size = size;
     this.parentCache = parentCache;
     this.parentCacheIndex = parentCacheIndex;
     this.__flatSize = size || 0;
@@ -136,6 +137,43 @@ export class Cache {
     return this.flatSize;
   }
 
+  /**
+   * The number of items.
+   *
+   * @return {number}
+   */
+  get size() {
+    return this.__size;
+  }
+
+  /**
+   * Sets the number of items.
+   *
+   * @param {number} size
+   */
+  set size(size) {
+    const oldSize = this.__size;
+    if (oldSize === size) {
+      return;
+    }
+
+    this.__size = size;
+
+    if (this.context.placeholder !== undefined) {
+      this.items.length = size || 0;
+      for (let i = 0; i < size || 0; i++) {
+        this.items[i] ||= this.context.placeholder;
+      }
+    }
+
+    Object.keys(this.pendingRequests).forEach((page) => {
+      const startIndex = parseInt(page) * this.pageSize;
+      if (startIndex >= this.size || 0) {
+        delete this.pendingRequests[page];
+      }
+    });
+  }
+
   /**
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
@@ -160,7 +198,10 @@ export class Cache {
   setPage(page, items) {
     const startIndex = page * this.pageSize;
     items.forEach((item, i) => {
-      this.items[startIndex + i] = item;
+      const itemIndex = startIndex + i;
+      if (this.size === undefined || itemIndex < this.size) {
+        this.items[itemIndex] = item;
+      }
     });
   }
 

package/src/data-provider-controller/data-provider-controller.d.ts

@@ -43,11 +43,6 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
    */
   dataProviderParams: () => TDataProviderParams;
 
-  /**
-   * A number of items in the root cache.
-   */
-  size?: number;
-
   /**
    * A number of items to display per page.
    */
@@ -69,11 +64,23 @@ export class DataProviderController<TItem, TDataProviderParams extends Record<st
    */
   rootCache: Cache<TItem>;
 
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   */
+  placeholder?: unknown;
+
+  /**
+   * A callback that returns whether the given item is a placeholder.
+   */
+  isPlaceholder?: (item: unknown) => boolean;
+
   constructor(
     host: HTMLElement,
     config: {
       size?: number;
       pageSize: number;
+      placeholder?: unknown;
+      isPlaceholder?(item: unknown): boolean;
       getItemId(item: TItem): unknown;
       isExpanded(item: TItem): boolean;
       dataProvider: DataProvider<TItem, TDataProviderParams>;

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

@@ -29,13 +29,6 @@ export class DataProviderController extends EventTarget {
    */
   dataProviderParams;
 
-  /**
-   * A number of items in the root cache.
-   *
-   * @type {number}
-   */
-  size;
-
   /**
    * A number of items to display per page.
    *
@@ -65,12 +58,31 @@ export class DataProviderController extends EventTarget {
    */
   rootCache;
 
-  constructor(host, { size, pageSize, isExpanded, getItemId, dataProvider, dataProviderParams }) {
+  /**
+   * A placeholder item that is used to indicate that the item is not loaded yet.
+   *
+   * @type {unknown}
+   */
+  placeholder;
+
+  /**
+   * A callback that returns whether the given item is a placeholder.
+   *
+   * @type {(item: unknown) => boolean}
+   */
+  isPlaceholder;
+
+  constructor(
+    host,
+    { size, pageSize, isExpanded, getItemId, isPlaceholder, placeholder, dataProvider, dataProviderParams },
+  ) {
     super();
     this.host = host;
     this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
+    this.placeholder = placeholder;
+    this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
     this.rootCache = this.__createRootCache(size);
@@ -87,6 +99,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,
     };
@@ -187,7 +200,7 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (!item) {
+    if (!this.__isItemLoaded(item)) {
       this.__loadCachePage(cache, page);
     }
   }
@@ -202,7 +215,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.__isItemLoaded(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
       this.__loadCachePage(subCache, 0);
     }
@@ -264,4 +277,14 @@ export class DataProviderController extends EventTarget {
 
     this.dataProvider(params, callback);
   }
+
+  /** @private */
+  __isItemLoaded(item) {
+    if (this.isPlaceholder) {
+      return !this.isPlaceholder(item);
+    } else if (this.placeholder) {
+      return item !== this.placeholder;
+    }
+    return !!item;
+  }
 }

package/src/define.js

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