@tanstack/virtual-core 3.0.0-beta.44 → 3.0.0-beta.47

package/src/index.ts

@@ -58,141 +58,124 @@ export const defaultRangeExtractor = (range: Range) => {
   return arr
 }
 
-const memoRectCallback = (
-  instance: Virtualizer<any, any>,
+export const observeElementRect = <T extends Element>(
+  instance: Virtualizer<T, 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)
-    }
+  const element = instance.scrollElement
+  if (!element) {
+    return
+  }
 
-    prev = rect
+  const handler = (rect: { width: number; height: number }) => {
+    const { width, height } = rect
+    cb({ width: Math.round(width), height: Math.round(height) })
   }
-}
 
-export const observeElementRect = (
-  instance: Virtualizer<any, any>,
-  cb: (rect: Rect) => void,
-) => {
+  handler(element.getBoundingClientRect())
+
   const observer = new ResizeObserver((entries) => {
     const entry = entries[0]
     if (entry) {
-      const { width, height } = entry.contentRect
-      cb({
-        width: Math.round(width),
-        height: Math.round(height),
-      })
-    } else {
-      cb({ width: 0, height: 0 })
+      const box = entry.borderBoxSize[0]
+      if (box) {
+        handler({ width: box.inlineSize, height: box.blockSize })
+        return
+      }
     }
+    handler(element.getBoundingClientRect())
   })
 
-  if (!instance.scrollElement) {
-    return
-  }
-
-  cb(instance.scrollElement.getBoundingClientRect())
-
-  observer.observe(instance.scrollElement)
+  observer.observe(element, { box: 'border-box' })
 
   return () => {
-    observer.unobserve(instance.scrollElement)
+    observer.unobserve(element)
   }
 }
 
 export const observeWindowRect = (
-  instance: Virtualizer<any, any>,
+  instance: Virtualizer<Window, any>,
   cb: (rect: Rect) => void,
 ) => {
-  const memoizedCallback = memoRectCallback(instance, cb)
-  const onResize = () =>
-    memoizedCallback({
-      width: instance.scrollElement.innerWidth,
-      height: instance.scrollElement.innerHeight,
-    })
-
-  if (!instance.scrollElement) {
+  const element = instance.scrollElement
+  if (!element) {
     return
   }
 
-  onResize()
+  const handler = () => {
+    cb({ width: element.innerWidth, height: element.innerHeight })
+  }
+  handler()
 
-  instance.scrollElement.addEventListener('resize', onResize, {
-    capture: false,
+  element.addEventListener('resize', handler, {
     passive: true,
   })
 
   return () => {
-    instance.scrollElement.removeEventListener('resize', onResize)
+    element.removeEventListener('resize', handler)
   }
 }
 
-type ObserverMode = 'element' | 'window'
-
-const scrollProps = {
-  element: ['scrollLeft', 'scrollTop'],
-  window: ['scrollX', 'scrollY'],
-} as const
-
-const createOffsetObserver = (mode: ObserverMode) => {
-  return (instance: Virtualizer<any, any>, cb: (offset: number) => void) => {
-    if (!instance.scrollElement) {
-      return
-    }
-
-    const propX = scrollProps[mode][0]
-    const propY = scrollProps[mode][1]
-
-    let prevX: number = instance.scrollElement[propX]
-    let prevY: number = instance.scrollElement[propY]
-
-    const scroll = () => {
-      const offset =
-        instance.scrollElement[instance.options.horizontal ? propX : propY]
+export const observeElementOffset = <T extends Element>(
+  instance: Virtualizer<T, any>,
+  cb: (offset: number) => void,
+) => {
+  const element = instance.scrollElement
+  if (!element) {
+    return
+  }
 
-      cb(offset)
-    }
+  const handler = () => {
+    cb(element[instance.options.horizontal ? 'scrollLeft' : 'scrollTop'])
+  }
+  handler()
 
-    scroll()
+  element.addEventListener('scroll', handler, {
+    passive: true,
+  })
 
-    const onScroll = (e: Event) => {
-      const target = e.currentTarget as HTMLElement & Window
-      const scrollX = target[propX]
-      const scrollY = target[propY]
+  return () => {
+    element.removeEventListener('scroll', handler)
+  }
+}
 
-      if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
-        scroll()
-      }
+export const observeWindowOffset = (
+  instance: Virtualizer<Window, any>,
+  cb: (offset: number) => void,
+) => {
+  const element = instance.scrollElement
+  if (!element) {
+    return
+  }
 
-      prevX = scrollX
-      prevY = scrollY
-    }
+  const handler = () => {
+    cb(element[instance.options.horizontal ? 'scrollX' : 'scrollY'])
+  }
+  handler()
 
-    instance.scrollElement.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true,
-    })
+  element.addEventListener('scroll', handler, {
+    passive: true,
+  })
 
-    return () => {
-      instance.scrollElement.removeEventListener('scroll', onScroll)
-    }
+  return () => {
+    element.removeEventListener('scroll', handler)
   }
 }
 
-export const observeElementOffset = createOffsetObserver('element')
-export const observeWindowOffset = createOffsetObserver('window')
-
 export const measureElement = <TItemElement extends Element>(
   element: TItemElement,
+  entry: ResizeObserverEntry | undefined,
   instance: Virtualizer<any, TItemElement>,
 ) => {
+  if (entry) {
+    const box = entry.borderBoxSize[0]
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? 'inlineSize' : 'blockSize'],
+      )
+      return size
+    }
+  }
   return Math.round(
     element.getBoundingClientRect()[
       instance.options.horizontal ? 'width' : 'height'
@@ -261,7 +244,8 @@ export interface VirtualizerOptions<
   initialRect?: Rect
   onChange?: (instance: Virtualizer<TScrollElement, TItemElement>) => void
   measureElement?: (
-    el: TItemElement,
+    element: TItemElement,
+    entry: ResizeObserverEntry | undefined,
     instance: Virtualizer<TScrollElement, TItemElement>,
   ) => number
   overscan?: number
@@ -290,32 +274,36 @@ export class Virtualizer<
   private isScrollingTimeoutId: ReturnType<typeof setTimeout> | null = null
   private scrollToIndexTimeoutId: ReturnType<typeof setTimeout> | null = null
   measurementsCache: VirtualItem[] = []
-  private itemSizeCache: Record<Key, number> = {}
+  private itemSizeCache = new Map<Key, number>()
   private pendingMeasuredCacheIndexes: number[] = []
   private scrollRect: Rect
   scrollOffset: number
   scrollDirection: ScrollDirection | null = null
   private scrollAdjustments: number = 0
-  private measureElementCache: Record<
-    Key,
-    TItemElement & { __virtualizerSkipFirstNotSync?: boolean }
-  > = {}
-  private getResizeObserver = (() => {
+  measureElementCache = new Map<Key, TItemElement>()
+  private observer = (() => {
     let _ro: ResizeObserver | null = null
 
-    return () => {
+    const get = () => {
       if (_ro) {
         return _ro
       } else if (typeof ResizeObserver !== 'undefined') {
         return (_ro = new ResizeObserver((entries) => {
           entries.forEach((entry) => {
-            this._measureElement(entry.target as TItemElement, false)
+            this._measureElement(entry.target as TItemElement, entry)
           })
         }))
       } else {
         return null
       }
     }
+
+    return {
+      disconnect: () => get()?.disconnect(),
+      observe: (target: Element) =>
+        get()?.observe(target, { box: 'border-box' }),
+      unobserve: (target: Element) => get()?.unobserve(target),
+    }
   })()
   range: { startIndex: number; endIndex: number } = {
     startIndex: 0,
@@ -328,7 +316,7 @@ export class Virtualizer<
     this.scrollOffset = this.options.initialOffset
     this.measurementsCache = this.options.initialMeasurementsCache
     this.measurementsCache.forEach((item) => {
-      this.itemSizeCache[item.key] = item.size
+      this.itemSizeCache.set(item.key, item.size)
     })
 
     this.maybeNotify()
@@ -372,12 +360,9 @@ export class Virtualizer<
   }
 
   _didMount = () => {
-    const ro = this.getResizeObserver()
-    Object.values(this.measureElementCache).forEach((node) => ro?.observe(node))
-
+    this.measureElementCache.forEach(this.observer.observe)
     return () => {
-      ro?.disconnect()
-
+      this.observer.disconnect()
       this.cleanup()
     }
   }
@@ -397,8 +382,15 @@ export class Virtualizer<
 
       this.unsubs.push(
         this.options.observeElementRect(this, (rect) => {
+          const prev = this.scrollRect
           this.scrollRect = rect
-          this.maybeNotify()
+          if (
+            this.options.horizontal
+              ? rect.width !== prev.width
+              : rect.height !== prev.height
+          ) {
+            this.maybeNotify()
+          }
         }),
       )
 
@@ -457,7 +449,7 @@ export class Virtualizer<
 
       for (let i = min; i < count; i++) {
         const key = getItemKey(i)
-        const measuredSize = itemSizeCache[key]
+        const measuredSize = itemSizeCache.get(key)
         const start = measurements[i - 1]
           ? measurements[i - 1]!.end
           : paddingStart + scrollMargin
@@ -540,7 +532,10 @@ export class Virtualizer<
     return parseInt(indexStr, 10)
   }
 
-  private _measureElement = (node: TItemElement, sync: boolean) => {
+  private _measureElement = (
+    node: TItemElement,
+    entry: ResizeObserverEntry | undefined,
+  ) => {
     const index = this.indexFromElement(node)
 
     const item = this.measurementsCache[index]
@@ -548,34 +543,27 @@ export class Virtualizer<
       return
     }
 
-    const prevNode = this.measureElementCache[item.key]
-
-    const ro = this.getResizeObserver()
+    const prevNode = this.measureElementCache.get(item.key)
 
     if (!node.isConnected) {
-      ro?.unobserve(node)
+      this.observer.unobserve(node)
       if (node === prevNode) {
-        delete this.measureElementCache[item.key]
+        this.measureElementCache.delete(item.key)
       }
       return
     }
 
     if (prevNode !== node) {
       if (prevNode) {
-        ro?.unobserve(prevNode)
-      }
-      ro?.observe(node)
-      this.measureElementCache[item.key] = node
-    } else {
-      if (!sync && !prevNode.__virtualizerSkipFirstNotSync) {
-        prevNode.__virtualizerSkipFirstNotSync = true
-        return
+        this.observer.unobserve(prevNode)
       }
+      this.observer.observe(node)
+      this.measureElementCache.set(item.key, node)
     }
 
-    const measuredItemSize = this.options.measureElement(node, this)
+    const measuredItemSize = this.options.measureElement(node, entry, this)
 
-    const itemSize = this.itemSizeCache[item.key] ?? item.size
+    const itemSize = this.itemSizeCache.get(item.key) ?? item.size
 
     const delta = measuredItemSize - itemSize
 
@@ -592,10 +580,11 @@ export class Virtualizer<
       }
 
       this.pendingMeasuredCacheIndexes.push(index)
-      this.itemSizeCache = {
-        ...this.itemSizeCache,
-        [item.key]: measuredItemSize,
-      }
+
+      this.itemSizeCache = new Map(
+        this.itemSizeCache.set(item.key, measuredItemSize),
+      )
+
       this.notify()
     }
   }
@@ -605,7 +594,7 @@ export class Virtualizer<
       return
     }
 
-    this._measureElement(node, true)
+    this._measureElement(node, undefined)
   }
 
   getVirtualItems = memo(
@@ -692,7 +681,7 @@ export class Virtualizer<
     return [this.getOffsetForAlignment(toOffset, align), align] as const
   }
 
-  private isDynamicMode = () => Object.keys(this.measureElementCache).length > 0
+  private isDynamicMode = () => this.measureElementCache.size > 0
 
   private cancelScrollToIndex = () => {
     if (this.scrollToIndexTimeoutId !== null) {
@@ -741,8 +730,9 @@ export class Virtualizer<
       this.scrollToIndexTimeoutId = setTimeout(() => {
         this.scrollToIndexTimeoutId = null
 
-        const elementInDOM =
-          !!this.measureElementCache[this.options.getItemKey(index)]
+        const elementInDOM = this.measureElementCache.has(
+          this.options.getItemKey(index),
+        )
 
         if (elementInDOM) {
           const [toOffset] = this.getOffsetForIndex(index, align)
@@ -792,7 +782,7 @@ export class Virtualizer<
   }
 
   measure = () => {
-    this.itemSizeCache = {}
+    this.itemSizeCache = new Map()
     this.notify()
   }
 }