Update syntax to Svelte 5

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' }
   });
 };

src/lib/components/Code.svelte

@@ -1,12 +1,19 @@
 <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">
   {#if filename}
     <pre>{filename}</pre>
   {/if}
   <div class="bg-base-300 rounded-xl p-8 text-sm">
-    <slot />
+    {@render children()}
   </div>
 </main>

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="/">

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>

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('/api/categories.json');
   const categories: Category[] = await response.json();
   return { categories };

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);

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>

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 };

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);