Initial migration

Basically script, generics and basic errors adjustments

Author: WarningImHack3r

package.json

@@ -17,7 +17,7 @@
 		"@shikijs/rehype": "^1.22.0",
 		"@sveltejs/adapter-vercel": "^5.4.5",
 		"@sveltejs/kit": "^2.7.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",
@@ -42,7 +42,7 @@
 		"rehype-raw": "^7.0.0",
 		"semver": "^7.6.3",
 		"shiki": "^1.22.0",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.5",
 		"svelte-exmarkdown": "^3.0.5",
 		"svelte-meta-tags": "^3.1.4",

pnpm-lock.yaml

@@ -4,16 +4,21 @@
 	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?: import("svelte").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 { type, status }: Props = $props();
 
-	let icon: ComponentType<Icon> | null = null;
-	let label = "";
-	let color = "";
+	let icon = $state<ComponentType<Icon> | null>(null);
+	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,
+		inline = false,
+		parseRawHtml = false,
+		additionalPlugins = [],
+		class: className = undefined
+	}: Props = $props();
 </script>
 
 <!-- TODO: actually figure out how to overflow-x-auto the code blocks -->

src/lib/components/MarkdownRenderer.svelte

@@ -13,13 +13,13 @@
 			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 matchingScreen: (typeof screens)[number] | undefined = $derived(screens.findLast(screen => screen.size <= width));
 
-	let width = 0;
-	let height = 0;
+	let width = $state(0);
+	let height = $state(0);
 
-	let showAllScreens = false;
+	let showAllScreens = $state(false);
+	
 </script>
 
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
@@ -36,7 +36,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,24 @@
 <script lang="ts">
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	type Props = {
+		class?: string | undefined | null;
+		stepIcon?: import("svelte").Snippet;
+		children?: import("svelte").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,18 @@
 <script lang="ts">
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	type Props = {
+		class?: string | undefined | null;
+		children?: import("svelte").Snippet;
+		[key: string]: any;
+	};
+
+	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,26 +1,35 @@
 <script lang="ts">
+	import { run } from "svelte/legacy";
+
 	import { page } from "$app/stores";
-	let data: HTMLParagraphElement | undefined = undefined;
+	type Props = {
+		children?: import("svelte").Snippet;
+	};
+
+	let { children }: Props = $props();
+	let data = $state<HTMLParagraphElement>();
 
 	const org = $page.data.org;
 	const repo = $page.data.repo;
 
-	$: if (data) {
-		let replaced = data.innerHTML;
-		const issuesCandidates = replaced.matchAll(/ #(\d+)/g) || [];
-		for (let candidate of issuesCandidates) {
-			const wholeMatch = candidate[0];
-			const matchedGroup = candidate[1];
-			if (!wholeMatch || !matchedGroup) continue;
-			replaced = replaced.replace(
-				wholeMatch,
-				` <a href="https://github.com/${org}/${repo}/issues/${matchedGroup}">${wholeMatch.trim()}</a>`
-			);
+	run(() => {
+		if (data) {
+			let replaced = data.innerHTML;
+			const issuesCandidates = replaced.matchAll(/ #(\d+)/g) || [];
+			for (let candidate of issuesCandidates) {
+				const wholeMatch = candidate[0];
+				const matchedGroup = candidate[1];
+				if (!wholeMatch || !matchedGroup) continue;
+				replaced = replaced.replace(
+					wholeMatch,
+					` <a href="https://github.com/${org}/${repo}/issues/${matchedGroup}">${wholeMatch.trim()}</a>`
+				);
+			}
+			data.innerHTML = replaced;
 		}
-		data.innerHTML = replaced;
-	}
+	});
 </script>
 
 <p bind:this={data}>
-	<slot />
+	{@render children?.()}
 </p>

src/lib/components/renderers/BodyRenderer.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
+	import { run } from "svelte/legacy";
+
 	import { ArrowRight } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
+	type Props = {
+		children?: import("svelte").Snippet;
+	};
+
+	let { children }: Props = $props();
 
-	let data: HTMLLIElement | undefined = undefined;
+	let data = $state<HTMLLIElement>();
 	let pullsLinks: string[] = [];
 	let issuesLinks: string[] = [];
-	let allLinks: string[] = [];
+	let allLinks = $state<string[]>([]);
 
-	$: if (data) {
-		const links = data.innerHTML.match(/https?:\/\/[^"]+/g) || [];
-		for (const link of links) {
-			if (link.includes("/pull/")) {
-				pullsLinks.push(link);
-			} else if (link.includes("/issues/")) {
-				issuesLinks.push(link);
+	run(() => {
+		if (data) {
+			const links = data.innerHTML.match(/https?:\/\/[^"]+/g) || [];
+			for (const link of links) {
+				if (link.includes("/pull/")) {
+					pullsLinks.push(link);
+				} else if (link.includes("/issues/")) {
+					issuesLinks.push(link);
+				}
 			}
+			allLinks = [...pullsLinks, ...issuesLinks];
 		}
-		allLinks = [...pullsLinks, ...issuesLinks];
-	}
+	});
 
 	/**
 	 * Replaces a link with `https://github.com/username/repo/[pull|issues]/123`
@@ -39,7 +48,7 @@
 	class:font-semibold={data?.innerText.startsWith("breaking:")}
 	class="group *:inline"
 >
-	<slot />
+	{@render children?.()}
 	{#if allLinks.length > 0}
 		<Button
 			href={ghLinkToHref(allLinks[0] ?? "")}