Latest SvelteKit

Author: geoffrich

package.json

@@ -13,8 +13,8 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/kit": "1.0.0-next.405",
+		"@sveltejs/adapter-auto": "1.0.0-next.65",
+		"@sveltejs/kit": "1.0.0-next.429",
 		"autoprefixer": "^10.4.4",
 		"postcss": "^8.4.12",
 		"postcss-load-config": "^3.1.4",

pnpm-lock.yaml

@@ -99,11 +99,9 @@ const fruits = [
 	}
 ];
 
-export const GET = function () {
+export const load = function () {
 	return {
-		body: {
-			items: fruits
-		}
+		items: fruits
 	};
 };
 

src/routes/__layout.svelte src/routes/+layout.sveltesrc/routes/__layout.svelte renamed to src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let items;
+	export let data;
 
 	import ListItem from '$lib/ListItem.svelte';
 </script>
@@ -12,7 +12,7 @@
 	<h1 class="my-4 text-xl">List of fruits</h1>
 
 	<ul class="divide-y-2 divide-gray-100">
-		{#each items as item (`f-${item.name}`)}
+		{#each data.items as item (`f-${item.name}`)}
 			<ListItem {item} href={`/fruits/${item.name}`} />
 		{/each}
 	</ul>

src/routes/index.svelte src/routes/+page.sveltesrc/routes/index.svelte renamed to src/routes/+page.svelte

@@ -0,0 +1,17 @@
+import { fruits } from '../+page.server.js';
+import { error } from '@sveltejs/kit';
+
+const map = {};
+for (const item of fruits) {
+	const key = item.name;
+	map[key] = item;
+}
+
+export const load = function (req) {
+	const { name } = req.params;
+	if (map[name]) {
+		return map[name];
+	} else {
+		throw error(404);
+	}
+};

src/routes/fruits/index.js src/routes/fruits/+page.server.jssrc/routes/fruits/index.js renamed to src/routes/fruits/+page.server.js

@@ -1,8 +1,7 @@
 <script>
-	export let name;
-	export let image;
-	export let amountPer;
-	export let nutrition;
+	export let data;
+
+	$: ({ name, image, amountPer, nutrition } = data);
 
 	import Nutrition from '$lib/Nutrition.svelte';
 </script>