Reference error when using scrollToIndex on a component at first mount on v4.0.0-rc.2

[Plenituz]

Problem

When using the scrollToIndex prop on the VirtualList component by default (as opposed to adding the scrollToIndex after it's been on the screen before) I get a Uncaught ReferenceError: Cannot access 'heightNumber' before initialization.

Investigation

I explored an bit and found out it's because the getOffsetForIndex function uses the heightNumber, widthNumber and scroll variables before they are declared because getOffsetForIndex is being called while initializing scroll if a scrollToIndex is provided on first mount.

heightNumber and widthNumber are easy to move above the scroll declaration but fixing scroll depending on itself might require some restructuring that I felt you might want to handle yourself

Minimal reproduction page

<script>
    import VirtualList from "svelte-tiny-virtual-list";

    let showList = $state(false)
    let scrollToIndex = 300;
    let data = Array.from({length: 1000}, (_, i) => i);

</script>
{#if !showList}
    <button onclick={() => showList = true}>Show List</button>
{/if}
{#if showList}
    <VirtualList
            height={300}
            width="100%"
            itemCount={data.length}
            itemSize={32}
            overscanCount={20}
            scrollToIndex={scrollToIndex}
            scrollToAlignment="start"
            scrollToBehaviour="instant"
    >
        {#snippet item({ style, index })}
            <div {style}>
                Item {index}
            </div>
        {/snippet}
    </VirtualList>
{/if}

Thanks!

[TutorLatin]

Thanks for the report. I was able to reproduce the problem.

I haven’t opened a PR since it looks like the relevant code might be mid-refactor, and I didn’t want to interfere with ongoing work.

I've fixed this in a maintained fork here: @tutorlatin/svelte-tiny-virtual-list