From d5d8bfca84821d3a2da6fa0c00c2f2b92ff68a43 Mon Sep 17 00:00:00 2001
From: Lars Francke <git@lars-francke.de>
Date: Tue, 29 Apr 2025 21:51:06 +0200
Subject: [PATCH] src/routes/api/categories (and its dependencies) converted to
 Svelte 5 syntax

---
 src/lib/api/category.ts                           |  9 ++++++---
 src/lib/components/Code.svelte                    | 11 +++++++++--
 src/routes/+layout.svelte                         |  2 +-
 src/routes/api/categories/+page.svelte            | 13 ++++++-------
 src/routes/api/categories/+page.ts                |  3 ++-
 src/routes/api/categories/[id].json/+server.ts    | 11 ++++++-----
 src/routes/api/categories/[id]/+page.svelte       |  9 ++++-----
 src/routes/api/categories/[id]/+page.ts           |  3 ++-
 src/routes/api/categories/minimal.json/+server.ts |  3 ++-
 9 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/lib/api/category.ts b/src/lib/api/category.ts
index 378162a..8761acc 100644
--- a/src/lib/api/category.ts
+++ b/src/lib/api/category.ts
@@ -1,14 +1,17 @@
 import { prisma } from '$lib/prisma';
 
 export const getCategories = async () => {
-  return await prisma.category.findMany({
+  return prisma.category.findMany({
     orderBy: { name: 'asc' }
   });
 };
 
 export const getMinimalCategories = async () => {
-  return await prisma.category.findMany({
-    select: { id: true, name: true },
+  return prisma.category.findMany({
+    select: {
+      id: true,
+      name: true
+    },
     orderBy: { name: 'asc' }
   });
 };
diff --git a/src/lib/components/Code.svelte b/src/lib/components/Code.svelte
index 37aad68..b8b629d 100644
--- a/src/lib/components/Code.svelte
+++ b/src/lib/components/Code.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-  export let filename: string = '';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    filename?: string;
+    children: Snippet;
+  }
+
+  let { filename, children }: Props = $props();
 </script>
 
 <main class="p-8">
@@ -7,6 +14,6 @@
     <pre>{filename}</pre>
   {/if}
   <div class="bg-base-300 rounded-xl p-8 text-sm">
-    <slot />
+    {@render children()}
   </div>
 </main>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6d7d6be..ff27a22 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -68,7 +68,7 @@
   </div>
 
   <div class="drawer-side z-30 border-r-(--tab-border-color)">
-    <label for="sidebar-drawer" class="drawer-overlay" />
+    <label for="sidebar-drawer" class="drawer-overlay"></label>
     <aside class="bg-base-100 min-h-full w-36">
       <div class="navbar sticky top-0 place-content-center">
         <a href="http://github.com/">
diff --git a/src/routes/api/categories/+page.svelte b/src/routes/api/categories/+page.svelte
index 115be7d..25ce83e 100644
--- a/src/routes/api/categories/+page.svelte
+++ b/src/routes/api/categories/+page.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
+  import type { PageProps } from './$types';
   import { goto } from '$app/navigation';
   import Code from '$lib/components/Code.svelte';
 
-  import type { PageData } from './$types';
-
-  export let data: PageData;
-  $: ({ categories } = data);
+  let { data }: PageProps = $props();
 </script>
 
 <Code filename="/api/categories.json">
   <pre>[</pre>
-  {#each categories as category (category.id)}
+  {#each data.categories as category (category.id)}
     <button
       class="cursor-pointer text-left font-mono"
-      on:click={() => goto(`categories/${category.id}`)}
-      >{JSON.stringify(category, null, 2)},</button
+      onclick={() => goto(`categories/${category.id}`)}
     >
+      {JSON.stringify(category, null, 2)},
+    </button>
   {/each}
   <pre>]</pre>
 </Code>
diff --git a/src/routes/api/categories/+page.ts b/src/routes/api/categories/+page.ts
index 16858dd..6615b42 100644
--- a/src/routes/api/categories/+page.ts
+++ b/src/routes/api/categories/+page.ts
@@ -1,6 +1,7 @@
+import type { PageLoad } from './$types';
 import type { Category } from '$lib/prisma';
 
-export const load = async ({ fetch }) => {
+export const load: PageLoad = async ({ fetch }) => {
   const response = await fetch('http://github.com/api/categories.json');
   const categories: Category[] = await response.json();
   return { categories };
diff --git a/src/routes/api/categories/[id].json/+server.ts b/src/routes/api/categories/[id].json/+server.ts
index e80892a..c15bd59 100644
--- a/src/routes/api/categories/[id].json/+server.ts
+++ b/src/routes/api/categories/[id].json/+server.ts
@@ -1,10 +1,11 @@
+import type { RequestHandler } from './$types';
 import { json } from '@sveltejs/kit';
 import { prismaErrorResponse } from '$lib/api/error';
 import { getCategory, updateCategory, deleteCategory } from '$lib/api/category';
 
 // GET /categories/:id.json
-export const GET = async ({ params }) => {
-  const id = parseInt(params.id);
+export const GET: RequestHandler = async ({ params }) => {
+  const id = parseInt(params.id, 10);
 
   try {
     const category = await getCategory(id);
@@ -15,7 +16,7 @@ export const GET = async ({ params }) => {
 };
 
 // PATCH /categories/:id.json
-export const PATCH = async ({ params, request }) => {
+export const PATCH: RequestHandler = async ({ params, request }) => {
   const id = parseInt(params.id);
 
   const data = await request.json();
@@ -42,8 +43,8 @@ export const PATCH = async ({ params, request }) => {
 };
 
 // DELETE /categories/:id.json
-export const DELETE = async ({ params }) => {
-  const id = parseInt(params.id);
+export const DELETE: RequestHandler = async ({ params }) => {
+  const id = parseInt(params.id, 10);
 
   try {
     const category = await deleteCategory(id);
diff --git a/src/routes/api/categories/[id]/+page.svelte b/src/routes/api/categories/[id]/+page.svelte
index b5f64ab..6e4f429 100644
--- a/src/routes/api/categories/[id]/+page.svelte
+++ b/src/routes/api/categories/[id]/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import type { PageData } from './$types';
+  import type { PageProps } from './$types';
   import Code from '$lib/components/Code.svelte';
 
-  export let data: PageData;
-  $: ({ category } = data);
+  let { data }: PageProps = $props();
 </script>
 
-<Code>
-  <pre>{JSON.stringify(category, null, 2)}</pre>
+<Code filename="/api/categories/{data.category.id}.json">
+  <pre>{JSON.stringify(data.category, null, 2)}</pre>
 </Code>
diff --git a/src/routes/api/categories/[id]/+page.ts b/src/routes/api/categories/[id]/+page.ts
index 416aab7..ef8be7d 100644
--- a/src/routes/api/categories/[id]/+page.ts
+++ b/src/routes/api/categories/[id]/+page.ts
@@ -1,6 +1,7 @@
+import type { PageLoad } from './$types';
 import type { Category } from '$lib/prisma';
 
-export const load = async ({ params, fetch }) => {
+export const load: PageLoad = async ({ params, fetch }) => {
   const response = await fetch(`/api/categories/${params.id}.json`);
   const category: Category = await response.json();
   return { category };
diff --git a/src/routes/api/categories/minimal.json/+server.ts b/src/routes/api/categories/minimal.json/+server.ts
index 007ec75..8b16385 100644
--- a/src/routes/api/categories/minimal.json/+server.ts
+++ b/src/routes/api/categories/minimal.json/+server.ts
@@ -1,9 +1,10 @@
+import type { RequestHandler } from './$types';
 import { json } from '@sveltejs/kit';
 import { prismaErrorResponse } from '$lib/api/error.js';
 import { getMinimalCategories } from '$lib/api/category.js';
 
 // GET /categories/minimal.json
-export const GET = async () => {
+export const GET: RequestHandler = async () => {
   try {
     const categories = await getMinimalCategories();
     return json(categories);