@tanstack/virtual-core 3.0.0-beta.63 → 3.0.0-beta.66

package/src/index.ts

@@ -243,7 +243,10 @@ export interface VirtualizerOptions<
   // Optional
   debug?: any
   initialRect?: Rect
-  onChange?: (instance: Virtualizer<TScrollElement, TItemElement>) => void
+  onChange?: (
+    instance: Virtualizer<TScrollElement, TItemElement>,
+    sync: boolean,
+  ) => void
   measureElement?: (
     element: TItemElement,
     entry: ResizeObserverEntry | undefined,
@@ -307,10 +310,7 @@ export class Virtualizer<
       unobserve: (target: Element) => get()?.unobserve(target),
     }
   })()
-  range: { startIndex: number; endIndex: number } = {
-    startIndex: 0,
-    endIndex: 0,
-  }
+  range: { startIndex: number; endIndex: number } | null = null
 
   constructor(opts: VirtualizerOptions<TScrollElement, TItemElement>) {
     this.setOptions(opts)
@@ -352,10 +352,34 @@ export class Virtualizer<
     }
   }
 
-  private notify = () => {
-    this.options.onChange?.(this)
+  private notify = (sync: boolean) => {
+    this.options.onChange?.(this, sync)
   }
 
+  private maybeNotify = memo(
+    () => {
+      this.calculateRange()
+
+      return [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null,
+      ]
+    },
+    (isScrolling) => {
+      this.notify(isScrolling)
+    },
+    {
+      key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
+      debug: () => this.options.debug,
+      initialDeps: [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null,
+      ] as [boolean, number | null, number | null],
+    },
+  )
+
   private cleanup = () => {
     this.unsubs.filter(Boolean).forEach((d) => d!())
     this.unsubs = []
@@ -385,15 +409,8 @@ export class Virtualizer<
 
       this.unsubs.push(
         this.options.observeElementRect(this, (rect) => {
-          const prev = this.scrollRect
           this.scrollRect = rect
-          if (
-            this.options.horizontal
-              ? rect.width !== prev.width
-              : rect.height !== prev.height
-          ) {
-            this.maybeNotify()
-          }
+          this.maybeNotify()
         }),
       )
 
@@ -549,11 +566,14 @@ export class Virtualizer<
   calculateRange = memo(
     () => [this.getMeasurements(), this.getSize(), this.scrollOffset],
     (measurements, outerSize, scrollOffset) => {
-      return (this.range = calculateRange({
-        measurements,
-        outerSize,
-        scrollOffset,
-      }))
+      return (this.range =
+        measurements.length > 0 && outerSize > 0
+          ? calculateRange({
+              measurements,
+              outerSize,
+              scrollOffset,
+            })
+          : null)
     },
     {
       key: process.env.NODE_ENV !== 'production' && 'calculateRange',
@@ -561,36 +581,15 @@ export class Virtualizer<
     },
   )
 
-  private maybeNotify = memo(
-    () => {
-      const range = this.calculateRange()
-
-      return [range.startIndex, range.endIndex, this.isScrolling]
-    },
-    () => {
-      this.notify()
-    },
-    {
-      key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
-      debug: () => this.options.debug,
-      initialDeps: [
-        this.range.startIndex,
-        this.range.endIndex,
-        this.isScrolling,
-      ],
-    },
-  )
-
   private getIndexes = memo(
     () => [
       this.options.rangeExtractor,
       this.calculateRange(),
       this.options.overscan,
       this.options.count,
-      this.getSize(),
     ],
-    (rangeExtractor, range, overscan, count, outerSize) => {
-      return outerSize === 0
+    (rangeExtractor, range, overscan, count) => {
+      return range === null
         ? []
         : rangeExtractor({
             ...range,
@@ -668,7 +667,7 @@ export class Virtualizer<
       this.pendingMeasuredCacheIndexes.push(item.index)
       this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size))
 
-      this.notify()
+      this.notify(false)
     }
   }
 
@@ -881,7 +880,7 @@ export class Virtualizer<
 
   measure = () => {
     this.itemSizeCache = new Map()
-    this.notify()
+    this.notify(false)
   }
 }