upgrade sveltekit to v1

sveltekit/package.json

@@ -3,26 +3,26 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
-		"package": "svelte-kit package",
-		"preview": "svelte-kit preview",
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
 	},
 	"dependencies": {
-		"@directus/sdk": "9.12.2",
+		"@directus/sdk": "^9.14.2",
 		"modern-normalize": "1.1.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "1.0.0-next.50",
-		"@sveltejs/kit": "1.0.0-next.350",
-		"dotenv": "14.3.2",
-		"eslint": "8.11.0",
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"dotenv": "^16.0.3",
+		"eslint": "^8.29.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
-		"prettier": "2.5.1",
-		"prettier-plugin-svelte": "2.7.0",
-		"svelte": "3.49.0"
+		"prettier": "^2.5.1",
+		"prettier-plugin-svelte": "^2.9.0",
+		"svelte": "^3.55.0",
+		"vite": "^4.0.1"
 	}
 }

sveltekit/src/lib/components/Article.svelte

@@ -6,7 +6,7 @@
 <article class={bordered ? 'article bordered' : 'article'}>
 	<div class="article__topWrapper">
 		<div class="article__imageWrapper">
-			<img src={getAssetURL(article.cover_image)} alt="" loading="lazy" />
+			<img src={getAssetURL(article.image)} alt="" loading="lazy" />
 		</div>
 		<span aria-hidden="true" class="tag">Writing</span>
 	</div>

sveltekit/src/lib/components/Hero.svelte

@@ -6,7 +6,7 @@
 <article class="hero">
 	<div class="hero__topWrapper">
 		<div class="hero__imageWrapper">
-			<img src={getAssetURL(article.cover_image)} alt="" loading="lazy" />
+			<img src={getAssetURL(article.image)} alt="" loading="lazy" />
 		</div>
 		<span aria-hidden="true" class="tag"> Writing </span>
 	</div>

sveltekit/src/routes/index.js → sveltekit/src/routes/+page.server.js

@@ -1,8 +1,9 @@
 import { getDirectusClient } from '$lib/client';
 import { formatRelativeTime } from '$lib/format-relative-time';
+import { error } from '@sveltejs/kit';
 
-/** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get() {
+/** @type {import('@sveltejs/kit').PageServerLoad} */
+export async function load() {
 	const directus = await getDirectusClient();
 
 	let response;
@@ -12,9 +13,7 @@ export async function get() {
 			sort: '-publish_date'
 		});
 	} catch (err) {
-		return {
-			status: 404
-		};
+		throw error(400, 'not found');
 	}
 
 	const formattedArticles = response.data.map((article) => {
@@ -25,17 +24,13 @@ export async function get() {
 	});
 
 	if (!formattedArticles) {
-		return {
-			status: 404
-		};
+		throw error(400, 'not found');
 	}
 
 	const [hero, ...articles] = formattedArticles;
 
 	return {
-		body: {
-			hero,
-			articles
-		}
+		hero,
+		articles
 	};
 }

sveltekit/src/routes/index.svelte → sveltekit/src/routes/+page.svelte

@@ -2,7 +2,9 @@
 	import Hero from '$lib/components/Hero.svelte';
 	import Article from '$lib/components/Article.svelte';
 
-	export let hero, articles;
+	export let data;
+	const hero = data.hero;
+	const articles = data.articles;
 </script>
 
 <main>

sveltekit/src/routes/articles/[id].js → sveltekit/src/routes/articles/[id]/+page.server.js

@@ -1,8 +1,9 @@
 import { getDirectusClient } from '$lib/client';
 import { formatRelativeTime } from '$lib/format-relative-time';
+import { error } from '@sveltejs/kit';
 
-/** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get({ params }) {
+/** @type {import('@sveltejs/kit').PageServerLoad} */
+export async function load({ params }) {
 	const { id } = params;
 
 	const directus = await getDirectusClient();
@@ -13,9 +14,7 @@ export async function get({ params }) {
 			fields: ['*', 'author.avatar', 'author.first_name', 'author.last_name']
 		});
 	} catch (err) {
-		return {
-			status: 404
-		};
+		throw error(400, 'not found');
 	}
 
 	const formattedArticle = {
@@ -37,7 +36,5 @@ export async function get({ params }) {
 		};
 	});
 
-	return {
-		body: { article: formattedArticle, moreArticles: formattedMoreArticles }
-	};
+	return { article: formattedArticle, moreArticles: formattedMoreArticles };
 }

sveltekit/src/routes/articles/[id].svelte → sveltekit/src/routes/articles/[id]/+page.svelte

@@ -8,7 +8,9 @@
 	import GithubIcon from '$lib/components/icons/Github.svelte';
 	import MoreArticles from '$lib/components/MoreArticles.svelte';
 
-	export let article, moreArticles;
+	export let data;
+	const article = data.article;
+	const moreArticles = data.moreArticles;
 </script>
 
 <div class="current-article">
@@ -66,7 +68,7 @@
 					</ul>
 				</div>
 				<div class="current-article_coverImage">
-					<img src={getAssetURL(article.cover_image)} alt="" />
+					<img src={getAssetURL(article.image)} alt="" />
 				</div>
 			</div>
 			<div class="current-article__body">

sveltekit/vite.config.js

@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;