@tanstack/virtual-core 3.0.0-beta.2 → 3.0.0-beta.9

package/src/index.ts

@@ -7,7 +7,7 @@ export * from './utils'
 
 type ScrollAlignment = 'start' | 'center' | 'end' | 'auto'
 
-interface ScrollToOptions {
+export interface ScrollToOptions {
   align: ScrollAlignment
 }
 
@@ -58,19 +58,40 @@ export const defaultRangeExtractor = (range: Range) => {
   return arr
 }
 
+const memoRectCallback = (
+  instance: Virtualizer<any, any>,
+  cb: (rect: Rect) => void,
+) => {
+  let prev: Rect = { height: -1, width: -1 }
+
+  return (rect: Rect) => {
+    if (
+      instance.options.horizontal
+        ? rect.width !== prev.width
+        : rect.height !== prev.height
+    ) {
+      cb(rect)
+    }
+
+    prev = rect
+  }
+}
+
 export const observeElementRect = (
   instance: Virtualizer<any, any>,
   cb: (rect: Rect) => void,
 ) => {
+  const onResize = memoRectCallback(instance, cb)
+
   const observer = observeRect(instance.scrollElement as Element, (rect) => {
-    cb(rect)
+    onResize(rect)
   })
 
   if (!instance.scrollElement) {
     return
   }
 
-  cb(instance.scrollElement.getBoundingClientRect())
+  onResize(instance.scrollElement.getBoundingClientRect())
 
   observer.observe()
 
@@ -83,12 +104,12 @@ export const observeWindowRect = (
   instance: Virtualizer<any, any>,
   cb: (rect: Rect) => void,
 ) => {
-  const onResize = () => {
-    cb({
+  const memoizedCallback = memoRectCallback(instance, cb)
+  const onResize = () =>
+    memoizedCallback({
       width: instance.scrollElement.innerWidth,
       height: instance.scrollElement.innerHeight,
     })
-  }
 
   if (!instance.scrollElement) {
     return
@@ -106,60 +127,58 @@ export const observeWindowRect = (
   }
 }
 
-export const observeElementOffset = (
-  instance: Virtualizer<any, any>,
-  cb: (offset: number) => void,
-) => {
-  const onScroll = () =>
-    cb(
-      instance.scrollElement[
-        instance.options.horizontal ? 'scrollLeft' : 'scrollTop'
-      ],
-    )
+type ObserverMode = 'element' | 'window'
 
-  if (!instance.scrollElement) {
-    return
-  }
+const scrollProps = {
+  element: ['scrollLeft', 'scrollTop'],
+  window: ['scrollX', 'scrollY'],
+} as const
 
-  onScroll()
+const createOffsetObserver = (mode: ObserverMode) => {
+  return (instance: Virtualizer<any, any>, cb: (offset: number) => void) => {
+    if (!instance.scrollElement) {
+      return
+    }
 
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true,
-  })
+    const propX = scrollProps[mode][0]
+    const propY = scrollProps[mode][1]
 
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll)
-  }
-}
+    let prevX: number = instance.scrollElement[propX]
+    let prevY: number = instance.scrollElement[propY]
 
-export const observeWindowOffset = (
-  instance: Virtualizer<any, any>,
-  cb: (offset: number) => void,
-) => {
-  const onScroll = () =>
-    cb(
-      instance.scrollElement[
-        instance.options.horizontal ? 'scrollX' : 'scrollY'
-      ],
-    )
+    const scroll = () => {
+      cb(instance.scrollElement[instance.options.horizontal ? propX : propY])
+    }
 
-  if (!instance.scrollElement) {
-    return
-  }
+    scroll()
 
-  onScroll()
+    const onScroll = (e: Event) => {
+      const target = e.currentTarget as HTMLElement & Window
+      const scrollX = target[propX]
+      const scrollY = target[propY]
 
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true,
-  })
+      if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+        scroll()
+      }
 
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll)
+      prevX = scrollX
+      prevY = scrollY
+    }
+
+    instance.scrollElement.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true,
+    })
+
+    return () => {
+      instance.scrollElement.removeEventListener('scroll', onScroll)
+    }
   }
 }
 
+export const observeElementOffset = createOffsetObserver('element')
+export const observeWindowOffset = createOffsetObserver('window')
+
 export const measureElement = (
   element: unknown,
   instance: Virtualizer<any, any>,
@@ -246,6 +265,10 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
   private scrollOffset: number
   private destinationOffset: undefined | number
   private scrollCheckFrame!: ReturnType<typeof setTimeout>
+  private measureElementCache: Record<
+    number,
+    (measurableItem: TItemElement | null) => void
+  > = {}
 
   constructor(opts: VirtualizerOptions<TScrollElement, TItemElement>) {
     this.setOptions(opts)
@@ -284,6 +307,7 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
   private cleanup = () => {
     this.unsubs.filter(Boolean).forEach((d) => d!())
     this.unsubs = []
+    this.scrollElement = null
   }
 
   _didMount = () => {
@@ -400,48 +424,61 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
       this.options.measureElement,
     ],
     (indexes, measurements, measureElement) => {
+      const makeMeasureElement =
+        (index: number) => (measurableItem: TItemElement | null) => {
+          const item = this.measurementsCache[index]!
+
+          if (!measurableItem) {
+            return
+          }
+
+          const measuredItemSize = measureElement(measurableItem, this)
+          const itemSize = this.itemMeasurementsCache[item.key] ?? item.size
+
+          if (measuredItemSize !== itemSize) {
+            if (item.start < this.scrollOffset) {
+              if (
+                process.env.NODE_ENV === 'development' &&
+                this.options.debug
+              ) {
+                console.info('correction', measuredItemSize - itemSize)
+              }
+
+              if (!this.destinationOffset) {
+                this._scrollToOffset(
+                  this.scrollOffset + (measuredItemSize - itemSize),
+                  false,
+                )
+              }
+            }
+
+            this.pendingMeasuredCacheIndexes.push(index)
+            this.itemMeasurementsCache = {
+              ...this.itemMeasurementsCache,
+              [item.key]: measuredItemSize,
+            }
+            this.notify()
+          }
+        }
+
       const virtualItems: VirtualItem<TItemElement>[] = []
 
+      const currentMeasureElements: typeof this.measureElementCache = {}
+
       for (let k = 0, len = indexes.length; k < len; k++) {
         const i = indexes[k]!
         const measurement = measurements[i]!
 
         const item = {
           ...measurement,
-          measureElement: (measurableItem: TItemElement | null) => {
-            if (measurableItem) {
-              const measuredItemSize = measureElement(measurableItem, this)
-
-              if (measuredItemSize !== item.size) {
-                if (item.start < this.scrollOffset) {
-                  if (
-                    process.env.NODE_ENV === 'development' &&
-                    this.options.debug
-                  )
-                    console.info('correction', measuredItemSize - item.size)
-
-                  if (!this.destinationOffset) {
-                    this._scrollToOffset(
-                      this.scrollOffset + (measuredItemSize - item.size),
-                      false,
-                    )
-                  }
-                }
-
-                this.pendingMeasuredCacheIndexes.push(i)
-                this.itemMeasurementsCache = {
-                  ...this.itemMeasurementsCache,
-                  [item.key]: measuredItemSize,
-                }
-                this.notify()
-              }
-            }
-          },
+          measureElement: (currentMeasureElements[i] =
+            this.measureElementCache[i] ?? makeMeasureElement(i)),
         }
-
         virtualItems.push(item)
       }
 
+      this.measureElementCache = currentMeasureElements
+
       return virtualItems
     },
     {