Svelte 5 support

[J4gQBqqR]

Event syntax like on:inview_change is not supported in svelte 5 anymore.

[maciekgrzybek]

Is svelte 5 even released yet? Seems like it's not 🤔

[J4gQBqqR]

I guess it wouldn't hurt to bring the umbrella before it rains? 😉

[maciekgrzybek]

Yeah sure thing :) I was just afraid that I missed it :) Not sure if I'll find the time soon... Are you interested in doing this? :)

[J4gQBqqR]

<script lang="ts">
    import {
        inview,
        type Options,
        type ObserverEventDetails,
    } from "svelte-inview";

    let isInView: boolean = $state(false);
    const options: Options = { rootMargin: "-100px" };
</script>

<div
    use:inview={options}
    oninview_change={(event: CustomEvent<ObserverEventDetails>) => {
        const { inView, entry, scrollDirection, observer, node } = event.detail;
        isInView = inView;
    }}
    oninview_enter={(event: CustomEvent<ObserverEventDetails>) => {
        const { inView, entry, scrollDirection, observer, node } = event.detail;
        isInView = inView;
    }}
    oninview_leave={(event: CustomEvent<ObserverEventDetails>) => {
        const { inView, entry, scrollDirection, observer, node } = event.detail;
        isInView = inView;
    }}
    oninview_init={(event: CustomEvent<LifecycleEventDetails>) => {
        const { observer, node } = event.detail;
    }}
>
    {isInView ? "Hey I am in the viewport" : "Bye, Bye"}
</div>

I tested and verified that the above code works in svelte 5. However, there is one caveat: Not sure this VS Code prompt is coming from svelte 5's incomplete language tool or this library's incompatible type definition between svelte 5.

[jhubbardsf]

I believe this should fix the issue with Svelte5 @maciekgrzybek @J4gQBqqR

https://github.com/maciekgrzybek/svelte-inview/pull/50

Docs: https://svelte.dev/docs/svelte-action#types-actionreturn

[travisdmathis]

can confirm this works after audit fixes for vulnerabilities..

https://github.com/travisdmathis/svelte-5-inview -- deployed and tested because I couldn't wait around for a merge.

npm install svelte-5-inview

will kill this package once you merge and update.

[maciekgrzybek]

Hey folks, sorry for lack of response, I had busy period.... I'll try to merge the update this week 👌

[matteocontrini]

Is there a particular reason why the naming convention used here is a mix of styles?

I would expect the handler methods to be called something like onInviewChange, instead of the (IMO weird) oninview_change.

Btw, thanks everyone for the efforts :)

[jhubbardsf]

@matteocontrini

This is just the new Svelte 5 event handler naming convention (link)