Fill with default cache

src/core/cache.spec.ts

@@ -782,9 +782,52 @@ describe(initCache.name, () => {
  `);
  });
 
- it("should create cache from snapshot", () => {
- expect(initCache(10, 23, [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 123]))
- .toMatchInlineSnapshot(`
+ it("should restore cache from snapshot", () => {
+ const itemLength = 10;
+ const cache = initCache(itemLength, 23, [
+ [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+ 123,
+ ]);
+ expect(cache).toMatchInlineSnapshot(`
+ {
+ "_computedOffsetIndex": -1,
+ "_defaultItemSize": 123,
+ "_length": 10,
+ "_offsets": [
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ ],
+ "_sizes": [
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ 6,
+ 7,
+ 8,
+ 9,
+ ],
+ }
+ `);
+ expect(cache._length).toBe(itemLength);
+ expect(cache._sizes.length).toBe(itemLength);
+ expect(cache._offsets.length).toBe(itemLength);
+ });
+
+ it("should restore cache from snapshot which has shorter length", () => {
+ const itemLength = 10;
+ const cache = initCache(itemLength, 23, [[0, 1, 2, 3, 4], 123]);
+ expect(cache).toMatchInlineSnapshot(`
  {
  "_computedOffsetIndex": -1,
  "_defaultItemSize": 123,
@@ -807,14 +850,59 @@ describe(initCache.name, () => {
  2,
  3,
  4,
- 5,
- 6,
- 7,
- 8,
- 9,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
  ],
  }
  `);
+ expect(cache._length).toBe(itemLength);
+ expect(cache._sizes.length).toBe(itemLength);
+ expect(cache._offsets.length).toBe(itemLength);
+ });
+
+ it("should restore cache from snapshot which has longer length", () => {
+ const itemLength = 10;
+ const cache = initCache(itemLength, 23, [
+ [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+ 123,
+ ]);
+ expect(cache).toMatchInlineSnapshot(`
+ {
+ "_computedOffsetIndex": -1,
+ "_defaultItemSize": 123,
+ "_length": 10,
+ "_offsets": [
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ -1,
+ ],
+ "_sizes": [
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ 6,
+ 7,
+ 8,
+ 9,
+ ],
+ }
+ `);
+ expect(cache._length).toBe(itemLength);
+ expect(cache._sizes.length).toBe(itemLength);
+ expect(cache._offsets.length).toBe(itemLength);
  });
 });
 

src/core/cache.ts

@@ -165,11 +165,16 @@ export const initCache = (
  itemSize: number,
  snapshot?: InternalCacheSnapshot
 ): Cache => {
- const hasValidCache =
- snapshot && snapshot[0] && snapshot[0].length === length;
  return {
- _defaultItemSize: hasValidCache ? snapshot[1] : itemSize,
- _sizes: hasValidCache ? snapshot[0] : fill([], length),
+ _defaultItemSize: snapshot ? snapshot[1] : itemSize,
+ _sizes:
+ snapshot && snapshot[0]
+ ? // https://github.com/inokawa/virtua/issues/441
+ fill(
+ snapshot[0].slice(0, min(length, snapshot[0].length)),
+ max(0, length - snapshot[0].length)
+ )
+ : fill([], length),
  _length: length,
  _computedOffsetIndex: -1,
  _offsets: fill([], length),

src/react/Virtualizer.tsx

@@ -114,8 +114,8 @@ export interface VirtualizerProps {
  horizontal?: boolean;
  /**
  * 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 VirtualizerHandle.cache}.
- * 
- * **The length of items must be the same as when you take the cache, otherwise restoration will fail.**
+ *
+ * **The length of items should be the same as when you take the cache, otherwise restoration may not work as expected.**
  */
  cache?: CacheSnapshot;
  /**

src/react/WindowVirtualizer.tsx

@@ -74,7 +74,7 @@ export interface WindowVirtualizerProps {
  /**
  * 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 WindowVirtualizerHandle.cache}.
  *
- * **The length of items must be the same as when you take the cache, otherwise restoration will fail.**
+ * **The length of items should be the same as when you take the cache, otherwise restoration may not work as expected.**
  */
  cache?: CacheSnapshot;
  /**