feat: migrate to svelte 5

package.json

@@ -16,8 +16,8 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-node": "^2.0.0",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.5.27",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/fitvids": "^2.1.1",
 		"@types/tryghost__content-api": "^1.3.11",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -25,31 +25,28 @@
 		"dayjs": "^1.11.9",
 		"eslint": "^8.46.0",
 		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-svelte": "^2.32.4",
+		"eslint-plugin-svelte": "^2.45.1",
 		"hast-util-from-selector": "^2.0.1",
-		"prettier": "^2.8.8",
+		"prettier": "^3.1.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier-plugin-svelte": "^3.2.6",
 		"rehype-parse": "^8.0.4",
 		"rehype-stringify": "^9.0.3",
 		"sass": "^1.64.2",
-		"svelte": "^4.1.2",
+		"svelte": "^5.0.0",
-		"svelte-check": "^3.4.6",
+		"svelte-check": "^4.0.0",
 		"svelte-infinite-scroll": "^2.0.1",
-		"svelte-preprocess": "^5.0.4",
+		"svelte-preprocess": "^6.0.0",
 		"svelte2tsx": "^0.6.0",
 		"tslib": "^2.6.1",
-		"typescript": "^5.1.6",
+		"typescript": "^5.5.0",
 		"unified": "^10.1.2",
 		"unist-util-visit": "^4.1.2",
-		"vite": "^5.0.0"
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@damillora/plachta": "^4.3.0",
+		"@damillora/plachta": "^6.2.0",
 		"@tryghost/content-api": "^1.11.16",
-		"fitvids": "^2.1.1",
+		"main": "^1000.0.1"
-		"main": "^1000.0.1",
-		"svelte-material-icons": "^3.0.0",
-		"svelte-themes": "^0.0.98"
 	}
 }

src/lib/components/ResponsivePageHeaderImage.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { generateSizesString, generateSrcsetString } from '$lib/content/srcset';
 
 	import { Hero } from '@damillora/plachta';
 
-	export let background: string | null = null;
+	interface Props {
-	export let alt = '';
+		background?: string | null;
-	let srcset: string | null = null;
+		alt?: string;
-	let sizes: string | null = null;
-	$: if (background != null) {
-		srcset = generateSrcsetString(background);
-		sizes = '100vw';
-	} else {
-		srcset = null;
-		sizes = null;
 	}
+
+	let { background = null, alt = '' }: Props = $props();
+	let srcset: string | null = $state(null);
+	let sizes: string | null = $state(null);
+	run(() => {
+		if (background != null) {
+			srcset = generateSrcsetString(background);
+			sizes = '100vw';
+		} else {
+			srcset = null;
+			sizes = null;
+		}
+	});
 </script>
 
 {#if background}

src/lib/components/SEO/AuthorSEO.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let author: any;
+	interface Props {
+		author: any;
+	}
+
+	let { author }: Props = $props();
 
     let schemaOrg = `
 	<script type="application/ld+json">

src/lib/components/SEO/PostSEO.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let post: any;
+	interface Props {
+		post: any;
+	}
+
+	let { post }: Props = $props();
 
 	let schemaOrg = `
 	<script type="application/ld+json">

src/lib/components/SEO/TagSEO.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let tag: any;
+    interface Props {
+        tag: any;
+    }
+
+    let { tag }: Props = $props();
 
 	let schemaOrg = `
 	<script type="application/ld+json">

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 		}
 	};
 
-	export let data;
+	let { data, children } = $props();
 </script>
 
 <svelte:head>
@@ -22,17 +22,21 @@
 </svelte:head>
 <Base>
 	<Header>
-		<svelte:fragment slot="title">
+		{#snippet title()}
-			<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
+			
-		</svelte:fragment>
+				<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
-		<svelte:fragment slot="nav">
+			
-			<NavMenu label="nanao.moe" url="https://nanao.moe" />
+			{/snippet}
-			<NavDarkMode />
+		{#snippet nav()}
-			<NavSearch on:search={doSearch} />
+			
-		</svelte:fragment>
+				<NavMenu label="nanao.moe" url="https://nanao.moe" />
+				<NavDarkMode />
+				<NavSearch on:search={doSearch} />
+			
+			{/snippet}
 	</Header>
 
-	<slot />
+	{@render children?.()}
 	{@html data.footer}
 	<Footer>
 		<p>Copyright (c) 2023 Damillora</p>

src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 
@@ -7,19 +9,21 @@
 	import { onMount } from 'svelte';
 	import IndexSeo from '$lib/components/SEO/IndexSEO.svelte';
 	import { browsePost } from '$lib/content/contentApi';
-	export let data;
+	let { data } = $props();
-	let { posts } = data;
+	let { posts } = $state(data);
 
-	let newPosts: any[] = [];
+	let newPosts: any[] = $state([]);
 	let page = 1;
-	$: posts = [...posts, ...newPosts];
+	run(() => {
+		posts = [...posts, ...newPosts];
+	});
 
 	async function loadPage() {
 		const posts = await browsePost(page);
 		newPosts = posts;
 	}
 
-	let footer: HTMLElement;
+	let footer: HTMLElement = $state();
 
 	onMount(() => {
 		if (browser) {
@@ -59,5 +63,5 @@
 			/>
 		{/each}
 	</Index>
-	<div bind:this={footer} />
+	<div bind:this={footer}></div>
 </Container>

src/routes/[tag]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Hero, PostCard, Index, TagHeader, Post, Container } from '@damillora/plachta';
 
 	import { browsePostWithTag, readTag } from '$lib/content/contentApi';
@@ -8,19 +10,21 @@
 	import dayjs from 'dayjs';
 	import TagSeo from '$lib/components/SEO/TagSEO.svelte';
 
-	export let data;
+	let { data } = $props();
-	let { posts } = data;
+	let { posts } = $state(data);
 
-	let newPosts: any[] = [];
+	let newPosts: any[] = $state([]);
 	let page = 1;
-	$: posts = [...posts, ...newPosts];
+	run(() => {
+		posts = [...posts, ...newPosts];
+	});
 
 	async function loadPage() {
 		const posts = await browsePostWithTag(data.tag.slug, page);
 		newPosts = posts;
 	}
 
-	let footer: HTMLElement;
+	let footer: HTMLElement = $state();
 
 	onMount(() => {
 		if (browser) {
@@ -67,6 +71,6 @@
 				url={post.url}
 			/>
 		{/each}
-		<div bind:this={footer} />
+		<div bind:this={footer}></div>
 	</Index>
 </Container>

src/routes/[tag]/[slug]/+page.svelte

@@ -27,7 +27,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import { generateSrcsetString } from '$lib/content/srcset';
 
-	export let data;
+	let { data } = $props();
 </script>
 
 <svelte:head>
@@ -52,7 +52,9 @@
 
 				<br />
 			</GhostStyle>
-			<svelte:fragment slot="comments" />
+			{#snippet comments()}
+						<svelte:fragment  />
+					{/snippet}
 		</PostMain>
 		<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
 	</Post>

src/routes/author/[author]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Hero, PostCard, Index, Post, AuthorHeader, Container } from '@damillora/plachta';
 
 	import type { Load } from '@sveltejs/kit';
@@ -8,20 +10,26 @@
 	import dayjs from 'dayjs';
 	import AuthorSeo from '$lib/components/SEO/AuthorSEO.svelte';
 
-	export let author: any;
 
-	export let data;
+	interface Props {
-	let { posts } = data;
+		author: any;
-	let newPosts: any[] = [];
+		data: any;
+	}
+
+	let { author, data }: Props = $props();
+	let { posts } = $state(data);
+	let newPosts: any[] = $state([]);
 	let page = 1;
-	$: posts = [...posts, ...newPosts];
+	run(() => {
+		posts = [...posts, ...newPosts];
+	});
 
 	async function loadPage() {
 		const posts = await browsePostWithAuthor(data.author.slug, page);
 		newPosts = posts;
 	}
 
-	let footer: HTMLElement;
+	let footer: HTMLElement = $state();
 
 	onMount(() => {
 		if (browser) {
@@ -71,6 +79,6 @@
 				url={post.url}
 			/>
 		{/each}
-		<div bind:this={footer} />
+		<div bind:this={footer}></div>
 	</Index>
 </Container>

src/routes/search/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 
@@ -7,12 +9,14 @@
 	import { onMount } from 'svelte';
 	import { search } from '$lib/content/searchApi';
 	import type { Load } from '@sveltejs/kit';
-	export let data;
+	let { data } = $props();
-	let posts: any[] = [];
+	let posts: any[] = $state([]);
 
-	let newPosts: any[] = [];
+	let newPosts: any[] = $state([]);
 	let page = 1;
-	$: posts = [...data.posts, ...newPosts];
+	run(() => {
+		posts = [...data.posts, ...newPosts];
+	});
 
 	async function loadPage() {
 		const posts = await search(data.query, page);
@@ -20,7 +24,7 @@
 		newPosts = posts.result ?? [];
 	}
 
-	let footer: HTMLElement;
+	let footer: HTMLElement = $state();
 
 	onMount(() => {
 		if (browser) {
@@ -50,5 +54,5 @@
 			<SearchCard title={post.title} url={post.url} excerpt={post.excerpt} />
 		{/each}
 	</Index>
-	<div bind:this={footer} />
+	<div bind:this={footer}></div>
 </Container>