migrate all?

src/lib/components/avatar.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let orgName: string | undefined;
-	export let size: "sm" | "md" = "md";
+	interface Props {
+		orgName: string | undefined;
+		size?: "sm" | "md";
+	}
+
+	let { orgName, size = "md" }: Props = $props();
 
-	$: sizeClass = size === "sm" ? "size-3" : "size-4";
+	let sizeClass = $derived(size === "sm" ? "size-3" : "size-4");
 
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;

src/lib/components/debug-menu.svelte

@@ -8,8 +8,8 @@
 	import type { ToastData } from "./toaster.svelte.js";
 	import { addToast } from "./toaster.svelte.js";
 
-	let innerWidth: number;
-	let innerHeight: number;
+	let innerWidth = $state<number>();
+	let innerHeight = $state<number>();
 
 	function toggleTheme() {
 		document.body.classList.toggle("dark");
@@ -99,7 +99,7 @@
 					{#each actions as { label, cb }}
 						<button
 							class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-							on:click={cb}
+							onclick={cb}
 						>
 							{label}
 						</button>

src/lib/components/icon-provider.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-	export let provider: string | undefined;
+	interface Props {
+		provider: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let { provider, children }: Props = $props();
 </script>
 
 {#if provider === "sambanova"}
@@ -294,7 +299,7 @@
 		></path></svg
 	>
 {:else}
-	<slot>
+	{#if children}{@render children()}{:else}
 		<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
-	</slot>
+	{/if}
 {/if}

src/lib/components/inference-playground/conversation.svelte

@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
+https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import { run } from "svelte/legacy";
 

src/lib/components/inference-playground/hf-token-modal.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
+	import { createBubbler, preventDefault } from "svelte/legacy";
+
+	const bubble = createBubbler();
 	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";
 
-	export let storeLocallyHfToken = false;
+	interface Props {
+		storeLocallyHfToken?: boolean;
+	}
+
+	let { storeLocallyHfToken = $bindable(false) }: Props = $props();
 
-	let backdropEl: HTMLDivElement;
-	let modalEl: HTMLDivElement;
+	let backdropEl = $state<HTMLDivElement>();
+	let modalEl = $state<HTMLDivElement>();
 
 	const dispatch = createEventDispatcher<{ close: void }>();
 
@@ -21,7 +28,7 @@
 
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
-		modalEl.focus();
+		modalEl?.focus();
 	});
 
 	onDestroy(() => {
@@ -43,10 +50,10 @@
 		tabindex="-1"
 		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
 		bind:this={modalEl}
-		on:keydown={handleKeydown}
+		onkeydown={handleKeydown}
 		use:clickOutside={() => dispatch("close")}
 	>
-		<form on:submit|preventDefault class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
+		<form onsubmit={preventDefault(bubble("submit"))} class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
 			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
 				<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
 					<img
@@ -57,7 +64,7 @@
 				</h3>
 				<button
 					type="button"
-					on:click={() => dispatch("close")}
+					onclick={() => dispatch("close")}
 					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
 				>
 					<div class="text-xl">

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -9,20 +9,24 @@
 	import IconSearch from "~icons/carbon/search";
 	import IconStar from "~icons/carbon/star";
 
-	export let conversation: Conversation;
+	interface Props {
+		conversation: Conversation;
+	}
+
+	let { conversation }: Props = $props();
 
-	let backdropEl: HTMLDivElement;
-	let highlightIdx = 0;
-	let ignoreCursorHighlight = false;
-	let containerEl: HTMLDivElement;
-	let query = "";
+	let backdropEl = $state<HTMLDivElement>();
+	let highlightIdx = $state(0);
+	let ignoreCursorHighlight = $state(false);
+	let containerEl = $state<HTMLDivElement>();
+	let query = $state("");
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
-	$: trendingModels = getTrending($models);
+	let trendingModels = $derived(getTrending($models));
 
-	$: featuredModels = fuzzysearch({ needle: query, haystack: trendingModels, property: "id" });
-	$: otherModels = fuzzysearch({ needle: query, haystack: $models, property: "id" });
+	let featuredModels = $derived(fuzzysearch({ needle: query, haystack: trendingModels, property: "id" }));
+	let otherModels = $derived(fuzzysearch({ needle: query, haystack: $models, property: "id" }));
 
 	onMount(() => {
 		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
@@ -80,6 +84,7 @@
 	}
 
 	function handleBackdropClick(event: MouseEvent) {
+		event.stopPropagation();
 		if (window?.getSelection()?.toString()) {
 			return;
 		}
@@ -89,13 +94,14 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} on:mousemove={() => (ignoreCursorHighlight = false)} />
+<svelte:window onkeydown={handleKeydown} onmousemove={() => (ignoreCursorHighlight = false)} />
 
-<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
 	bind:this={backdropEl}
-	on:click|stopPropagation={handleBackdropClick}
+	onclick={handleBackdropClick}
 >
 	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden p-10 text-left whitespace-nowrap">
 		<div
@@ -106,7 +112,7 @@
 				<div class="mr-2 text-sm">
 					<IconSearch />
 				</div>
-				<!-- svelte-ignore a11y-autofocus -->
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					autofocus
 					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
@@ -125,8 +131,8 @@
 									class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
 										? 'highlighted bg-gray-100 dark:bg-gray-800'
 										: ''}"
-									on:mouseenter={() => highlightRow(idx)}
-									on:click={() => {
+									onmouseenter={() => highlightRow(idx)}
+									onclick={() => {
 										dispatch("modelSelected", model.id);
 										dispatch("close");
 									}}
@@ -155,8 +161,8 @@
 									class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
 										? 'highlighted bg-gray-100 dark:bg-gray-800'
 										: ''}"
-									on:mouseenter={() => highlightRow(idx)}
-									on:click={() => {
+									onmouseenter={() => highlightRow(idx)}
+									onclick={() => {
 										dispatch("modelSelected", model.id);
 										dispatch("close");
 									}}

src/lib/components/inference-playground/model-selector.svelte

@@ -8,9 +8,13 @@
 	import ProviderSelect from "./provider-select.svelte";
 	import { defaultSystemMessage } from "./utils.js";
 
-	export let conversation: Conversation;
+	interface Props {
+		conversation: Conversation;
+	}
+
+	let { conversation = $bindable() }: Props = $props();
 
-	let showModelPickerModal = false;
+	let showModelPickerModal = $state(false);
 
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
@@ -23,8 +27,8 @@
 		conversation.provider = undefined;
 	}
 
-	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
-	$: modelName = conversation.model.id.split("/")[1] ?? "";
+	let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
+	let modelName = $derived(conversation.model.id.split("/")[1] ?? "");
 	const id = crypto.randomUUID();
 </script>
 
@@ -36,7 +40,7 @@
 	<button
 		{id}
 		class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
-		on:click={() => (showModelPickerModal = true)}
+		onclick={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">

src/lib/components/inference-playground/playground.svelte

@@ -25,23 +25,27 @@
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
-	let viewCode = false;
-	let viewSettings = false;
-	let loading = false;
+	let viewCode = $state(false);
+	let viewSettings = $state(false);
+	let loading = $state(false);
 	let abortControllers: AbortController[] = [];
 	let waitForNonStreaming = true;
-	let selectCompareModelOpen = false;
+	let selectCompareModelOpen = $state(false);
 
 	interface GenerationStatistics {
 		latency: number;
 		generatedTokensCount: number;
 	}
-	let generationStats = $project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
-		| [GenerationStatistics]
-		| [GenerationStatistics, GenerationStatistics];
+	let generationStats = $state(
+		$project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+			| [GenerationStatistics]
+			| [GenerationStatistics, GenerationStatistics]
+	);
 
-	$: systemPromptSupported = $project.conversations.some(conversation => isSystemPromptSupported(conversation.model));
-	$: compareActive = $project.conversations.length === 2;
+	let systemPromptSupported = $derived(
+		$project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
+	);
+	let compareActive = $derived($project.conversations.length === 2);
 
 	function reset() {
 		$project.conversations.map(conversation => {
@@ -209,7 +213,7 @@
 	/>
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px_1fr] max-md:divide-y dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark] {compareActive
 		? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
@@ -232,7 +236,7 @@
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
 				value={systemPromptSupported ? $project.conversations[0].systemMessage.content : ""}
-				on:input={e => {
+				oninput={e => {
 					for (const conversation of $project.conversations) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
@@ -242,22 +246,22 @@
 			></textarea>
 		</div>
 	</div>
-	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" on:keydown={onKeydown}>
+	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" onkeydown={onKeydown}>
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			{#each $project.conversations as conversation, conversationIdx}
+			{#each $project.conversations as _conversation, conversationIdx}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
-							bind:conversation
+							bind:conversation={$project.conversations[conversationIdx]!}
 							on:close={() => removeCompareModal(conversationIdx)}
 						/>
 					{/if}
 					<PlaygroundConversation
 						{loading}
-						bind:conversation
+						bind:conversation={$project.conversations[conversationIdx]!}
 						{viewCode}
 						{compareActive}
 						on:closeCode={() => (viewCode = false)}
@@ -272,7 +276,7 @@
 				{#if !compareActive}
 					<button
 						type="button"
-						on:click={() => (viewSettings = !viewSettings)}
+						onclick={() => (viewSettings = !viewSettings)}
 						class="flex h-[39px] items-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 					>
 						<div class="text-black dark:text-white">
@@ -281,7 +285,7 @@
 						{!viewSettings ? "Settings" : "Hide Settings"}
 					</button>
 				{/if}
-				<button type="button" on:click={reset} class="btn size-[39px]">
+				<button type="button" onclick={reset} class="btn size-[39px]">
 					<IconDelete />
 				</button>
 			</div>
@@ -291,12 +295,12 @@
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
-				<button type="button" on:click={() => (viewCode = !viewCode)} class="btn">
+				<button type="button" onclick={() => (viewCode = !viewCode)} class="btn">
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}</button
 				>
 				<button
-					on:click={() => {
+					onclick={() => {
 						viewCode = false;
 						loading ? abort() : submit();
 					}}
@@ -347,7 +351,7 @@
 					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 						<button
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-							on:click={() => (selectCompareModelOpen = true)}
+							onclick={() => (selectCompareModelOpen = true)}
 						>
 							<IconCompare />
 							Compare
@@ -367,7 +371,7 @@
 				<GenerationConfig bind:conversation={$project.conversations[0]} />
 				{#if $token.value}
 					<button
-						on:click={token.reset}
+						onclick={token.reset}
 						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 						><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
 							><path

src/lib/components/inference-playground/provider-select.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import type { Conversation } from "$lib/types.js";
 
 	import { randomPick } from "$lib/utils/array.js";
@@ -7,9 +9,13 @@
 	import IconCaret from "~icons/carbon/chevron-down";
 	import IconProvider from "../icon-provider.svelte";
 
-	export let conversation: Conversation;
-	let classes: string | undefined = undefined;
-	export { classes as class };
+	interface Props {
+		conversation: Conversation;
+		class?: string | undefined;
+	}
+
+	let { conversation = $bindable(), class: classes = undefined }: Props = $props();
+	
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.provider);
@@ -17,18 +23,22 @@
 		conversation.provider = randomPick(providers)?.provider;
 	}
 
-	$: providers = conversation.model.inferenceProviderMapping;
-	$: reset(providers);
+	let providers = $derived(conversation.model.inferenceProviderMapping);
+	run(() => {
+		reset(providers);
+	});
 
 	const {
 		elements: { trigger, menu, option },
 		states: { selected },
 	} = createSelect<string, false>();
 	const sync = createSync({ selected });
-	$: sync.selected(
-		conversation.provider ? { value: conversation.provider } : undefined,
-		p => (conversation.provider = p?.value)
-	);
+	run(() => {
+		sync.selected(
+			conversation.provider ? { value: conversation.provider } : undefined,
+			p => (conversation.provider = p?.value)
+		);
+	});
 
 	const nameMap: Record<string, string> = {
 		"sambanova": "SambaNova",

src/lib/components/prompts.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { writable } from "svelte/store";
 	import IconCross from "~icons/carbon/close";
@@ -27,15 +27,19 @@
 </script>
 
 <script lang="ts">
-	$: current = $prompts?.[0];
+	import { run } from 'svelte/legacy';
 
-	let dialog: HTMLDialogElement | undefined;
+	let current = $derived($prompts?.[0]);
 
-	$: if (current) {
-		dialog?.showModal();
-	} else {
-		dialog?.close();
-	}
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	run(() => {
+		if (current) {
+			dialog?.showModal();
+		} else {
+			dialog?.close();
+		}
+	});
 
 	function onSubmit(e: Event) {
 		e.preventDefault();
@@ -43,11 +47,11 @@
 	}
 </script>
 
-<dialog bind:this={dialog} on:close={resolvePrompt}>
+<dialog bind:this={dialog} onclose={resolvePrompt}>
 	{#if current}
 		<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85">
 			<form
-				on:submit={onSubmit}
+				onsubmit={onSubmit}
 				class="relative w-xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
 				use:clickOutside={resolvePrompt}
 			>
@@ -58,7 +62,7 @@
 					<button
 						type="button"
 						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-						on:click={resolvePrompt}
+						onclick={resolvePrompt}
 					>
 						<div class="text-xl">
 							<IconCross />
@@ -70,7 +74,7 @@
 				<div class="p-4 md:p-5">
 					<label class="flex flex-col gap-2 font-medium text-gray-900 dark:text-white">
 						<!-- This is fine in dialogs -->
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							bind:value={current.value}
 							placeholder={current.placeholder}

src/routes/+layout.svelte

@@ -3,9 +3,14 @@
 	import DebugMenu from "$lib/components/debug-menu.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import Toaster from "$lib/components/toaster.svelte";
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children?.()}
 <DebugMenu />
 <Prompts />
 <Toaster />