virtua 0.53.3 → 0.53.5

package/lib/svelte/GridRow.svelte

@@ -26,8 +26,10 @@
 
 <div role="row" aria-rowindex={state.$row + 1} {style}>
   {#each state.$cells as cell (cell.$col)}
-    <!-- Guard for experimental.async: true, which runs the each block before $effect.pre -->
+    <!-- The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update -->
+    <!-- https://svelte.dev/docs/svelte/await-expressions#Breaking-changes -->
     <!-- https://github.com/inokawa/virtua/pull/847 -->
+    <!-- https://github.com/inokawa/virtua/pull/1018 -->
     {#if cell.$col < getAxisLength(cols)}
       <GridCell
         state={cell}

package/lib/svelte/GridRowGroup.svelte

@@ -27,8 +27,10 @@
 <!-- https://www.w3.org/TR/wai-aria-1.2/#rowgroup -->
 <div role="rowgroup" {style}>
   {#each state.$rows as row (row.$row)}
-    <!-- Guard for experimental.async: true, which runs the each block before $effect.pre -->
+    <!-- The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update -->
+    <!-- https://svelte.dev/docs/svelte/await-expressions#Breaking-changes -->
     <!-- https://github.com/inokawa/virtua/pull/847 -->
+    <!-- https://github.com/inokawa/virtua/pull/1018 -->
     {#if row.$row < getAxisLength(rows)}
       <GridRow
         state={row}

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,
@@ -247,8 +242,10 @@
           resizer={driver.$observeItem}
         />
       {:else}
-        <!-- Guard for experimental.async: true, which runs the each block before $effect.pre -->
+        <!-- The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update -->
+        <!-- https://svelte.dev/docs/svelte/await-expressions#Breaking-changes -->
         <!-- https://github.com/inokawa/virtua/pull/847 -->
+        <!-- https://github.com/inokawa/virtua/pull/1018 -->
         {#if state.$row < getAxisLength(rows)}
           <GridRow
             {state}

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,12 +10,13 @@
     createContainerDriver,
     createMasonryLayout,
     ACTION_ITEMS_LENGTH_CHANGE,
-    ACTION_RELAYOUT,
+    relayout,
     createVirtualStore,
     getScrollSize as _getScrollSize,
     scrollTo as _scrollTo,
     scrollBy as _scrollBy,
     scrollToIndex as _scrollToIndex,
+    min,
     sort,
   } from "../core/index.js";
   import { defaultGetKey, isSameRange, styleToString } from "./utils.js";
@@ -51,7 +52,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();
   });
@@ -86,7 +87,11 @@
   let crossSize = $derived(toCrossValue(1 / lanes, gap / lanes - gap));
 
   let indexes = $derived.by(() => {
-    const len = data.length;
+    // The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update
+    // https://svelte.dev/docs/svelte/await-expressions#Breaking-changes
+    // https://github.com/inokawa/virtua/pull/847
+    // https://github.com/inokawa/virtua/pull/1018
+    const len = stateVersion && min(data.length, layout.$getLength());
     const [start, end] = range;
     const arr: number[] = [];
     if (keepMounted) {
@@ -101,8 +106,6 @@
       }
     } else {
       for (let i = start; i <= end; i++) {
-        // Guard for experimental.async: true, which runs the each block before $effect.pre
-        // https://github.com/inokawa/virtua/pull/847
         if (i < len) {
           arr.push(i);
         }
@@ -120,15 +123,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 +149,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 +193,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

@@ -16,6 +16,7 @@
     createVirtualStore,
     createListLayout,
     getScrollSize as _getScrollSize,
+    min,
     sort,
   } from "../core/index.js";
   import { defaultGetKey, isSameRange, styleToString } from "./utils.js";
@@ -50,7 +51,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();
   });
@@ -83,7 +84,11 @@
   let totalSize = $derived(stateVersion && store.$getTotalSize());
 
   let indexes = $derived.by(() => {
-    const len = data.length;
+    // The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update
+    // https://svelte.dev/docs/svelte/await-expressions#Breaking-changes
+    // https://github.com/inokawa/virtua/pull/847
+    // https://github.com/inokawa/virtua/pull/1018
+    const len = stateVersion && min(data.length, layout.$getLength());
 
     const [start, end] = range;
     const arr: number[] = [];
@@ -99,8 +104,6 @@
       }
     } else {
       for (let i = start; i <= end; i++) {
-        // Guard for experimental.async: true, which runs the each block before $effect.pre
-        // https://github.com/inokawa/virtua/pull/847
         if (i < len) {
           arr.push(i);
         }
@@ -130,15 +133,11 @@
   });
 
   $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(() => {
-    if (startMargin !== store.$getStartSpacerSize()) {
-      store.$update(ACTION_START_OFFSET_CHANGE, startMargin);
-    }
+    store.$update(ACTION_START_OFFSET_CHANGE, startMargin);
   });
 
   let prevStateVersion: StateVersion | undefined;
@@ -165,11 +164,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 +200,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

@@ -13,6 +13,7 @@
     getScrollSize as _getScrollSize,
     createWindowDriver,
     scrollToIndex as _scrollToIndex,
+    min,
   } from "../core/index.js";
   import { defaultGetKey, isSameRange, styleToString } from "./utils.js";
   import ListItem from "./ListItem.svelte";
@@ -40,7 +41,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();
   });
@@ -74,13 +75,15 @@
   let totalSize = $derived(stateVersion && store.$getTotalSize());
 
   let indexes = $derived.by(() => {
-    const len = data.length;
+    // The each block runs before $effect.pre with experimental.async, so the store may still have the length before the update
+    // https://svelte.dev/docs/svelte/await-expressions#Breaking-changes
+    // https://github.com/inokawa/virtua/pull/847
+    // https://github.com/inokawa/virtua/pull/1018
+    const len = stateVersion && min(data.length, layout.$getLength());
 
     const [start, end] = range;
     const arr: number[] = [];
     for (let i = start; i <= end; i++) {
-      // Guard for experimental.async: true, which runs the each block before $effect.pre
-      // https://github.com/inokawa/virtua/pull/847
       if (i < len) {
         arr.push(i);
       }
@@ -99,9 +102,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 +125,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 +157,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;