feat: svelte 5 + upgrade dependencies

package.json

@@ -12,15 +12,15 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^4.0.3",
-		"@sveltejs/kit": "^2.4.3",
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"marked": "^11.1.0",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"sanitize-html": "^2.13.0",
-		"svelte": "^4.2.8",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.13"
+		"@sveltejs/adapter-vercel": "^5.4.5",
+		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"marked": "^14.1.3",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"sanitize-html": "^2.13.1",
+		"svelte": "^5.0.5",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.9"
 	}
 }

src/lib/ArticleList/ArticlePreview.svelte

@@ -1,8 +1,7 @@
 <script>
 	import { enhance } from '$app/forms';
 
-	export let article;
-	export let user;
+	const { article, user } = $props();
 </script>
 
 <div class="article-preview">
@@ -42,7 +41,7 @@
 			>
 				<input hidden type="checkbox" name="favorited" checked={article.favorited} />
 				<button class="btn btn-sm {article.favorited ? 'btn-primary' : 'btn-outline-primary'}">
-					<i class="ion-heart" />
+					<i class="ion-heart"></i>
 					{article.favoritesCount}
 				</button>
 			</form>
@@ -55,7 +54,7 @@
 		<span>Read more...</span>
 		<ul class="tag-list">
 			{#each article.tagList as tag}
-				<li class="tag-default tag-pill tag-outline"><a href="/?tag={tag}">{tag}</a></li>
+				<li class="tag-default tag-pill tag-outline">{tag}</li>
 			{/each}
 		</ul>
 	</a>

src/lib/ArticleList/index.svelte

@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import ArticlePreview from './ArticlePreview.svelte';
 
-	export let articles;
+	const { articles } = $props();
 </script>
 
 {#if articles.length === 0}

src/lib/ListErrors.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let errors;
+	const { errors } = $props();
 </script>
 
 {#if errors}

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import { navigating } from '$app/stores';
 	import Nav from './Nav.svelte';
 	import PreloadingIndicator from './PreloadingIndicator.svelte';
+
+	const { children } = $props();
 </script>
 
 {#if $navigating}
@@ -11,5 +13,5 @@
 <Nav />
 
 <main>
-	<slot />
+	{@render children()}
 </main>

src/routes/+page.svelte

@@ -3,13 +3,12 @@
 	import ArticleList from '$lib/ArticleList/index.svelte';
 	import Pagination from './Pagination.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	const { data } = $props();
 
-	$: p = +($page.url.searchParams.get('page') ?? '1');
-	$: tag = $page.url.searchParams.get('tag');
-	$: tab = $page.url.searchParams.get('tab') ?? 'all';
-	$: page_link_base = tag ? `tag=${tag}` : `tab=${tab}`;
+	const p = $derived(+($page.url.searchParams.get('page') ?? '1'));
+	const tag = $derived($page.url.searchParams.get('tag'));
+	const tab = $derived($page.url.searchParams.get('tab') ?? 'all');
+	const page_link_base = $derived(tag ? `tag=${tag}` : `tab=${tab}`);
 </script>
 
 <svelte:head>
@@ -50,7 +49,7 @@
 						{#if tag}
 							<li class="nav-item">
 								<a href="/?tag={tag}" class="nav-link active">
-									<i class="ion-pound" />
+									<i class="ion-pound"></i>
 									{tag}
 								</a>
 							</li>

src/routes/Nav.svelte

@@ -13,13 +13,13 @@
 			{#if $page.data.user}
 				<li class="nav-item">
 					<a href="/editor" class="nav-link" class:active={$page.url.pathname === '/editor'}>
-						<i class="ion-compose" />&nbsp;New Post
+						<i class="ion-compose"></i>&nbsp;New Post
 					</a>
 				</li>
 
 				<li class="nav-item">
 					<a href="/settings" class="nav-link" class:active={$page.url.pathname === '/settings'}>
-						<i class="ion-gear-a" />&nbsp;Settings
+						<i class="ion-gear-a"></i>&nbsp;Settings
 					</a>
 				</li>
 

src/routes/Pagination.svelte

@@ -1,16 +1,13 @@
 <script>
-	export let pages;
-	export let p;
-	export let href;
+	const { pages, p, href } = $props();
 
-	let range;
-
-	$: {
-		range = [];
-		for (let i = 1; i <= pages; ++i) {
-			range.push(i);
+	const range = $derived.by(() => {
+		const result = [];
+		for (let i = 1; i <= pages; i++) {
+			result.push(i);
 		}
-	}
+		return result;
+	});
 </script>
 
 {#if pages > 1}

src/routes/PreloadingIndicator.svelte

@@ -1,7 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
-	let p = 0;
-	let visible = false;
+
+	let p = $state(0);
+	let visible = $state(false);
+
 	onMount(() => {
 		visible = true;
 		function next() {
@@ -15,12 +17,12 @@
 
 {#if visible}
 	<div class="progress-container">
-		<div class="progress" style="width: {p * 100}%" />
+		<div class="progress" style="width: {p * 100}%"></div>
 	</div>
 {/if}
 
 {#if p >= 0.4}
-	<div class="fade" />
+	<div class="fade"></div>
 {/if}
 
 <style>

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

@@ -2,8 +2,7 @@
 	import ArticleMeta from './ArticleMeta.svelte';
 	import CommentContainer from './CommentContainer.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	const { data } = $props();
 </script>
 
 <svelte:head>
@@ -35,7 +34,7 @@
 
 		<hr />
 
-		<div class="article-actions" />
+		<div class="article-actions"></div>
 
 		<div class="row">
 			<CommentContainer comments={data.comments} user={data.user} errors={[]} />

src/routes/article/[slug]/ArticleMeta.svelte

@@ -1,8 +1,7 @@
 <script>
 	import { enhance } from '$app/forms';
 
-	export let article;
-	export let user;
+	const { article, user } = $props();
 </script>
 
 <div class="article-meta">
@@ -20,12 +19,12 @@
 	{#if article.author.username === user?.username}
 		<span>
 			<a href="/editor/{article.slug}" class="btn btn-outline-secondary btn-sm">
-				<i class="ion-edit" /> Edit Article
+				<i class="ion-edit"></i> Edit Article
 			</a>
 
 			<form use:enhance method="POST" action="?/deleteArticle">
 				<button class="btn btn-outline-danger btn-sm">
-					<i class="ion-trash-a" /> Delete Article
+					<i class="ion-trash-a"></i> Delete Article
 				</button>
 			</form>
 		</span>

src/routes/article/[slug]/Comment.svelte

@@ -1,8 +1,7 @@
 <script>
 	import { enhance } from '$app/forms';
 
-	export let comment;
-	export let user;
+	const { comment, user } = $props();
 </script>
 
 <div class="card">
@@ -23,7 +22,7 @@
 
 		{#if user && comment.author.username === user.username}
 			<form use:enhance method="POST" action="?/deleteComment&id={comment.id}" class="mod-options">
-				<button class="ion-trash-a" aria-label="Delete comment" />
+				<button class="ion-trash-a" aria-label="Delete comment"></button>
 			</form>
 		{/if}
 	</div>

src/routes/article/[slug]/CommentContainer.svelte

@@ -2,8 +2,7 @@
 	import CommentInput from './CommentInput.svelte';
 	import Comment from './Comment.svelte';
 
-	export let comments;
-	export let user;
+	const { comments, user } = $props();
 </script>
 
 <div class="col-xs-12 col-md-8 offset-md-2">

src/routes/article/[slug]/CommentInput.svelte

@@ -2,12 +2,12 @@
 	import { enhance } from '$app/forms';
 	import { placeholder } from '$lib/constants.js';
 
-	export let user;
+	const { user } = $props();
 </script>
 
 <form use:enhance method="POST" action="?/createComment" class="card comment-form">
 	<div class="card-block">
-		<textarea class="form-control" name="comment" placeholder="Write a comment..." rows="3" />
+		<textarea class="form-control" name="comment" placeholder="Write a comment..." rows="3"></textarea>
 	</div>
 
 	<div class="card-footer">

src/routes/editor/+page.svelte

@@ -1,8 +1,7 @@
 <script>
 	import Editor from './Editor.svelte';
 
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	const { form } = $props();
 </script>
 
 <Editor

src/routes/editor/Editor.svelte

@@ -4,8 +4,9 @@
 	import { enhance } from '$app/forms';
 	import ListErrors from '$lib/ListErrors.svelte';
 
-	export let article;
-	export let errors;
+	const { article, errors } = $props();
+
+	let tagList = $state(article.tagList);
 </script>
 
 <div class="editor-page">
@@ -40,18 +41,18 @@
 							rows="8"
 							placeholder="Write your article (in markdown)"
 							value={article.body}
-						/>
+						></textarea>
 					</fieldset>
 
 					<fieldset class="form-group">
 						<input
 							class="form-control"
 							placeholder="Enter tags"
-							on:keydown={(event) => {
+							onkeydown={(event) => {
 								if (event.key === 'Enter') {
 									event.preventDefault();
-									if (!article.tagList.includes(event.target.value)) {
-										article.tagList = [...article.tagList, event.target.value];
+									if (!tagList.includes(event.target.value)) {
+										tagList.push(event.target.value);
 									}
 
 									event.target.value = '';
@@ -61,26 +62,24 @@
 					</fieldset>
 
 					<div class="tag-list">
-						{#each article.tagList as tag, i (tag)}
+						{#each tagList as tag, i (tag)}
 							<button
 								transition:scale|local={{ duration: 200 }}
 								animate:flip={{ duration: 200 }}
 								class="tag-default tag-pill"
-								on:click|preventDefault={() => {
-									article.tagList = [
-										...article.tagList.slice(0, i),
-										...article.tagList.slice(i + 1)
-									];
+								type="button"
+								onclick={() => {
+									tagList.splice(i, 1);
 								}}
 								aria-label="Remove {tag} tag"
 							>
-								<i class="ion-close-round" />
+								<i class="ion-close-round"></i>
 								{tag}
 							</button>
 						{/each}
 					</div>
 
-					{#each article.tagList as tag}
+					{#each tagList as tag}
 						<input hidden name="tag" value={tag} />
 					{/each}
 

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

@@ -1,11 +1,7 @@
 <script>
 	import Editor from '../Editor.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
-
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	const { data, form } = $props();
 </script>
 
 <Editor article={data.article} errors={form?.errors} />

src/routes/login/+page.svelte

@@ -2,8 +2,7 @@
 	import { enhance } from '$app/forms';
 	import ListErrors from '$lib/ListErrors.svelte';
 
-	/** @type {import('./$types').ActionData} */
-	export let form;
+	const { form } = $props();
 </script>
 
 <svelte:head>