Will the library support Svelte 5?

[0x5374656c6c6172]

No description provided.

[carbogninalberto]

We will make it happen at some point if @ItalyPaleAle approves it!

[ItalyPaleAle]

Yes support for Svelte 5 is definitely a goal. I'll look into it when the Svelte 5 project becomes a bit more stable

(And of course, PRs are welcome :) )

[tgf9]

Svelte recently published their Svelte 5 release candidate.

Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.

https://svelte.dev/blog/svelte-5-release-candidate

And Rich offered a few pointers on migrating libs in the Svelte5 RC release announcement

[carbogninalberto]

From this page @tgf9 you can also monitor the actual status: https://svelte-5-preview.vercel.app/status

We are already working on the migration to make it available as soon as v5 is ready 👍

[ItalyPaleAle]

Should have something ready in the next few days :)

I believe the router should still work with v5 for now, temporarily, thanks to the backwards-compatibility

[oneezy]

Should have something ready in the next few days :)

any updates on this?

[carbogninalberto]

Svelte 5 has been officially released, we are looking forward to supporting it in the next few weeks!

[carbogninalberto]

I just looked into it, if you upgrade right now to svelte 5 it will work fine, I didn't find any issue this thanks to the backward compatibility, but if you want to be sure wait a little bit until I prepare the PR :)

Quick note:
if you absolutely need to upgrade to access the new features like the snippets, for a while set this in your vite.config.js:

compilerOptions: {
  compatibility: {
    componentApi: 4
  }
},

Stay tuned!

[nyhr]

Svelte 5 is not compatible with svelte-spa-router/wrap

'Type 'Component<$$ComponentProps, {}, "">' is not assignable to type 'ComponentType'.
Type 'Component<$$ComponentProps, {}, "">' is not assignable to type 'new (options: ComponentConstructorOptions<Record<string, any>>) => SvelteComponent<Record<string, any>, any, any>'.
Type 'Component<$$ComponentProps, {}, "">' provides no match for the signature 'new (options: ComponentConstructorOptions<Record<string, any>>): SvelteComponent<Record<string, any>, any, any>'

[ItalyPaleAle]

Hey folks, thanks for your patience. I've been incredibly busy with my day job and I'm currently on vacation. I'm hoping to get this done in the next week.

[SaadiSave]

@carbogninalberto Could you please explain how you got it working on Svelte 5? I am trying this, but it does not work:

BlogPost.svelte

<script lang="ts">
    import { onMount } from "svelte"
    import preprocessPost from "../lib/preprocess-post"

    let { path: string } = $props()

    let content = $state("")

    onMount(async () => {
        const post = await fetch(path)

        content = await post.text()

        content = preprocessPost(content)
    })
</script>

{@html content}

App.svelte

<script lang="ts">
  import BlogPost from "./components/BlogPost.svelte"
  import Router from "svelte-spa-router"
  import posts from "./lib/posts"

  const routes = {
      '/blog/:path': BlogPost,
  }
</script>

<ul>
    {#each posts as post}
        <li><a href="#/blog/{post.path}">{post.title}</a></li>
    {/each}
</ul>

<Router routes={routes} />

I am trying to bind path and use it to dynamically load a blog post

[carbogninalberto]

on this line update from:

<li><a href="#/blog/{post.path}">{post.title}</a></li>

to

<li><a href="/#/blog/{post.path}">{post.title}</a></li>

or

<li><a href="/blog/{post.path}" use:link>{post.title}</a></li>

[betim]

export let params = {} works as long as runes are not used. The moment $state() or any rune is present then it breaks.

A workaround:

// http://localhost:5173/#/admin/order/20
let params = window.location.href.split("/");
let id = params[params.length - 1];

Hopefully gets resolved soon.

[carbogninalberto]

I have looked into the support for svelte 5 it will take a bit longer because there are some parts of the code that need a refactor.

I will open the PR soon.

[mateothegreat]

I was a full invested svelte-spa-router user until 5 dropped and didn't have a choice but to do my part and throw up https://github.com/mateothegreat/svelte5-router for the community. Hope it unblocks somebody.

Thank you for all your hard work in keeping this lib alive -- it definitley inspired me <3

[brandonkal]

@mateothegreat that is not appear to be a hash-based router so it is not comparable

[dvcol]

@brandonkal If you really need a svelte 5 native hash router, I wrote something a few month back.

It's jsut a side project however, so I would be wary of using it in prod.
For serious projects, I'd wait for @doregex's PR.