migrated to Svelte 5

package.json

@@ -10,18 +10,20 @@
         "astro": "astro"
     },
     "dependencies": {
-    "@astrojs/svelte": "^4.0.2",
+        "@astrojs/svelte": "^5.7.2",
         "@astrojs/tailwind": "^5.0.0",
-    "astro": "^3.2.0",
+        "astro": "^4.16.8",
         "caniuse-lite": "^1.0.30001669",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.45",
-    "svelte": "^4.2.1",
-    "tailwindcss": "^3.3.3"
+        "svelte": "^5.1.9",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.6.3"
     },
     "devDependencies": {
         "prettier": "^3.0.3",
-    "prettier-plugin-astro": "^0.12.0",
-    "prettier-plugin-svelte": "^3.0.3"
+        "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-svelte": "^3.0.3",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"
     }
 }

src/components/sections/IntroComponent.svelte

@@ -9,7 +9,7 @@
         "Content creator",
         "Student",
     ];
-    let roleState: string = "";
+    let roleState: string = $state("");
     let role: string;
     let counter: number = 0;
     let roleEmpty: boolean = true;
@@ -82,7 +82,7 @@
         greeting = "evening";
     }
 
-    let greetingState: string = "";
+    let greetingState: string = $state("");
     let greetingPulse: HTMLElement;
 
     async function animateGreeting(greeting: string) {

src/components/sections/ProjectsComponent.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    // import { onMount } from "svelte";
-
     const streamers = [
         {
             streamer: "4l1c3_0",

src/components/sections/StreamSchedule.svelte

@@ -2,6 +2,8 @@
     import moment from "moment-timezone";
     import { onMount } from "svelte";
 
+    const myLocation = "Australia/Melbourne";
+
     const myStreamSchedule = [
         {
             start: getUpcomingTimeDevTZ(2, "9:30"),
@@ -17,8 +19,6 @@
         },
     ];
 
-    const myLocation = "Australia/Melbourne";
-
     /**
      * Calculates the upcoming specified time for a given day of the week in my timezone.
      *
@@ -70,13 +70,13 @@
         end: string;
     };
 
-    let sameTimezone = true;
-    let adjusted = true;
+    let sameTimezone = $state(true);
+    let adjusted = $state(true);
 
     let localisedStreamSchedule = [];
 
-    let formattedSchedule: Schedule[] = [];
-    let formattedLocalisedSchedule: Schedule[] = [];
+    let formattedSchedule: Schedule[] = $state([]);
+    let formattedLocalisedSchedule: Schedule[] = $state([]);
 
     function displayStreamSchedule() {
         localisedStreamSchedule = myStreamSchedule.map((stream) => ({
@@ -121,14 +121,14 @@
         px-1 py-1 z-20"
     >
         <button
-            on:click={() => (adjusted = true)}
+            onclick={() => (adjusted = true)}
             class="rounded-lg w-1/2 py-1
         transition-colors duration-150
         {adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
             >Your Timezone</button
         >
         <button
-            on:click={() => (adjusted = false)}
+            onclick={() => (adjusted = false)}
             class="rounded-lg flex-grow py-1
         transition-colors duration-150
         {adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}"
@@ -138,10 +138,13 @@
 {/if}
 <div class="mt-1">
     <table>
+        <thead>
             <tr>
                 <th>Day</th>
                 <th>Time</th>
             </tr>
+        </thead>
+        <tbody>
             {#if adjusted}
                 {#each formattedLocalisedSchedule as localTime}
                     <tr>
@@ -155,11 +158,13 @@
                 {#each formattedSchedule as devTime}
                     <tr>
                         <td class="px-1 md:px-5">{devTime.day}</td>
-                    <td class="px-1 md:px-5">{devTime.start} - {devTime.end}</td
+                        <td class="px-1 md:px-5"
+                            >{devTime.start} - {devTime.end}</td
                         >
                     </tr>
                 {/each}
             {/if}
+        </tbody>
     </table>
 </div>
 

src/pages/contact.astro

@@ -34,7 +34,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 			</div>
 		</div>
 		<div class="mt-10">
-			<ContactComponent />
+			<ContactComponent client:only />
 		</div>
 	</div>
 	<Footer />

src/pages/index.astro

@@ -42,7 +42,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 		<Education />
 	</div>
 	<div id="contact">
-		<Contact client:visible />
+		<Contact client:only />
 	</div>
 	<Footer />
 </Layout>

svelte.config.js

@@ -1,5 +1,10 @@
-import { vitePreprocess } from '@astrojs/svelte';
+import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
     preprocess: vitePreprocess(),
+    compilerOptions: {
+        compatibility: {
+            componentApi: 4,
+        },
+    },
 };