virtua 0.53.2 → 0.53.4

package/lib/svelte/VGrid.svelte

@@ -3,7 +3,7 @@
   import {
     type StateVersion,
     ACTION_ITEMS_LENGTH_CHANGE,
-    ACTION_RELAYOUT,
+    relayout,
     UPDATE_SCROLL_END_EVENT,
     UPDATE_SIZE_EVENT,
     microtask,
@@ -58,7 +58,12 @@
   let spanIndex = $derived(createGridSpanIndex(spans));
   const rowStore = createVirtualStore(rowLayout);
   const colStore = createVirtualStore(colLayout);
-  const driver = createContainerGridDriver(rowStore, colStore);
+  const driver = createContainerGridDriver(
+    rowStore,
+    colStore,
+    rowLayout,
+    colLayout,
+  );
 
   let containerRef: HTMLDivElement | undefined = $state();
 
@@ -108,23 +113,13 @@
     colLayout.$setPinned(headerCols, footerCols);
     const rowLength = getAxisLength(rows);
     const colLength = getAxisLength(cols);
-    if (rowLength !== rowStore.$getItemsLength()) {
-      rowStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [rowLength]);
-    }
-    if (colLength !== colStore.$getItemsLength()) {
-      colStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [colLength]);
-    }
-    rowStore.$update(
-      ACTION_RELAYOUT,
-      rowLayout.$relayout(rowSizes, rowStore.$getVisibleOffset()),
-    );
-    colStore.$update(
-      ACTION_RELAYOUT,
-      colLayout.$relayout(colSizes, colStore.$getVisibleOffset()),
-    );
+    rowStore.$update(ACTION_ITEMS_LENGTH_CHANGE, rowLength);
+    colStore.$update(ACTION_ITEMS_LENGTH_CHANGE, colLength);
+    relayout(rowStore, rowLayout, rowSizes);
+    relayout(colStore, colLayout, colSizes);
   });
-  let rowCount = $derived(stateVersion && rowStore.$getItemsLength());
-  let colCount = $derived(stateVersion && colStore.$getItemsLength());
+  let rowCount = $derived(stateVersion && rowLayout.$getLength());
+  let colCount = $derived(stateVersion && colLayout.$getLength());
   let plan = $derived.by(() => {
     stateVersion;
     return createGridPlan(
@@ -176,8 +171,8 @@
     rowStore.$getItemOffset;
   export const getColOffset: VGridHandle["getColOffset"] =
     colStore.$getItemOffset;
-  export const getRowSize: VGridHandle["getRowSize"] = rowStore.$getItemSize;
-  export const getColSize: VGridHandle["getColSize"] = colStore.$getItemSize;
+  export const getRowSize: VGridHandle["getRowSize"] = rowLayout.$getItemSize;
+  export const getColSize: VGridHandle["getColSize"] = colLayout.$getItemSize;
   export const scrollToIndex: VGridHandle["scrollToIndex"] = (opts) =>
     gridScrollToIndex(
       driver,

package/lib/svelte/VGrid.type.d.ts

@@ -73,7 +73,7 @@ export interface VGridProps<R = number, C = number> extends Omit<ViewportCompone
      */
     keepMounted?: readonly GridCell[];
     /**
-     * Extra space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank cells in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank cells in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/svelte/VMasonry.svelte

@@ -10,7 +10,7 @@
     createContainerDriver,
     createMasonryLayout,
     ACTION_ITEMS_LENGTH_CHANGE,
-    ACTION_RELAYOUT,
+    relayout,
     createVirtualStore,
     getScrollSize as _getScrollSize,
     scrollTo as _scrollTo,
@@ -51,7 +51,7 @@
     cache,
   );
   const store = createVirtualStore(layout);
-  const driver = createContainerDriver(store, false);
+  const driver = createContainerDriver(store, layout, false);
   store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
     stateVersion = store.$getStateVersion();
   });
@@ -94,8 +94,10 @@
       for (let i = start; i <= end; i++) {
         mounted.add(i);
       }
+      // The store may still have the previous length in async mode, as the range does
+      const storeLen = stateVersion && layout.$getLength();
       for (const index of sort([...mounted])) {
-        if (index < len) {
+        if (index < len && index < storeLen) {
           arr.push(index);
         }
       }
@@ -120,15 +122,10 @@
   });
 
   $effect.pre(() => {
-    if (data.length !== store.$getItemsLength()) {
-      store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length]);
-    }
+    store.$update(ACTION_ITEMS_LENGTH_CHANGE, data.length);
   });
   $effect.pre(() => {
-    store.$update(
-      ACTION_RELAYOUT,
-      layout.$relayout(lanesProp, gapProp, store.$getVisibleOffset()),
-    );
+    relayout(store, layout, lanesProp, gapProp);
   });
 
   let prevStateVersion: StateVersion | undefined;
@@ -151,9 +148,9 @@
   export const getItemOffset =
     store.$getItemOffset satisfies VMasonryHandle["getItemOffset"] as VMasonryHandle["getItemOffset"];
   export const getItemSize =
-    store.$getItemSize satisfies VMasonryHandle["getItemSize"] as VMasonryHandle["getItemSize"];
+    layout.$getItemSize satisfies VMasonryHandle["getItemSize"] as VMasonryHandle["getItemSize"];
   export const scrollToIndex: VMasonryHandle["scrollToIndex"] = (index, opts) =>
-    _scrollToIndex(driver, store, index, opts);
+    _scrollToIndex(driver, store, layout, index, opts);
   export const scrollTo: VMasonryHandle["scrollTo"] = (offset) =>
     _scrollTo(driver, offset);
   export const scrollBy: VMasonryHandle["scrollBy"] = (offset) =>
@@ -195,7 +192,7 @@
         offset={stateVersion && store.$getItemOffset(index)}
         crossOffset={toCrossValue(lane / lanes, (lane * gap) / lanes)}
         {crossSize}
-        hide={stateVersion && store.$isUnmeasuredItem(index)}
+        hide={stateVersion && layout.$isSizeEqual(index)}
         resizer={driver.$observeItem}
       />
     {/each}

package/lib/svelte/VMasonry.type.d.ts

@@ -35,7 +35,7 @@ export interface VMasonryProps<T> extends ViewportComponentAttributes {
      */
     itemSize?: number;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/svelte/Virtualizer.svelte

@@ -50,7 +50,7 @@
 
   const layout = createListLayout(data.length, itemSize, cache);
   const store = createVirtualStore(layout, ssrCount);
-  const driver = createContainerDriver(store, horizontal);
+  const driver = createContainerDriver(store, layout, horizontal);
   store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
     stateVersion = store.$getStateVersion();
   });
@@ -92,8 +92,10 @@
       for (let i = start; i <= end; i++) {
         mounted.add(i);
       }
+      // The store may still have the previous length in async mode, as the range does
+      const storeLen = stateVersion && layout.$getLength();
       for (const index of sort([...mounted])) {
-        if (index < len) {
+        if (index < len && index < storeLen) {
           arr.push(index);
         }
       }
@@ -130,9 +132,7 @@
   });
 
   $effect.pre(() => {
-    if (data.length !== store.$getItemsLength()) {
-      store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]);
-    }
+    store.$update(ACTION_ITEMS_LENGTH_CHANGE, data.length, shift);
   });
 
   $effect.pre(() => {
@@ -165,11 +165,11 @@
   export const getItemOffset =
     store.$getItemOffset satisfies VirtualizerHandle["getItemOffset"] as VirtualizerHandle["getItemOffset"];
   export const getItemSize =
-    store.$getItemSize satisfies VirtualizerHandle["getItemSize"] as VirtualizerHandle["getItemSize"];
+    layout.$getItemSize satisfies VirtualizerHandle["getItemSize"] as VirtualizerHandle["getItemSize"];
   export const scrollToIndex: VirtualizerHandle["scrollToIndex"] = (
     index,
     opts,
-  ) => _scrollToIndex(driver, store, index, opts);
+  ) => _scrollToIndex(driver, store, layout, index, opts);
   export const scrollTo: VirtualizerHandle["scrollTo"] = (offset) =>
     _scrollTo(driver, offset);
   export const scrollBy: VirtualizerHandle["scrollBy"] = (offset) =>
@@ -201,7 +201,7 @@
       {index}
       as={itemAs}
       offset={stateVersion && store.$getItemOffset(index)}
-      hide={stateVersion && store.$isUnmeasuredItem(index)}
+      hide={stateVersion && layout.$isSizeEqual(index)}
       {horizontal}
       {isSSR}
       resizer={driver.$observeItem}

package/lib/svelte/Virtualizer.type.d.ts

@@ -34,7 +34,7 @@ export interface VirtualizerProps<T> {
      */
     itemProps?: ItemProps<T>;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/svelte/WindowVirtualizer.svelte

@@ -40,7 +40,7 @@
 
   const layout = createListLayout(data.length, itemSize, cache);
   const store = createVirtualStore(layout, ssrCount);
-  const driver = createWindowDriver(store, horizontal);
+  const driver = createWindowDriver(store, layout, horizontal);
   store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
     stateVersion = store.$getStateVersion();
   });
@@ -99,9 +99,7 @@
   });
 
   $effect.pre(() => {
-    if (data.length !== store.$getItemsLength()) {
-      store.$update(ACTION_ITEMS_LENGTH_CHANGE, [data.length, shift]);
-    }
+    store.$update(ACTION_ITEMS_LENGTH_CHANGE, data.length, shift);
   });
 
   let prevStateVersion: StateVersion | undefined;
@@ -124,11 +122,11 @@
   export const getItemOffset =
     store.$getItemOffset satisfies WindowVirtualizerHandle["getItemOffset"] as WindowVirtualizerHandle["getItemOffset"];
   export const getItemSize =
-    store.$getItemSize satisfies WindowVirtualizerHandle["getItemSize"] as WindowVirtualizerHandle["getItemSize"];
+    layout.$getItemSize satisfies WindowVirtualizerHandle["getItemSize"] as WindowVirtualizerHandle["getItemSize"];
   export const scrollToIndex: WindowVirtualizerHandle["scrollToIndex"] = (
     index,
     opts,
-  ) => _scrollToIndex(driver, store, index, opts);
+  ) => _scrollToIndex(driver, store, layout, index, opts);
 
   let containerStyle = $derived(
     styleToString({
@@ -156,7 +154,7 @@
       {index}
       as="div"
       offset={stateVersion && store.$getItemOffset(index)}
-      hide={stateVersion && store.$isUnmeasuredItem(index)}
+      hide={stateVersion && layout.$isSizeEqual(index)}
       {horizontal}
       {isSSR}
       resizer={driver.$observeItem}

package/lib/svelte/WindowVirtualizer.type.d.ts

@@ -18,7 +18,7 @@ export interface WindowVirtualizerProps<T> {
      */
     getKey?: (data: T, index: number) => string | number;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/vue/VGrid.d.ts

@@ -65,7 +65,7 @@ export interface VGridProps<R = number, C = number> extends PublicProps {
      */
     keepMounted?: readonly GridCellType[];
     /**
-     * Extra space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank cells in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank cells in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/vue/VMasonry.d.ts

@@ -72,7 +72,7 @@ export interface VMasonryProps<T> extends PublicProps {
      */
     itemSize?: number;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/vue/Virtualizer.d.ts

@@ -10,7 +10,7 @@ export interface VirtualizerProps<T = unknown> extends PublicProps {
      */
     data: T[];
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;

package/lib/vue/WindowVirtualizer.d.ts

@@ -9,7 +9,7 @@ export interface WindowVirtualizerProps<T = unknown> extends PublicProps {
      */
     data: T[];
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     bufferSize?: number;