I read through the Svelte 5 tutorial to get a bit more familiar with the new way of doing things.
Arrays being reactive and being able to use array.push is great.
let numbers = $state([1,2,3]);
numbers.push(4);
Derived is fine, it is explicit which is probably a good thing? It seems to basically the same thing as $:.
let max = $derived(Math.max(...numbers));
I can't console.log a state variable. we need a snapshot or use the inspect rune.
The snapshot looks to be annoying
console.log($state.snapshot(numbers));
The inspect rune looks pretty magical.
$inspect(numbers);
How does this work inside a function? Does it work inside a function? It doesn't. Only available in the top level or inside an effect.
This seems to be equivelent to the old:
$: console.log(variable);
Effects are the side effects of variables changing. Svelte will automatically create the effect to update the dom when something changes when we use the $state rune.
The docs then go on to say effects are escape hatches and shouldn't be used often.
The example they give with the elapsed time doesn't seem relevant.
Stateful variables in a .svelte.js file seem dangerous. It's a way of sharing information across components. Is this how you should save data to a global place in a web app? Is this like caching something to the window object? This seems to replace the concept of stores.
So if we have something we want available across components easily, then we can toss it into a svelte.js file and make it reactive. Then we can update that data from anywhere and cause DOM updates. This seems quite cool actually.
You can have parsed classes:
<div class={["bg-500", {flipped}]}
I'm guessing this doesn't work for tailwind style classes and you need to go back to using conditionals inline.
Svelte has built Map, Set and Date. Why instead of just Stating them?
Can these snippets live in other files? This looks to be basically templating. Why not just create an array and loop on it. I don't buy that the snippet version is neater.
It feels like encapsulation for encapsulation's sake.