frameworkify

.env

@@ -0,0 +1,8 @@
+# project endpoint (required) [http://localhost/v1]
+VITE_APPWRITE_ENDPOINT=http://localhost/v1
+
+# project id (required) [638871b363904655d784]
+VITE_APPWRITE_PROJECT_ID=638871b363904655d784
+
+# project hostname (required) [http://localhost:5173]
+VITE_HOSTNAME=http://localhost:5173

src/App.svelte

@@ -5,9 +5,9 @@
 	import { Router, Route } from '$lib/router'
 
 	/** layout */
-	import Routes from './__routes.svelte'
+	import routes from './__routes'
 	import Error from './__error.svelte'
-	import Layout from './__layout.svelte'
+	import LazyRoute from '$lib/router/LazyRoute.svelte'
 
 	let isMounted = false
 	onMount(() => {
@@ -25,11 +25,13 @@
 	})
 </script>
 
-<Layout>
+<Router>
-	<Router>
+	{#if !$isLoading && isMounted}
-		{#if !$isLoading && isMounted}
+		{#each routes as { path, layout, component }}
-			<Routes />
+			<svelte:component this={layout}>
-			<Route path="/*" component={Error} />
+				<LazyRoute {path} {component} />
-		{/if}
+			</svelte:component>
-	</Router>
+		{/each}
-</Layout>
+		<Route path="/*" component={Error} />
+	{/if}
+</Router>

src/__loading.svelte

@@ -0,0 +1 @@
+<p>Loading...</p>

src/__routes.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Route } from '$lib/router'
-
-	/** routes */
-	import Index from '$routes/index.svelte'
-
-	/** oauth routes */
-	import Failure from '$routes/oauth/failure.svelte'
-	import OAuth from '$routes/oauth/index.svelte'
-	import Success from '$routes/oauth/success.svelte'
-</script>
-
-<Route path="/" component={Index} />
-<Route path="/oauth" component={OAuth} />
-<Route path="/oauth/failure" component={Failure} />
-<Route path="/oauth/success" component={Success} />

src/__routes.ts

@@ -0,0 +1,8 @@
+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') },
+])

src/lib/appwrite.ts

@@ -1,5 +1,4 @@
 import { Client, Account, Databases, Storage, Teams, Functions, Locale, Avatars } from 'appwrite'
-import settings from '../appwriteSettings'
 
 const client = new Client()
 const account = new Account(client)
@@ -12,12 +11,12 @@ const avatars = new Avatars(client)
 
 const url = {
 	oauth: {
-		success: 'http://localhost:5173/oauth/success',
+		success: `${import.meta.env.VITE_HOSTNAME}/oauth/success`,
-		failure: 'http://localhost:5173/oauth/failure'
+		failure: `${import.meta.env.VITE_HOSTNAME}/oauth/failure`
 	}
 }
 
-client.setEndpoint(settings.endpoint).setProject(settings.project)
+client.setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT).setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID)
 
 export default client
 export { client, account, url, databases, storage, teams, functions, locale, avatars }

src/lib/appwriteSettings.ts

@@ -1,4 +0,0 @@
-export default {
-	endpoint: 'http://localhost/v1',
-	project: '638871b363904655d784'
-}

src/lib/auth.ts

@@ -1,6 +1,6 @@
 import type { Models, RealtimeResponseEvent } from 'appwrite'
 import { writable } from 'svelte/store'
-import { account, client } from './stores/appwrite'
+import { account, client } from './appwrite'
 
 const userStore = writable<Models.Account<Models.Preferences>>(null)
 const loadingStore = writable(true)

src/lib/components/Stack.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let space = '3rem'
+</script>
+
+<div class="layout-stack" style="--space: {space};">
+	<slot />
+</div>
+
+<style lang="scss">
+	:global(.layout-stack) {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+
+		& > * {
+			margin-block: 0;
+		}
+
+		& > * + * {
+			margin-block-start: var(--space, 1.5rem);
+		}
+	}
+</style>

src/lib/database.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store'
-import { databases, client } from './stores/appwrite'
+import { databases, client } from './appwrite'
 import { Models, Query, RealtimeResponseEvent } from 'appwrite'
 import { ID } from 'appwrite'
 import type { Writable } from 'svelte/store'

src/lib/router.ts

@@ -2,5 +2,7 @@ import { Route, Router, link, links, Link } from 'svelte-routing'
 import { navigate, back, forward } from './router/navigate'
 import Redirect from "./router/Redirect.svelte"
 import ProtectedRoute from "./router/ProtectedRoute.svelte"
+import LazyRoute from "./router/LazyRoute.svelte"
+import defineRoutes from "./router/routes"
 
-export { Route, Router, Link, link, links, navigate, back, forward, Redirect, ProtectedRoute }
+export { Route, Router, Link, link, links, navigate, back, forward, Redirect, ProtectedRoute, LazyRoute, defineRoutes }

src/lib/router/LazyRoute.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { ComponentType, SvelteComponentTyped } from 'svelte'
+
+	export let path: string
+	export let component: () => Promise<any>
+	export let loading: ComponentType<SvelteComponentTyped<any>> | null = null
+
+	import { Route } from '$lib/router'
+	import LazyRouteGuard from './LazyRouteGuard.svelte'
+</script>
+
+<Route {path} let:location let:params>
+	<LazyRouteGuard {location} {params} {component} {loading} />
+</Route>

src/lib/router/LazyRouteGuard.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import type { ComponentType, SvelteComponentTyped } from 'svelte'
+	import type { RouteLocation, RouteParams } from 'svelte-routing/types/Route'
+
+	export let component: () => Promise<any>
+	export let loading: ComponentType<SvelteComponentTyped<any>> | null = null
+	export let location: RouteLocation
+	export let params: RouteParams
+
+	let loadedComponent = null
+
+	onMount(() => {
+		component().then((module) => {
+			loadedComponent = module.default
+		})
+	})
+</script>
+
+{#if loadedComponent}
+	<svelte:component this={loadedComponent} {params} {location} />
+{:else if loading}
+	<svelte:component this={loading} {params} {location} />
+{/if}

src/lib/router/routes.ts

@@ -0,0 +1,28 @@
+import Layout from '$src/__layout.svelte'
+import Loading from '$src/__loading.svelte'
+
+import { ComponentType, SvelteComponentTyped  } from 'svelte'
+
+export interface Route {
+	component: () => Promise<any>,
+	path: string,
+	layout?: ComponentType<SvelteComponentTyped<any>>,
+	loading?: ComponentType<SvelteComponentTyped<any>>,
+}
+
+interface RouteDefinition {
+	component: () => Promise<any>,
+	path: string,
+	layout: ComponentType<SvelteComponentTyped<any>>,
+	loading: ComponentType<SvelteComponentTyped<any>>,
+}
+
+interface RouteDefault {
+	layout: ComponentType<SvelteComponentTyped<any>>,
+	loading: ComponentType<SvelteComponentTyped<any>>,
+}
+
+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 }))
+
+export default defineRoutes

src/lib/storage.ts

@@ -1,4 +1,4 @@
-import { storage, client } from './stores/appwrite'
+import { storage, client } from './appwrite'
 import { ID, Models, RealtimeResponseEvent } from 'appwrite'
 import { Writable, writable } from 'svelte/store'
 

src/routes/index.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import Link from '$lib/components/Link.svelte'
 	import { _ } from 'svelte-i18n'
 </script>
 
 <h1>Home</h1>
 <p>{$_('page.home.title')}</p>
+
+<Link href="/oauth">Auth</Link>

src/routes/oauth/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { account, url } from '$lib/stores/appwrite'
+	import { account, url } from '$lib/appwrite'
 </script>
 
 <div>