migrate to svelte 5

.tool-versions

@@ -1,2 +1,2 @@
-bun 1.1.42
-nodejs 22.12.0
+bun 1.2.2
+nodejs 22.14.0

package.json

@@ -12,27 +12,27 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@nomimono/nomimono-css": "^0.4.25",
-    "@sveltejs/adapter-cloudflare": "^4.9.0",
-    "@sveltejs/adapter-node": "^5.2.11",
-    "@sveltejs/kit": "=2.11.1",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@nomimono/nomimono-css": "^0.6.0",
+    "@sveltejs/adapter-cloudflare": "^5.0.2",
+    "@sveltejs/adapter-node": "^5.2.12",
+    "@sveltejs/kit": "=2.17.1",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
     "clipboard": "^2.0.11",
     "dayjs": "^1.11.13",
-    "eslint": "^9.17.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-svelte": "^2.46.1",
     "global": "^4.4.0",
     "gravatar-url": "^4.0.1",
-    "highcharts": "^11.4.8",
+    "highcharts": "=11.4.8",
     "js-cookie": "^3.0.5",
-    "sass": "^1.83.0",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.1.1",
+    "sass": "^1.84.0",
+    "svelte": "^5.19.10",
+    "svelte-check": "^4.1.4",
     "svelte-eslint-parser": "^0.43.0",
     "svelte-preprocess": "^6.0.3",
-    "sweetalert2": "^11.14.5",
-    "typescript": "~5.7.2",
+    "sweetalert2": "^11.16.0",
+    "typescript": "~5.7.3",
     "valid-url": "^1.0.9"
   },
   "type": "module"

src/lib/components/Chart.svelte

@@ -4,23 +4,27 @@
 	import * as hc from '$lib/hc'
 	import { browser } from '$app/environment'
 
-	/** @type {string} */
-	export let title
-
-	/** @type {string} */
-	export let unit
-
 	/** @typedef {Object} Series */
 	/** @property {string} prefix */
 	/** @property {Array} lines */
 	/** @property {string?} dashStyle */
 	/** @property {string?} color */
 
-	/** @type {Series[]} */
-	export let series
-
-	/** @type {'line' | 'spline'} */
-	export let type = 'line'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} title
+	 * @property {string} unit
+	 * @property {Series[]} series
+	 * @property {'line' | 'spline'} [type]
+	 */
+
+	/** @type {Props} */
+	const {
+		title,
+		unit,
+		series,
+		type = 'line'
+	} = $props()
 
 	/** @type {HTMLDivElement} */
 	let el
@@ -53,13 +57,6 @@
 		}
 	})
 
-	$: {
-		if (series?.length === 0) clear()
-		series?.forEach((s) => {
-			update(s.prefix, s.lines, s.dashStyle, s.color)
-		})
-		chart?.redraw()
-	}
 
 	function update (name, lines, dashStyle, color) {
 		if (!browser || !chart) return
@@ -108,6 +105,14 @@
 		}
 		return v
 	}
+
+	$effect(() => {
+		if (series?.length === 0) clear()
+		series?.forEach((s) => {
+			update(s.prefix, s.lines, s.dashStyle, s.color)
+		})
+		chart?.redraw()
+	})
 </script>
 
 <div bind:this={el}></div>

src/lib/components/DeploymentStatusIcon.svelte

@@ -2,17 +2,21 @@
 	import { browser } from '$app/environment'
 	import { onDestroy } from 'svelte'
 
-	/** @type {Api.DeploymentAction} */
-	export let action
-
-	/** @type {Api.DeploymentStatus} */
-	export let status
-
-	/** @type {string} */
-	export let url
+	/**
+	 * @typedef {Object} Props
+	 * @property {Api.DeploymentAction} action
+	 * @property {Api.DeploymentStatus} status
+	 * @property {string} url
+	 * @property {Api.DeploymentType} type
+	 */
 
-	/** @type {Api.DeploymentType} */
-	export let type
+	/** @type {Props} */
+	const {
+		action,
+		status,
+		url,
+		type
+	} = $props()
 
 	const statusIconClass = {
 		pending: 'fa-solid fa-spinner-third fa-spin',
@@ -22,21 +26,10 @@
 	}
 
 	/** @type {Api.PodStatus | null} */
-	let podStatus
+	let podStatus = $state(null)
 
 	/** @type {string} */
-	let iconClass
-
-	$: {
-		status
-		url
-		action
-		browser && fetchPodStatus()
-	}
-	$: {
-		podStatus
-		iconClass = getIconClass()
-	}
+	let iconClass = $state('')
 
 	/**
 	 * @returns {string}
@@ -93,6 +86,16 @@
 		destroyed = true
 		fetchPodStatusTimeout && clearTimeout(fetchPodStatusTimeout)
 	})
+	$effect(() => {
+		status
+		url
+		action
+		browser && fetchPodStatus()
+	})
+	$effect(() => {
+		podStatus
+		iconClass = getIconClass()
+	})
 </script>
 
 <i class={`${iconClass} _mgh-5`}></i>

src/lib/components/ErrorRow.svelte

@@ -1,16 +1,24 @@
 <script>
-	export let span = 1
-	export let error
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [span]
+	 * @property {any} error
+	 */
+
+	/** @type {Props} */
+	const { span = 1, error } = $props()
 </script>
 
 {#if error}
-	<td colspan={span} class="_tal-ct">
-		{#if error.forbidden}
-			You don't have permission to view data
-		{:else if error.message}
-			{error.message}
-		{:else}
-			{error}
-		{/if}
-	</td>
+	<tr>
+		<td colspan={span} class="_tal-ct">
+			{#if error.forbidden}
+				You don't have permission to view data
+			{:else if error.message}
+				{error.message}
+			{:else}
+				{error}
+			{/if}
+		</td>
+	</tr>
 {/if}

src/lib/components/LoadingRow.svelte

@@ -1,5 +1,11 @@
 <script>
-	export let span = 1
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [span]
+	 */
+
+	/** @type {Props} */
+	const { span = 1 } = $props()
 </script>
 
 <td colspan={span} class="_tal-ct">

src/lib/components/NoDataRow.svelte

@@ -1,10 +1,18 @@
 <script>
-	export let span = 1
-	export let list = []
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [span]
+	 * @property {any} [list]
+	 */
+
+	/** @type {Props} */
+	const { span = 1, list = [] } = $props()
 </script>
 
 {#if !list?.length}
-	<td colspan={span} class="_tal-ct">
-		No data
-	</td>
+	<tr>
+		<td colspan={span} class="_tal-ct">
+			No data
+		</td>
+	</tr>
 {/if}

src/lib/components/Secret.svelte

@@ -1,16 +1,22 @@
 <script>
-	/** @type {string} */
-	export let value
 
-	let isHidden = true
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} value
+	 */
+
+	/** @type {Props} */
+	const { value } = $props()
+
+	let isHidden = $state(true)
 
 	function toggle () {
 		isHidden = !isHidden
 	}
 </script>
 
 <span>
-	<div on:click={toggle} on:keypress={toggle} tabindex="0" role="link">
+	<div onclick={toggle} onkeypress={toggle} tabindex="0" role="link">
 		{#if isHidden}
 			<i class="fa-solid fa-eye"></i>
 		{:else}

src/lib/components/StatusIcon.svelte

@@ -1,6 +1,12 @@
 <script>
-	/** @type {string} */
-	export let status
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} status
+	 */
+
+	/** @type {Props} */
+	const { status } = $props()
 
 	const iconClassByStatus = {
 		pending: 'fa-solid fa-spinner-third fa-spin',
@@ -10,7 +16,7 @@
 		verify: 'fa-solid fa-exclamation-triangle _cl-warning'
 	}
 
-	$: iconClass = iconClassByStatus[status] || 'fa-solid fa-minus _cl-light'
+	const iconClass = $derived(iconClassByStatus[status] || 'fa-solid fa-minus _cl-light')
 </script>
 
 <i class={`${iconClass} _mgh-5`}></i>

src/routes/(auth)/(project)/+layout.svelte

@@ -2,7 +2,7 @@
 	import Cookie from 'js-cookie'
 	import { onMount } from 'svelte'
 
-	export let data
+	const { data, children } = $props()
 
 	const project = data.project
 
@@ -11,4 +11,4 @@
 	})
 </script>
 
-<slot />
+{@render children?.()}

src/routes/(auth)/(project)/+page.svelte

@@ -2,22 +2,11 @@
 	import { onMount } from 'svelte'
 	import api from '$lib/api'
 
-	export let data
+	const { data } = $props()
 
-	$: projectInfo = data.projectInfo
-	$: usage = data.usage
-	$: price = data.price
 
 	const unitGiB = 1024 * 1024 * 1024
 
-	$: billing = {
-		price: formatNumber(price.price),
-		cpu: formatNumber(usage.cpuUsage),
-		memory: formatNumber(usage.memory / unitGiB),
-		egress: formatNumber(usage.egress / unitGiB),
-		disk: formatNumber(usage.disk / unitGiB),
-		replica: formatNumber(usage.replica)
-	}
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -32,6 +21,17 @@
 		if (Number.isNaN(v)) return '?'
 		return v?.toLocaleString(undefined, { maximumFractionDigits: 2 }) ?? '?'
 	}
+	const projectInfo = $derived(data.projectInfo)
+	const usage = $derived(data.usage)
+	const price = $derived(data.price)
+	const billing = $derived({
+		price: formatNumber(price.price),
+		cpu: formatNumber(usage.cpuUsage),
+		memory: formatNumber(usage.memory / unitGiB),
+		egress: formatNumber(usage.egress / unitGiB),
+		disk: formatNumber(usage.disk / unitGiB),
+		replica: formatNumber(usage.replica)
+	})
 </script>
 
 <h6>Dashboard</h6>

src/routes/(auth)/(project)/deployment/(detail)/+layout.svelte

@@ -3,10 +3,10 @@
 	import { onMount } from 'svelte'
 	import api from '$lib/api'
 
-	export let data
+	const { data, children } = $props()
 
-	$: project = data.project
-	$: deployment = data.deployment
+	const project = $derived(data.project)
+	const deployment = $derived(data.deployment)
 
 	let lastReload = Date.now()
 
@@ -31,7 +31,7 @@
 <br>
 
 <div class="nm-panel is-level-300 _dp-g _g-7">
-	<Header {deployment} on:invalidate={() => api.invalidate('deployment.get')} />
+	<Header {deployment} invalidate={() => api.invalidate('deployment.get')} />
 
-	<slot />
+	{@render children?.()}
 </div>