svelte 5 (#149)

package.json

@@ -15,23 +15,23 @@
     "devDependencies": {
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/adapter-static": "^3.0.1",
-        "@sveltejs/kit": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/kit": "^2.5.27",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@types/eslint": "9.6.1",
         "typescript-eslint": "^8.0.0-alpha.29",
         "bulma": "^1.0.0",
         "eslint": "^9.0.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.35.1",
+        "eslint-plugin-svelte": "^2.45.1",
         "gh-pages": "^6.1.1",
         "prettier": "^3.1.1",
-        "prettier-plugin-svelte": "^3.1.2",
+        "prettier-plugin-svelte": "^3.2.6",
         "sass": "^1.71.0",
-        "svelte": "^4.2.7",
+        "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
         "svelte-preprocess": "^6.0.0",
         "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
-        "vite": "^5.0.3"
+        "typescript": "^5.5.0",
+        "vite": "^5.4.4"
     }
 }

src/lib/BMLTDetector.svelte

@@ -7,20 +7,20 @@
     import SearchShare from '$lib/SearchShare.svelte';
     import LocationInputModal from '$lib/LocationInputModal.svelte';
 
-    let rootServerUrl: string | undefined;
-    let meetingDistanceInMiles: number | undefined;
-    let meetingDistanceInKilometers: number | undefined;
-    let latitude: number | undefined;
-    let longitude: number | undefined;
+    let rootServerUrl: string | undefined = $state();
+    let meetingDistanceInMiles: number | undefined = $state();
+    let meetingDistanceInKilometers: number | undefined = $state();
+    let latitude: number | undefined = $state();
+    let longitude: number | undefined = $state();
 
     const progressTotalSteps: number = 4;
-    let progressText: string = '';
+    let progressText: string = $state('');
     let progressStep = tweened(0, {
         duration: 400,
         easing: cubicOut
     });
 
-    let locationModalActive: boolean = false;
+    let locationModalActive: boolean = $state(false);
 
     interface GeolocationCoordinates {
         latitude: number;
@@ -143,9 +143,9 @@
 
 {#if $progressStep < 0}
     <MoreInfo title="How do I learn more about the BMLT?" />
-    <button class="button is-fullwidth" on:click={handleSearchAgainClick}>Search for a Location</button>
+    <button class="button is-fullwidth" onclick={handleSearchAgainClick}>Search for a Location</button>
 {:else if $progressStep < progressTotalSteps}
-    <progress class="progress is-medium" value={$progressStep} max={progressTotalSteps} />
+    <progress class="progress is-medium" value={$progressStep} max={progressTotalSteps}></progress>
     <div class="has-text-centered">{progressText}</div>
 {:else if meetingDistanceInMiles !== undefined && meetingDistanceInMiles < 100}
     <div class="content">
@@ -158,7 +158,7 @@
         {#if latitude !== undefined && longitude !== undefined}
             <SearchShare {latitude} {longitude} />
         {/if}
-        <button class="button is-fullwidth" on:click={handleSearchAgainClick}>Search for Another Location</button>
+        <button class="button is-fullwidth" onclick={handleSearchAgainClick}>Search for Another Location</button>
     </div>
     <div class="box is-shadowless p-3 m-0">
         <p class="is-size-7">Root server: {rootServerUrl}</p>
@@ -174,7 +174,7 @@
         {#if latitude !== undefined && longitude !== undefined}
             <SearchShare {latitude} {longitude} />
         {/if}
-        <button class="button is-fullwidth" on:click={handleSearchAgainClick}>Search for Another Location</button>
+        <button class="button is-fullwidth" onclick={handleSearchAgainClick}>Search for Another Location</button>
     </div>
 {/if}
 

src/lib/LocationInputModal.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
-    export let active: boolean;
-    export let onSearch: (data: { coords: { latitude: number; longitude: number } }) => void;
-    export let onError: (error: Error) => void;
-    export let onCancel: () => void;
+    import { run } from 'svelte/legacy';
+
+    interface Props {
+        active: boolean;
+        onSearch: (data: { coords: { latitude: number; longitude: number } }) => void;
+        onError: (error: Error) => void;
+        onCancel: () => void;
+    }
+
+    let { active = $bindable(), onSearch, onError, onCancel }: Props = $props();
     let modal: HTMLDivElement;
-    let value: string;
+    let value: string = $state('');
 
-    $: {
+    run(() => {
         if (modal && active) {
             document.body.appendChild(modal);
         }
-    }
+    });
 
     async function handleSearch() {
         if (value) {
@@ -49,14 +55,14 @@
 </script>
 
 <div class="modal" class:is-active={active} bind:this={modal}>
-    <div class="modal-background" role="button" tabindex="0" on:click={handleCancel} on:keydown={handleBackgroundKey} />
+    <div class="modal-background" role="button" tabindex="0" onclick={handleCancel} onkeydown={handleBackgroundKey}></div>
     <div class="modal-content p-5">
         <div class="field has-addons">
             <div class="control is-expanded">
-                <input class="input is-light" type="text" on:keydown={keySubmit} bind:value placeholder="Enter City/State or Zip Code" />
+                <input class="input is-light" type="text" onkeydown={keySubmit} bind:value placeholder="Enter City/State or Zip Code" />
             </div>
             <div class="control">
-                <button class="button is-light" on:click={handleSearch}>Search</button>
+                <button class="button is-light" onclick={handleSearch}>Search</button>
             </div>
         </div>
     </div>

src/lib/MoreInfo.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-    export let title: string;
+    interface Props {
+        title: string;
+    }
+
+    let { title }: Props = $props();
 </script>
 
 <div class="content">

src/lib/SearchShare.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
     import { onMount } from 'svelte';
 
-    export let latitude: number;
-    export let longitude: number;
-    let copied: boolean = false;
-    let url: string = '';
+    interface Props {
+        latitude: number;
+        longitude: number;
+    }
+
+    let { latitude, longitude }: Props = $props();
+    let copied: boolean = $state(false);
+    let url: string = $state('');
 
     function handleCopy() {
         copied = true;
@@ -23,14 +27,14 @@
             <input class="input" type="text" name="url" value={url} readonly />
         </div>
         <div class="control">
-            <button class="button" on:click={handleCopy}>
+            <button class="button" onclick={handleCopy}>
                 {#if copied === true}
                     <span class="icon is-small">
-                        <i class="far fa-copy" />
+                        <i class="far fa-copy"></i>
                     </span>
                 {:else}
                     <span class="icon is-small">
-                        <i class="fas fa-copy" />
+                        <i class="fas fa-copy"></i>
                     </span>
                 {/if}
                 <span>Copy</span>

src/routes/+layout.svelte

@@ -1,5 +1,12 @@
 <script>
     import '../app.scss';
+    /**
+     * @typedef {Object} Props
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { children } = $props();
 </script>
 
-<slot />
+{@render children?.()}

svelte.config.js

@@ -1,11 +1,13 @@
-import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    preprocess: preprocess({
-        scss: {
-            prependData: "@import './src/variables.scss';"
+    preprocess: vitePreprocess({
+        style: {
+            scss: {
+                prependData: `@import './src/variables.scss';`
+            }
         }
     }),
     kit: {