Batch updates and reduce array creation

Author: inokawa

e2e/VList.spec.ts

@@ -99,7 +99,7 @@ test.describe("smoke", () => {
     // check if last is displayed
     const last = component.getByText("999", { exact: true });
     await expect(last).toBeVisible();
-    expect(await relativeBottom(component, last)).toEqual(0);
+    expectInRange(await relativeBottom(component, last), { min: 0, max: 0.5 });
     // check if start is not displayed
     expect(await page.evaluate(() => (window as any)._displayed)).toBe(false);
   });

src/core/resizer.ts

@@ -52,7 +52,6 @@ export const createResizer = (
   const mountedIndexes = new WeakMap<Element, number>();
 
   const resizeObserver = createResizeObserver((entries) => {
-    const resizes: ItemResize[] = [];
     for (const { target, contentRect } of entries) {
       // Skip zero-sized rects that may be observed under `display: none` style
       if (!(target as HTMLElement).offsetParent) continue;
@@ -62,14 +61,10 @@ export const createResizer = (
       } else {
         const index = mountedIndexes.get(target);
         if (index != NULL) {
-          resizes.push([index, contentRect[sizeKey]]);
+          store.$update(ACTION_ITEM_RESIZE, [index, contentRect[sizeKey]]);
         }
       }
     }
-
-    if (resizes.length) {
-      store.$update(ACTION_ITEM_RESIZE, resizes);
-    }
   });
 
   return {
@@ -106,20 +101,15 @@ export const createWindowResizer = (
   const mountedIndexes = new WeakMap<Element, number>();
 
   const resizeObserver = createResizeObserver((entries) => {
-    const resizes: ItemResize[] = [];
     for (const { target, contentRect } of entries) {
       // Skip zero-sized rects that may be observed under `display: none` style
       if (!(target as HTMLElement).offsetParent) continue;
 
       const index = mountedIndexes.get(target);
       if (index != NULL) {
-        resizes.push([index, contentRect[sizeKey]]);
+        store.$update(ACTION_ITEM_RESIZE, [index, contentRect[sizeKey]]);
       }
     }
-
-    if (resizes.length) {
-      store.$update(ACTION_ITEM_RESIZE, resizes);
-    }
   });
 
   let cleanupOnWindowResize: (() => void) | undefined;
@@ -220,7 +210,6 @@ export const createGridResizer = (
     }
 
     if (resizedRows.size) {
-      const heightResizes: ItemResize[] = [];
       resizedRows.forEach((rowIndex) => {
         let maxHeight = 0;
         maybeCachedColIndexes.forEach((colIndex) => {
@@ -230,13 +219,11 @@ export const createGridResizer = (
           }
         });
         if (maxHeight) {
-          heightResizes.push([rowIndex, maxHeight]);
+          rowStore.$update(ACTION_ITEM_RESIZE, [rowIndex, maxHeight]);
         }
       });
-      rowStore.$update(ACTION_ITEM_RESIZE, heightResizes);
     }
     if (resizedCols.size) {
-      const widthResizes: ItemResize[] = [];
       resizedCols.forEach((colIndex) => {
         let maxWidth = 0;
         maybeCachedRowIndexes.forEach((rowIndex) => {
@@ -246,10 +233,9 @@ export const createGridResizer = (
           }
         });
         if (maxWidth) {
-          widthResizes.push([colIndex, maxWidth]);
+          colStore.$update(ACTION_ITEM_RESIZE, [colIndex, maxWidth]);
         }
       });
-      colStore.$update(ACTION_ITEM_RESIZE, widthResizes);
     }
   });
 
@@ -268,20 +254,20 @@ export const createGridResizer = (
       };
     },
     $resizeCols(cols: ItemResize[]) {
-      for (const [c] of cols) {
+      for (const col of cols) {
         for (let r = 0; r < rowStore.$getItemsLength(); r++) {
-          sizeCache.delete(getKey(r, c));
+          sizeCache.delete(getKey(r, col[0]));
         }
+        colStore.$update(ACTION_ITEM_RESIZE, col);
       }
-      colStore.$update(ACTION_ITEM_RESIZE, cols);
     },
     $resizeRows(rows: ItemResize[]) {
-      for (const [r] of rows) {
+      for (const row of rows) {
         for (let c = 0; c < colStore.$getItemsLength(); c++) {
-          sizeCache.delete(getKey(r, c));
+          sizeCache.delete(getKey(row[0], c));
         }
+        rowStore.$update(ACTION_ITEM_RESIZE, row);
       }
-      rowStore.$update(ACTION_ITEM_RESIZE, rows);
     },
     $dispose: resizeObserver._dispose,
   };