virtua 0.50.2 → 0.50.4

package/lib/svelte/Virtualizer.svelte

@@ -7,9 +7,12 @@
     UPDATE_SCROLL_END_EVENT,
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
-    createResizer,
-    createScroller,
+    createContainerDriver,
+    scrollTo as _scrollTo,
+    scrollBy as _scrollBy,
+    scrollToIndex as _scrollToIndex,
     createVirtualStore,
+    createListLayout,
     getScrollSize as _getScrollSize,
     sort,
   } from "../core/index.js";
@@ -42,15 +45,9 @@
     onscrollend,
   }: Props = $props();
 
-  const store = createVirtualStore(
-    data.length,
-    itemSize,
-    ssrCount,
-    cache,
-    !itemSize,
-  );
-  const resizer = createResizer(store, horizontal);
-  const scroller = createScroller(store, horizontal);
+  const layout = createListLayout(data.length, itemSize, cache);
+  const store = createVirtualStore(layout, ssrCount);
+  const driver = createContainerDriver(store, horizontal);
   store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
     stateVersion = store.$getStateVersion();
   });
@@ -70,7 +67,7 @@
   let range = $derived(stateVersion && store.$getRange(bufferSize));
   let isScrolling = $derived(stateVersion && store.$isScrolling());
   let totalSize = $derived(stateVersion && store.$getTotalSize());
-  let negative = $derived(stateVersion && scroller.$isNegative());
+  let negative = $derived(stateVersion && driver.$isNegative());
 
   let indexes = $derived.by(() => {
     // https://github.com/inokawa/virtua/pull/847
@@ -107,15 +104,7 @@
     tick().then(() => {
       // https://github.com/inokawa/virtua/pull/914
       if (unmounted) return;
-      const assignRef = (scrollable: HTMLElement) => {
-        resizer.$observeRoot(scrollable);
-        scroller.$observe(container, scrollable);
-      };
-      if (scrollRef) {
-        assignRef(scrollRef);
-      } else {
-        assignRef(container.parentElement!);
-      }
+      driver.$observe(container, scrollRef);
     });
     return () => {
       unmounted = true;
@@ -123,8 +112,7 @@
   });
   onDestroy(() => {
     store.$dispose();
-    resizer.$dispose();
-    scroller.$dispose();
+    driver.$dispose();
   });
 
   $effect.pre(() => {
@@ -143,11 +131,11 @@
   $effect(() => {
     if (prevStateVersion === stateVersion) return;
     prevStateVersion = stateVersion;
-    scroller.$fixScrollJump();
+    driver.$fixScrollJump();
   });
 
   export const getCache =
-    store.$getCacheSnapshot satisfies VirtualizerHandle["getCache"] as VirtualizerHandle["getCache"];
+    layout.$snapshot satisfies VirtualizerHandle["getCache"] as VirtualizerHandle["getCache"];
   export const getScrollOffset =
     store.$getScrollOffset satisfies VirtualizerHandle["getScrollOffset"] as VirtualizerHandle["getScrollOffset"];
   export const getScrollSize = (() =>
@@ -162,12 +150,14 @@
     store.$getItemOffset satisfies VirtualizerHandle["getItemOffset"] as VirtualizerHandle["getItemOffset"];
   export const getItemSize =
     store.$getItemSize satisfies VirtualizerHandle["getItemSize"] as VirtualizerHandle["getItemSize"];
-  export const scrollToIndex =
-    scroller.$scrollToIndex satisfies VirtualizerHandle["scrollToIndex"] as VirtualizerHandle["scrollToIndex"];
-  export const scrollTo =
-    scroller.$scrollTo satisfies VirtualizerHandle["scrollTo"] as VirtualizerHandle["scrollTo"];
-  export const scrollBy =
-    scroller.$scrollBy satisfies VirtualizerHandle["scrollBy"] as VirtualizerHandle["scrollBy"];
+  export const scrollToIndex: VirtualizerHandle["scrollToIndex"] = (
+    index,
+    opts,
+  ) => _scrollToIndex(driver, store, index, opts);
+  export const scrollTo: VirtualizerHandle["scrollTo"] = (offset) =>
+    _scrollTo(driver, offset);
+  export const scrollBy: VirtualizerHandle["scrollBy"] = (offset) =>
+    _scrollBy(driver, store, offset);
 
   let containerStyle = $derived(
     styleToString({
@@ -198,7 +188,7 @@
       hide={stateVersion && store.$isUnmeasuredItem(index)}
       {horizontal}
       {isSSR}
-      resizer={resizer.$observeItem}
+      resizer={driver.$observeItem}
       itemProps={itemProps?.({ item, index })}
     />
   {/each}

package/lib/svelte/WindowVirtualizer.svelte

@@ -7,9 +7,10 @@
     UPDATE_SCROLL_EVENT,
     UPDATE_VIRTUAL_STATE,
     createVirtualStore,
+    createListLayout,
     getScrollSize as _getScrollSize,
-    createWindowResizer,
-    createWindowScroller,
+    createWindowDriver,
+    scrollToIndex as _scrollToIndex,
   } from "../core/index.js";
   import { defaultGetKey, styleToString } from "./utils.js";
   import ListItem from "./ListItem.svelte";
@@ -25,6 +26,7 @@
     getKey = defaultGetKey,
     bufferSize,
     itemSize,
+    ssrCount,
     shift = false,
     horizontal = false,
     cache,
@@ -33,15 +35,9 @@
     onscrollend,
   }: Props = $props();
 
-  const store = createVirtualStore(
-    data.length,
-    itemSize,
-    undefined,
-    cache,
-    !itemSize,
-  );
-  const resizer = createWindowResizer(store, horizontal);
-  const scroller = createWindowScroller(store, horizontal);
+  const layout = createListLayout(data.length, itemSize, cache);
+  const store = createVirtualStore(layout, ssrCount);
+  const driver = createWindowDriver(store, horizontal);
   store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
     stateVersion = store.$getStateVersion();
   });
@@ -53,6 +49,8 @@
     onscrollend && onscrollend();
   });
 
+  let isSSR = $state(!!ssrCount);
+
   let containerRef: HTMLDivElement | undefined = $state();
 
   let stateVersion: StateVersion = $state(store.$getStateVersion());
@@ -60,7 +58,7 @@
   let range = $derived(stateVersion && store.$getRange(bufferSize));
   let isScrolling = $derived(stateVersion && store.$isScrolling());
   let totalSize = $derived(stateVersion && store.$getTotalSize());
-  let negative = $derived(stateVersion && scroller.$isNegative());
+  let negative = $derived(stateVersion && driver.$isNegative());
 
   let indexes = $derived.by(() => {
     // https://github.com/inokawa/virtua/pull/847
@@ -77,13 +75,13 @@
   });
 
   onMount(() => {
-    resizer.$observeRoot(containerRef!);
-    scroller.$observe(containerRef!);
+    isSSR = false;
+
+    driver.$observe(containerRef!);
   });
   onDestroy(() => {
     store.$dispose();
-    resizer.$dispose();
-    scroller.$dispose();
+    driver.$dispose();
   });
 
   $effect.pre(() => {
@@ -96,11 +94,11 @@
   $effect(() => {
     if (prevStateVersion === stateVersion) return;
     prevStateVersion = stateVersion;
-    scroller.$fixScrollJump();
+    driver.$fixScrollJump();
   });
 
   export const getCache =
-    store.$getCacheSnapshot satisfies WindowVirtualizerHandle["getCache"] as WindowVirtualizerHandle["getCache"];
+    layout.$snapshot satisfies WindowVirtualizerHandle["getCache"] as WindowVirtualizerHandle["getCache"];
   export const getScrollOffset =
     store.$getScrollOffset satisfies WindowVirtualizerHandle["getScrollOffset"] as WindowVirtualizerHandle["getScrollOffset"];
   export const getViewportSize =
@@ -111,8 +109,10 @@
     store.$getItemOffset satisfies WindowVirtualizerHandle["getItemOffset"] as WindowVirtualizerHandle["getItemOffset"];
   export const getItemSize =
     store.$getItemSize satisfies WindowVirtualizerHandle["getItemSize"] as WindowVirtualizerHandle["getItemSize"];
-  export const scrollToIndex =
-    scroller.$scrollToIndex satisfies WindowVirtualizerHandle["scrollToIndex"] as WindowVirtualizerHandle["scrollToIndex"];
+  export const scrollToIndex: WindowVirtualizerHandle["scrollToIndex"] = (
+    index,
+    opts,
+  ) => _scrollToIndex(driver, store, index, opts);
 
   let containerStyle = $derived(
     styleToString({
@@ -142,7 +142,8 @@
       offset={stateVersion && store.$getItemOffset(index, negative)}
       hide={stateVersion && store.$isUnmeasuredItem(index)}
       {horizontal}
-      resizer={resizer.$observeItem}
+      {isSSR}
+      resizer={driver.$observeItem}
     />
   {/each}
 </div>

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

@@ -29,6 +29,10 @@ export interface WindowVirtualizerProps<T> {
      * - If set, you can opt out estimation and use the value as initial item size.
      */
     itemSize?: number;
+    /**
+     * A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0.
+     */
+    ssrCount?: number;
     /**
      * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
      */

package/lib/svelte/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/svelte/utils.ts"],"sourcesContent":["export const styleToString = (\n  obj: Record<string, string | undefined>,\n): string => {\n  return Object.keys(obj).reduce((acc, k) => {\n    const value = obj[k];\n    if (value == null) {\n      return acc;\n    }\n    return acc + `${k}:${value};`;\n  }, \"\");\n};\n\nexport const defaultGetKey = (_data: unknown, i: number) => \"_\" + i;\n\n/**\n * @internal\n */\nexport type ItemAttrs = {\n  [key: string]: any;\n  style?: Record<string, string | undefined>;\n  class?: string;\n};\n\n/**\n * A function that provides properties/attributes for item element\n */\nexport type ItemProps<T = unknown> = (payload: {\n  item: T;\n  index: number;\n}) => ItemAttrs | undefined;\n"],"mappings":";AAAA,IAAa,iBACX,QACW;CACX,OAAO,OAAO,KAAK,GAAG,EAAE,QAAQ,KAAK,MAAM;EACzC,MAAM,QAAQ,IAAI;EAClB,IAAI,SAAS,MACX,OAAO;EAET,OAAO,MAAM,GAAG,EAAE,GAAG,MAAM;CAC7B,GAAG,EAAE;AACP;AAEA,IAAa,iBAAiB,OAAgB,MAAc,MAAM"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/svelte/utils.ts"],"sourcesContent":["export const styleToString = (\n  obj: Record<string, string | undefined>,\n): string => {\n  return Object.keys(obj).reduce((acc, k) => {\n    const value = obj[k];\n    if (value == null) {\n      return acc;\n    }\n    return acc + `${k}:${value};`;\n  }, \"\");\n};\n\nexport const defaultGetKey = (_data: unknown, i: number) => \"_\" + i;\n\n/**\n * @internal\n */\nexport type ItemAttrs = {\n  [key: string]: any;\n  style?: Record<string, string | undefined>;\n  class?: string;\n};\n\n/**\n * A function that provides properties/attributes for item element\n */\nexport type ItemProps<T = unknown> = (payload: {\n  item: T;\n  index: number;\n}) => ItemAttrs | undefined;\n"],"mappings":";AAAA,IAAa,iBACX,QACW;CACX,OAAO,OAAO,KAAK,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM;EACzC,MAAM,QAAQ,IAAI;EAClB,IAAI,SAAS,MACX,OAAO;EAET,OAAO,MAAM,GAAG,EAAE,GAAG,MAAM;CAC7B,GAAG,EAAE;AACP;AAEA,IAAa,iBAAiB,OAAgB,MAAc,MAAM"}

package/lib/vue/WindowVirtualizer.d.ts

@@ -20,6 +20,10 @@ export interface WindowVirtualizerProps<T = unknown> extends PublicProps {
      * - If set, you can opt out estimation and use the value as initial item size.
      */
     itemSize?: number;
+    /**
+     * A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0.
+     */
+    ssrCount?: number;
     /**
      * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
      */