update to svelte 5

frontend/package.json

@@ -10,19 +10,19 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.20",
     "flowbite": "^3.1.1",
     "flowbite-svelte": "^0.47.4",
     "flowbite-svelte-icons": "^2.0.2",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
-    "svelte-preprocess": "^4.10.7",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.0",
     "svelte-routing": "^2.13.0",
     "tailwindcss": "^3.4.9",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.7"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   }
 }

frontend/package.json.md5

@@ -1 +1 @@
-a5a8c3695f34d6c9bafb2ee7f70bf99a
+6f760b83cd6ae4745bc9e5ebf4de97b2

frontend/src/App.svelte

@@ -5,7 +5,11 @@
   import Home from "./routes/Home.svelte";
   import "./app.css";
   import Tournament from "./routes/Tournament.svelte";
-  export let url = "";
+  interface Props {
+    url?: string;
+  }
+
+  let { url = $bindable("") }: Props = $props();
 </script>
 
 <main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
@@ -18,8 +22,10 @@
   <Router bind:url>
     <div>
       <Route path="/"><Home /></Route>
-      <Route path="/tournament/:id" let:params
-        ><Tournament id={params.id} /></Route
+      <Route path="/tournament/:id" 
+        >{#snippet children({ params })}
+                <Tournament id={params.id} />              {/snippet}
+            </Route
       >
     </div>
   </Router>

frontend/src/main.ts

@@ -1,7 +1,8 @@
 import './style.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')
 })
 

frontend/src/routes/Home.svelte

@@ -15,8 +15,8 @@
   import TourCreator from "./TourCreator.svelte";
   import { Link } from "svelte-routing";
 
-  let thingsList: model.Tournament[] = [];
-  let newThing: boolean = false;
+  let thingsList: model.Tournament[] = $state([]);
+  let newThing: boolean = $state(false);
 
   function update() {
     GetTournaments().then((ts) => {

frontend/src/routes/TourCreator.svelte

@@ -4,9 +4,13 @@
   import { GetGames, SaveTournament } from "../../wailsjs/go/main/App";
   import { onMount } from "svelte";
 
-  let tournament = new model.Tournament();
-  let games: model.Game[] = [];
-  export let onCreated: (t: model.Tournament) => void = (_) => {};
+  let tournament = $state(new model.Tournament());
+  let games: model.Game[] = $state([]);
+  interface Props {
+    onCreated?: (t: model.Tournament) => void;
+  }
+
+  let { onCreated = (_) => {} }: Props = $props();
 
   function submit(e: Event) {
     e.preventDefault();
@@ -21,7 +25,7 @@
   });
 </script>
 
-<form on:submit={submit}>
+<form onsubmit={submit}>
   <div>
     <Label>Title</Label>
     <Input type="text" bind:value={tournament.Title} />

frontend/src/routes/Tournament.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { Link } from "svelte-routing";
   import { GetTournament } from "../../wailsjs/go/main/App";
   import { model } from "../../wailsjs/go/models";
   import { onMount } from "svelte";
 
-  export let id: number | null = null;
-  let tournament: model.Tournament;
+  interface Props {
+    id?: number | null;
+  }
+
+  let { id = $bindable(null) }: Props = $props();
+  let tournament: model.Tournament = $state();
 
   function update() {
     GetTournament(id).then((t) => {
@@ -13,10 +19,10 @@
       tournament = t;
     });
   }
-  $: {
+  run(() => {
     id = id;
     update();
-  }
+  });
   onMount(update);
 </script>
 

frontend/svelte.config.js

@@ -1,7 +1,5 @@
-import sveltePreprocess from 'svelte-preprocess'
 
 export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: sveltePreprocess()
 }

frontend/tsconfig.json

@@ -12,6 +12,7 @@
      * Note that setting allowJs false does not prevent the use
      * of JS in `.svelte` files.
      */
+    "verbatimModuleSyntax": true,
     "allowJs": true,
     "checkJs": true,
     "isolatedModules": true