feat: update to svelte 5, sveltekit 2, and plachta 6

package.json

@@ -9,24 +9,25 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/adapter-node": "^5.2.9",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-svelte": "^2.32.4",
+    "eslint-plugin-svelte": "^2.45.1",
-    "prettier": "~2.2.1",
+    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^4.0.0",
+    "svelte": "^5.0.0",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess": "^6.0.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.0",
+    "typescript": "^5.5.0",
-    "vite": "^4.1.1"
+    "vite": "^5.4.4"
   },
   "type": "module",
   "dependencies": {
-    "@damillora/plachta": "^4.3.0",
+    "@damillora/plachta": "^6.2.0",
-    "@sveltejs/adapter-node": "^1.1.6",
     "dayjs": "^1.11.7",
     "howler": "^2.2.3",
     "sass": "^1.58.0"

src/lib/components/CopyArea.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
-    export let value;
+    let { value = $bindable() } = $props();
-    let copyarea;
+    let copyarea = $state();
 
     let copy = () => {
         copyarea.select();
@@ -9,10 +9,10 @@
     };
 </script>
 
-<input type="text" class="copyarea" on:click={copy} bind:value={value} bind:this={copyarea} readonly/>
+<input type="text" class="copyarea" onclick={copy} bind:value={value} bind:this={copyarea} readonly/>
 
 <style lang="scss">
-    @import "@damillora/plachta/dist/styles/global";
+    @use "@damillora/plachta/dist/styles/global" as *;
 
     .copyarea {
         background-color: var(--background-color);

src/lib/components/DjItem.svelte

@@ -1,8 +1,19 @@
-<script>
+<script lang="ts">
 	import { Card, CardContent, CardTitle, CardDescription } from '@damillora/plachta';
 
-	export let title, location, date;
+	interface Props {
-	export let link = "";
+		title: any;
+		location: any;
+		date: any;
+		link?: string;
+	}
+
+	let {
+		title,
+		location,
+		date,
+		link = ""
+	}: Props = $props();
 </script>
 
 <Card>
@@ -30,7 +41,7 @@
 </Card>
 
 <style lang="scss">
-	@import '@damillora/plachta/dist/styles/global';
+	@use '@damillora/plachta/dist/styles/global' as *;
 
 	.dj-item {
 		width: 100%;

src/lib/components/FloatingYuriko.svelte

@@ -9,7 +9,7 @@
 	}
 </script>
 
-<div class="floating-yuriko hvr-float" on:click={yurikoSound}>
+<div class="floating-yuriko hvr-float" onclick={yurikoSound}>
 	<img src="/yuriko-smol.png" alt="Yuriko" />
 </div>
 

src/lib/components/GameListItem.svelte

@@ -1,11 +1,25 @@
-<script>
+<script lang="ts">
 	import { Card, CardContent, CardDescription, CardTitle } from '@damillora/plachta';
 
 	import CopyArea from '$lib/components/CopyArea.svelte';
 
-	export let name, link, gameid, playername;
+	interface Props {
-	export let reviewlink = null;
+		name: any;
-	export let version = null;
+		link: any;
+		gameid: any;
+		playername: any;
+		reviewlink?: any;
+		version?: any;
+	}
+
+	let {
+		name,
+		link,
+		gameid,
+		playername,
+		reviewlink = null,
+		version = null
+	}: Props = $props();
 </script>
 
 <Card>

src/lib/components/MediaItem.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import { Card, CardContent, CardTitle, CardDescription } from '@damillora/plachta';
 
-	export let title, link, description;
+	let { title, link, description } = $props();
 </script>
 
 <Card>

src/lib/components/ProjectItem.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import { PostCard } from '@damillora/plachta';
 	
-	export let codename, name, description;
+	let { codename, name, description } = $props();
 </script>
 
 <PostCard

src/lib/components/SiteHeader.svelte

@@ -5,10 +5,13 @@
 </script>
 
 <Header>
-    <svelte:fragment slot="title">
+    {#snippet title()}
+    
             <a href="/"> <strong>Damillora</strong></a>
-    </svelte:fragment>
+        
-    <svelte:fragment slot="nav">
+    {/snippet}
+    {#snippet nav()}
+    
             <NavMenu label="About" url="/about" />
             <NavMenu label="Software" url="/projects" />
             <NavMenu label="DJ Damillora" url="/dj" />
@@ -16,5 +19,6 @@
             <NavMenu label="Contact" url="/contact" />
             <NavMenu label="Blog" url="/blog" />
             <NavDarkMode />
-    </svelte:fragment>
+        
+    {/snippet}
 </Header>

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 	import {
 		Base,
 		Header,
@@ -9,13 +10,19 @@
 	import FloatingYuriko from '$lib/components/FloatingYuriko.svelte';
 	import { isYurikoBirthday } from '$lib/yuriko-birthday.js';
 	import SiteHeader from '$lib/components/SiteHeader.svelte';
+	interface Props {
+		children?: Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <Base>
 	<SiteHeader />
 
 	<Hero background="/images/bg/283-yuika/bg-xxl.jpg" />
-	<slot />
+	
+	{@render children?.()}
 
 	<Footer>
 		<p>Copyright (c) 2024 Damillora</p>

tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"module": "es2020",
 		"lib": [
 			"es2020"
@@ -10,7 +10,6 @@
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 			to enforce using \`import type\` instead of \`import\` for Types.
 			*/
-		"importsNotUsedAsValues": "error",
 		"isolatedModules": true,
 		"resolveJsonModule": true,
 		/**
@@ -21,17 +20,8 @@
 		"esModuleInterop": true,
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
 		"allowJs": true,
 		"checkJs": true,
-		"paths": {
-			"$lib": [
-				"src/lib"
-			],
-			"$lib/*": [
-				"src/lib/*"
-			]
-		}
 	},
 	"include": [
 		"src/**/*.d.ts",