Migration to Svelte 5 - Post-auto-migrate

package.json

@@ -16,19 +16,19 @@
     "@sveltejs/adapter-auto": "^3.2.5",
     "@sveltejs/adapter-cloudflare": "^4.7.3",
     "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.13",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.1",
+    "eslint-plugin-svelte": "^2.45.1",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
-    "svelte": "^4.2.19",
+    "svelte": "^5",
     "svelte-check": "^4.0.5",
-    "svelte-eslint-parser": "^0.41.1",
+    "svelte-eslint-parser": "^0.43",
     "svelte-preprocess": "^6.0.3",
     "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",

src/lib/components/portfolio/countdown.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  let w: number = 0; // Width of the screen, using the svelte binding
+  let w: number = $state(0); // Width of the screen, using the svelte binding
 
   const GRADUATION = new Date(1753797600000).valueOf();
   const FORMATTED = new Date(1753797600000).toDateString();
   let interval: ReturnType<typeof setInterval>;
 
-  let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
+  let timeTo = $state(Math.abs(GRADUATION - Date.now().valueOf()) / 1000);
 
   // Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
-  $: years = Math.floor(timeTo / 31556926);
+  let years = $derived(Math.floor(timeTo / 31556926));
-  $: months = Math.floor(timeTo / 2629743) % 12;
+  let months = $derived(Math.floor(timeTo / 2629743) % 12);
-  $: days = Math.floor(timeTo / 86400) % 30;
+  let days = $derived(Math.floor(timeTo / 86400) % 30);
-  $: hours = Math.floor(timeTo / 3600) % 24;
+  let hours = $derived(Math.floor(timeTo / 3600) % 24);
-  $: minutes = Math.floor(timeTo / 60) % 60;
+  let minutes = $derived(Math.floor(timeTo / 60) % 60);
-  $: seconds = Math.floor(timeTo % 60);
+  let seconds = $derived(Math.floor(timeTo % 60));
 
   // Update the timeTo variable every 1000 milliseconds
   // Don't go past 0 though! Stop the updates afterwards

src/lib/components/portfolio/skeletonImage.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  export let src: string;
+  interface Props {
-  export let altText: string = "";
+    src: string;
+    altText?: string;
+  }
 
-  let loaded = false;
+  let { src, altText = "" }: Props = $props();
+
+  let loaded = $state(false);
 
   onMount(() => {
     const img = new Image();
@@ -18,5 +22,5 @@
 {#if loaded}
   <img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
 {:else}
-  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
+  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"></div>
 {/if}

src/lib/components/portfolio/skills/stars.svelte

@@ -2,8 +2,12 @@
   import Star from "lucide-svelte/icons/star";
   import HalfStar from "lucide-svelte/icons/star-half";
 
-  export let count: number = 5;
+  interface Props {
-  export let half: boolean = false;
+    count?: number;
+    half?: boolean;
+  }
+
+  let { count = 5, half = false }: Props = $props();
 </script>
 
 <div class="flex">

src/lib/components/portfolio/textContent.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-  export let middle: boolean = false;
+  interface Props {
-  export let classes: string = ""; // Further classes to pass through
+    middle?: boolean;
+    classes?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { middle = false, classes = "", children }: Props = $props();
 </script>
 
 <!-- If the text is between some other text, adjust padding to not seperate it out too much -->
@@ -9,11 +14,11 @@
 <div>
   {#if middle}
     <p class="px-5 mx-auto text-xl max-w-3xl {classes}">
-      <slot />
+      {@render children?.()}
     </p>
   {:else}
     <p class="p-5 mx-auto text-xl max-w-3xl {classes}">
-      <slot />
+      {@render children?.()}
     </p>
   {/if}
 </div>

src/lib/components/portfolio/timeline.svelte

@@ -12,7 +12,7 @@
       <time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time>
       <div class="text-xl">Villanova College</div>
       <div class="text-sm">Information Technology Officer</div>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       Help Desk Role:
       <ul class="list-disc list-inside mt-2">
         <li>Performed repairs and troubleshooting for both students and teachers.</li>
@@ -29,7 +29,7 @@
           configuration throughout school.
         </li>
       </ul>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       Key Experiences and Takeaways:
       <ul class="list-disc list-inside mt-2">
         <li>Became more comfortable and confident in an end-user facing role.</li>
@@ -56,7 +56,7 @@
         <div class="text-xl">St Pauls School</div>
         <div class="text-sm pb-2">Information Technology Officer</div>
       </div>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       Help Desk Role:
       <ul class="list-disc list-inside mt-2">
         <li>
@@ -71,7 +71,7 @@
           Gained more experience in Azure ecosystem, SCCM deployment, and networking.
         </li>
       </ul>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       Key Experiences and Takeaways:
       <ul class="list-disc list-inside mt-2">
         <li>Working in a larger group to cover more ground</li>
@@ -96,7 +96,7 @@
       <time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time>
       <div class="text-xl">St Pauls School</div>
       <div class="text-sm pb-2">System Administrator</div>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       System Administrator Role:
       <ul class="list-disc list-inside mt-2">
         <li>
@@ -112,7 +112,7 @@
           importing new users into TASS and AD.
         </li>
       </ul>
-      <div class="divider my-1" />
+      <div class="divider my-1"></div>
       Key Experiences and Takeaways:
       <ul class="list-disc list-inside mt-2">
         <li>There is always something to be improved upon if you look hard enough.</li>

src/routes/+layout.svelte

@@ -2,10 +2,15 @@
   import "../app.css";
   import Navbar from "$lib/components/navbar/navbar.svelte";
   import Footer from "$lib/components/footer.svelte";
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <Navbar />
 
-<slot />
+{@render children?.()}
 
 <Footer />