virtua 0.53.0 → 0.53.2

package/lib/solid/types.d.ts

@@ -1,5 +1,5 @@
 import { JSX, ParentComponent } from 'solid-js';
-export type ViewportComponentAttributes = Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref" | "children" | "style" | "onScroll" | "onScrollEnd"> & {
+export type ViewportComponentAttributes = Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref" | "children" | "style" | "onScroll" | "onScrollEnd" | "onResize"> & {
     style?: JSX.CSSProperties;
 };
 export interface CustomContainerComponentProps {

package/lib/svelte/VGrid.svelte

@@ -5,6 +5,8 @@
     ACTION_ITEMS_LENGTH_CHANGE,
     ACTION_RELAYOUT,
     UPDATE_SCROLL_END_EVENT,
+    UPDATE_SIZE_EVENT,
+    microtask,
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
     createContainerGridDriver,
@@ -45,6 +47,7 @@
     onverticalscroll,
     onhorizontalscroll,
     onscrollend,
+    onresize,
     ...rest
   }: Props = $props();
 
@@ -86,6 +89,19 @@
   };
   rowStore.$subscribe(UPDATE_SCROLL_END_EVENT, notifyScrollEnd);
   colStore.$subscribe(UPDATE_SCROLL_END_EVENT, notifyScrollEnd);
+  // Notify once after both stores are updated with the sizes observed together
+  let resized: boolean | undefined;
+  const notifyResize = () => {
+    if (!resized) {
+      resized = true;
+      microtask(() => {
+        resized = false;
+        onresize && onresize();
+      });
+    }
+  };
+  rowStore.$subscribe(UPDATE_SIZE_EVENT, notifyResize);
+  colStore.$subscribe(UPDATE_SIZE_EVENT, notifyResize);
 
   $effect.pre(() => {
     rowLayout.$setPinned(headerRows, footerRows);
@@ -98,8 +114,14 @@
     if (colLength !== colStore.$getItemsLength()) {
       colStore.$update(ACTION_ITEMS_LENGTH_CHANGE, [colLength]);
     }
-    rowStore.$update(ACTION_RELAYOUT, rowSizes);
-    colStore.$update(ACTION_RELAYOUT, colSizes);
+    rowStore.$update(
+      ACTION_RELAYOUT,
+      rowLayout.$relayout(rowSizes, rowStore.$getVisibleOffset()),
+    );
+    colStore.$update(
+      ACTION_RELAYOUT,
+      colLayout.$relayout(colSizes, colStore.$getVisibleOffset()),
+    );
   });
   let rowCount = $derived(stateVersion && rowStore.$getItemsLength());
   let colCount = $derived(stateVersion && colStore.$getItemsLength());
@@ -148,10 +170,8 @@
     rowStore.$getViewportSize;
   export const getViewportWidth: VGridHandle["getViewportWidth"] =
     colStore.$getViewportSize;
-  export const findRowIndex: VGridHandle["findRowIndex"] =
-    rowStore.$findItemIndex;
-  export const findColIndex: VGridHandle["findColIndex"] =
-    colStore.$findItemIndex;
+  export const findRowIndex: VGridHandle["findRowIndex"] = rowLayout.$findIndex;
+  export const findColIndex: VGridHandle["findColIndex"] = colLayout.$findIndex;
   export const getRowOffset: VGridHandle["getRowOffset"] =
     rowStore.$getItemOffset;
   export const getColOffset: VGridHandle["getColOffset"] =

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

@@ -102,6 +102,10 @@ export interface VGridProps<R = number, C = number> extends Omit<ViewportCompone
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onresize?: () => void;
 }
 /**
  * Methods of {@link VGrid}.

package/lib/svelte/VList.svelte

@@ -19,6 +19,7 @@
     children,
     onscroll,
     onscrollend,
+    onresize,
     ...rest
   }: Props = $props();
 
@@ -86,5 +87,6 @@
     {itemProps}
     {onscroll}
     {onscrollend}
+    {onresize}
   />
 </div>

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

@@ -3,7 +3,7 @@ import { VirtualizerHandle, VirtualizerProps } from './Virtualizer.type.js';
 /**
  * Props of {@link VList}.
  */
-export interface VListProps<T> extends Pick<VirtualizerProps<T>, "data" | "getKey" | "bufferSize" | "itemSize" | "ssrCount" | "shift" | "horizontal" | "children" | "onscroll" | "onscrollend" | "keepMounted" | "cache" | "itemProps">, ViewportComponentAttributes {
+export interface VListProps<T> extends Pick<VirtualizerProps<T>, "data" | "getKey" | "bufferSize" | "itemSize" | "ssrCount" | "shift" | "horizontal" | "children" | "onscroll" | "onscrollend" | "onresize" | "keepMounted" | "cache" | "itemProps">, ViewportComponentAttributes {
 }
 /**
  * Methods of {@link VList}.

package/lib/svelte/VMasonry.svelte

@@ -4,6 +4,7 @@
     type ItemsRange,
     type StateVersion,
     UPDATE_SCROLL_END_EVENT,
+    UPDATE_SIZE_EVENT,
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
     createContainerDriver,
@@ -15,6 +16,7 @@
     scrollTo as _scrollTo,
     scrollBy as _scrollBy,
     scrollToIndex as _scrollToIndex,
+    sort,
   } from "../core/index.js";
   import { defaultGetKey, isSameRange, styleToString } from "./utils.js";
   import MasonryItem from "./MasonryItem.svelte";
@@ -32,10 +34,12 @@
     gap: gapProp,
     itemSize,
     bufferSize,
+    keepMounted,
     cache,
     children,
     onscroll,
     onscrollend,
+    onresize,
     ...rest
   }: Props = $props();
 
@@ -57,6 +61,9 @@
   store.$subscribe(UPDATE_SCROLL_END_EVENT, () => {
     onscrollend && onscrollend();
   });
+  store.$subscribe(UPDATE_SIZE_EVENT, () => {
+    onresize && onresize();
+  });
 
   let containerRef: HTMLDivElement | undefined = $state();
 
@@ -82,11 +89,23 @@
     const len = data.length;
     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);
+    if (keepMounted) {
+      const mounted = new Set(keepMounted);
+      for (let i = start; i <= end; i++) {
+        mounted.add(i);
+      }
+      for (const index of sort([...mounted])) {
+        if (index < len) {
+          arr.push(index);
+        }
+      }
+    } 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);
+        }
       }
     }
     return arr;
@@ -106,8 +125,10 @@
     }
   });
   $effect.pre(() => {
-    layout.$setOptions(lanesProp, gapProp);
-    store.$update(ACTION_RELAYOUT, undefined);
+    store.$update(
+      ACTION_RELAYOUT,
+      layout.$relayout(lanesProp, gapProp, store.$getVisibleOffset()),
+    );
   });
 
   let prevStateVersion: StateVersion | undefined;

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

@@ -39,6 +39,10 @@ export interface VMasonryProps<T> extends ViewportComponentAttributes {
      * @defaultValue 200
      */
     bufferSize?: number;
+    /**
+     * List of indexes that should be always mounted, even when off screen.
+     */
+    keepMounted?: readonly number[];
     /**
      * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link VMasonryHandle.getCache}.
      *
@@ -54,6 +58,10 @@ export interface VMasonryProps<T> extends ViewportComponentAttributes {
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onresize?: () => void;
 }
 /**
  * Methods of {@link VMasonry}.

package/lib/svelte/Virtualizer.svelte

@@ -6,6 +6,7 @@
     type ItemsRange,
     type StateVersion,
     UPDATE_SCROLL_END_EVENT,
+    UPDATE_SIZE_EVENT,
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
     createContainerDriver,
@@ -44,6 +45,7 @@
     children,
     onscroll,
     onscrollend,
+    onresize,
   }: Props = $props();
 
   const layout = createListLayout(data.length, itemSize, cache);
@@ -58,6 +60,9 @@
   store.$subscribe(UPDATE_SCROLL_END_EVENT, () => {
     onscrollend && onscrollend();
   });
+  store.$subscribe(UPDATE_SIZE_EVENT, () => {
+    onresize && onresize();
+  });
 
   let isSSR = $state(!!ssrCount);
 
@@ -153,8 +158,10 @@
     )) satisfies VirtualizerHandle["getScrollSize"] as VirtualizerHandle["getScrollSize"];
   export const getViewportSize =
     store.$getViewportSize satisfies VirtualizerHandle["getViewportSize"] as VirtualizerHandle["getViewportSize"];
-  export const findItemIndex =
-    store.$findItemIndex satisfies VirtualizerHandle["findItemIndex"] as VirtualizerHandle["findItemIndex"];
+  export const findItemIndex = ((offset) =>
+    layout.$findIndex(
+      offset - store.$getStartSpacerSize(),
+    )) satisfies VirtualizerHandle["findItemIndex"] as VirtualizerHandle["findItemIndex"];
   export const getItemOffset =
     store.$getItemOffset satisfies VirtualizerHandle["getItemOffset"] as VirtualizerHandle["getItemOffset"];
   export const getItemSize =

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

@@ -86,6 +86,10 @@ export interface VirtualizerProps<T> {
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onresize?: () => void;
 }
 /**
  * Methods of {@link Virtualizer}.

package/lib/svelte/WindowVirtualizer.svelte

@@ -5,6 +5,7 @@
     type ItemsRange,
     type StateVersion,
     UPDATE_SCROLL_END_EVENT,
+    UPDATE_SIZE_EVENT,
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
     createVirtualStore,
@@ -34,6 +35,7 @@
     children,
     onscroll,
     onscrollend,
+    onresize,
   }: Props = $props();
 
   const layout = createListLayout(data.length, itemSize, cache);
@@ -49,6 +51,9 @@
   store.$subscribe(UPDATE_SCROLL_END_EVENT, () => {
     onscrollend && onscrollend();
   });
+  store.$subscribe(UPDATE_SIZE_EVENT, () => {
+    onresize && onresize();
+  });
 
   let isSSR = $state(!!ssrCount);
 
@@ -112,8 +117,10 @@
     store.$getScrollOffset satisfies WindowVirtualizerHandle["getScrollOffset"] as WindowVirtualizerHandle["getScrollOffset"];
   export const getViewportSize =
     store.$getViewportSize satisfies WindowVirtualizerHandle["getViewportSize"] as WindowVirtualizerHandle["getViewportSize"];
-  export const findItemIndex =
-    store.$findItemIndex satisfies WindowVirtualizerHandle["findItemIndex"] as WindowVirtualizerHandle["findItemIndex"];
+  export const findItemIndex = ((offset) =>
+    layout.$findIndex(
+      offset - store.$getStartSpacerSize(),
+    )) satisfies WindowVirtualizerHandle["findItemIndex"] as WindowVirtualizerHandle["findItemIndex"];
   export const getItemOffset =
     store.$getItemOffset satisfies WindowVirtualizerHandle["getItemOffset"] as WindowVirtualizerHandle["getItemOffset"];
   export const getItemSize =

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

@@ -57,6 +57,10 @@ export interface WindowVirtualizerProps<T> {
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onresize?: () => void;
 }
 /**
  * Methods of {@link WindowVirtualizer}.

package/lib/svelte/types.d.ts

@@ -1,2 +1,2 @@
 import { HTMLAttributes } from 'svelte/elements';
-export type ViewportComponentAttributes = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onscroll" | "onscrollend">;
+export type ViewportComponentAttributes = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onscroll" | "onscrollend" | "onresize">;

package/lib/vue/VGrid.d.ts

@@ -94,6 +94,10 @@ export interface VGridProps<R = number, C = number> extends PublicProps {
      * Callback invoked when scrolling stops.
      */
     onScrollEnd?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onResize?: () => void;
 }
 /**
  * Methods of {@link VGrid}.

package/lib/vue/VList.d.ts

@@ -8,7 +8,7 @@ export interface VListHandle extends VirtualizerHandle {
 /**
  * Props of {@link VList}.
  */
-export interface VListProps<T = unknown> extends PublicProps, Pick<VirtualizerProps<T>, "data" | "bufferSize" | "itemSize" | "shift" | "horizontal" | "cache" | "ssrCount" | "itemProps" | "onScroll" | "onScrollEnd" | "keepMounted"> {
+export interface VListProps<T = unknown> extends PublicProps, Pick<VirtualizerProps<T>, "data" | "bufferSize" | "itemSize" | "shift" | "horizontal" | "cache" | "ssrCount" | "itemProps" | "onScroll" | "onScrollEnd" | "onResize" | "keepMounted"> {
 }
 interface VListInstance<T = unknown> extends VListHandle {
     $props: VListProps<T>;

package/lib/vue/VMasonry.d.ts

@@ -76,6 +76,10 @@ export interface VMasonryProps<T> extends PublicProps {
      * @defaultValue 200
      */
     bufferSize?: number;
+    /**
+     * List of indexes that should be always mounted, even when off screen.
+     */
+    keepMounted?: readonly number[];
     /**
      * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link VMasonryHandle.cache}.
      *
@@ -91,6 +95,10 @@ export interface VMasonryProps<T> extends PublicProps {
      * Callback invoked when scrolling stops.
      */
     onScrollEnd?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onResize?: () => void;
 }
 interface VMasonryInstance<T> extends VMasonryHandle {
     $props: VMasonryProps<T>;

package/lib/vue/Virtualizer.d.ts

@@ -78,6 +78,10 @@ export interface VirtualizerProps<T = unknown> extends PublicProps {
      * Callback invoked when scrolling stops.
      */
     onScrollEnd?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onResize?: () => void;
 }
 interface VirtualizerInstance<T = unknown> extends VirtualizerHandle {
     $props: VirtualizerProps<T>;

package/lib/vue/WindowVirtualizer.d.ts

@@ -58,6 +58,10 @@ export interface WindowVirtualizerProps<T = unknown> extends PublicProps {
      * Callback invoked when scrolling stops.
      */
     onScrollEnd?: () => void;
+    /**
+     * Callback invoked when the size of the viewport or the items changes.
+     */
+    onResize?: () => void;
 }
 interface WindowVirtualizerInstance<T = unknown> extends WindowVirtualizerHandle {
     $props: WindowVirtualizerProps<T>;