2020-11-14 04:42:32 +13:00
|
|
|
<script>
|
2020-11-19 08:18:18 +13:00
|
|
|
import { onMount } from "svelte"
|
2020-11-14 04:42:32 +13:00
|
|
|
import Router from "svelte-spa-router"
|
2020-11-19 08:18:18 +13:00
|
|
|
import { routeStore, screenStore } from "../store"
|
2020-11-14 04:42:32 +13:00
|
|
|
import Screen from "./Screen.svelte"
|
2020-11-19 08:18:18 +13:00
|
|
|
import { styleable } from "../utils"
|
2020-11-14 04:42:32 +13:00
|
|
|
|
2020-11-18 01:08:24 +13:00
|
|
|
export let styles
|
2020-11-20 07:39:22 +13:00
|
|
|
$: routerConfig = getRouterConfig($routeStore.routes)
|
2020-11-14 04:42:32 +13:00
|
|
|
|
2020-11-20 07:39:22 +13:00
|
|
|
const getRouterConfig = routes => {
|
|
|
|
let config = {}
|
|
|
|
routes.forEach(route => {
|
|
|
|
config[route.path] = Screen
|
2020-11-14 04:42:32 +13:00
|
|
|
})
|
2020-11-18 01:08:24 +13:00
|
|
|
|
|
|
|
// Add catch-all route so that we serve the Screen component always
|
2020-11-20 07:39:22 +13:00
|
|
|
config["*"] = Screen
|
|
|
|
return config
|
|
|
|
}
|
2020-11-14 04:42:32 +13:00
|
|
|
|
2020-11-20 07:39:22 +13:00
|
|
|
const onRouteLoading = ({ detail }) => {
|
2020-11-18 01:08:24 +13:00
|
|
|
routeStore.actions.setActiveRoute(detail.route)
|
2020-11-14 04:42:32 +13:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-11-20 07:39:22 +13:00
|
|
|
{#if routerConfig}
|
2020-11-18 01:08:24 +13:00
|
|
|
<div use:styleable={styles}>
|
2020-11-20 07:39:22 +13:00
|
|
|
<Router on:routeLoading={onRouteLoading} routes={routerConfig} />
|
2020-11-18 01:08:24 +13:00
|
|
|
</div>
|
2020-11-14 04:42:32 +13:00
|
|
|
{/if}
|