better routes config

src/App.svelte

@@ -7,7 +7,6 @@
 	/** layout */
 	import routes from './__routes'
 	import Error from './__error.svelte'
-	import LazyRoute from '$lib/router/LazyRoute.svelte'
 	import LazyRouteGuard from '$lib/router/LazyRouteGuard.svelte'
 
 	let isMounted = false
@@ -30,9 +29,13 @@
 	{#if !$isLoading && isMounted}
 		{#each routes as { path, layout, component, loading }}
 			<Route {path} let:location let:params>
-				<svelte:component this={layout}>
+				{#if layout}
+					<svelte:component this={layout}>
+						<LazyRouteGuard {location} {params} {component} {loading} />
+					</svelte:component>
+				{:else}
 					<LazyRouteGuard {location} {params} {component} {loading} />
-				</svelte:component>
+				{/if}
 			</Route>
 		{/each}
 		<Route path="/*" component={Error} />

src/__routes.ts

@@ -1,8 +1,27 @@
 import { defineRoutes } from '$lib/router';
 
-export default defineRoutes([
-	{ path: '/', component: () => import('$routes/index.svelte') },
-	{ path: '/oauth', component: () => import('$routes/oauth/index.svelte') },
-	{ path: '/oauth/failure', component: () => import('$routes/oauth/failure.svelte') },
-	{ path: '/oauth/success', component: () => import('$routes/oauth/success.svelte') },
-])
+import Layout from '$src/__layout.svelte'
+import Loading from '$src/__loading.svelte'
+
+export default defineRoutes({
+	routes: [
+		{ 
+			path: '/', 
+			component: () => import('./routes/index.svelte') 
+		},
+		{ 
+			path: '/oauth', 
+			component: () => import('$routes/oauth/index.svelte') 
+		},
+		{ 
+			path: '/oauth/failure', 
+			component: () => import('$routes/oauth/failure.svelte') 
+		},
+		{ 
+			path: '/oauth/success', 
+			component: () => import('$routes/oauth/success.svelte') 
+		},
+	],
+	layout: Layout,
+	loading: Loading,
+})

src/lib/router/routes.ts

@@ -1,6 +1,3 @@
-import Layout from '$src/__layout.svelte'
-import Loading from '$src/__loading.svelte'
-
 import { ComponentType, SvelteComponentTyped  } from 'svelte'
 
 export interface Route {
@@ -13,16 +10,18 @@ export interface Route {
 interface RouteDefinition {
 	component: () => Promise<any>,
 	path: string,
-	layout: ComponentType<SvelteComponentTyped<any>>,
-	loading: ComponentType<SvelteComponentTyped<any>>,
+	layout: ComponentType<SvelteComponentTyped<any>> | null,
+	loading: ComponentType<SvelteComponentTyped<any>> | null,
 }
 
-interface RouteDefault {
-	layout: ComponentType<SvelteComponentTyped<any>>,
-	loading: ComponentType<SvelteComponentTyped<any>>,
+interface RouteConfig {
+	routes: Route[],
+	layout?: ComponentType<SvelteComponentTyped<any>> | null,
+	loading?: ComponentType<SvelteComponentTyped<any>> | null,
 }
 
-const defineRoutes = (routes: Route[], { layout = Layout, loading = Loading }: RouteDefault = { layout: Layout, loading: Loading }): RouteDefinition[] => 
-	routes.map(route => ({ ...route, layout: route?.layout ?? layout, loading: route?.loading ?? loading }))
+const defineRoutes = (config: RouteConfig): RouteDefinition[] => {
+	return config.routes.map(route => ({ ...route, layout: route?.layout ?? config?.layout ?? null, loading: route?.loading ?? config?.loading ?? null }))
+}
 
 export default defineRoutes