Update to Svelte 5

Nuckal777 · Dec 27, 2024 · 037c5ad · 037c5ad
1 parent deea51f
commit 037c5ad
Show file tree

Hide file tree

Showing 15 changed files with 810 additions and 1,006 deletions.
diff --git a/fastreach-ui/package-lock.json b/fastreach-ui/package-lock.json
diff --git a/fastreach-ui/package.json b/fastreach-ui/package.json
@@ -4,25 +4,25 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --https",
+    "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.5.3",
-    "@tsconfig/svelte": "^5.0.2",
-    "@types/geojson": "^7946.0.14",
-    "@types/leaflet": "^1.9.12",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/geojson": "^7946.0.15",
+    "@types/leaflet": "^1.9.15",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.8.0",
-    "tslib": "^2.6.3",
-    "typescript": "^5.4.5",
-    "vite": "^4.5.2"
+    "svelte": "^5.16.0",
+    "svelte-check": "^4.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   },
   "dependencies": {
-    "css.gg": "^2.1.1",
+    "css.gg": "^2.1.4",
     "leaflet": "^1.9.4",
     "purecss": "^3.0.0"
   }

diff --git a/fastreach-ui/src/App.svelte b/fastreach-ui/src/App.svelte
@@ -10,8 +10,8 @@
     import Info from "./lib/Info.svelte";
     import Zoom from "./lib/Zoom.svelte";
 
-    let infoOpen = true;
-    let isochrones: IsochroneCall[] = [];
+    let infoOpen = $state(true);
+    let isochrones: IsochroneCall[] = $state([]);
 
     function addIsochrone(iso: IsochroneCall) {
         isochrones = [...isochrones, iso];
@@ -50,7 +50,7 @@
                         <input
                             type="button"
                             class="small-btn border"
-                            on:click={() => (infoOpen = true)}
+                            onclick={() => (infoOpen = true)}
                             value="i"
                         />
                         <IsochroneConfig useIsochrone={addIsochrone} />

diff --git a/fastreach-ui/src/lib/Back.svelte b/fastreach-ui/src/lib/Back.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-    export let onBack: () => void = () => {};
+    interface Props {
+        onBack?: () => void;
+        children?: import('svelte').Snippet;
+    }
+
+    let { onBack = () => {}, children }: Props = $props();
 </script>
 
 <input
     class="pure-button font-small"
     type="button"
     value="Back"
-    on:click={() => onBack()}
+    onclick={() => onBack()}
 />
-<slot />
+{@render children?.()}
 
 <style>
     .font-small {

diff --git a/fastreach-ui/src/lib/Info.svelte b/fastreach-ui/src/lib/Info.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
-    export let onClose: () => void = () => {};
+    import { stopPropagation } from 'svelte/legacy';
+
+    interface Props {
+        onClose?: () => void;
+    }
+
+    let { onClose = () => {} }: Props = $props();
 </script>
 
 <div
     class="info-back fill"
-    on:click={onClose}
-    on:keydown={onClose}
+    onclick={onClose}
+    onkeydown={onClose}
     role="region"
 >
-    <div class="info-overlay" on:click|stopPropagation={() => {}} role="dialog">
+    <div class="info-overlay" onclick={stopPropagation(() => {})} role="dialog">
         <input
             type="button"
             class="small-btn border"
-            on:click={onClose}
+            onclick={onClose}
             aria-label="close"
             value="x"
         />

diff --git a/fastreach-ui/src/lib/IsochroneConfig.svelte b/fastreach-ui/src/lib/IsochroneConfig.svelte
@@ -9,15 +9,19 @@
         IsochroneResponse,
     } from "./types";
 
-    export let useIsochrone: IsochroneCallHandler = () => {};
+    interface Props {
+        useIsochrone?: IsochroneCallHandler;
+    }
+
+    let { useIsochrone = () => {} }: Props = $props();
 
-    let ambiguousConfig: IsochroneConfiguration | undefined;
-    let error = "";
+    let ambiguousConfig: IsochroneConfiguration | undefined = $state();
+    let error = $state("");
 
-    let station = "Erfurt Hbf";
-    let minutes = 30;
-    let start = "2023-10-17T10:15:00";
-    let jump = true;
+    let station = $state("Erfurt Hbf");
+    let minutes = $state(30);
+    let start = $state("2023-10-17T10:15:00");
+    let jump = $state(true);
 
     async function useNodes(config: IsochroneConfiguration) {
         if (config.nodes.length === 0) {

diff --git a/fastreach-ui/src/lib/IsochroneForm.svelte b/fastreach-ui/src/lib/IsochroneForm.svelte
@@ -1,25 +1,31 @@
 <script lang="ts">
-    import type { Node, IsochroneConfiguration } from "./types";
 
-    enum FilterState {
-        Empty,
-        Match,
-        Ambiguous,
-    }
+    import { type Node, type IsochroneConfiguration, FilterState } from "./types";
 
     const minMinutes = 5;
     const maxMinutes = 120;
 
-    export let useNodes: (nodes: IsochroneConfiguration) => void;
-    export let station = "";
-    export let minutes = 0;
-    export let start = "";
-    export let jump = true;
 
-    export let nodes: Node[];
+    interface Props {
+        useNodes: (nodes: IsochroneConfiguration) => void;
+        station?: string;
+        minutes?: number;
+        start?: string;
+        jump?: boolean;
+        nodes: Node[];
+    }
+
+    let {
+        useNodes,
+        station = $bindable(""),
+        minutes = $bindable(0),
+        start = $bindable(""),
+        jump = $bindable(true),
+        nodes
+    }: Props = $props();
     let matchingNodes: Node[] = [];
-    let filterState = FilterState.Empty;
-    let filterText: string = "";
+    let filterState = $state(FilterState.Empty);
+    let filterText: string = $state("");
 
     function filterNodes(name: string) {
         matchingNodes = nodes.filter((node) =>
@@ -53,7 +59,9 @@
 
     const minutesExceeded = (m: number) => m < minMinutes || m > maxMinutes;
 
-    $: filterNodes(station);
+    $effect(() => {
+        filterNodes(station);
+    });
 </script>
 
 <form class="pure-form pure-form-aligned">
@@ -109,7 +117,7 @@
                     : "Calculate isochrone"}
                 disabled={filterState === FilterState.Empty ||
                     minutesExceeded(minutes)}
-                on:click={createConfiguration}
+                onclick={createConfiguration}
             />
         </div>
     </fieldset>

diff --git a/fastreach-ui/src/lib/IsochroneRow.svelte b/fastreach-ui/src/lib/IsochroneRow.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
     import type { IsochroneCall } from "./types";
 
-    export let isochroneCall: IsochroneCall;
-    export let index: number;
-    export let onRemove: (index: number) => void = () => {};
+    interface Props {
+        isochroneCall: IsochroneCall;
+        index: number;
+        onRemove?: (index: number) => void;
+    }
+
+    let { isochroneCall, index, onRemove = () => {} }: Props = $props();
 </script>
 
 <tr>
@@ -21,7 +25,7 @@
         <input
             type="button"
             class="small-btn border remove"
-            on:click={() => onRemove(index)}
+            onclick={() => onRemove(index)}
             value="x"
         />
     </td>

diff --git a/fastreach-ui/src/lib/IsochroneTable.svelte b/fastreach-ui/src/lib/IsochroneTable.svelte
@@ -2,8 +2,12 @@
     import IsochroneRow from "./IsochroneRow.svelte";
     import type { IsochroneCall } from "./types";
 
-    export let isochrones: IsochroneCall[] = [];
-    export let onRemove: (index: number) => void = () => {};
+    interface Props {
+        isochrones?: IsochroneCall[];
+        onRemove?: (index: number) => void;
+    }
+
+    let { isochrones = [], onRemove = () => {} }: Props = $props();
 </script>
 
 <table class="pure-table pure-table-bordered">

diff --git a/fastreach-ui/src/lib/Map.svelte b/fastreach-ui/src/lib/Map.svelte
@@ -5,6 +5,7 @@
     import L, { control } from "leaflet";
     import { mapLocation } from "./store";
     import { type MapLocation } from "./types";
+    import { run } from "svelte/legacy";
 
     const isoOpts: L.GeoJSONOptions[] = [
         "#0078e7ff",
@@ -13,10 +14,14 @@
         "#802392ff",
         "#a31621ff",
     ].map((c) => ({ style: { color: c } }));
-    let map: L.Map | null = null;
+    let map: L.Map | null = $state(null);
     let geos: L.GeoJSON[] = [];
-    export let geometries: GeoJsonObject[] = [];
-    $: updateGeoLayer(geometries);
+    interface Props {
+        geometries?: GeoJsonObject[];
+        children?: import('svelte').Snippet;
+    }
+
+    let { geometries = [], children }: Props = $props();
 
     function updateGeoLayer(geometries: GeoJsonObject[]) {
         if (map === null) {
@@ -70,7 +75,6 @@
         }).addTo(map);
         return { destroy: () => map?.remove() };
     }
-    $: updateView($mapLocation);
 
     function updateView(loc: MapLocation) {
         if (map === null) {
@@ -83,10 +87,16 @@
         const zoom = map.getZoom();
         mapLocation.update((loc) => ({ ...loc, zoom }));
     }
+    $effect(() => {
+        updateGeoLayer(geometries);
+    });
+    run(() => {
+        updateView($mapLocation);
+    });
 </script>
 
 <div class="fill" use:initialize>
     {#if map}
-        <slot />
+        {@render children?.()}
     {/if}
 </div>
diff --git a/fastreach-ui/src/lib/StationSelect.svelte b/fastreach-ui/src/lib/StationSelect.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
     import type { Node, IsochroneConfiguration } from "./types";
 
-    export let config: IsochroneConfiguration;
-    export let useConfiguration: (config: IsochroneConfiguration) => void;
-    let stations: Node[] = [];
-    $: stations = config.nodes;
+    interface Props {
+        config: IsochroneConfiguration;
+        useConfiguration: (config: IsochroneConfiguration) => void;
+    }
+
+    let { config, useConfiguration }: Props = $props();
+    let stations: Node[] = $state([]);
+    $effect(() => {
+        stations = config.nodes;
+    });
 
     function clickStation(node: Node) {
         useConfiguration({
@@ -22,7 +28,7 @@
         type="button"
         value={station.name}
         class="pure-button"
-        on:click={() => clickStation(station)}
+        onclick={() => clickStation(station)}
     />
     <p>
         Lon: {station.coords[0].toFixed(4)} Lat: {station.coords[1].toFixed(4)}

diff --git a/fastreach-ui/src/lib/Toggle.svelte b/fastreach-ui/src/lib/Toggle.svelte
@@ -4,23 +4,28 @@
 
     type Icon = "config" | "table" | "none";
 
-    export let right = false;
-    export let icon: Icon = "none";
+    interface Props {
+        right?: boolean;
+        icon?: Icon;
+        children?: import('svelte').Snippet;
+    }
+
+    let { right = false, icon = "none", children }: Props = $props();
 
     function toggle() {
         open = !open;
     }
 
-    let open = true;
-    $: text = open ? "-" : icon === "none" ? "+" : "";
+    let open = $state(true);
+    let text = $derived(open ? "-" : icon === "none" ? "+" : "");
 </script>
 
 <div class="toggle-container" class:end={right} class:toggle-center={!open}>
     {#if open}
         <input
             type="button"
             class="small-btn border"
-            on:click={toggle}
+            onclick={toggle}
             value={text}
         />
     {:else}
@@ -30,7 +35,7 @@
                 class="no-border"
                 src={search}
                 alt="isochrone configuration"
-                on:click={toggle}
+                onclick={toggle}
             />
         {/if}
         {#if icon === "table"}
@@ -39,13 +44,13 @@
                 class="no-border"
                 src={list}
                 alt="isochrone data"
-                on:click={toggle}
+                onclick={toggle}
             />
         {/if}
     {/if}
 </div>
 <div class:hidden={!open} class="content">
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

diff --git a/fastreach-ui/src/lib/Zoom.svelte b/fastreach-ui/src/lib/Zoom.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <div class="zoom-container">
-    <input type="button" class="zoom-btn" on:click={() => zoom(1)} value="+" />
+    <input type="button" class="zoom-btn" onclick={() => zoom(1)} value="+" />
     <hr />
-    <input type="button" class="zoom-btn" on:click={() => zoom(-1)} value="−" />
+    <input type="button" class="zoom-btn" onclick={() => zoom(-1)} value="−" />
 </div>
 
 <style>