@vaadin/component-base - npm Package Compare versions

Comparing version 24.5.0-alpha3 to 24.5.0-alpha4

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "24.5.0-alpha3",
+  "version": "24.5.0-alpha4",
   "publishConfig": {
@@ -45,3 +45,3 @@ "access": "public"
   },
-  "gitHead": "9ccd96c77a1568e625fa44f6809e765c0ba91403"
+  "gitHead": "a2cd3079183a097b793073eeffd3bd59dec2b664"
 }

src/data-provider-controller/cache.js

@@ -20,9 +20,2 @@ /**
   /**
-   * The number of items.
-   *
-   * @type {number}
-   */
-  size = 0;
-
-  /**
    * The number of items to display per page.
@@ -63,2 +56,10 @@ *
   /**
+   * The number of items.
+   *
+   * @type {number}
+   * @private
+   */
+  __size = 0;
+
+  /**
    * The total number of items, including items from expanded sub-caches.
@@ -81,3 +82,3 @@ *
     this.pageSize = pageSize;
-    this.size = size || 0;
+    this.size = size;
     this.parentCache = parentCache;
@@ -143,2 +144,39 @@ this.parentCacheIndex = parentCacheIndex;
   /**
+   * 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.
@@ -167,3 +205,6 @@ */
     items.forEach((item, i) => {
-      this.items[startIndex + i] = item;
+      const itemIndex = startIndex + i;
+      if (this.size === undefined || itemIndex < this.size) {
+        this.items[itemIndex] = item;
+      }
     });
@@ -170,0 +211,0 @@ }

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

@@ -47,7 +47,2 @@ /**
   /**
-   * A number of items in the root cache.
-   */
-  size?: number;
-
-  /**
    * A number of items to display per page.
@@ -73,2 +68,12 @@ */
 
+  /**
+   * 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(
@@ -79,2 +84,4 @@ host: HTMLElement,
       pageSize: number;
+      placeholder?: unknown;
+      isPlaceholder?(item: unknown): boolean;
       getItemId(item: TItem): unknown;
@@ -81,0 +88,0 @@ isExpanded(item: TItem): boolean;

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

@@ -33,9 +33,2 @@ /**
   /**
-   * A number of items in the root cache.
-   *
-   * @type {number}
-   */
-  size;
-
-  /**
    * A number of items to display per page.
@@ -69,3 +62,20 @@ *
 
-  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();
@@ -76,2 +86,4 @@ this.host = host;
     this.isExpanded = isExpanded;
+    this.placeholder = placeholder;
+    this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
@@ -93,2 +105,3 @@ this.dataProviderParams = dataProviderParams;
       isExpanded: this.isExpanded,
+      placeholder: this.placeholder,
       // The controller instance is needed to ensure deprecated cache methods work.
@@ -194,3 +207,3 @@ __controller: this,
 
-    if (!item) {
+    if (!this.__isItemLoaded(item)) {
       this.__loadCachePage(cache, page);
@@ -210,3 +223,3 @@ }
 
-    if (item && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (this.__isItemLoaded(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
@@ -273,2 +286,12 @@ this.__loadCachePage(subCache, 0);
   }
+
+  /** @private */
+  __isItemLoaded(item) {
+    if (this.isPlaceholder) {
+      return !this.isPlaceholder(item);
+    } else if (this.placeholder) {
+      return item !== this.placeholder;
+    }
+    return !!item;
+  }
 }

src/define.js

@@ -12,3 +12,3 @@ /**
       get() {
-        return '24.5.0-alpha3';
+        return '24.5.0-alpha4';
       },
@@ -15,0 +15,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

216031

increased by0.8%

Lines of code

6411

increased by0.99%

No dependency changes