Feature Request for Svelte 5 support

[GELight]

Environment:

I have installed your router (I already used it in my old Svelte 3 and Svelte 4 projects) in my new Svelte 5 environment.

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 14.18 GB / 30.48 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.7.0 - ~/.nvm/versions/node/v22.7.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.7.0/bin/npm
  Browsers:
    Brave Browser: 128.1.69.168
    Chrome: 128.0.6613.137
  npmPackages:
    svelte: 5.0.0-next.246 => 5.0.0-next.246

Problem:

Visually the router is running, but my console log shows errors on mount and on every router navigation.

The error looks like this:

This is my using:

<Router url="/">
    <nav>
        <cow-ps-button
            onclick="{() => navigateTo('/')}"
            onkeydown="{(event: KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') navigateTo('/'); }}"
            role="button" tabindex="0">Home
        </cow-ps-button>
        <cow-ps-button
            onclick="{() => navigateTo('/button')}"
            onkeydown="{(event: KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') navigateTo('/button'); }}"
            role="button" tabindex="0">Home
        </cow-ps-button>
    </nav>
    <div class="showcase-page">
        <Route component={Home} path="/" />
        <Route component={Button} path="/button" />
    </div>
</Router>

Note:

The cow-ps-button component is a custom element which is imported in my index.html
(not inside my Svelte component where I use the router).

No errors occurred in older versions of Svelte.

[HNazmul-IV]

svelte 5 support would be great..

[GELight]

Short Info ... Svelte ist Not more in a"next" Version. The new Version ist released and stable.
https://svelte.dev/blog/svelte-5-is-alive

[angryziber]

The error is in Route.svelte file:

        if (c) {
            if (c.toString().startsWith("class ")) component = c;
            else component = c();
        }

In Svelte 5, components are not classes anymore, so this check is invalid.

The above PR still has these lines, so passing component property still won't work with Svelte 5.

[GELight]

I hope the migration to Svelte 5 ist possible to implement the next time. I could need it for my current project.

Greetings Mario

[angryziber]

Non-migrated version works with Svelte 5, except for the class check hack.

…

On Thu, Oct 31, 2024, 20:56 Mario Linz ***@***.***> wrote: I hope the migration to Svelte 5 ist possible to implement the next time. I could need it for my current project. Greetings Mario — Reply to this email directly, view it on GitHub <#307 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGXKYGXBL64I36CTGUZLKTZ6J4PLAVCNFSM6AAAAABOGENUHKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGYYTCMJYGY> . You are receiving this because you commented.Message ID: ***@***.***>

[JacobCutshall]

There is a forked version that is migrated to svelte5 here

[GELight]

Hi @JacobCutshall ,

You like to maintain this fork in future?
If not then its better for me to wait for this official package.

Mario

[jpcutshall]

@GELight I do plan on maintaining it. It isn't fully migrated yet. It is currently missing proper implementations for 2 props currently 'getProps' & 'component'

[webJose]

If you're looking for a Svelte v5 native, since none of the v4 seems to be willing to upgrade: @wjfe/n-savant

[notnotsamuel]

Hey guys! I ran into the same issue when migrating to Svelte 5.
As a fix, I built Svelte Tiny Router—a minimalistic and declarative router fully compatible with Svelte 5. It's super lightweight, requires no extra dependencies and pretty much has the same syntax as svelte-routing!