@tanstack/svelte-router

Experimental community port of TanStack Router for Svelte 5, translated faithfully from the Solid adapter. Not an official TanStack release. Requires svelte ^5.0.0. Status: experimental, v0.0.1-experimental. Test in a GitHub Codespace.

Install

Not published to npm. Pin the three packages in package.json so existing @tanstack/svelte-router imports resolve transparently: 

{
  "dependencies": {
    "@tanstack/svelte-router": "github:y7ya-com/svelte-router#v0.0.1-experimental"
  },
  "devDependencies": {
    "@tanstack/router-plugin": "github:y7ya-com/router-plugin#v0.0.1-experimental",
    "@tanstack/router-generator": "github:y7ya-com/router-generator#v0.0.1-experimental"
  }
}

Single-file routes

Routes colocate route config and component in one .svelte file via Svelte 5's <script module> block. Same shape as the React and Solid adapters, just in a Svelte SFC: 

<script module lang="ts">
  import { createFileRoute } from '@tanstack/svelte-router'
  import { fetchPost } from '../posts'

  export const Route = createFileRoute('/posts/$postId')({
    loader: ({ params }) => fetchPost(params.postId),
    errorComponent: ({ error }) => `Failed: ${error.message}`,
    pendingComponent: () => 'Loading…',
  })
</script>

<script lang="ts">
  import { Outlet } from '@tanstack/svelte-router'
  const post = Route.useLoaderData()
</script>

<article>
  <h1>{post.current.title}</h1>
  <Outlet />
</article>

Why & How

I wanted a Svelte TanStack Router to exist because I decided it was easier to onboard newer developers on Svelte than it is to teach them React and JSX, despite my preference for JSX frameworks. So as a result I burnt a bunch of tokens to get an implementation working, which I'm currently using in low-stakes production environments. Needless to be said, this is a super experimental implementation which I don't advise anyone to use in production, but hopefully it can at least serve as some kickstarter for an official implementation. If an official implementation comes along, my goal is to have migration being as simple as changing the dependencies in package.json from github:y7ya-com/svelte-router#v0.0.1-experimental to 1.0.0.

To solve the problem birkskyum outlined in this comment I decided to use a bit of an unconventional approach. I built the port effectively as a faithful translation of the Solid implementation, as it's closer to Svelte in its reactivity model. When dealing with the tests I built a narrow JSX-to-Svelte test compiler, built exclusively against the testing patterns in the TanStack Router Solid tests. This way I only have to maintain the compiler instead of a suite of tests. This implementation achieved a 97% pass rate on the compiled tests, the remaining 3% being Solid-specific tests that are skipped. I created a .j2signore file to tell the compiler which tests to skip. The adapter source, the 'svelte' targets on the generator and plugin, and the test compiler all live on y7ya-com/router#feat/svelte-router .