Separate cache from store

Author: inokawa

src/core/cache.ts

@@ -1,4 +1,4 @@
-import { type InternalCacheSnapshot, type ItemsRange } from "./types.js";
+import { CacheSnapshot, type ItemsRange } from "./types.js";
 import { clamp, floor, max, min, sort } from "./utils.js";
 
 type Writeable<T> = {
@@ -175,8 +175,8 @@ export const estimateDefaultItemSize = (
  */
 export const initCache = (
   length: number,
-  itemSize: number,
-  snapshot?: InternalCacheSnapshot
+  itemSize: number = 40,
+  snapshot?: CacheSnapshot
 ): Cache => {
   return {
     _defaultItemSize: snapshot ? snapshot[1] : itemSize,
@@ -197,7 +197,7 @@ export const initCache = (
 /**
  * @internal
  */
-export const takeCacheSnapshot = (cache: Cache): InternalCacheSnapshot => {
+export const takeCacheSnapshot = (cache: Cache): CacheSnapshot => {
   return [cache._sizes.slice(), cache._defaultItemSize];
 };
 

src/core/index.ts

@@ -9,6 +9,7 @@ export {
   getScrollSize,
   type StateVersion,
 } from "./store.js";
+export { initCache } from "./cache.js";
 export {
   createScroller,
   createWindowScroller,

src/core/store.ts

@@ -1,5 +1,4 @@
 import {
-  initCache,
   getItemSize as _getItemSize,
   getItemOffset as _getItemOffset,
   UNCACHED,
@@ -9,14 +8,10 @@ import {
   computeRange,
   takeCacheSnapshot,
   findIndex,
+  type Cache,
 } from "./cache.js";
 import { isIOSWebKit } from "./environment.js";
-import type {
-  CacheSnapshot,
-  InternalCacheSnapshot,
-  ItemResize,
-  ItemsRange,
-} from "./types.js";
+import type { CacheSnapshot, ItemResize, ItemsRange } from "./types.js";
 import { abs, max, min, NULL } from "./utils.js";
 
 const MAX_INT_32 = 0x7fffffff;
@@ -117,10 +112,8 @@ export type VirtualStore = {
  * @internal
  */
 export const createVirtualStore = (
-  elementsCount: number,
-  itemSize: number = 40,
+  cache: Cache,
   ssrCount: number = 0,
-  cacheSnapshot?: CacheSnapshot | undefined,
   shouldAutoEstimateItemSize: boolean = false
 ): VirtualStore => {
   let isSSR = !!ssrCount;
@@ -137,11 +130,6 @@ export const createVirtualStore = (
   let _prevRange: ItemsRange = [0, isSSR ? max(ssrCount - 1, 0) : -1];
   let _totalMeasuredSize = 0;
 
-  const cache = initCache(
-    elementsCount,
-    itemSize,
-    cacheSnapshot as unknown as InternalCacheSnapshot | undefined
-  );
   const subscribers = new Set<[number, Subscriber]>();
   const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
   const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;

src/core/types.ts

@@ -3,18 +3,12 @@ export type ItemResize = Readonly<[index: number, size: number]>;
 /** @internal */
 export type ItemsRange = Readonly<[startIndex: number, endIndex: number]>;
 
-/** @internal */
-export type InternalCacheSnapshot = [sizes: number[], defaultSize: number];
-
-declare const cacheSymbol: unique symbol;
 /**
  * Serializable cache snapshot.
  *
  * **This is not intended to be modified by users. And it is not guaranteed to work if you pass it to the different version of this package.**
  */
-export interface CacheSnapshot {
-  [cacheSymbol]: never;
-}
+export type CacheSnapshot = [sizes: number[], defaultSize: number];
 
 export type ScrollToIndexAlign = "start" | "center" | "end" | "nearest";
 

src/react/VGrid.tsx

@@ -22,6 +22,7 @@ import {
   isRTLDocument,
   UPDATE_SCROLL_EVENT,
   UPDATE_SCROLL_END_EVENT,
+  initCache,
 } from "../core/index.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { refKey } from "./utils.js";
@@ -275,13 +276,11 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
   ): ReactElement => {
     const [rowStore, colStore, resizer, scroller] = useStatic(() => {
       const _rowStore = createVirtualStore(
-        rowCount,
-        cellHeight,
+        initCache(rowCount, cellHeight),
         initialRowCount
       );
       const _colStore = createVirtualStore(
-        colCount,
-        cellWidth,
+        initCache(colCount, cellWidth),
         initialColCount
       );
       return [

src/react/Virtualizer.tsx

@@ -23,6 +23,7 @@ import {
   ScrollToIndexOpts,
   microtask,
   sort,
+  initCache,
 } from "../core/index.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { getKey, refKey } from "./utils.js";
@@ -204,10 +205,8 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
     const [store, resizer, scroller, isHorizontal] = useStatic(() => {
       const _isHorizontal = !!horizontalProp;
       const _store = createVirtualStore(
-        count,
-        itemSize,
+        initCache(count, itemSize, cache),
         ssrCount,
-        cache,
         !itemSize
       );
       return [

src/react/WindowVirtualizer.tsx

@@ -18,6 +18,7 @@ import {
   createWindowResizer,
   CacheSnapshot,
   ScrollToIndexOpts,
+  initCache,
 } from "../core/index.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { getKey, refKey } from "./utils.js";
@@ -154,10 +155,8 @@ export const WindowVirtualizer = forwardRef<
     const [store, resizer, scroller, isHorizontal] = useStatic(() => {
       const _isHorizontal = !!horizontalProp;
       const _store = createVirtualStore(
-        count,
-        itemSize,
+        initCache(count, itemSize, cache),
         ssrCount,
-        cache,
         !itemSize
       );
 

src/solid/Virtualizer.tsx

@@ -31,6 +31,7 @@ import {
   ScrollToIndexOpts,
   CacheSnapshot,
   sort,
+  initCache,
 } from "../core/index.js";
 import { ListItem } from "./ListItem.js";
 import { isSameRange } from "./utils.js";
@@ -178,10 +179,8 @@ export const Virtualizer = <T,>(props: VirtualizerProps<T>): JSX.Element => {
   );
 
   const store = createVirtualStore(
-    props.data.length,
-    itemSize,
+    initCache(props.data.length, itemSize, cache),
     undefined,
-    cache,
     !itemSize
   );
   const resizer = createResizer(store, horizontal);

src/solid/WindowVirtualizer.tsx

@@ -24,6 +24,7 @@ import {
   ItemsRange,
   ScrollToIndexOpts,
   CacheSnapshot,
+  initCache,
 } from "../core/index.js";
 import { ListItem } from "./ListItem.js";
 import { isSameRange } from "./utils.js";
@@ -124,10 +125,8 @@ export const WindowVirtualizer = <T,>(
   } = props;
 
   const store = createVirtualStore(
-    props.data.length,
-    itemSize,
+    initCache(props.data.length, itemSize, cache),
     undefined,
-    cache,
     !itemSize
   );
   const resizer = createWindowResizer(store, horizontal);

src/svelte/Virtualizer.svelte

@@ -11,6 +11,7 @@
     createScroller,
     createVirtualStore,
     getScrollSize as _getScrollSize,
+    initCache,
   } from "../core/index.js";
   import { defaultGetKey, styleToString, iterRange } from "./utils.js";
   import ListItem from "./ListItem.svelte";
@@ -39,9 +40,7 @@
   }: Props = $props();
 
   const store = createVirtualStore(
-    data.length,
-    itemSize,
-    undefined,
+    initCache(data.length, itemSize),
     undefined,
     !itemSize
   );