Migrate to Svelte 5

package.json

@@ -33,8 +33,8 @@
 		"@eslint/eslintrc": "^3.1.0",
 		"@eslint/js": "^9.11.1",
 		"@playwright/test": "^1.46.0",
-		"@sveltejs/kit": "^2.5.22",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/chroma-js": "^2.4.4",
 		"@types/js-cookie": "^3.0.6",
 		"@types/node": "^22.2.0",
@@ -44,7 +44,7 @@
 		"dotenv": "^16.4.5",
 		"eslint": "^9.9.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.43.0",
+		"eslint-plugin-svelte": "^2.45.1",
 		"globals": "^15.10.0",
 		"mysql2": "^3.11.0",
 		"postcss": "^8.4.41",
@@ -60,12 +60,12 @@
 		"stylelint": "^16.9.0",
 		"stylelint-config-standard": "^36.0.1",
 		"stylelint-declaration-strict-value": "^1.10.6",
-		"svelte": "^4.2.18",
-		"svelte-check": "^3.8.5",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.2",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.4",
-		"vite": "^5.4.0",
+		"vite": "^5.4.4",
 		"vitest": "^2.0.5"
 	},
 	"type": "module",

src/app.d.ts

@@ -10,6 +10,7 @@ declare global {
 		interface HTMLAttributes<T> {
 			popover?: string | boolean | null;
 			popovertarget?: string | null;
+			'onclick-outside'?: (event: CustomEvent<any>) => void;
 		}
 	}
 	interface Window {

src/lib/AdminActions.svelte

@@ -1,5 +1,15 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { children } = $props();
+</script>
+
 <div class="flex">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

src/lib/AdminSearch.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let text = '';
+	interface Props {
+		text?: string;
+	}
+
+	let { text = $bindable('') }: Props = $props();
 </script>
 
 <input type="text" bind:value={text} placeholder="Search" />

src/lib/ComponentWindow.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
-	import type { SvelteComponent } from 'svelte';
-	export let Component: typeof SvelteComponent;
+	import type { Component } from 'svelte';
+	interface Props {
+		Component: Component;
+	}
+
+	let { Component }: Props = $props();
 
-	let window_width;
+	let window_width = $state();
 </script>
 
 <h4>NewsletterForm</h4>
 
 <div class="window" bind:clientWidth={window_width}>
 	<span>{window_width}</span>
-	<svelte:component this={Component} />
+	<Component />
 </div>
 
 <div class="layout full">
 	<div class="main">
-		<svelte:component this={Component} />
+		<Component />
 	</div>
 	<div class="sidebar">
-		<svelte:component this={Component} />
+		<Component />
 	</div>
 	<div class="content">
-		<svelte:component this={Component} />
+		<Component />
 	</div>
 	<div class="full zone" style:--bg="var(--black)" style:--fg="var(--white)">
-		<svelte:component this={Component} />
+		<Component />
 	</div>
 </div>
 

src/lib/DropdownMenu.svelte

@@ -3,7 +3,16 @@
 	// A popover based drop down menu. Less specific than the Select Menu
 	// This uses slots instead of props
 	import { anchor } from '$actions/anchor';
-	export let popover_id: string;
+	import type { Snippet } from 'svelte';
+	let {
+		children,
+		button,
+		popover_id
+	}: {
+		children: Snippet;
+		button: Snippet;
+		popover_id: string;
+	} = $props();
 </script>
 
 <div class="dropdown-menu">
@@ -12,10 +21,10 @@
 		class="dropdown-button button-reset"
 		use:anchor={{ id: popover_id, position: ['BOTTOM', 'RIGHT'] }}
 	>
-		<slot name="dropdown-button" />
+		{@render button()}
 	</button>
 	<div popover id={popover_id} class="dropdown-links">
-		<slot name="dropdown-links" />
+		{@render children()}
 	</div>
 </div>
 

src/lib/FacePile.svelte

@@ -3,8 +3,12 @@
 		name: string;
 		github: string;
 	};
-	export let size = '50px';
-	export let faces: FaceForThePile[] = [];
+	interface Props {
+		size?: string;
+		faces?: FaceForThePile[];
+	}
+
+	let { size = '50px', faces = [] }: Props = $props();
 </script>
 
 <div class="pile" style:--face-size={size} style:--face-count={faces.length}>

src/lib/FormButton.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { form_action } from './form_action';
-	export let text: string;
-	export let thinking_text: string;
-	export let action_path: string;
+	interface Props {
+		text: string;
+		thinking_text: string;
+		action_path: string;
+		children?: import('svelte').Snippet;
+	}
 
-	let thinking = false;
+	let {
+		text,
+		thinking_text,
+		action_path,
+		children
+	}: Props = $props();
+
+	let thinking = $state(false);
 </script>
 
 <form
@@ -21,6 +31,6 @@
 		}
 	)}
 >
-	<slot />
+	{@render children?.()}
 	<button disabled={thinking} type="submit">{thinking ? thinking_text : text}</button>
 </form>

src/lib/FormWithLoader.svelte

@@ -4,9 +4,15 @@
 	import { loading } from '$state/loading';
 	import type { ActionResult, SubmitFunction } from '@sveltejs/kit';
 	import toast from 'svelte-french-toast';
-	let formLoading = false;
-	export let global = true; // By default, the global loader UI is used
-	export let confirm = '';
+	let formLoading = $state(false);
+	interface Props {
+		global?: boolean;
+		confirm?: string;
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { global = true, confirm = '', children, ...rest }: Props = $props();
 
 	type FormActionMessage = {
 		message?: string;
@@ -48,6 +54,6 @@
 	};
 </script>
 
-<form {...$$restProps} use:enhance={form_action()}>
-	<slot loading={formLoading} />
+<form {...rest} use:enhance={form_action()}>
+	{@render children?.({ loading: formLoading, })}
 </form>

src/lib/HostsAndGuests.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import type { Guest } from '@prisma/client';
 	import Host from '$lib/hosts/Host.svelte';
-	export let guests: { Guest: Guest }[] = [];
-	export let hosts: {
+	interface Props {
+		guests?: { Guest: Guest }[];
+		hosts?: {
 		name: string | null;
 		username: string | null;
 		twitter: string | null;
-	}[] = [];
+	}[];
+	}
+
+	let { guests = [], hosts = [] }: Props = $props();
 </script>
 
 <div class="guests-and-hosts">

src/lib/Icon.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type IconName =
 		| 'play'
 		| 'playing'
@@ -36,9 +36,13 @@
 <script lang="ts">
 	import { capitalize } from '$utilities/capitalize';
 
-	export let name: IconName;
-	export let title: string | boolean = '';
-	export let aria_hidden = true;
+	interface Props {
+		name: IconName;
+		title?: string | boolean;
+		aria_hidden?: boolean;
+	}
+
+	let { name, title = $bindable(''), aria_hidden = true }: Props = $props();
 	if (!title && title !== false) title = capitalize(name);
 </script>
 

src/lib/ListenLinks.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { LatestShow } from '$server/ai/queries';
 	import Icon from './Icon.svelte';
-	export let show: LatestShow;
+	interface Props {
+		show: LatestShow;
+	}
+
+	let { show }: Props = $props();
 </script>
 
 <a

src/lib/Logo.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let height: number | string = '100%';
+	interface Props {
+		height?: number | string;
+	}
+
+	let { height = '100%' }: Props = $props();
 </script>
 
 <svg {height} viewBox="0 0 1371 1212" fill="none" xmlns="http://www.w3.org/2000/svg">

src/lib/Pagination.svelte

@@ -4,19 +4,23 @@
 	import { PER_PAGE } from '$const';
 	import { quintOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
-	export let count: number;
-	export let perPage: number = PER_PAGE;
-	export let page: number = 1;
-	$: totalPages = Math.ceil(count / perPage);
-	$: generate_search_params = (id: string, value: string | number) => {
+	interface Props {
+		count: number;
+		perPage?: number;
+		page?: number;
+	}
+
+	let { count, perPage = PER_PAGE, page = 1 }: Props = $props();
+	let totalPages = $derived(Math.ceil(count / perPage));
+	let generate_search_params = $derived((id: string, value: string | number) => {
 		const searchParams = new URLSearchParams($pageStore.url.search);
 		if (!value) {
 			searchParams.delete(id);
 		} else {
 			searchParams.set(id, value.toString());
 		}
 		return searchParams.toString();
-	};
+	});
 	function getNeighboringNumbers(number: number, maxNumber: number): number[] {
 		const start: number = Math.max(1, number - 3);
 		const end: number = Math.min(maxNumber, number + 3);
@@ -26,7 +30,7 @@
 		return result;
 	}
 
-	$: pageNumbers = getNeighboringNumbers(page, totalPages);
+	let pageNumbers = $derived(getNeighboringNumbers(page, totalPages));
 </script>
 
 <div class="pagination">

src/lib/SelectMenu.svelte

@@ -6,28 +6,41 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { apply, isSupported } from '@oddbird/popover-polyfill/fn';
+
 	if (!isSupported() && browser) {
 		apply();
 	}
+	interface Props {
+		options: { value: string; label: string }[];
+		button_icon?: IconName | null;
+		value_as_label?: boolean;
+		button_text: string;
+		popover_id: string;
+		value?: string;
+		onselect: (e: CustomEvent) => void;
+	}
 
-	export let options: { value: string; label: string }[];
-	export let button_icon: IconName | null = null;
-	export let value_as_label: boolean = false;
-	export let button_text: string;
-	export let popover_id: string;
+	let {
+		options,
+		button_icon = null,
+		value_as_label = false,
+		button_text,
+		popover_id,
+		value = '',
+		onselect
+	}: Props = $props();
 	let id = popover_id.replace('filter-', '');
-	export let value: string = '';
 	// let searchParams = new URLSearchParams(window.location.search);
 
-	$: generate_search_params = (id: string, value: string) => {
+	let generate_search_params = $derived((id: string, value: string) => {
 		const searchParams = new URLSearchParams($page.url.search);
 		if (!value) {
 			searchParams.delete(id);
 		} else {
 			searchParams.set(id, value);
 		}
 		return searchParams.toString();
-	};
+	});
 
 	function closePopoverWhenSelected(node: HTMLDivElement) {
 		function handlePopoverSelection(event: MouseEvent) {