Types

import type {
    SvelteVirtualListProps,
    SvelteVirtualListMode,
    SvelteVirtualListScrollOptions,
    SvelteVirtualListScrollAlign,
    SvelteVirtualListDebugInfo
} from '@humanspeak/svelte-virtual-list'

type SvelteVirtualListProps<TItem = any> = {
    items: TItem[]
    renderItem: Snippet<[item: TItem, index: number]>
    mode?: SvelteVirtualListMode
    bufferSize?: number
    defaultEstimatedItemHeight?: number
    debug?: boolean
    debugFunction?: (info: SvelteVirtualListDebugInfo) => void
    containerClass?: string
    viewportClass?: string
    contentClass?: string
    itemsClass?: string
    testId?: string
    onLoadMore?: () => void | Promise<void>
    loadMoreThreshold?: number
    hasMore?: boolean
}

type SvelteVirtualListMode = 'topToBottom' | 'bottomToTop'

interface SvelteVirtualListScrollOptions {
    index: number
    smoothScroll?: boolean
    shouldThrowOnBounds?: boolean
    align?: SvelteVirtualListScrollAlign
}

type SvelteVirtualListScrollAlign = 'auto' | 'top' | 'bottom' | 'nearest'

type SvelteVirtualListDebugInfo = {
    startIndex: number
    endIndex: number
    totalItems: number
    visibleItemsCount: number
    processedItems: number
    averageItemHeight: number
    atTop: boolean
    atBottom: boolean
    totalHeight: number
}

<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'

    type User = {
        id: number
        name: string
        email: string
    }

    const users: User[] = [] // populate with user data
</script>

<VirtualList items={users}>
    {#snippet renderItem(user: User, index: number)}
        <div>
            <strong>{user.name}</strong>
            <span>{user.email}</span>
        </div>
    {/snippet}
</VirtualList>