svelte 5 migration

panel/package.json

@@ -12,15 +12,15 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-node": "^2.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/bcryptjs": "^2.4.2",
 		"@types/jsonwebtoken": "^9.0.2",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {

panel/src/lib/AppealTable.svelte

@@ -2,7 +2,11 @@
     import type { AppealEntry } from '$lib/types';
     import { getReadableDate } from './sharedfuncs';
 
-    export let entryList: Array<AppealEntry>;
+    interface Props {
+        entryList: Array<AppealEntry>;
+    }
+
+    let { entryList }: Props = $props();
 
     function redirect(id: number) {
         window.location.href = "/appeals/" + id;
@@ -36,7 +40,7 @@
                     {/if}
                     <td>{getReadableDate(p.time)}</td>
                     <td>
-                        <button class="button is-primary" on:click={() => redirect(p.id)}>Manage</button>
+                        <button class="button is-primary" onclick={() => redirect(p.id)}>Manage</button>
                     </td>
                 </tr>
             {/each}

panel/src/lib/AppealView.svelte

@@ -3,15 +3,26 @@
     import { getReadableMillis, getReadableDate } from './sharedfuncs';
     import { assign } from "svelte/internal";
 
-    export let appealEntry: AppealEntry;
-    export let punishEntry: PunishEntry;
-    export let back: string;
-    export let myUUID: string;
-    export let message: string | null;
-    export let formData: FormData;
+    interface Props {
+        appealEntry: AppealEntry;
+        punishEntry: PunishEntry;
+        back: string;
+        myUUID: string;
+        message: string | null;
+        formData: FormData;
+    }
+
+    let {
+        appealEntry,
+        punishEntry,
+        back,
+        myUUID,
+        message,
+        formData = $bindable()
+    }: Props = $props();
 
     let currentTime = new Date().getTime();
-    let unclaimText = "Unclaim"
+    let unclaimText = $state("Unclaim")
 
     function redirect(loc: string) {
         window.location.href = loc;
@@ -125,7 +136,7 @@
                     <label class="label">
                         Please review the player's comments, reach a verdict and put your comments below.
                         <br>
-                        <textarea name="comments" class="textarea" placeholder="Please provide as much detail as needed."/>
+                        <textarea name="comments" class="textarea" placeholder="Please provide as much detail as needed."></textarea>
                     </label>
                 </div>
     
@@ -136,18 +147,18 @@
             </form>
             <br>
             <div class="buttons is-right">
-                <button class="button" on:click={() => redirect(back)}>Back</button>
-                <button class="button is-warning" on:click={unclaimAppeal}>{unclaimText}</button>
+                <button class="button" onclick={() => redirect(back)}>Back</button>
+                <button class="button is-warning" onclick={unclaimAppeal}>{unclaimText}</button>
             </div>
         {:else}
             <div class="buttons is-right">
-                <button class="button" on:click={() => redirect(back)}>Back</button>
+                <button class="button" onclick={() => redirect(back)}>Back</button>
                 {#if appealEntry.assigned == null && appealEntry.open}
                     <form method="post">
                         <button class="button is-success" formaction="?/claim">Claim</button>
                     </form>
                 {:else if appealEntry.open}
-                    <button class="button is-warning" on:click={unclaimAppeal}>{unclaimText}</button>
+                    <button class="button is-warning" onclick={unclaimAppeal}>{unclaimText}</button>
                 {/if}
             </div>
         {/if}

panel/src/lib/ChatReportView.svelte

@@ -2,12 +2,16 @@
     import { getReadableDate } from "./sharedfuncs";
     import type { ChatReportEntry } from "./types";
 
-    export let entry: ChatReportEntry;
-    export let back: string;
+    interface Props {
+        entry: ChatReportEntry;
+        back: string;
+    }
 
-    let showAll: boolean = true;
-    let toggleAllButtonText: string = "Show only from the reported";
-    let toggleAllButtonType: string = "is-danger";
+    let { entry, back }: Props = $props();
+
+    let showAll: boolean = $state(true);
+    let toggleAllButtonText: string = $state("Show only from the reported");
+    let toggleAllButtonType: string = $state("is-danger");
 
     function toggleShowAll() {
         if (showAll) {
@@ -48,7 +52,7 @@
         </table>  
 
         <h2>Messages</h2>
-        <button class="button {toggleAllButtonType}" on:click={() => toggleShowAll()}>{toggleAllButtonText}</button>
+        <button class="button {toggleAllButtonType}" onclick={() => toggleShowAll()}>{toggleAllButtonText}</button>
         <br>
         <br>
         <table class="table is-centered is-bordered is-striped">
@@ -84,7 +88,7 @@
         </table>     
         
         <div class="buttons is-right">
-            <button class="button" on:click={() => goBack()}>Back</button>
+            <button class="button" onclick={() => goBack()}>Back</button>
         </div>
     </div>
 </section>

panel/src/lib/PunishEdit.svelte

@@ -5,9 +5,13 @@
 
     let currentTime = new Date().getTime();
 
-    export let form: ActionData;
-    export let entry: PunishEntry;
-    export let type: string;
+    interface Props {
+        form: ActionData;
+        entry: PunishEntry;
+        type: string;
+    }
+
+    let { form, entry, type }: Props = $props();
 
     function redirect(loc: string) {
         window.location.href = loc;

panel/src/lib/PunishRevoke.svelte

@@ -5,9 +5,13 @@
 
     let currentTime = new Date().getTime();
 
-    export let form: ActionData;
-    export let entry: PunishEntry;
-    export let type: string;
+    interface Props {
+        form: ActionData;
+        entry: PunishEntry;
+        type: string;
+    }
+
+    let { form, entry, type }: Props = $props();
 
     function redirect(loc: string) {
         window.location.href = loc;

panel/src/lib/PunishTable.svelte

@@ -2,8 +2,12 @@
     import type { PunishEntry } from '$lib/types';
     import { getReadableMillis, getReadableDate } from './sharedfuncs';
 
-    export let entryList: Array<PunishEntry>;
-    export let punishType: string;
+    interface Props {
+        entryList: Array<PunishEntry>;
+        punishType: string;
+    }
+
+    let { entryList, punishType }: Props = $props();
 
     function redirect(id: bigint) {
         window.location.href = "/" + punishType + "/" + id;
@@ -33,7 +37,7 @@
                     <td>{p.by_name}</td>
                     <td>{getReadableDate(p.time)}</td>
                     <td>
-                        <button class="button is-primary" on:click={() => redirect(p.id)}>Manage</button>
+                        <button class="button is-primary" onclick={() => redirect(p.id)}>Manage</button>
                     </td>
                 </tr>
             {/each}

panel/src/lib/PunishView.svelte

@@ -2,11 +2,21 @@
     import type { PunishEntry } from "./types";
     import { getReadableMillis, getReadableDate } from './sharedfuncs';
 
-    export let paramResult: string | null;
-    export let entry: PunishEntry;
-    export let type: string;
-    export let admin: boolean;
-    export let back: string;
+    interface Props {
+        paramResult: string | null;
+        entry: PunishEntry;
+        type: string;
+        admin: boolean;
+        back: string;
+    }
+
+    let {
+        paramResult,
+        entry,
+        type,
+        admin,
+        back
+    }: Props = $props();
 
     let currentTime = new Date().getTime();
 
@@ -80,11 +90,11 @@
         </table>
 
         <div class="buttons is-right">
-            <button class="button" on:click={() => redirect(back)}>Back</button>
+            <button class="button" onclick={() => redirect(back)}>Back</button>
             {#if entry.active}
-                <button class="button is-link" on:click={() => redirect("/" + type.toLowerCase() + "s/" + entry.id + "/edit")}>Edit {type}</button> 
+                <button class="button is-link" onclick={() => redirect("/" + type.toLowerCase() + "s/" + entry.id + "/edit")}>Edit {type}</button> 
                 {#if admin}
-                    <button class="button is-danger" on:click={() => redirect("/" + type.toLowerCase() + "s/" + entry.id + "/revoke")}>Revoke {type}</button>
+                    <button class="button is-danger" onclick={() => redirect("/" + type.toLowerCase() + "s/" + entry.id + "/revoke")}>Revoke {type}</button>
                 {/if}
             {/if}
         </div>

panel/src/lib/ReportTable.svelte

@@ -2,7 +2,11 @@
     import type { ReportEntry } from '$lib/types';
     import { getReadableDate } from './sharedfuncs';
 
-    export let entryList: Array<ReportEntry>;
+    interface Props {
+        entryList: Array<ReportEntry>;
+    }
+
+    let { entryList }: Props = $props();
 
     function redirect(id: number) {
         window.location.href = "/reports/" + id;
@@ -36,7 +40,7 @@
                     {/if}
                     <td>{getReadableDate(p.time)}</td>
                     <td>
-                        <button class="button is-primary" on:click={() => redirect(p.id)}>Manage</button>
+                        <button class="button is-primary" onclick={() => redirect(p.id)}>Manage</button>
                     </td>
                 </tr>
             {/each}

panel/src/lib/ReportView.svelte

@@ -2,15 +2,26 @@
     import type { ReportEntry } from "./types";
     import { convertReportType, createLinkFromEvidence, getReadableDate } from './sharedfuncs';
 
-    export let reportEntry: ReportEntry;
-    export let back: string;
-    export let myUUID: string;
-    export let isAdmin: boolean;
-    export let message: string | null;
-    export let formData: FormData;
+    interface Props {
+        reportEntry: ReportEntry;
+        back: string;
+        myUUID: string;
+        isAdmin: boolean;
+        message: string | null;
+        formData: FormData;
+    }
+
+    let {
+        reportEntry,
+        back,
+        myUUID,
+        isAdmin,
+        message,
+        formData = $bindable()
+    }: Props = $props();
 
     let currentTime = new Date().getTime();
-    let unclaimText = "Unclaim"
+    let unclaimText = $state("Unclaim")
 
     function redirect(loc: string) {
         window.location.href = loc;
@@ -136,7 +147,7 @@
                     <label class="label">
                         Please review the reporter's comments and evidence, and reach a verdict and put your comments below.
                         <br>
-                        <textarea name="comments" class="textarea" placeholder="Please provide as much detail as needed."/>
+                        <textarea name="comments" class="textarea" placeholder="Please provide as much detail as needed."></textarea>
                     </label>
                 </div>
     
@@ -147,18 +158,18 @@
             </form>
             <br>
             <div class="buttons is-right">
-                <button class="button" on:click={() => redirect(back)}>Back</button>
-                <button class="button is-warning" on:click={unclaimAppeal}>{unclaimText}</button>
+                <button class="button" onclick={() => redirect(back)}>Back</button>
+                <button class="button is-warning" onclick={unclaimAppeal}>{unclaimText}</button>
             </div>
         {:else}
             <div class="buttons is-right">
-                <button class="button" on:click={() => redirect(back)}>Back</button>
+                <button class="button" onclick={() => redirect(back)}>Back</button>
                 {#if reportEntry.assigned == null && reportEntry.open}
                     <form method="post">
                         <button class="button is-success" formaction="?/claim">Claim</button>
                     </form>
                 {:else if reportEntry.open && isAdmin}
-                    <button class="button is-warning" on:click={unclaimAppeal}>{unclaimText}</button>
+                    <button class="button is-warning" onclick={unclaimAppeal}>{unclaimText}</button>
                 {/if}
             </div>
         {/if}

panel/src/lib/SideNav.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
     import type { AuthResult } from "./types";
 
-    export let userInfo: AuthResult;
+    interface Props {
+        userInfo: AuthResult;
+    }
+
+    let { userInfo }: Props = $props();
 </script>
 
 <div class="column is-1 staffog-sidenav">

panel/src/lib/StatsLevel.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
     import type { OnlineStats, PunishStats } from '$lib/types';
 
-    export let onlineStats: OnlineStats;
-    export let punishStats: PunishStats;
+    interface Props {
+        onlineStats: OnlineStats;
+        punishStats: PunishStats;
+    }
+
+    let { onlineStats, punishStats }: Props = $props();
 </script>
 
 <nav class="level">

panel/src/routes/(main)/+error.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 </script>
 
 <div class="box content has-text-centered">
-    <h2>Error {$page.status}</h2>
-    <p>{$page.error.message}</p>
+    <h2>Error {page.status}</h2>
+    <p>{page.error.message}</p>
     <br><br>
     <p>If you believe this is a mistake, please get in touch with <b>admin@trueog.net</b>.</p>
 </div>

panel/src/routes/(main)/+layout.svelte

@@ -3,14 +3,19 @@
     import SideNav from "$lib/SideNav.svelte";
     import type { LayoutData } from "./$types";
 
-    export let data: LayoutData;
+    interface Props {
+        data: LayoutData;
+        children?: import('svelte').Snippet;
+    }
+
+    let { data, children }: Props = $props();
 </script>
 
 <main>
     <div class="columns">
         <SideNav userInfo={data.sessionUser} />
         <div class="column">
-            <slot/>
+            {@render children?.()}
         </div>
     </div>
 </main>

panel/src/routes/(main)/+page.svelte

@@ -3,10 +3,14 @@
     import StatsLevel from "$lib/StatsLevel.svelte";
     import type { PageData } from './$types';
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
 
-    let searchError = "";
-    let searchInput = "";
+    let { data }: Props = $props();
+
+    let searchError = $state("");
+    let searchInput = $state("");
 
 
     function redirect(loc: string) {
@@ -70,7 +74,7 @@
                       <input bind:value={searchInput} class="input" type="text" placeholder="Enter a player name or UUID">
                     </div>
                     <div class="control">
-                        <button on:click={search} class="button is-link">Search</button>
+                        <button onclick={search} class="button is-link">Search</button>
                     </div>
                 </div>
             </section>

panel/src/routes/(main)/appeals/+page.svelte

@@ -2,7 +2,11 @@
     import AppealTable from "$lib/AppealTable.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 <svelte:head>
 	<title>Appeals | TrueOG</title>

panel/src/routes/(main)/appeals/[slug]/+page.svelte

@@ -2,8 +2,12 @@
     import AppealView from "$lib/AppealView.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
-    export let form: FormData;
+    interface Props {
+        data: PageData;
+        form: FormData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/bans/[slug]/+page.svelte

@@ -2,7 +2,11 @@
     import PunishView from "$lib/PunishView.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/bans/[slug]/edit/+page.svelte

@@ -2,8 +2,12 @@
     import PunishEdit from "$lib/PunishEdit.svelte";
     import type { PageData, ActionData } from "./$types";
 
-    export let data: PageData;
-    export let form: ActionData;
+    interface Props {
+        data: PageData;
+        form: ActionData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/bans/[slug]/revoke/+page.svelte

@@ -2,8 +2,12 @@
     import PunishRevoke from "$lib/PunishRevoke.svelte";
     import type { PageData, ActionData } from "./$types";
 
-    export let data: PageData;
-    export let form: ActionData;
+    interface Props {
+        data: PageData;
+        form: ActionData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/chatreport/[slug]/+page.svelte

@@ -2,7 +2,11 @@
     import ChatReportView from "$lib/ChatReportView.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/mutes/[slug]/+page.svelte

@@ -2,7 +2,11 @@
     import PunishView from "$lib/PunishView.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/mutes/[slug]/edit/+page.svelte

@@ -2,8 +2,12 @@
     import PunishEdit from "$lib/PunishEdit.svelte";
     import type { PageData, ActionData } from "./$types";
 
-    export let data: PageData;
-    export let form: ActionData;
+    interface Props {
+        data: PageData;
+        form: ActionData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/mutes/[slug]/revoke/+page.svelte

@@ -2,8 +2,12 @@
     import PunishRevoke from "$lib/PunishRevoke.svelte";
     import type { PageData, ActionData } from "./$types";
 
-    export let data: PageData;
-    export let form: ActionData;
+    interface Props {
+        data: PageData;
+        form: ActionData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/player/[slug]/+page.svelte

@@ -2,7 +2,11 @@
     import type { PageData } from './$types';
     import PunishTable from '$lib/PunishTable.svelte';
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(main)/profile/[slug]/+page.svelte

@@ -2,14 +2,18 @@
     import type { PageData } from './$types';
     import PunishTable from '$lib/PunishTable.svelte';
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
 
-    let viewableBans = data.punishments.bans;
+    let { data }: Props = $props();
+
+    let viewableBans = $state(data.punishments.bans);
     if (viewableBans.length > 9) {
         viewableBans = viewableBans.slice(0, 9)
     }
 
-    let viewableMutes = data.punishments.mutes;
+    let viewableMutes = $state(data.punishments.mutes);
     if (viewableMutes.length > 9) {
         viewableMutes = viewableMutes.slice(0, 9)
     }

panel/src/routes/(main)/reports/+page.svelte

@@ -2,7 +2,11 @@
     import ReportTable from "$lib/ReportTable.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 </script>
 <svelte:head>
 	<title>Reports | TrueOG</title>

panel/src/routes/(main)/reports/[slug]/+page.svelte

@@ -2,8 +2,12 @@
     import ReportView from "$lib/ReportView.svelte";
     import type { PageData } from "./$types";
 
-    export let data: PageData;
-    export let form: FormData;
+    interface Props {
+        data: PageData;
+        form: FormData;
+    }
+
+    let { data, form }: Props = $props();
 </script>
 
 <svelte:head>

panel/src/routes/(public)/login/+error.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 </script>
 
 <div class="content has-text-centered">
-    <h2>Error {$page.status}</h2>
-    <p>{$page.error.message}</p>
+    <h2>Error {page.status}</h2>
+    <p>{page.error.message}</p>
     <br><br>
     <p>If you believe this is a mistake, please get in touch with <b>admin@trueog.net</b>.</p>
 </div>

panel/src/routes/(public)/login/+layout.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
     import "$lib/app.scss";
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
 </script>
 
 <main>
@@ -7,7 +12,7 @@
         <div class="content has-text-centered">
             <img src="/logo-alternate-transparent.png" alt="TrueOG logo." />
         </div>
-        <slot/>
+        {@render children?.()}
     </container>    
 </main>
 

panel/src/routes/(public)/login/+page.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
     import type { ActionData, PageData } from './$types';
-    export let form: ActionData;
-    export let data: PageData;
+    interface Props {
+        form: ActionData;
+        data: PageData;
+    }
+
+    let { form, data }: Props = $props();
 </script>   
 
 <svelte:head>

panel/src/routes/(public)/login/activate/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
     import type { ActionData } from './$types';
-    export let form: ActionData;
+    interface Props {
+        form: ActionData;
+    }
+
+    let { form }: Props = $props();
 </script>   
 
 <svelte:head>

panel/src/routes/(public)/login/verify/+page.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
     import type { ActionData, PageData } from './$types';
-    export let form: ActionData;
-    export let data: PageData;
+    interface Props {
+        form: ActionData;
+        data: PageData;
+    }
+
+    let { form, data }: Props = $props();
 </script>   
 
 <svelte:head>

panel/src/routes/+error.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import "$lib/app.scss";
 </script>
 
 <section class="container box">
     <div class="content has-text-centered">
         <img src="/logo-alternate-transparent.png" alt="TrueOG logo." />
-        <h2>Error {$page.status}</h2>
-        <p>{$page.error.message}</p>
+        <h2>Error {page.status}</h2>
+        <p>{page.error.message}</p>
         <br><br>
         <p>If you believe this is a mistake, please get in touch with <b>admin@trueog.net</b>.</p>
     </div>