Update to Svelte 5

svelte/package.json

@@ -7,10 +7,11 @@
 		"serve": "vite preview"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "*",
-		"svelte": "*",
-		"svelte-preprocess": "*",
-		"typescript": "*",
-		"vite": "*"
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.1.1",
+		"svelte-preprocess": "^6.0.0",
+		"typescript": "^5.5.0",
+		"vite": "^6.0.3"
 	}
 }

svelte/src/CardCell.svelte

@@ -1,37 +1,40 @@
-<svelte:options immutable />
-
-<script context="module" lang="ts">
+<script module lang="ts">
 import { card_constants } from "./globals";
 </script>
 
 <script lang="ts">
-  export let card: any;
+	import ColoredSuit from "./ColoredSuit.svelte";
+	import { CardData } from "./types";
+
+	interface Props {
+		card: CardData | undefined;
+	}
 
-  import ColoredSuit from "./ColoredSuit.svelte";
+	let { card }: Props = $props();
 
-  let valueName = "",
-    suitName = "";
+	let valueName = $state(""),
+		suitName = $state("");
 
-  if (card) {
-    valueName = card_constants.value_names[card.value];
-    suitName = card_constants.suit_names[card.suit];
-  }
+	if (card) {
+		valueName = card_constants.value_names[card.value];
+		suitName = card_constants.suit_names[card.suit];
+	}
 </script>
 
 {#if card}
-  <td title="{valueName} of {suitName}">
-    <span class="symbol">
-      <ColoredSuit {card} />
-    </span>
-    {card.value}
-  </td>
+	<td title="{valueName} of {suitName}">
+		<span class="symbol">
+			<ColoredSuit {card} />
+		</span>
+		{card.value}
+	</td>
 {:else}
-  <td />
+	<td></td>
 {/if}
 
 <style>
-  .symbol {
-    width: 1rem;
-    display: inline-block;
-  }
+	.symbol {
+		width: 1rem;
+		display: inline-block;
+	}
 </style>

svelte/src/Chug.svelte

@@ -1,79 +1,80 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 import { formatDuration } from "./globals";
 import type { ChugData } from "./types";
 </script>
 
 <script lang="ts">
-  export let start_datetime: string;
-  export let chug: ChugData;
+	import ColoredSuit from "./ColoredSuit.svelte";
+	interface Props {
+		start_datetime: string;
+		chug: ChugData;
+	}
 
-  import ColoredSuit from "./ColoredSuit.svelte";
+	let { start_datetime, chug }: Props = $props();
 
-  const gameplayer = chug.gameplayer;
-  const user = gameplayer.user;
-  $: card = chug.card;
+	const gameplayer = chug.gameplayer;
+	const user = gameplayer.user;
+	let card = $derived(chug.card);
 
-  let intervalId: number | null = null;
-  let durationStr = "";
+	function getStartDeltaMs() {
+		return Date.now() - new Date(start_datetime).getTime();
+	}
 
-  function start_delta_ms() {
-    return Date.now() - new Date(start_datetime).getTime();
-  }
-
-  function updateDuration() {
-    durationStr = formatDuration(
-      start_delta_ms() - card.chug_start_start_delta_ms!,
-      3
-    );
-  }
-
-  $: {
-    if (intervalId !== null) {
-      clearInterval(intervalId);
-    }
-
-    if (gameplayer.dnf) {
-      durationStr = "DNF";
-    } else if (card.chug_duration_ms) {
-      durationStr = formatDuration(card.chug_duration_ms, 3);
-    } else if (card.chug_start_start_delta_ms) {
-      intervalId = setInterval(updateDuration, 10);
-    } else {
-      durationStr = "Not started";
-    }
-  }
+	let startDeltaMs = $state(getStartDeltaMs());
+	let { durationStr, inProgress } = $derived.by(() => {
+		if (gameplayer.dnf) {
+			return { durationStr: "DNF", inProgress: false };
+		} else if (card.chug_duration_ms) {
+			return { durationStr: formatDuration(card.chug_duration_ms, 3), inProgress: false };
+		} else if (card.chug_start_start_delta_ms) {
+			return { durationStr: formatDuration(startDeltaMs - card.chug_start_start_delta_ms!, 3), inProgress: true };
+		} else {
+			return { durationStr: "Not started", inProgress: false };
+		}
+	});
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+	$effect(() => {
+		if (inProgress) {
+			intervalId = setInterval(() => {
+				startDeltaMs = getStartDeltaMs();
+			}, 10);
+		} else {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	});
 </script>
 
 <div class="col-md-auto">
-  <div class="card">
-    <div class="card-header">
-      <ColoredSuit {card} />
-    </div>
-    <ul class="list-group list-group-flush">
-      <li class="list-group-item">
-        <a href="/players/{user.id}/" class="username">
-          {user.username}
-        </a>
-      </li>
-      <li class="list-group-item">
-        {durationStr}
-      </li>
-      {#if card.chug_id}
-        <li class="list-group-item staff-only">
-          <a
-            class="btn btn-primary text-light"
-            href="/admin/games/chug/{card.chug_id}"
-            style="width: 100%;">Edit</a
-          >
-        </li>
-      {/if}
-    </ul>
-  </div>
+	<div class="card">
+		<div class="card-header">
+			<ColoredSuit {card} />
+		</div>
+		<ul class="list-group list-group-flush">
+			<li class="list-group-item">
+				<a href="/players/{user.id}/" class="username">
+					{user.username}
+				</a>
+			</li>
+			<li class="list-group-item">
+				{durationStr}
+			</li>
+			{#if card.chug_id}
+				<li class="list-group-item staff-only">
+					<a
+						class="btn btn-primary text-light"
+						href="/admin/games/chug/{card.chug_id}"
+						style="width: 100%;">Edit</a
+					>
+				</li>
+			{/if}
+		</ul>
+	</div>
 </div>
 
 <style>
-  .card-header {
-    font-size: 4rem;
-    text-align: center;
-  }
+	.card-header {
+		font-size: 4rem;
+		text-align: center;
+	}
 </style>

svelte/src/ColoredSuit.svelte

@@ -1,14 +1,16 @@
-<svelte:options immutable />
-
-<script context="module" lang="ts">
+<script module lang="ts">
 import { card_constants } from "./globals";
 import type { CardData } from "./types";
 </script>
 
 <script lang="ts">
-  export let card: CardData;
+	interface Props {
+		card: CardData;
+	}
+
+	let { card }: Props = $props();
 
-  const [symbol, color] = card_constants.suit_symbols[card.suit];
+	const [symbol, color] = card_constants.suit_symbols[card.suit];
 </script>
 
 <span style="color: {color};">{symbol}</span>