Svelte 5: Undocumented breaking changes about svelte HOT 11 OPEN

Hey there, found one in #11302: <!-- svelte-ignore --> tokens are now written with underscores rather than dashes.

• Before: <!-- svelte-ignore a11y-mouse-events-have-key-events a11y-no-static-element-interactions -->
• After: <!-- svelte-ignore a11y_mouse_events_have_key_events a11y_no_static_element_interactions -->

It is succinctly mentioned in https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-renames-of-various-error-warning-codes

from svelte.

@Conduitry I would add what I mentioned here: #11431.

from svelte.

Changes that only occur in runes mode are not the sort of changes we're concerned with here. Breaking changes are instances where a user upgrades from Svelte 4 to Svelte 5 and their existing component starts to behave differently.

from svelte.

Should we add that props are immutable by default in runes mode?

from svelte.

Again, no, not for the purposes of documenting what the breaking changes are for people who try to use their components as-is when upgrading from Svelte 4 to Svelte 5.

from svelte.

@Conduitry I'm talking about:

In Svelte 4 app I was using:

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player />
{/each}

Now with Svelte 5 it errors with:

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)

Why?

Should I use the below instead?

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player={players[i]} />
{/each}

Also if I use the latter one player is unused and I get the ts warning:

'player' is declared but its value is never read. ts(6133)

Plus, with the latter one I get another typscript warning:

'players' is possibly 'null' or 'undefined'. ts(18049)

even if I'm already inside an {#each players.

There is no docs on this on https://svelte-5-preview.vercel.app/docs, right?

from svelte.

Hi,
I tried to migrate my small application to Svelte 5 as I like new features a lot.
However I have an issue with one pattern I use.
Here is an example:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1Sy27jMAz8FVZ7SAIY8j2xDfS02B_YS52DYjGpUlkyJLkPGPr3glITO21R9GDIpDhDzogTOyqNnm0fJmZEj2zL7oeBFSy8DRT4Z9QBWcG8HV1Hmcp3Tg2haU0bVD9YF2CCv86OQwH_AvYQ4ehsDy3jZW8lan72LVtU_1f4MpdQxHOXXEWfxgAnooQaDL5k-vVm1xq67azxAYSUUMN6A3UDUwKGBOEqYO-hhgfO-SJTJCaacL2ixGqzJ1RsTVXOkkx1GEOwBqzZdlp1T_UkpIyNkLIq81VTHVzZtGb6g6J7hGVT4YF-IhFXSeeUYiivoJJAkRWst1IdFUq2DW7EWFz9J9xvHwBfk6XkFzW6MSjY00njZ4-ojKMRB43k390y3n1nSFLAabYIymdBF0D8zq_cNzb5vLrWmp9Ep02ZVZ_9UvGHyk4L7_MuZDVJpxu7YN16cxEYHpWfd2B_0URvYm6I0rJ-4aF5oIbV6pbwI03HbpGejTwK7fHa7KvUfXwHF57u2WsDAAA=

After click on 'MIGRATE' items aren't rendered anymore. Some people say it isn't usual way Svelte application are implemented but it works with current version perfectly.
To my mind it's a breaking change. My expectation is that I can replace top level let with $state rune and rest of the code should work unchanged.

from svelte.

I recommend including "different handling of nested CSS" as part of breaking changes. Svelte 5 makes use of :where() for nested selectors (for both Runes and non-Runes modes) while Svelte 4 does not.

• Svelte 4 demo, broken with nested CSS: https://svelte.dev/repl/62f6ff213af145f1b838d876b02d91ec?version=4.2.16
• Svelte 4 demo, solved without nested CSS: https://svelte.dev/repl/43b193a3ce5c471dbc588fcd0f5b44f9?version=4.2.16
• Svelte 5 demo, works with nested CSS (non-runes): repl link

<div class="rotator">
	Test
</div>

<style>
.rotator {
	width: 60px;
	height: 60px;
	border-radius: 60px;
	overflow: hidden;
	position: absolute;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	overflow: hidden;
	z-index: 0;

	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: white;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(white, white), linear-gradient(black, black), linear-gradient(white, white), linear-gradient(black, black);
		animation: rotate 4s linear infinite;
	}

	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 4px;
		top: 4px;
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		background: gray;
		border-radius: 50px;
	}
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}
</style>

Related Discord discussion. https://discord.com/channels/457912077277855764/1239363150139228160

from svelte.

I believe #11590 is a breaking change that's not clearly mentioned in docs because of how the reactivity system works now.

from svelte.

@theetrain, how can it be a breaking change if it never worked in Svelte 4? Though it can listed in the new Svelte 5 features.

@FoHoOV, this thread is about breaking changes in Svelte 5's Legacy (non-rune) mode compared to Svelte 4. #11590 is about rune mode, so it is unrelated to this thread.

from svelte.

https://svelte.dev/docs/element-directives#bind-property

Order doesn't matter now, which is a good thing!

• Svelte 5 (runes) - if a field is changed once, we will see the new value in the console
• Svelte 5 (no runes) - if a field is changed once, we will see the old value in the console

from svelte.