From a10ce4a9aaeff5e9495acbbd3adce54471faa2ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ludv=C3=ADk=20Prokopec?= <prokolud@fit.cvut.cz>
Date: Sun, 11 Dec 2022 17:20:26 +0100
Subject: [PATCH] frameworkify

---
 .env                                 |  8 ++++++++
 src/App.svelte                       | 22 ++++++++++++----------
 src/__loading.svelte                 |  1 +
 src/__routes.svelte                  | 16 ----------------
 src/__routes.ts                      |  8 ++++++++
 src/lib/{stores => }/appwrite.ts     |  7 +++----
 src/lib/appwriteSettings.ts          |  4 ----
 src/lib/auth.ts                      |  2 +-
 src/lib/components/Stack.svelte      | 23 +++++++++++++++++++++++
 src/lib/database.ts                  |  2 +-
 src/lib/router.ts                    |  4 +++-
 src/lib/router/LazyRoute.svelte      | 14 ++++++++++++++
 src/lib/router/LazyRouteGuard.svelte | 24 ++++++++++++++++++++++++
 src/lib/router/routes.ts             | 28 ++++++++++++++++++++++++++++
 src/lib/storage.ts                   |  2 +-
 src/routes/index.svelte              |  3 +++
 src/routes/oauth/index.svelte        |  2 +-
 17 files changed, 131 insertions(+), 39 deletions(-)
 create mode 100644 .env
 create mode 100644 src/__loading.svelte
 delete mode 100644 src/__routes.svelte
 create mode 100644 src/__routes.ts
 rename src/lib/{stores => }/appwrite.ts (69%)
 delete mode 100644 src/lib/appwriteSettings.ts
 create mode 100644 src/lib/components/Stack.svelte
 create mode 100644 src/lib/router/LazyRoute.svelte
 create mode 100644 src/lib/router/LazyRouteGuard.svelte
 create mode 100644 src/lib/router/routes.ts

diff --git a/.env b/.env
new file mode 100644
index 0000000..c663337
--- /dev/null
+++ b/.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
diff --git a/src/App.svelte b/src/App.svelte
index 33845d1..c8baa1e 100644
--- a/src/App.svelte
+++ b/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>
-		{#if !$isLoading && isMounted}
-			<Routes />
-			<Route path="/*" component={Error} />
-		{/if}
-	</Router>
-</Layout>
+<Router>
+	{#if !$isLoading && isMounted}
+		{#each routes as { path, layout, component }}
+			<svelte:component this={layout}>
+				<LazyRoute {path} {component} />
+			</svelte:component>
+		{/each}
+		<Route path="/*" component={Error} />
+	{/if}
+</Router>
diff --git a/src/__loading.svelte b/src/__loading.svelte
new file mode 100644
index 0000000..01239ea
--- /dev/null
+++ b/src/__loading.svelte
@@ -0,0 +1 @@
+<p>Loading...</p>
diff --git a/src/__routes.svelte b/src/__routes.svelte
deleted file mode 100644
index df79530..0000000
--- a/src/__routes.svelte
+++ /dev/null
@@ -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} />
diff --git a/src/__routes.ts b/src/__routes.ts
new file mode 100644
index 0000000..f212d12
--- /dev/null
+++ b/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') },
+])
diff --git a/src/lib/stores/appwrite.ts b/src/lib/appwrite.ts
similarity index 69%
rename from src/lib/stores/appwrite.ts
rename to src/lib/appwrite.ts
index 9f3e54b..3773054 100644
--- a/src/lib/stores/appwrite.ts
+++ b/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',
-		failure: 'http://localhost:5173/oauth/failure'
+		success: `${import.meta.env.VITE_HOSTNAME}/oauth/success`,
+		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 }
diff --git a/src/lib/appwriteSettings.ts b/src/lib/appwriteSettings.ts
deleted file mode 100644
index 65f66a8..0000000
--- a/src/lib/appwriteSettings.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-	endpoint: 'http://localhost/v1',
-	project: '638871b363904655d784'
-}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 874c27d..034f061 100644
--- a/src/lib/auth.ts
+++ b/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)
diff --git a/src/lib/components/Stack.svelte b/src/lib/components/Stack.svelte
new file mode 100644
index 0000000..4cd17d7
--- /dev/null
+++ b/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>
diff --git a/src/lib/database.ts b/src/lib/database.ts
index 46db37c..9e0a77b 100644
--- a/src/lib/database.ts
+++ b/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'
diff --git a/src/lib/router.ts b/src/lib/router.ts
index 447bb1f..c1c1c48 100644
--- a/src/lib/router.ts
+++ b/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 }
diff --git a/src/lib/router/LazyRoute.svelte b/src/lib/router/LazyRoute.svelte
new file mode 100644
index 0000000..81e90ee
--- /dev/null
+++ b/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>
diff --git a/src/lib/router/LazyRouteGuard.svelte b/src/lib/router/LazyRouteGuard.svelte
new file mode 100644
index 0000000..a6b5f54
--- /dev/null
+++ b/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}
diff --git a/src/lib/router/routes.ts b/src/lib/router/routes.ts
new file mode 100644
index 0000000..269e5c5
--- /dev/null
+++ b/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
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 83db7e8..65d81e3 100644
--- a/src/lib/storage.ts
+++ b/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'
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 0fa544b..5f5c660 100644
--- a/src/routes/index.svelte
+++ b/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>
diff --git a/src/routes/oauth/index.svelte b/src/routes/oauth/index.svelte
index fecef67..b7ef9ce 100644
--- a/src/routes/oauth/index.svelte
+++ b/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>