Svelte 5 Migration and Related Issues

[vvnsrzn]

Description

This issue outlines the process of migrating to Svelte 5.

Steps Taken

npx sv migrate svelte-5  

Migration Errors

AssistantSettings.svelte

<p> cannot be a child of <select>. <select> only allows these children: <option>, <optgroup>, <#text>, <hr>, <script>, <template>.
The browser will "repair" the HTML (by moving, removing, or inserting elements), which breaks Svelte's assumptions about the structure of your components.

Reference: Svelte Error Documentation - Node Invalid Placement

Suggestion:

	<select
		name="modelId"
		class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
		bind:value={modelId}
	>
		{#each models.filter((model) => !model.unlisted) as model}
			<option value={model.id}>{model.displayName}</option>
		{/each}
	</select>
	<p class="text-xs text-red-500">{getError("modelId", form)}</p>

---

I am available to work on this, feel free

Are there any integration/e2e tests I can run to check that the migration has gone smoothly?

ChatMessage.svelte

<svelte:fragment> must be the direct child of a component.

Reference: Svelte Error Documentation - Svelte Fragment Invalid Placement

Suggestion:

{#if nChildren > 0}
	{@const messageId = messages.find((m) => m.id === id)?.children?.[childrenToRender]}
	{#key messageId}
		<ChatMessage
			{loading}
			{messages}
			{isAuthor}
			{readOnly}
			{model}
			id={messageId}
			on:retry
			on:vote
			on:continue
		>
                // update the slot
                // remove the afterUpdate function

---

ToolEdit.svelte

<p> cannot be a child of <select>. <select> only allows these children: <option>, <optgroup>, <#text>, <hr>, <script>, <template>.
The browser will "repair" the HTML (by moving, removing, or inserting elements), which breaks Svelte's assumptions about the structure of your components.

Reference: Svelte Error Documentation - Node Invalid Placement

Suggestion: same as AssistantSettings.svelte

---

I am available to work on this topic :)

Are there any integration/e2e tests I can run to check that the migration has gone smoothly?