Support svelte 5

[J4gQBqqR]

Svelte introduces runes and changes to event. I rewrote your component using svelte 5 and typescript. I do not know your opinion on typescript and therefore did not create pull request.

Here is the code for your reference:

<script lang="ts">
    import { inview } from "svelte-inview";

    let isInView: boolean = $state(false);

    let {
        value,
        initial = 0,
        duration = 3000,
        step = 1,
        roundto = 1,
        format = true,
    }: {
        value: number;
        initial?: number;
        duration?: number;
        step?: number;
        roundto?: number;
        format?: boolean;
    } = $props();

    function formatNumber(input: number) {
        if (format) {
            return Math.round(input).toLocaleString();
        }
        return input;
    }

    let counterResult: number = $state(initial);
    let timers: number;

    while (duration / ((value - initial) / step) < 2) {
        step++;
    }

    timers = setInterval(
        () => {
            if (isInView) {
                if (counterResult < value) {
                    counterResult += step;
                } else {
                    clearInterval(timers);
                    counterResult = Math.round(value / roundto) * roundto;
                }
            }
        },
        duration / ((value - initial) / step),
    );
</script>

<span
    use:inview
    oninview_change={(event: CustomEvent<ObserverEventDetails>) => {
        const { inView } = event.detail;
        isInView = inView;
    }}
>
    {formatNumber(counterResult)}
</span>

[J4gQBqqR]

BTW, the update interval is 2 milliseconds (while (duration / ((value - initial) / step) < 2) {) this is way too aggressive. I would suggest set something as 50ms.

• Persistence of Vision: ~50 milliseconds.
• Average Visual Reaction Time: 200-250 milliseconds.
• High-Speed Perception: Can be as fast as 100 milliseconds in trained individuals.

[saadeghi]

Thank you.
Using runes is not backward compatible so the component will be incompatible with all Svelte 4 and Svelte 3 apps if we use runes.
I think it's still too soon. Especially when stable version of Svelte 5 is not released yet.