move to svelte 5

esbuild.js

@@ -11,7 +11,7 @@ const serveOptions = {
 };
 
 const svelteOptions = {
-    compilerOptions: { dev: DEV },
+    compilerOptions: { dev: DEV, runes: true, modernAst: true },
     preprocess: [
         preprocess({
             sourceMap: DEV,

package.json

@@ -14,10 +14,10 @@
         "url": "https://github.com/Valexr/tagy"
     },
     "devDependencies": {
-        "esbuild": "^0.17.19",
-        "esbuild-svelte": "^0.7.3",
-        "svelte": "^3.59.1",
-        "svelte-preprocess": "^5.0.3",
-        "typescript": "^5.0.4"
+        "esbuild": "^0.24.0",
+        "esbuild-svelte": "^0.9.0",
+        "svelte": "^5.2.7",
+        "svelte-preprocess": "^6.0.3",
+        "typescript": "^5.6.3"
     }
 }

src/App.svelte

@@ -1,13 +1,17 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import Score from "$lib/components/Score.svelte";
     import Board from "$lib/components/Board.svelte";
     import Nav from "$lib/components/Nav.svelte";
     import type { Name, Repository } from "$types";
+
+    interface Props {
+        name: Name;
+        repository: Repository;
+    }
 </script>
 
 <script lang="ts">
-    export let name: Name;
-    export let repository: Repository;
+    let { name, repository }: Props = $props();
 </script>
 
 <svelte:head>

src/app.ts

@@ -1,9 +1,8 @@
 import { name, repository } from 'package.json'
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-const app = new App({
+export default mount(App, {
     target: document.body,
     props: { name, repository }
 });
-
-export default app;

src/lib/components/Board.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import Tile from "$lib/components/Tile.svelte";
 </script>
 

src/lib/components/Nav.svelte

@@ -1,20 +1,22 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { game, sorted } from "$lib/stores";
 </script>
 
 <script lang="ts">
-    $: $sorted && game.stop();
+    $effect(() => {
+        if ($sorted) game.stop();
+    });
 </script>
 
 <footer>
     <nav class:playing={$game === "play"}>
         {#if $game === "play"}
-            <button on:click={game.stop}>Stop</button>
-            <button on:click={game.pause}>Pause</button>
+            <button onclick={game.stop}>Stop</button>
+            <button onclick={game.pause}>Pause</button>
         {:else}
             <button
                 class="lg"
-                on:click={$game === "pause" ? game.resume : game.start}
+                onclick={$game === "pause" ? game.resume : game.start}
             >
                 {$game === "pause" ? "Resume" : "Start"}
             </button>

src/lib/components/Score.svelte

@@ -1,12 +1,16 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { time, steps } from "$lib/stores";
     import gh from "$svg/gh.svg";
     import type { Name, Repository } from "$types";
+
+    interface Props {
+        name: Name;
+        repository: Repository;
+    }
 </script>
 
 <script lang="ts">
-    export let name: Name;
-    export let repository: Repository;
+    let { name, repository }: Props = $props();
 </script>
 
 <header>

src/lib/components/Tile.svelte

@@ -1,9 +1,9 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { game, positions, steps, sorted } from "$lib/stores.js";
 </script>
 
 <script lang="ts">
-    export let index: number;
+    let { index = 0 } = $props();
 
     function moveTile() {
         if ($game === "play" && game.movable(index) && !$sorted) {
@@ -13,11 +13,14 @@
     }
 </script>
 
-<button
-    class="tile"
-    on:click={moveTile}
-    style="transform:translate({$positions[index].n * 100}%, {$positions[index]
-        .m * 100}%)"
->
-    {index}
-</button>
+{#if index}
+    {@const X = $positions[index].n * 100}
+    {@const Y = $positions[index].m * 100}
+    <button
+        class="tile"
+        onclick={moveTile}
+        style="transform: translate({X}%, {Y}%)"
+    >
+        {index}
+    </button>
+{/if}

src/lib/stores.ts

@@ -14,6 +14,7 @@ export const positions = derived(matrix, $matrix => {
     for (let i = 0; i < 4; i++)
         for (let j = 0; j < 4; j++)
             positions[$matrix[i][j]] = { m: i, n: j };
+
     return positions;
 });
 

tsconfig.json

@@ -19,7 +19,7 @@
         "isolatedModules": true,
         "resolveJsonModule": true,
         "moduleResolution": "Node",
-        "verbatimModuleSyntax": false,
+        "verbatimModuleSyntax": true,
         "lib": [
             "DOM",
             "ESNext",