Went full Leroy Jenkins. Svelte5

package.json

@@ -31,30 +31,31 @@
 		"prepare": "husky"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"eslint": "^8.28.0",
 		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-svelte": "^2.30.0",
+		"eslint-plugin-svelte": "^2.45.1",
 		"husky": "^9.0.11",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.2",
 		"@speechanddebate/eslint-config-nsda": "^1.0.25",
-		"@sveltejs/adapter-node": "^1.3.1",
-		"@sveltejs/kit": "^1.27.6",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-node": "^5.2.10",
+		"@sveltejs/kit": "^2.5.27",
 		"dotenv": "^16.3.1",
 		"tsc-alias": "^1.8.10",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.34.0",
-		"wx-svelte-core": "^1.3.1",
-		"wx-svelte-grid": "1.3.1"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4",
+		"vitest": "^1.0.0",
+		"wx-svelte-core": "^2.0.0-beta-2",
+		"wx-svelte-grid": "^2.0.0-beta-3"
 	},
 	"eslintConfig": {
 		"extends": [

src/lib/AdCarousel.svelte

@@ -6,7 +6,7 @@
         url: string,
     }
 	let ads: Ad[] = [];
-    let currentAd: Ad;
+    let currentAd: Ad = $state();
     let currentIndex = 0;
 
     onMount(() => {

src/lib/DataTable.svelte

@@ -3,10 +3,16 @@
 	import { Grid } from 'wx-svelte-grid';
 	import { Willow } from 'wx-svelte-grid';
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let data: any[];
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let columns: any[] = [];
+	
+	
+	interface Props {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		data: any[];
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		columns?: any[];
+	}
+
+	let { data, columns = [] }: Props = $props();
 
 </script>
 

src/lib/Login.svelte

@@ -8,7 +8,7 @@
 				Login to Tabroom
 			</h6>
 
-			<a href="#top" class="sixth close fa fa-times-circle fa-lg bluetext">
+			<a href="#top" class="sixth close fa fa-times-circle fa-lg bluetext" aria-label="Login">
 			</a>
 		</div>
 

src/lib/SearchBar.svelte

@@ -12,8 +12,8 @@
 		webname: string
 	}
 
-    let searchResults: Results;
-    let resultsVisible = false;
+    let searchResults: Results = $state();
+    let resultsVisible = $state(false);
 
     const getSearch = async () => {
         const searchInput = document.getElementById('searchtext') as HTMLInputElement;
@@ -36,9 +36,9 @@
 </script>
 
 <span id="search" class="searchform" title="Search for tournaments">
-    <form on:submit={handleSubmit}>
+    <form onsubmit={handleSubmit}>
         <input
-            on:input       = {handleChangeInput}
+            oninput={handleChangeInput}
             id             = "searchtext"
             type           = "text"
             maxlength      = "128"
@@ -52,13 +52,13 @@
             tabindex       = "-1"
         >
 
-        <button type="submit" class="searchbutton">
+        <button type="submit" class="searchbutton" aria-label="Run Search">
             <i class="fas fa-lg fa-magnifying-glass"></i>
         </button>
     </form>
 </span>
 {#if (searchResults?.exactMatches?.length > 0 || searchResults?.partialMatches?.length > 0) && resultsVisible}
-    <div class="popup" role="listbox" tabindex="-1" on:mouseleave={handleMouseLeave}>
+    <div class="popup" role="listbox" tabindex="-1" onmouseleave={handleMouseLeave}>
         {#each searchResults?.exactMatches as result}
             <p>{result.name}</p>
         {/each}

src/lib/Table.svelte

@@ -5,8 +5,12 @@
         [key: string]: any;
     }
 
-    export let rows: Row[];
-    export let columns: Column[];
+	interface Props {
+		rows: Row[];
+		columns: Column[];
+	}
+
+	let { rows, columns }: Props = $props();
 </script>
 
 <table id="table">

src/routes/+layout.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import Header from './Header.svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <div id="overlay">
 	<Header />
 	<div id="wrapper">
 		<div id="content">
-			<slot />
+			{@render children?.()}
 		</div>
 	</div>
 </div>

src/routes/+page.svelte

@@ -6,7 +6,11 @@
 
     import { tourns } from './stores';
 
-	export let data:PageData;
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
 
 	interface Tourn {
 		start    : string,
@@ -17,7 +21,7 @@
 		webname  : string
 	}
 
-    let tournList: Tourn[];
+    let tournList: Tourn[] = $state();
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
     tourns.subscribe((value: any) => {
@@ -28,7 +32,7 @@
 <div id="main">
 	<AdCarousel />
 	<h1 style='text-align: left;'>Upcoming Tournaments</h1>
-	<DataTable data="{tournList}" columns="{data.columns}" />
+	<DataTable data={tournList} columns={data.columns} />
 </div>
 
 <div id="menu">

src/routes/Sidebar.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div>
-    <select on:change={getTourns}>
+    <select onchange={getTourns}>
         <option value="TX">Texas</option>
         <option value="IA">Iowa</option>
         <option value="CO">Colorado</option>

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-node'
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {