Upgrade to Svelte 5 (#35)

Author: WarningImHack3r

components.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
 		"config": "tailwind.config.ts",
@@ -8,6 +8,10 @@
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
-	}
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
 }

package.json

@@ -14,20 +14,21 @@
 	},
 	"devDependencies": {
 		"@neoconfetti/svelte": "^2.2.1",
+		"@octokit/graphql-schema": "^15.25.0",
 		"@shikijs/langs": "^1.25.1",
 		"@shikijs/rehype": "^1.25.1",
 		"@shikijs/themes": "^1.25.1",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/kit": "^2.15.1",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/semver": "^7.5.8",
 		"@vercel/speed-insights": "^1.1.0",
 		"arctic": "^1.9.2",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.22.0",
+		"bits-ui": "1.0.0-next.74",
 		"clsx": "^2.1.1",
 		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -44,16 +45,17 @@
 		"rehype-raw": "^7.0.0",
 		"semver": "^7.6.3",
 		"shiki": "^1.25.1",
-		"svelte": "^4.2.19",
+		"svelte": "^5.1.3",
 		"svelte-check": "^4.1.1",
-		"svelte-exmarkdown": "^3.0.5",
-		"svelte-meta-tags": "^3.1.4",
+		"svelte-exmarkdown": "^4.0.1",
+		"svelte-meta-tags": "^4.0.4",
 		"svelte-persisted-store": "^0.12.0",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-search-params": "^3.0.0",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "^3.4.17",
+		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.19.0",

pnpm-lock.yaml

@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount, type Snippet } from "svelte";
 	import { get } from "svelte/store";
 	import { persisted } from "svelte-persisted-store";
 	import { plainTextSerializer } from "$lib/stores";
 
-	/**
-	 * The name of the localStorage item to get the date from.
-	 */
-	export let storedDateItem: string;
-	/**
-	 * Whether to show the pulse animation.
-	 */
-	export let show = false;
+	type Props = {
+		/**
+		 * The name of the localStorage item to get the date from.
+		 */
+		storedDateItem: string;
+		/**
+		 * Whether to show the pulse animation.
+		 */
+		show?: boolean;
+		children?: Snippet;
+	};
 
-	let shouldShowPulse = false;
+	let { storedDateItem, show = false, children }: Props = $props();
+
+	let shouldShowPulse = $state(false);
 
 	onMount(() => {
 		if (!storedDateItem) return;
@@ -30,14 +35,14 @@
 
 {#if show && shouldShowPulse}
 	<div class="relative inline-flex">
-		<slot />
+		{@render children?.()}
 		<span class="absolute right-0 top-0 -mr-0.5 -mt-0.5 flex size-2.5">
 			<span
 				class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"
-			/>
-			<span class="inline-flex size-2.5 rounded-full bg-primary" />
+			></span>
+			<span class="inline-flex size-2.5 rounded-full bg-primary"></span>
 		</span>
 	</div>
 {:else}
-	<slot />
+	{@render children?.()}
 {/if}

src/lib/components/BlinkingBadge.svelte

@@ -12,7 +12,7 @@
 	} from "lucide-svelte";
 
 	type CommonStatus = "open" | "closed";
-	type Props =
+	type PropsObj =
 		| {
 				type: "pull";
 				status: "draft" | CommonStatus | "merged";
@@ -22,12 +22,16 @@
 				status: CommonStatus | "solved";
 		  };
 
-	export let type: Props["type"];
-	export let status: Props["status"]; // NOT type-safe for now, waiting for Svelte 5 props declaration
+	type Props = {
+		type: PropsObj["type"];
+		status: PropsObj["status"];
+	};
 
-	let icon: ComponentType<Icon> | null = null;
-	let label = "";
-	let color = "";
+	let { type, status }: Props = $props();
+
+	let icon = $state<ComponentType<Icon>>();
+	let label = $state("");
+	let color = $state("");
 
 	switch (type) {
 		case "pull":
@@ -77,7 +81,8 @@
 
 <div class="flex items-center rounded-full px-4 py-2 text-white {color}">
 	{#if icon}
-		<svelte:component this={icon} class="mr-2 size-5" />
+		{@const SvelteComponent = icon}
+		<SvelteComponent class="mr-2 size-5" />
 	{/if}
 	<span class="font-semibold">{label}</span>
 </div>

src/lib/components/GHBadge.svelte

@@ -10,13 +10,21 @@
 	import rehypeRaw from "rehype-raw";
 	import { cn } from "$lib/utils";
 
-	export let markdown: string;
-	export let inline = false;
-	export let parseRawHtml = false;
-	export let additionalPlugins: Plugin[] = [];
+	type Props = {
+		markdown: string;
+		inline?: boolean;
+		parseRawHtml?: boolean;
+		additionalPlugins?: Plugin[];
+		class?: string | undefined | null;
+	};
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		markdown: md,
+		inline = false,
+		parseRawHtml = false,
+		additionalPlugins = [],
+		class: className = undefined
+	}: Props = $props();
 </script>
 
 <!-- TODO: actually figure out how to overflow-x-auto the code blocks -->
@@ -30,7 +38,7 @@
 	)}
 >
 	<Markdown
-		md={markdown}
+		{md}
 		plugins={[
 			gfmPlugin(),
 			...(parseRawHtml ? [{ rehypePlugin: rehypeRaw }] : []),

src/lib/components/MarkdownRenderer.svelte

@@ -13,13 +13,12 @@
 			size: parseInt(configScreens[screen as keyof typeof configScreens].replace("px", ""))
 		}))
 		.sort((a, b) => a.size - b.size);
-	let matchingScreen: (typeof screens)[number] | undefined;
-	$: matchingScreen = screens.findLast(screen => screen.size <= width);
 
-	let width = 0;
-	let height = 0;
+	let width = $state(0);
+	let height = $state(0);
 
-	let showAllScreens = false;
+	let matchingScreen = $derived(screens.findLast(screen => screen.size <= width));
+	let showAllScreens = $state(false);
 </script>
 
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
@@ -36,7 +35,7 @@
 			<button
 				type="button"
 				class="inline rounded-l-sm rounded-r-full px-1 hover:bg-neutral-500 active:bg-neutral-600"
-				on:click={() => (showAllScreens = !showAllScreens)}
+				onclick={() => (showAllScreens = !showAllScreens)}
 			>
 				{matchingScreen.name.toUpperCase()}
 			</button>

src/lib/components/ScreenSize.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	type Props = {
+		class?: string | undefined | null;
+		stepIcon?: Snippet;
+		children?: Snippet;
+	};
+
+	let { class: className = undefined, stepIcon, children }: Props = $props();
 </script>
 
 <div class={cn("step relative", className)}>
 	<span
 		class="absolute -ml-[50px] -mt-0.5 inline-flex size-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-[1px] font-mono text-base font-normal"
 	>
-		{#if $$slots.stepIcon}
-			<slot name="stepIcon" />
+		{#if stepIcon}
+			{@render stepIcon?.()}
 		{:else}
 			<span class="[counter-increment:step] before:content-[counter(step)]"></span>
 		{/if}
 	</span>
-	<slot />
+	{@render children?.()}
 </div>

src/lib/components/Step.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	type Props = {
+		class?: string | undefined | null;
+		children?: Snippet;
+		[key: string]: unknown;
+	};
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
 </script>
 
 <div
 	class={cn("ml-4 border-l pl-8 [counter-reset:step] [&>.step:not(:first-child)]:mt-8", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </div>

src/lib/components/Steps.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-	import { page } from "$app/stores";
-	let data: HTMLParagraphElement | undefined = undefined;
+	import type { Snippet } from "svelte";
+	import { page } from "$app/state";
 
-	const org = $page.data.org;
-	const repo = $page.data.repo;
+	type Props = {
+		children?: Snippet;
+	};
 
-	$: if (data) {
+	let { children }: Props = $props();
+	let data = $state<HTMLParagraphElement>();
+
+	$effect(() => {
+		if (!data) return;
 		let replaced = data.innerHTML;
 		const issuesCandidates = replaced.matchAll(/ #(\d+)/g) || [];
 		for (let candidate of issuesCandidates) {
@@ -14,13 +19,13 @@
 			if (!wholeMatch || !matchedGroup) continue;
 			replaced = replaced.replace(
 				wholeMatch,
-				` <a href="https://github.com/${org}/${repo}/issues/${matchedGroup}">${wholeMatch.trim()}</a>`
+				` <a href="https://github.com/${page.data.org}/${page.data.repo}/issues/${matchedGroup}">${wholeMatch.trim()}</a>`
 			);
 		}
 		data.innerHTML = replaced;
-	}
+	});
 </script>
 
 <p bind:this={data}>
-	<slot />
+	{@render children?.()}
 </p>