fix(svelte-virtual): read a scroll element bound after the store subscribes

.changeset/bound-rows-render.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-virtual': patch
+---
+
+Read the scroll element again after Svelte updates the DOM, so a virtualizer whose scroll element is assigned with `bind:this` after the store is subscribed renders its rows.

packages/svelte-virtual/src/index.ts

@@ -7,6 +7,7 @@ import {
   observeWindowRect,
   windowScroll,
 } from '@tanstack/virtual-core'
+import { tick } from 'svelte'
 import { derived, writable } from 'svelte/store'
 import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
 import type { Readable, Writable } from 'svelte/store'
@@ -64,7 +65,17 @@ function createVirtualizerBase<
 
   virtualizerWritable = writable(virtualizer, () => {
     setOptions({})
-    return virtualizer._didMount()
+    let subscribed = true
+    // The store is usually subscribed before `bind:this` assigns the scroll
+    // element, so read it again once Svelte has updated the DOM.
+    tick().then(() => {
+      if (subscribed) virtualizer._willUpdate()
+    })
+    const cleanup = virtualizer._didMount()
+    return () => {
+      subscribed = false
+      cleanup()
+    }
   })
 
   return derived(virtualizerWritable, (instance) =>

packages/svelte-virtual/tests/index.test.ts

@@ -1,3 +1,4 @@
+import { tick } from 'svelte'
 import { get } from 'svelte/store'
 import { describe, expect, test, vi } from 'vitest'
 import { createVirtualizer, createWindowVirtualizer } from '../src'
@@ -149,3 +150,33 @@ describe.each([
     }
   })
 })
+
+test('createVirtualizer reads a scroll element bound after subscribing', async () => {
+  let scrollElement: Element | null = null
+  const subscriber = vi.fn()
+  const store = createVirtualizer<Element, Element>({
+    count: 100,
+    estimateSize: () => 40,
+    getScrollElement: () => scrollElement,
+    observeElementRect: (_instance, cb) => {
+      cb({ width: 400, height: 400 })
+    },
+    observeElementOffset: () => {},
+    scrollToFn: () => {},
+  })
+  const unsubscribe = store.subscribe(subscriber)
+  const virtualizer = get(store)
+
+  try {
+    expect(virtualizer.getVirtualItems()).toHaveLength(0)
+
+    scrollElement = {} as Element
+    subscriber.mockClear()
+    await tick()
+
+    expect(virtualizer.getVirtualItems()).toHaveLength(11)
+    expect(subscriber).toHaveBeenCalledWith(virtualizer)
+  } finally {
+    unsubscribe()
+  }
+})