budibase/packages/client/src/components/Router.svelte

<script>
  import { getContext } from "svelte"
  import Router from "svelte-spa-router"
  import { routeStore } from "../store"
  import Screen from "./Screen.svelte"

  const { styleable } = getContext("sdk")
  const component = getContext("component")

  $: routerConfig = getRouterConfig($routeStore.routes)

  const getRouterConfig = routes => {
    let config = {}
    routes.forEach(route => {
      config[route.path] = Screen
    })

    // Add catch-all route so that we serve the Screen component always
    config["*"] = Screen
    return config
  }

  const onRouteLoading = ({ detail }) => {
    routeStore.actions.setActiveRoute(detail.route)
  }
</script>

{#if routerConfig}
  <div use:styleable={$component.styles}>
    <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
  </div>
{/if}

<style>
  div {
    position: relative;
  }
</style>