Svelte 5 support

[benmccann]

I put together a branch for Svelte 5 support: https://github.com/benmccann/component-party.dev/tree/demo

Is this something you'd want me to PR now or wait until it's released? It's possible the syntax will change before release - though I imagine it shouldn't be too hard to update if a rune gets renamed or something like that and I'd be happy to send a PR for it.

You can check it out here: https://component-party-runes.vercel.app/

My branch shows Svelte 4 vs Svelte 5 by default just for the deployed demo, but I could revert that part of the change. The only other thing to mention is that I disabled linting against the Svelte 5 version until eslint-plugin-svelte adds support for runes.

[matschik]

Thanks a lot for your work ! It's a great way to have a preview of Svelte 5.
Here some things I think need changes:

• if the onMount is used in mount example,onDestroy in the unmount snippet need to be used instead of $effect. I think to showcase $effect would be a dedicated example where $effect is more suitable
• The Fetch data example is too much different from other frameworks. It's also a great way to show how to reuse code in Svelte 5. In real world app, await syntax is rarely used to fetch data for a lot of reasons: see Svelte TanStack query for instance.

[matschik]

I would be happy to include your work into the main branch.
The label would be "Svelte 5 (preview)" and would be in the hidden frameworks part of the navigation.

And to share CP to show directly Svelte 4 VS Svelte 5, we can share this url: https://component-party.dev/?f=svelte,svelte5

What do you think ?

[benmccann]

if the onMount is used in mount example,onDestroy in the unmount snippet need to be used instead of $effect. I think to showcase $effect would be a dedicated example where $effect is more suitable

Yeah, I've been going back and forth on this. I'd originally had it as $effect in the on mount example. Another maintainer weighed in and suggested changing it to onMount, which I did. Lots of folks have been confused by this on Discord and Rich said he would write it as $effect, so we should probably to change it back to $effect. You can write it either way and they're both valid, but I think I'd end up writing it as $effect personally as it's simpler not to have to import it.

The Fetch data example is too much different from other frameworks. It's also a great way to show how to reuse code in Svelte 5. In real world app, await syntax is rarely used to fetch data for a lot of reasons: see Svelte TanStack query for instance.

Hmm, I'm not sure about this one. For now I'll use the old method and we can take the discussion to #183 and discuss it separately.

The label would be "Svelte 5 (preview)" and would be in the hidden frameworks part of the navigation.
And to share CP to show directly Svelte 4 VS Svelte 5, we can share this url: https://component-party.dev/?f=svelte,svelte5
What do you think ?

Sounds great!