Single file router for svelte.

location.js

import { writable } from 'svelte/store'

const location = writable(window.location.pathname)
export default location

export let noMatch = writable(true)
location.subscribe(_ => noMatch.set(true))

window.addEventListener('popstate', e => location.set(window.location.pathname))

let hasPrevious = false

export function navigate(_path, replace = false) {
  hasPrevious = true
  const fn = replace ? 'replaceState' : 'pushState'
  history[fn](null, '', _path)
  location.set(window.location.pathname)
}

export function back() {
  if (hasPrevious) history.back()
  else navigate(window.location.pathname.replace(/[^/]+\/?$/, ''))
}

Route.svelte

<script>
  import UrlPattern from 'url-pattern'
  import location, { navigate, noMatch } from './location.js'

  export let path
  export let component = undefined
  export let redirect = undefined

  $: pattern = new UrlPattern(path)
  $: router = {
    params: pattern.match($location),
    path: $location,
  }
  $: {
    if (router.params !== null) {
      $noMatch = false
      if (redirect) navigate(redirect, true)
    }
  }
</script>

{#if router.params !== null}
  {#if component}
    <svelte:component this={component} {router} {...$$restProps} />
  {:else}
    <slot {router} />
  {/if}
{/if}