Svelte5

package.json

@@ -10,17 +10,18 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.14",
 		"daisyui": "^3.1.6",
 		"postcss": "^8.4.24",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.6"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {

src/lib/components/AnimatedRoute.svelte

@@ -1,10 +1,12 @@
 <script>
     import { fly} from "svelte/transition";
     import { page } from "$app/stores";
+  /** @type {{children?: import('svelte').Snippet}} */
+  let { children } = $props();
 </script>
 
 {#key $page.url}
   <div in:fly={{  x:'-100%', duration: 500 }}>
-    <slot  />
+    {@render children?.()}
   </div>
 {/key}

src/lib/components/AuthCheck.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
     import { user } from "$lib/firebase";
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
   </script>
 
   {#if $user}
-    <slot />
+    {@render children?.()}
   {:else}
       <p class="text-error my-10">
           You must be signed in to view this page.

src/lib/components/SortableList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
   import { flip } from "svelte/animate";
   import { createEventDispatcher } from "svelte";
 
@@ -8,8 +9,13 @@
     [key: string]: any;
   }
 
-  export let list: any[];
-  let isOver: string | boolean = false;
+  interface Props {
+    list: any[];
+    children?: import('svelte').Snippet<[any]>;
+  }
+
+  let { list, children }: Props = $props();
+  let isOver: string | boolean = $state(false);
 
   const dispatch = createEventDispatcher();
 
@@ -29,6 +35,7 @@
   }
 
   function onDragOver(e: DragEvent) {
+    e.preventDefault();
     // @ts-ignore
     const id = e.target.dataset?.id;
     const dragged = getDraggedParent(e.target);
@@ -41,6 +48,7 @@
   }
 
   function onDrop(e: DragEvent) {
+    e.preventDefault();
     isOver = false;
     const dragged = getDraggedParent(e.target);
     reorder({
@@ -66,13 +74,13 @@
         data-index={index}
         data-id={item.id}
         draggable="true"
-        on:dragstart={onDragStart}
-        on:dragover|preventDefault={onDragOver}
-        on:dragleave={onDragLeave}
-        on:drop|preventDefault={onDrop}
+        ondragstart={onDragStart}
+        ondragover={onDragOver}
+        ondragleave={onDragLeave}
+        ondrop={onDrop}
         animate:flip={{ duration: 300 }}
       >
-        <slot {item} {index} />
+        {@render children?.({ item, index, })}
       </li>
     {/each}
   </ul>

src/lib/components/UserLink.svelte

@@ -1,7 +1,6 @@
 <script>
-    export let icon = 'default';
-    export let url = 'foo';
-    export let title = 'some cool title';
+  /** @type {{icon?: string, url?: string, title?: string}} */
+  let { icon = 'default', url = 'foo', title = 'some cool title' } = $props();
 </script>
 
 

src/routes/+layout.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
    import { user, userData } from "$lib/firebase";
     import "../app.css";
+   interface Props {
+      children?: import('svelte').Snippet;
+   }
+
+   let { children }: Props = $props();
 
 
    $user;
    $userData; 
 </script>
 
 <div class="min-h-screen flex flex-col">
-    <slot />
+    {@render children?.()}
 </div>

src/routes/[username]/+page.svelte

@@ -2,7 +2,11 @@
   import UserLink from "$lib/components/UserLink.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
   </script>
 
   <svelte:head>

src/routes/[username]/+page.ts

@@ -17,11 +17,11 @@ export const load = (async ({ params }) => {
   const data = snapshot.docs[0]?.data();
 
   if (!exists) {
-    throw error(404, "that user does not exist!");
+    error(404, "that user does not exist!");
   }
 
   if (!data.published) {
-    throw error(403, `The profile of @${data.username} is not public!`);
+    error(403, `The profile of @${data.username} is not public!`);
   }
 
   return {

src/routes/[username]/bio/+page.server.ts

@@ -7,14 +7,14 @@ export const load = (async ({ locals, params }) => {
     const uid = locals.userID;
 
     if (!uid) {
-      throw redirect(301, "/login");
+      redirect(301, "/login");
     }
 
     const userDoc = await adminDB.collection("users").doc(uid!).get();
     const { username, bio } = userDoc.data()!;
 
     if (params.username !== username) {
-      throw error(401, "That username does not belong to you");
+      error(401, "That username does not belong to you");
     }
 
 
@@ -35,7 +35,7 @@ export const actions = {
       const { username } = (await userRef.get()).data()!;
 
       if (params.username !== username) {
-        throw error(401, "That username does not belong to you");
+        error(401, "That username does not belong to you");
       }
 
       if (bio!.length > 260) {

src/routes/[username]/bio/+page.svelte

@@ -4,7 +4,11 @@
     import { enhance } from "$app/forms";
 
 
-    export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
 
   </script>
 
@@ -25,7 +29,7 @@
           name="bio"
           class="textarea textarea-bordered textarea-accent"
           value={data.bio}
-        />
+></textarea>
       </div>
       <button class="btn btn-primary my-5">Update Bio</button>
     </form>

src/routes/[username]/edit/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { preventDefault } from 'svelte/legacy';
+
     import { page } from "$app/stores";
     import AuthCheck from "$lib/components/AuthCheck.svelte";
     import SortableList from "$lib/components/SortableList.svelte";
@@ -28,11 +30,11 @@
     };
     const formData = writable(formDefaults);
 
-    let showForm = false;
+    let showForm = $state(false);
 
-    $: urlIsValid = $formData.url.match(/^(ftp|http|https):\/\/[^ "]+$/);
-    $: titleIsValid = $formData.title.length < 20 && $formData.title.length > 0;
-    $: formIsValid = urlIsValid && titleIsValid;
+    let urlIsValid = $derived($formData.url.match(/^(ftp|http|https):\/\/[^ "]+$/));
+    let titleIsValid = $derived($formData.title.length < 20 && $formData.title.length > 0);
+    let formIsValid = $derived(urlIsValid && titleIsValid);
 
     function sortList(e: CustomEvent) {
       const newList = e.detail;
@@ -116,24 +118,26 @@
             type="checkbox"
             class="toggle toggle-success"
             checked={$userData?.published}
-            on:change={toggleProfileStatus}
+            onchange={toggleProfileStatus}
           />
         </label>
       </form>
 
-      <SortableList list={$userData?.links} on:sort={sortList} let:item let:index>
-        <div class="group relative">
-          <UserLink {...item} />
-          <button
-            on:click={() => deleteLink(item)}
-            class="btn btn-xs btn-error invisible group-hover:visible transition-all absolute -right-6 bottom-10"
-            >Delete</button
-          >
-        </div>
-      </SortableList>
+      <SortableList list={$userData?.links} on:sort={sortList}  >
+        {#snippet children({ item, index })}
+            <div class="group relative">
+            <UserLink {...item} />
+            <button
+              onclick={() => deleteLink(item)}
+              class="btn btn-xs btn-error invisible group-hover:visible transition-all absolute -right-6 bottom-10"
+              >Delete</button
+            >
+          </div>
+                  {/snippet}
+        </SortableList>
       {#if showForm}
         <form
-          on:submit|preventDefault={addLink}
+          onsubmit={preventDefault(addLink)}
           class="bg-base-200 p-6 w-full mx-auto rounded-xl"
         >
           <select
@@ -178,11 +182,11 @@
             class="btn btn-success block">Add Link</button
           >
 
-          <button type="button" class="btn btn-xs my-4" on:click={cancelLink}>Cancel</button>
+          <button type="button" class="btn btn-xs my-4" onclick={cancelLink}>Cancel</button>
         </form>
       {:else}
         <button
-          on:click={() => (showForm = true)}
+          onclick={() => (showForm = true)}
           class="btn btn-outline btn-info block mx-auto my-4"
         >
           Add a Link

src/routes/api/signin/+server.ts

@@ -18,7 +18,7 @@ export const POST: RequestHandler = async ({ request, cookies }) => {
 
         return json({ status: 'signedIn' });
     } else {
-        throw error(401, 'Recent sign in required!');
+        error(401, 'Recent sign in required!');
     }
 
 

src/routes/login/+layout.svelte

@@ -2,6 +2,11 @@
   import { page } from "$app/stores";
   import AnimatedRoute from "$lib/components/AnimatedRoute.svelte";
   import AuthCheck from "$lib/components/AuthCheck.svelte";
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <nav class="flex justify-center my-6">
@@ -25,7 +30,7 @@
 <AnimatedRoute>
   <main class="card w-4/6 bg-neutral text-neutral-content mx-auto">
     <div class="card-body items-center text-center">
-      <slot />
+      {@render children?.()}
     </div>
   </main>
 </AnimatedRoute>

src/routes/login/+page.svelte

@@ -34,11 +34,11 @@
 {#if $user}
   <h2 class="card-title">Welcome, {$user.displayName}</h2>
   <p class="text-center text-success">You are logged in</p>
-  <button class="btn btn-warning" on:click={signOutSSR}
+  <button class="btn btn-warning" onclick={signOutSSR}
     >Sign out</button
   >
 {:else}
-  <button class="btn btn-primary" on:click={signInWithGoogle}
+  <button class="btn btn-primary" onclick={signInWithGoogle}
     >Sign in with Google</button
   >
 {/if}

src/routes/login/photo/+page.svelte

@@ -4,9 +4,9 @@
   import { doc, updateDoc } from "firebase/firestore";
   import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
 
-  let previewURL: string;
-  let uploading = false;
-  $: href = `/${$userData?.username}/edit`;
+  let previewURL: string = $state();
+  let uploading = $state(false);
+  let href = $derived(`/${$userData?.username}/edit`);
 
   async function upload(e: any) {
     uploading = true;
@@ -37,15 +37,15 @@
         <span class="label-text">Pick a file</span>
       </label>
       <input
-        on:change={upload}
+        onchange={upload}
         name="photoURL"
         type="file"
         class="file-input file-input-bordered w-full max-w-xs"
         accept="image/png, image/jpeg, image/gif, image/webp"
       />
       {#if uploading}
         <p>Uploading...</p>
-        <progress class="progress progress-info w-56 mt-6" />
+        <progress class="progress progress-info w-56 mt-6"></progress>
       {/if}
     </div>
   </form>