Migrate kit/ components to Svelte 5 runes (fixes broken docstring tooltips)

kit/src/lib/Added.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import Tip from "./Tip.svelte";
 
-	export let version: string;
+	interface Props {
+		version: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { version, children }: Props = $props();
 </script>
 
 <Tip>
 	<p class="font-medium">Added in {version}</p>
-	<slot />
+	{@render children?.()}
 </Tip>

kit/src/lib/Changed.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import Tip from "./Tip.svelte";
 
-	export let version: string;
+	interface Props {
+		version: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { version, children }: Props = $props();
 </script>
 
 <Tip>
 	<p class="font-medium">Changed in {version}</p>
-	<slot />
+	{@render children?.()}
 </Tip>

kit/src/lib/CodeBlock.svelte

@@ -1,11 +1,15 @@
-<script>
+<script lang="ts">
 	import CopyButton from "./CopyButton.svelte";
-	let hideCopyButton = true;
-	export let code = "";
-	export let highlighted = "";
-	export let lang = "";
-	export let wrap = false;
-	export let classNames = "";
+	let hideCopyButton = $state(true);
+	interface Props {
+		code?: string;
+		highlighted?: string;
+		lang?: string;
+		wrap?: boolean;
+		classNames?: string;
+	}
+
+	let { code = "", highlighted = "", lang = "", wrap = false, classNames = "" }: Props = $props();
 
 	function handleMouseOver() {
 		hideCopyButton = false;
@@ -17,10 +21,10 @@
 
 <div
 	class="code-block relative {classNames}"
-	on:mouseover={handleMouseOver}
-	on:focus={handleMouseOver}
-	on:mouseout={handleMouseOut}
-	on:blur={handleMouseOut}
+	onmouseover={handleMouseOver}
+	onfocus={handleMouseOver}
+	onmouseout={handleMouseOut}
+	onblur={handleMouseOut}
 >
 	<div class="absolute top-2.5 right-4">
 		<CopyButton

kit/src/lib/CodeBlockFw.svelte

@@ -3,16 +3,20 @@
 	import CopyButton from "./CopyButton.svelte";
 	import FrameworkSwitch from "./FrameworkSwitch.svelte";
 
-	export let group1: { id: string; code: string; highlighted: string };
-	export let group2: { id: string; code: string; highlighted: string };
-	export let lang = "";
-	export let wrap = false;
+	interface Props {
+		group1: { id: string; code: string; highlighted: string };
+		group2: { id: string; code: string; highlighted: string };
+		lang?: string;
+		wrap?: boolean;
+	}
+
+	let { group1, group2, lang = "", wrap = false }: Props = $props();
 
 	const ids = [group1.id, group2.id];
 	const storeKey = ids.join("-");
 	const group = getGroupStore(storeKey);
 
-	let hideCopyButton = true;
+	let hideCopyButton = $state(true);
 
 	function handleMouseOver() {
 		hideCopyButton = false;
@@ -24,10 +28,13 @@
 
 <div
 	class="code-block relative"
-	on:mouseover={handleMouseOver}
-	on:focus={handleMouseOver}
-	on:mouseout={handleMouseOut}
-	on:focus={handleMouseOut}
+	onmouseover={handleMouseOver}
+	onfocus={() => {
+		// preserved from the svelte 4 version, which bound focus to both handlers
+		handleMouseOver();
+		handleMouseOut();
+	}}
+	onmouseout={handleMouseOut}
 >
 	{#if $group === "group1"}
 		<div class="absolute top-2.5 right-4">

kit/src/lib/ColabDropdown.svelte

@@ -2,8 +2,13 @@
 	import Dropdown from "./Dropdown.svelte";
 	import DropdownEntry from "./DropdownEntry.svelte";
 
-	export let options: { label: string; value: string }[] = [];
-	export let classNames = "";
+	interface Props {
+		options?: { label: string; value: string }[];
+		classNames?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { options = [], classNames = "", children }: Props = $props();
 
 	function onClick(url: string) {
 		window.open(url);
@@ -12,23 +17,27 @@
 
 <div class={classNames}>
 	<Dropdown btnLabel="" classNames="colab-dropdown" noBtnClass useDeprecatedJS={false}>
-		<slot slot="button">
-			<img
-				alt="Open In Colab"
-				class="!m-0"
-				src="https://colab.research.google.com/assets/colab-badge.svg"
-			/>
-		</slot>
-		<slot slot="menu">
-			{#each options as { label, value }}
-				<DropdownEntry
-					classNames="text-sm !no-underline"
-					iconClassNames="text-gray-500"
-					{label}
-					onClick={() => onClick(value)}
-					useDeprecatedJS={false}
+		{#snippet button()}
+			{#if children}{@render children()}{:else}
+				<img
+					alt="Open In Colab"
+					class="!m-0"
+					src="https://colab.research.google.com/assets/colab-badge.svg"
 				/>
-			{/each}
-		</slot>
+			{/if}
+		{/snippet}
+		{#snippet menu()}
+			{#if children}{@render children()}{:else}
+				{#each options as { label, value }}
+					<DropdownEntry
+						classNames="text-sm !no-underline"
+						iconClassNames="text-gray-500"
+						{label}
+						onClick={() => onClick(value)}
+						useDeprecatedJS={false}
+					/>
+				{/each}
+			{/if}
+		{/snippet}
 	</Dropdown>
 </div>

kit/src/lib/CopyButton.svelte

@@ -5,13 +5,17 @@
 	import IconCopy from "./IconCopy.svelte";
 	import Tooltip from "./Tooltip.svelte";
 
-	export let classNames = "";
-	export let label = "";
-	export let style: "button" | "button-clear" | "text" = "text";
-	export let title = "";
-	export let value: string;
+	interface Props {
+		classNames?: string;
+		label?: string;
+		style?: "button" | "button-clear" | "text";
+		title?: string;
+		value: string;
+	}
+
+	let { classNames = "", label = "", style = "text", title = "", value }: Props = $props();
 
-	let isSuccess = false;
+	let isSuccess = $state(false);
 	let timeout: any;
 
 	onDestroy(() => {
@@ -41,7 +45,7 @@
 		{!isSuccess && ['button-clear', 'text'].includes(style) ? 'text-gray-600' : ''}
 		{isSuccess ? 'text-green-500' : ''}
 	"
-	on:click={handleClick}
+	onclick={handleClick}
 	title={title || label || "Copy to clipboard"}
 	type="button"
 >

kit/src/lib/CopyLLMTxtMenu.svelte

@@ -10,10 +10,19 @@
 	import IconMCP from "./IconMCP.svelte";
 	import IconHuggingChat from "./IconHuggingChat.svelte";
 
-	export let label = "Copy page";
-	export let markdownDescription = "Copy page as Markdown for LLMs";
-	export let containerClass = "";
-	export let containerStyle = "";
+	interface Props {
+		label?: string;
+		markdownDescription?: string;
+		containerClass?: string;
+		containerStyle?: string;
+	}
+
+	let {
+		label = "Copy page",
+		markdownDescription = "Copy page as Markdown for LLMs",
+		containerClass = "",
+		containerStyle = "",
+	}: Props = $props();
 
 	const isClient = typeof window !== "undefined";
 	const hasDocument = typeof document !== "undefined";
@@ -28,11 +37,11 @@
 	const SOURCE_URL_MD = SOURCE_URL.endsWith(".md") ? SOURCE_URL : SOURCE_URL + ".md";
 	let encodedPrompt: string | null = null;
 
-	let open = false;
-	let copied = false;
-	let triggerEl: HTMLDivElement | null = null;
-	let menuEl: HTMLDivElement | null = null;
-	let menuStyle = "";
+	let open = $state(false);
+	let copied = $state(false);
+	let triggerEl: HTMLDivElement | null = $state(null);
+	let menuEl: HTMLDivElement | null = $state(null);
+	let menuStyle = $state("");
 	let closeTimeout: ReturnType<typeof setTimeout> | null = null;
 	let sourceMarkdown: string | null = null;
 	let sourceFetchPromise: Promise<string> | null = null;
@@ -204,10 +213,10 @@
 </script>
 
 <svelte:window
-	on:mousedown={handleWindowPointer}
-	on:keydown={handleWindowKeydown}
-	on:resize={handleWindowResize}
-	on:scroll={handleWindowScroll}
+	onmousedown={handleWindowPointer}
+	onkeydown={handleWindowKeydown}
+	onresize={handleWindowResize}
+	onscroll={handleWindowScroll}
 />
 
 <div
@@ -218,7 +227,7 @@
 >
 	<div bind:this={triggerEl} class="inline-flex rounded-md max-sm:rounded-sm">
 		<button
-			on:click={copyMarkdown}
+			onclick={copyMarkdown}
 			class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800"
 			aria-live="polite"
 		>
@@ -230,7 +239,7 @@
 			<span>{copied ? "Copied" : label}</span>
 		</button>
 		<button
-			on:click={toggleMenu}
+			onclick={toggleMenu}
 			class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800"
 			aria-haspopup="menu"
 			aria-expanded={open}
@@ -249,7 +258,7 @@
 			class="fixed inset-0 z-40"
 			aria-hidden="true"
 			style="background: transparent;"
-			on:click={closeMenu}
+			onclick={closeMenu}
 		></div>
 		<div
 			bind:this={menuEl}
@@ -260,7 +269,7 @@
 		>
 			<button
 				role="menuitem"
-				on:click={() => {
+				onclick={() => {
 					copyMarkdown();
 					closeMenu();
 				}}
@@ -284,7 +293,7 @@
 				href={SOURCE_URL_MD}
 				target="_blank"
 				rel="noopener noreferrer"
-				on:click={closeMenu}
+				onclick={closeMenu}
 				class="{baseMenuItemClass} no-underline!"
 			>
 				<div class="border border-gray-200 dark:border-gray-850 rounded-lg p-1.5">
@@ -305,7 +314,7 @@
 					href={option.buildUrl()}
 					target="_blank"
 					rel="noopener noreferrer"
-					on:click={closeMenu}
+					onclick={closeMenu}
 					class="{baseMenuItemClass} no-underline!"
 				>
 					<div class="border border-gray-200 dark:border-gray-850 rounded-lg p-1.5">

kit/src/lib/CourseFloatingBanner.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
 	import DocNotebookDropdown from "./DocNotebookDropdown.svelte";
 
-	export let chapter: number;
-	export let notebooks: { label: string; value: string }[] = [];
-	export let classNames = "";
-	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`;
+	interface Props {
+		chapter: number;
+		notebooks?: { label: string; value: string }[];
+		classNames?: string;
+		askForHelpUrl?: any;
+	}
+
+	let {
+		chapter,
+		notebooks = [],
+		classNames = "",
+		askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`,
+	}: Props = $props();
 </script>
 
 <DocNotebookDropdown options={notebooks} {classNames}>
-	<svelte:fragment slot="alwaysVisible">
+	{#snippet alwaysVisible()}
 		<a href={askForHelpUrl} target="_blank">
 			<img
 				alt="Ask a Question"
 				class="!m-0"
 				src="https://img.shields.io/badge/Ask%20a%20question-ffcb4c.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEgMTA0IDEwNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzFmMjA7fS5jbHMtMntmaWxsOiNmZmY5YWU7fS5jbHMtM3tmaWxsOiMwMGFlZWY7fS5jbHMtNHtmaWxsOiMwMGE5NGY7fS5jbHMtNXtmaWxsOiNmMTVkMjI7fS5jbHMtNntmaWxsOiNlMzFiMjM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5EaXNjb3Vyc2VfbG9nbzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiPjxnIGlkPSJMYXllcl8zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS44NywwQzIzLjcxLDAsMCwyMi44MywwLDUxYzAsLjkxLDAsNTIuODEsMCw1Mi44MWw1MS44Ni0uMDVjMjguMTYsMCw1MS0yMy43MSw1MS01MS44N1M4MCwwLDUxLjg3LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTIuMzcsMTkuNzRBMzEuNjIsMzEuNjIsMCwwLDAsMjQuNTgsNjYuNDFsLTUuNzIsMTguNEwzOS40LDgwLjE3YTMxLjYxLDMxLjYxLDAsMSwwLDEzLTYwLjQzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTc3LjQ1LDMyLjEyYTMxLjYsMzEuNiwwLDAsMS0zOC4wNSw0OEwxOC44Niw4NC44MmwyMC45MS0yLjQ3QTMxLjYsMzEuNiwwLDAsMCw3Ny40NSwzMi4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik03MS42MywyNi4yOUEzMS42LDMxLjYsMCwwLDEsMzguOCw3OEwxOC44Niw4NC44MiwzOS40LDgwLjE3QTMxLjYsMzEuNiwwLDAsMCw3MS42MywyNi4yOVoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNi40Nyw2Ny4xMWEzMS42MSwzMS42MSwwLDAsMSw1MS0zNUEzMS42MSwzMS42MSwwLDAsMCwyNC41OCw2Ni40MWwtNS43MiwxOC40WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTI0LjU4LDY2LjQxQTMxLjYxLDMxLjYxLDAsMCwxLDcxLjYzLDI2LjI5YTMxLjYxLDMxLjYxLDAsMCwwLTQ5LDM5LjYzbC0zLjc2LDE4LjlaIi8+PC9nPjwvZz48L3N2Zz4="
 			/>
 		</a>
-	</svelte:fragment>
+	{/snippet}
 </DocNotebookDropdown>

kit/src/lib/Deprecated.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import Tip from "./Tip.svelte";
 
-	export let version: string;
+	interface Props {
+		version: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { version, children }: Props = $props();
 </script>
 
 <Tip warning>
 	<p class="font-medium">Deprecated in {version}</p>
-	<slot />
+	{@render children?.()}
 </Tip>