Merge pull request #38 from magicalpuffin/upgrate-svelte-5

upgrading to svelte 5

package.json

@@ -12,35 +12,35 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241018.0",
-		"@sveltejs/adapter-auto": "^3.2.5",
-		"@sveltejs/adapter-cloudflare": "^4.7.3",
-		"@sveltejs/enhanced-img": "^0.3.9",
-		"@sveltejs/kit": "^2.7.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@cloudflare/workers-types": "^4.20241022.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-cloudflare": "^4.7.4",
+		"@sveltejs/enhanced-img": "^0.3.10",
+		"@sveltejs/kit": "^2.7.3",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.1",
 		"@types/hast": "^3.0.4",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.13",
 		"eslint": "^9.13.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.45.1",
+		"eslint-plugin-svelte": "^2.46.0",
 		"globals": "^15.11.0",
 		"lucide-svelte": "^0.453.0",
 		"mdsvex": "^0.12.3",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
-		"shiki": "^1.22.0",
-		"svelte": "^4.2.19",
+		"shiki": "^1.22.1",
+		"svelte": "^5.1.3",
 		"svelte-check": "^4.0.5",
 		"tailwindcss": "^3.4.14",
 		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.10.0",
+		"typescript-eslint": "^8.11.0",
 		"unist-util-visit": "^5.0.0",
-		"vite": "^5.4.9",
-		"wrangler": "^3.81.0"
+		"vite": "^5.4.10",
+		"wrangler": "^3.83.0"
 	},
 	"type": "module",
 	"volta": {

src/lib/components/Heading1.svelte

@@ -1,3 +1,12 @@
-<h1 class="my-4 text-4xl font-bold" {...$$restProps}>
-	<slot />
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLHeadElement> {
+		children?: import('svelte').Snippet;
+	}
+	let { children, ...rest }: Props = $props();
+</script>
+
+<h1 class="my-4 text-4xl font-bold" {...rest}>
+	{@render children?.()}
 </h1>

src/lib/components/blog/Blog.svelte

@@ -2,11 +2,21 @@
 	import BlogHeader from './BlogHeader.svelte';
 	import BlogContent from './BlogContent.svelte';
 
-	export let title: string;
-	export let createdDate: string;
-	export let updatedDate: string | undefined = undefined;
+	interface Props {
+		title: string;
+		createdDate: string;
+		updatedDate?: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		createdDate,
+		updatedDate = undefined,
+		children
+	}: Props = $props();
 </script>
 
 <BlogHeader {title} {createdDate} {updatedDate} />
-<div class="my-1 divider" />
-<BlogContent><slot /></BlogContent>
+<div class="my-1 divider"></div>
+<BlogContent>{@render children?.()}</BlogContent>

src/lib/components/blog/BlogContent.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import '$lib/styles/blog-styles.css';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <article
 	class="prose prose-img:my-0 prose-img:rounded-lg prose-img:mx-auto prose-img:shadow-lg"
 >
-	<slot />
+	{@render children?.()}
 </article>

src/lib/components/blog/BlogHeader.svelte

@@ -3,9 +3,13 @@
 	import CalendarIcon from 'lucide-svelte/icons/calendar';
 	import InfoIcon from 'lucide-svelte/icons/info';
 
-	export let title: string;
-	export let createdDate: string;
-	export let updatedDate: string | undefined = undefined;
+	interface Props {
+		title: string;
+		createdDate: string;
+		updatedDate?: string | undefined;
+	}
+
+	let { title, createdDate, updatedDate = undefined }: Props = $props();
 </script>
 
 <Heading1 id="blogTitle">

src/lib/components/carousel/Carousel.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-	export let activeIndex: number = 0;
-	let carousel: HTMLElement;
+	interface Props {
+		activeIndex?: number;
+		children?: import('svelte').Snippet;
+	}
+
+	let { activeIndex = $bindable(0), children }: Props = $props();
+	let carousel: HTMLElement | undefined = $state();
 
 	function updateActiveIndex() {
+		if (!carousel) return 0;
 		const xLeft = carousel.scrollLeft;
 		const xWidth = carousel.clientWidth;
 
@@ -15,9 +21,9 @@
 <div
 	class="w-full carousel"
 	bind:this={carousel}
-	on:scroll={() => {
+	onscroll={() => {
 		activeIndex = updateActiveIndex();
 	}}
 >
-	<slot />
+	{@render children?.()}
 </div>

src/lib/components/carousel/CarouselCard.svelte

@@ -2,10 +2,21 @@
 	import ExternalLinkIcon from 'lucide-svelte/icons/external-link';
 	import GitHubIcon from '$lib/components/icons/GitHubIcon.svelte';
 
-	export let title: string;
-	export let detailUrl: string | undefined = undefined;
-	export let githubUrl: string | undefined = undefined;
-	export let imgSrc: string;
+	interface Props {
+		title: string;
+		detailUrl?: string | undefined;
+		githubUrl?: string | undefined;
+		imgSrc: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		detailUrl = undefined,
+		githubUrl = undefined,
+		imgSrc,
+		children
+	}: Props = $props();
 </script>
 
 <div class="rounded-2xl border shadow-lg md:h-96">
@@ -44,7 +55,7 @@
 				alt="project screenshot"
 			/>
 			<article class="my-2 mx-2 prose">
-				<slot />
+				{@render children?.()}
 			</article>
 		</div>
 	</div>

src/lib/components/carousel/CarouselMenu.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let links: string[];
-	export let activeIndex: number;
+	interface Props {
+		links: string[];
+		activeIndex: number;
+	}
+
+	let { links, activeIndex }: Props = $props();
 </script>
 
 <div class="flex gap-1 py-2">

src/lib/components/icons/GitHubIcon.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-	// https://iconoir.com/
-	export let color: string = 'currentColor';
+	interface Props {
+		// https://iconoir.com/
+		color?: string;
+	}
+
+	let { color = 'currentColor' }: Props = $props();
 </script>
 
 <svg

src/lib/components/navbar/Navbar.svelte

@@ -20,7 +20,7 @@
 	</div>
 	<div class="navbar-end">
 		<div class="md:hidden dropdown dropdown-end">
-			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 			<div tabindex="0" class="btn btn-ghost">
 				<MenuIcon />
 			</div>

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "svelte";
+import type { Component } from "svelte";
 
 export type BlogMetadata = {
 	id: number;
@@ -11,5 +11,5 @@ export type BlogMetadata = {
 
 export type BlogModules = Record<
 	string,
-	() => Promise<{ default: ComponentType; metadata: BlogMetadata }>
+	() => Promise<{ default: Component; metadata: BlogMetadata }>
 >;

src/routes/+layout.svelte

@@ -1,14 +1,16 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 	import Navbar from '$lib/components/navbar/Navbar.svelte';
 	import Footer from '$lib/components/Footer.svelte';
+
+	let { children } = $props();
 </script>
 
 <Navbar />
 <main>
 	<div class="flex justify-center my-2 mx-2">
 		<div class="container max-w-3xl">
-			<slot></slot>
+			{@render children?.()}
 		</div>
 	</div>
 </main>

src/routes/+page.svelte

@@ -7,8 +7,8 @@
 	} from '$lib/components/carousel';
 	import Heading1 from '$lib/components/Heading1.svelte';
 
-	let demoCarouselIndex = 0;
-	let notebookCarouselIndex = 0;
+	let demoCarouselIndex = $state(0);
+	let notebookCarouselIndex = $state(0);
 </script>
 
 <svelte:head

src/routes/blog/+page.svelte

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

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

@@ -2,7 +2,11 @@
 	import { Blog } from '$lib/components/blog';
 	import type { PageData } from './$types';
 
-	export let data: PageData;
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
 </script>
 
 <svelte:head
@@ -17,5 +21,5 @@
 	createdDate={data.blogPost.createdDate}
 	updatedDate={data.blogPost.updatedDate}
 >
-	<svelte:component this={data.blogPost.component} />
+	<data.blogPost.component />
 </Blog>

src/routes/blog/[slug]/+page.ts

@@ -1,6 +1,6 @@
 import type { BlogMetadata, BlogModules } from "$lib/types.js";
 import { error, redirect } from "@sveltejs/kit";
-import type { ComponentType } from "svelte";
+import type { Component } from "svelte";
 import type { EntryGenerator, PageLoad } from "./$types.js";
 
 export const prerender = "auto";
@@ -11,7 +11,7 @@ export const load = (async ({ params, fetch }) => {
 	//const modules = import.meta.glob("/src/lib/content/blog/*.md");
 	const modules = import.meta.glob("/src/lib/content/blog/*.md") as BlogModules;
 
-	const blogMetadataList: (BlogMetadata & { component: ComponentType })[] = [];
+	const blogMetadataList: (BlogMetadata & { component: Component })[] = [];
 
 	for (const path of Object.keys(modules)) {
 		await modules[path]().then((mod) => {