build: migrate to svelte 5

https://svelte.dev/docs/svelte/v5-migration-guide#Migration-script $ npx sv migrate svelte-5 $ rm package-lock.json $ rm -rf node_modules/ $ make install
groovescore · Nov 14, 2024 · 8762db1 · 8762db1
1 parent 2180afe
commit 8762db1
Show file tree

Hide file tree

Showing 7 changed files with 595 additions and 695 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,12 +10,12 @@
     "check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-no-static-element-interactions:ignore,a11y-no-noninteractive-element-interactions:ignore,a11y-click-events-have-key-events:ignore'"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^4.0.0",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.4.3",
-    "svelte-preprocess": "^5.0.3",
-    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,6 +1,8 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <!-- SPDX-FileCopyrightText: 2022 Jani Nikula <[email protected]> -->
 <script lang='ts'>
+  import { stopPropagation } from 'svelte/legacy';
+
   import { Fullscreen } from './lib/Fullscreen';
   import * as timeutil from './lib/time-util';
   import Ball from './lib/Ball.svelte';
@@ -19,15 +21,15 @@
   }
 
   // Hack to "live update" generic stuff once per second
-  let __counter = 0;
+  let __counter = $state(0);
   setInterval(() => __counter++, 1000)
 
-  $: live_update = function(thing: string): string {
+  let live_update = $derived(function(thing: string): string {
     // Do something with __counter to react to changes
     let dummy = __counter;
     dummy = dummy
     return thing;
-  }
+  })
 
   // ui pages
   const UiPage = {
@@ -36,7 +38,7 @@
     EDIT: 2,
   };
 
-  let ui_page = UiPage.START;
+  let ui_page = $state(UiPage.START);
 
   function ui_load_game(save_game: SaveGameId): void {
     if (!save_game.timestamp)
@@ -244,8 +246,8 @@
     }
   }
 
-  let show_menu = false;
-  let show_stats = false;
+  let show_menu = $state(false);
+  let show_stats = $state(false);
 
   function ui_show_menu() {
     show_menu = true;
@@ -272,14 +274,14 @@
 
 </script>
 
-<svelte:window on:keydown={ui_key_down} />
+<svelte:window onkeydown={ui_key_down} />
 
 <main>
-  {#if ui_page == UiPage.START }
+  {#if ui_page == UiPage.START}
 
     <div class='grid-container'>
-      <div class='name-input-card middle {$names.can_new_game() ? "" : "unavailable"}' on:click={ui_new_game}>
-	<div class='info-card-copyright' on:click|stopPropagation={() => false}><a href="https://groovescore.app">&copy; 2022-2024 Jani Nikula<br>License: AGPL 3.0 or later &#x1f517;</a></div>
+      <div class='name-input-card middle {$names.can_new_game() ? "" : "unavailable"}' onclick={ui_new_game}>
+	<div class='info-card-copyright' onclick={stopPropagation(() => false)}><a href="https://groovescore.app">&copy; 2022-2024 Jani Nikula<br>License: AGPL 3.0 or later &#x1f517;</a></div>
 	<div></div>
 	<div>GrooveScore</div>
 	<div>Snooker</div>
@@ -289,7 +291,7 @@
       </div>
       {#each $names.names as player_name (player_name.id)}
 	<div class='name-input-card {ui_name_input_card_style(player_name)}'>
-	  <input class='name-input' size=22 minlength=1 maxlength=22 placeholder='enter name' bind:value='{player_name.name}' on:click|stopPropagation={() => {}}/>
+	  <input class='name-input' size=22 minlength=1 maxlength=22 placeholder='enter name' bind:value='{player_name.name}' onclick={stopPropagation(() => {})}/>
 	  <div></div>
 	  <div></div>
 	  <div></div>
@@ -300,10 +302,10 @@
       {/each}
 
       {#each $game.saved_games as save_game, index (save_game.slot) }
-	<div class='info-card {save_game.timestamp ? "" : "unavailable"}' on:click={() => ui_load_game(save_game)}>
+	<div class='info-card {save_game.timestamp ? "" : "unavailable"}' onclick={() => ui_load_game(save_game)}>
 	  <div>Game save {index}</div>
 	  <div></div>
-	  {#if save_game.timestamp }
+	  {#if save_game.timestamp}
 	    <div>Started</div>
 	    <div>{timeutil.format_date(save_game.timestamp)}</div>
 	    <div>{timeutil.format_time(save_game.timestamp)}</div>
@@ -319,25 +321,25 @@
 
     </div>
 
-  {:else if ui_page == UiPage.PLAY }
+  {:else if ui_page == UiPage.PLAY}
     <div class='grid-container'>
-      <div class='score-card middle' on:click={ui_show_menu}>
+      <div class='score-card middle' onclick={ui_show_menu}>
 	<div>{ live_update($game.state.get_frame_time()) }</div>
 	<div>Frames ({$game.state.num_frames})</div>
 	<div>
 	  Points
 	  <div>(Remaining {$game.state.num_points()})</div>
 	</div>
 	<div>Break</div>
-	{#if $game.state.respot_black }
+	{#if $game.state.respot_black}
 	  <div class='highlight'>re-spot black</div>
 	{:else}
 	  <div></div>
 	{/if}
 	<div class='card-button'>Menu</div>
       </div>
       {#each $game.state.get_players() as player (player.pid)}
-	<div class='score-card {ui_score_card_player_style(player)}' on:click={() => ui_click_player(player)}>
+	<div class='score-card {ui_score_card_player_style(player)}' onclick={() => ui_click_player(player)}>
 	  <div>{player.name}</div>
 	  <div>{player.frame_wins}</div>
 	  <div class='score-card-points'>{player.points}</div>
@@ -348,9 +350,9 @@
 	    <div>({player.last_break})</div>
 	    <div class='score-card-break unavailable'><Break balls={player._last_break}></Break></div>
 	  {/if}
-	  {#if $game.state.is_current_player(player.pid) && $game.state.can_end_turn() }
+	  {#if $game.state.is_current_player(player.pid) && $game.state.can_end_turn()}
 	    <div title='Shortcut: [space]' class='card-button'>End turn</div>
-	  {:else if $game.state.is_winner(player.pid) }
+	  {:else if $game.state.is_winner(player.pid)}
 	    <div class='highlight'>Frame Winner</div>
 	  {:else}
 	    <div></div>
@@ -400,7 +402,7 @@
     </div>
   {:else}
     <div class='grid-container'>
-      <div class='score-card middle' on:click={ui_goto_play_page}>
+      <div class='score-card middle' onclick={ui_goto_play_page}>
 	<div>{ live_update($game.state.get_frame_time()) }</div>
 	<div>Frames ({$game.state.num_frames})</div>
 	<div>
@@ -424,8 +426,8 @@
 	    <div class='score-card-break unavailable'><Break balls={player._last_break}></Break></div>
 	  {/if}
 	  <div class='double-button'>
-	    <div class='card-button' on:click={() => ui_player_edit_points(player.pid, -1)}>&ndash;</div>
-	    <div class='card-button' on:click={() => ui_player_edit_points(player.pid, 1)}>+</div>
+	    <div class='card-button' onclick={() => ui_player_edit_points(player.pid, -1)}>&ndash;</div>
+	    <div class='card-button' onclick={() => ui_player_edit_points(player.pid, 1)}>+</div>
 	  </div>
 	</div>
       {/each}
@@ -475,19 +477,19 @@
 
   {/if}
 
-{#if ui_page != UiPage.START }
+{#if ui_page != UiPage.START}
   <Dialog bind:show={show_menu}>
     <div class='dialog'>
       <div class='menu'>
 	<div class='menu-column'>
-	  <div title='Shortcut: s' class='menu-button' on:click={ui_show_stats}>Statistics</div>
-	  <div title='Shortcut: e' class='menu-button' on:click={ui_goto_edit_page}>Edit</div>
-	  <div title='Shortcut: FIXME' class='menu-button {$game.state.can_end_frame() ? "" : "unavailable"}' on:click={ui_end_frame}>End frame</div>
-	  <div title='Shortcut: FIXME' class='menu-button {$game.state.can_new_frame() ? "" : "unavailable"}' on:click={ui_new_frame}>New frame</div>
+	  <div title='Shortcut: s' class='menu-button' onclick={ui_show_stats}>Statistics</div>
+	  <div title='Shortcut: e' class='menu-button' onclick={ui_goto_edit_page}>Edit</div>
+	  <div title='Shortcut: FIXME' class='menu-button {$game.state.can_end_frame() ? "" : "unavailable"}' onclick={ui_end_frame}>End frame</div>
+	  <div title='Shortcut: FIXME' class='menu-button {$game.state.can_new_frame() ? "" : "unavailable"}' onclick={ui_new_frame}>New frame</div>
 	</div>
 	<div class='menu-column'>
-	  <div class='menu-button' on:click={ui_toggle_fullscreen}>Full screen</div>
-	  <div class='menu-button' on:click={ui_goto_start_page}>Main screen</div>
+	  <div class='menu-button' onclick={ui_toggle_fullscreen}>Full screen</div>
+	  <div class='menu-button' onclick={ui_goto_start_page}>Main screen</div>
 	  <div class='menu-button unavailable'>Help</div>
 	  <div class='menu-button unavailable'>Free ball</div>
 	</div>

diff --git a/src/lib/Ball.svelte b/src/lib/Ball.svelte
@@ -1,22 +1,33 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <!-- SPDX-FileCopyrightText: 2022 Jani Nikula <[email protected]> -->
 <script lang='ts'>
-  export let value: number;
-  export let action = () => {};
-  export let active: boolean;
-  export let title: string = '';
   import { value_to_csscolor } from './ball-colors';
+  interface Props {
+    value: number;
+    action?: any;
+    active: boolean;
+    title?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    value,
+    action = () => {},
+    active,
+    title = '',
+    children
+  }: Props = $props();
 
-  $: brightness = active ? '100%' : '50%'
+  let brightness = $derived(active ? '100%' : '50%')
 
   function onclick(): void {
     if (active)
       action()
   }
 </script>
 
-<div title='{title}' class='ball' style='--csscolor: {value_to_csscolor(value)}; --brightness: {brightness};' on:click={onclick}>
-  <div class='value'><slot></slot></div>
+<div title='{title}' class='ball' style='--csscolor: {value_to_csscolor(value)}; --brightness: {brightness};' {onclick}>
+  <div class='value'>{@render children?.()}</div>
 </div>
 
 <style>

diff --git a/src/lib/Break.svelte b/src/lib/Break.svelte
@@ -1,15 +1,21 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <!-- SPDX-FileCopyrightText: 2022 Jani Nikula <[email protected]> -->
 <script lang='ts'>
-  export let balls: number[];
+  import { run } from 'svelte/legacy';
+
   import { value_to_csscolor } from './ball-colors';
+  interface Props {
+    balls: number[];
+  }
 
-  let counts: number[];
-  let err: number;
+  let { balls }: Props = $props();
 
-  $: ball_counts = balls.length > 10;
+  let counts: number[] = $state();
+  let err: number = $state();
 
-  $: {
+  let ball_counts = $derived(balls.length > 10);
+
+  run(() => {
     counts = [0,0,0,0,0,0,0,0];
     err = 0;
 
@@ -19,7 +25,7 @@
       else
 	err = i;
     }
-  }
+  });
 </script>
 
 {#if ball_counts}

diff --git a/src/lib/Dialog.svelte b/src/lib/Dialog.svelte
@@ -1,17 +1,23 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <!-- SPDX-FileCopyrightText: 2024 Jani Nikula <[email protected]> -->
-<script>
-  export let show;
+<script lang="ts">
+  import { run } from 'svelte/legacy';
 
-  let dialog; // HTMLDialogElement
+  let { show = $bindable(), children } = $props();
 
-  $: if (dialog && show) dialog.showModal();
+  let dialog = $state(); // HTMLDialogElement
 
-  $: if (dialog && !show) dialog.close();
+  run(() => {
+    if (dialog && show) dialog.showModal();
+  });
+
+  run(() => {
+    if (dialog && !show) dialog.close();
+  });
 </script>
 
-<dialog bind:this={dialog} on:close={() => (show = false)} on:click={() => dialog.close()}>
-  <slot />
+<dialog bind:this={dialog} onclose={() => (show = false)} onclick={() => dialog.close()}>
+  {@render children?.()}
 </dialog>
 
 <style>

diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')
 })