From c75d985f8347cff18139ce7a7a36f3925ceb9402 Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Thu, 21 Nov 2024 12:54:31 +0200
Subject: [PATCH] move to svelte 5

---
 esbuild.js                      |  2 +-
 package.json                    | 10 +++++-----
 src/App.svelte                  | 10 +++++++---
 src/app.ts                      |  5 ++---
 src/lib/components/Board.svelte |  2 +-
 src/lib/components/Nav.svelte   | 12 +++++++-----
 src/lib/components/Score.svelte | 10 +++++++---
 src/lib/components/Tile.svelte  | 23 +++++++++++++----------
 src/lib/stores.ts               |  1 +
 tsconfig.json                   |  2 +-
 10 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/esbuild.js b/esbuild.js
index 3fdde95..920bc1e 100644
--- a/esbuild.js
+++ b/esbuild.js
@@ -11,7 +11,7 @@ const serveOptions = {
 };
 
 const svelteOptions = {
-    compilerOptions: { dev: DEV },
+    compilerOptions: { dev: DEV, runes: true, modernAst: true },
     preprocess: [
         preprocess({
             sourceMap: DEV,
diff --git a/package.json b/package.json
index 9701629..e6081a4 100644
--- a/package.json
+++ b/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"
     }
 }
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 56dbdb5..7210ec4 100755
--- a/src/App.svelte
+++ b/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>
diff --git a/src/app.ts b/src/app.ts
index 07aa1cd..dc2e403 100755
--- a/src/app.ts
+++ b/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;
diff --git a/src/lib/components/Board.svelte b/src/lib/components/Board.svelte
index e293a8f..edcd7a8 100755
--- a/src/lib/components/Board.svelte
+++ b/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>
 
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index 0266ad4..c663390 100644
--- a/src/lib/components/Nav.svelte
+++ b/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>
diff --git a/src/lib/components/Score.svelte b/src/lib/components/Score.svelte
index 67b44ee..9c62bc2 100644
--- a/src/lib/components/Score.svelte
+++ b/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>
diff --git a/src/lib/components/Tile.svelte b/src/lib/components/Tile.svelte
index 269781d..9233598 100755
--- a/src/lib/components/Tile.svelte
+++ b/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}
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 1ad7a82..5fa44b5 100755
--- a/src/lib/stores.ts
+++ b/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;
 });
 
diff --git a/tsconfig.json b/tsconfig.json
index 3121d32..bdf864e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,7 @@
         "isolatedModules": true,
         "resolveJsonModule": true,
         "moduleResolution": "Node",
-        "verbatimModuleSyntax": false,
+        "verbatimModuleSyntax": true,
         "lib": [
             "DOM",
             "ESNext",