Update for Svelte 5

[groundbirdaircat]

Svelte 5 now has a RC, so I'm curious if there are any chances of this being updated to support Svelte 5?

I'm thinking a minimal update would only require updating peer dependencies.

This would at least get rid of the warning when installing packages:

npm WARN Could not resolve dependency:
npm WARN peer svelte@">=3.5.0" from svelte-virtual-scroll-list@1.3.0
npm WARN node_modules/svelte-virtual-scroll-list
npm WARN   dev svelte-virtual-scroll-list@"^1.3.0" from the root project
npm WARN
npm WARN Conflicting peer dependency: svelte@4.2.15
npm WARN node_modules/svelte
npm WARN   peer svelte@">=3.5.0" from svelte-virtual-scroll-list@1.3.0
npm WARN   node_modules/svelte-virtual-scroll-list
npm WARN     dev svelte-virtual-scroll-list@"^1.3.0" from the root project

However, to be compatible with Svelte 5 configured to Runes mode project-wide, more involved changes would be required.

Are there any plans/thoughts on this matter?

[GimpMaster]

I would like to know the same. Whether this project is abandoned or not. Its one of the few that I found to work decently well with dynamic sized data.

[v1ack]

Hello Unfortunately I'm no longer frontend dev and I don't have time to maintain this lib. But MR welcome

[mrxbox98]

I tried just changing the Item.svelte to svelte 5 and scrolling through the list would randomly jump for me. If anyone else wants to look over it:

<svelte:options runes={true} />

<script lang="ts">
    import { onDestroy, onMount } from "svelte";

    const {
        resize,
        horizontal = false,
        uniqueKey,
        type = "item",
    }: {
        resize: (arg0: { id: any; size: number; type: any }) => void;
        horizontal: boolean;
        uniqueKey: any;
        type: string;
    } = $props();

    let resizeObserver: ResizeObserver | null;
    let itemDiv: HTMLElement;
    let previousSize: number;

    const shapeKey = horizontal ? "offsetWidth" : "offsetHeight";

    onMount(() => {
        if (typeof ResizeObserver !== "undefined") {
            resizeObserver = new ResizeObserver(dispatchSizeChange);
            resizeObserver.observe(itemDiv);
        }
    });

    $effect(dispatchSizeChange);

    onDestroy(() => {
        if (resizeObserver) {
            resizeObserver.disconnect();
            resizeObserver = null;
        }
    });

    function dispatchSizeChange() {
        const size = itemDiv ? itemDiv[shapeKey] : 0;
        if (size === previousSize) return;
        previousSize = size;
        resize({ id: uniqueKey, size, type });
    }
</script>

<div bind:this={itemDiv} class="virtual-scroll-item">
    <slot />
</div>