Different Ways To Share State In Svelte 5

All these examples are really nice, but are only around `count`, yet no one is using count in production 😊😊😅

Great video -- i also really like the theme of your browser, what browser is it? how did you theme it?

The state management docs should be updated with at least a link to this video

Thanks!

What's interesting is after that whole video of explanation of all the ways to wrap and share state there was no solution that actually got away from needing to call a function or a `.value` when combined with destructuring. Even with the compiler this problem isn't completely solvable ergonomically. The class trick of not needing to write the getters is nice but doesn't change the consumption side. If this was accepted from the beginning it could have saved everyone a lot of time.

Valeu!

Super well done, both detailed and yet not confusing

Classes look so good. I think that’ll be my preferred approach going forward.

This is exactly the primer on Svelte 5 shared state I needed. Thank you!

This was the best video of yours, and the best Runes video I've seen. You completely demystified them AND opened me up to using Classes. Thank you! As a bonus, I love your presentation, delivery, and humor you mix in. Your love of coding and Svelte shine through and is infectious.

That should be a page in the Svelte documentation (or maybe I missed it), it's so clear and with lots of options !

And they told me rxjs observables in angular are overengineered... 🥲

Give me that Lualine config, i am struggling

Man. You are making enemies all around. XD

I think with the power of store and $state much boilerplates can be reduced

As I understand it, all runes work with signals. I have a desire to replace all the old designs with runes, but then I understand that this is wrong.

Thank you very much for the valuable information, we will try it.

every time i see your videos i start crying, cause they are too good!

Gold content as usual 🙏🙏

I bet 99% of shared state use cases can just be dealt with proxied state and it should probably be the first thing in the docs.

JSX is everything I was thought not to do some 20 years ago. What happened to "never mix business logic with presentation"? It's impossible to read. Because of the praisal of JSX and contantly jumping out of topic and losing the train of thought, i didn't get past 2 minute mark. Thanks for the attempt, i suppose.

Great breakdown!

how cool is this

Don't Fear the Runes

$count was 100x better than count.value and I will die on that hill

This should be in svelte tutorial, thanks a lot.
Proxied state is my fav

This video goes well beyond the obvious and explains runes better than other video available! Even the ones that Rich Harris has made! Great job.

I would love for you to do AppWrite and Svelte 5 integration tutorial! (to login, fetch and set user data, update database, upload files and so on).
Even if it will be a paid course

Good video!

You can do this when destrucuring:
let {count, increment} = $derived(counter)
then you don't have to do count.value

I love your content, very well made and I learn a lot from it

Random advise: drop the "right", no offense meant 😄🫣

TLDR: Imported unwrapped states cannot be reactive

The timing of your content is always perfect, I'm exhausted with people banging on about it being like XYZ or ABC.. if you use them you will see its nothing more than surface.

On the complains about needing to box things its always a trivial example like a single number counter.. in the real world you would want some methods to go with that state and so you are naturally going to end up with a wrapped object from a functionlike or class.

You also get extra points for the casual use of "willy nilly" 10/10 😂

why did the svelte team not consider boxing the primitives at compile time
```
// myfile.svelte.ts
export let count = $state(0)

// mycomponent.svelte
import {count} from 'myfile.svelte.ts'
<button onclick={() => count++}>{count}</button>
```

```
// myfile.compiled.ts
export let count = $.state(((value) => ({valueOf: () => value}))(0))

// mycomponent.compiled.svelte
import {count} from 'myfile.svelte.ts'
<button onclick={() => count.set(x => (+x)+1)}>{count.get(x => +x)}</button>
```

Can we have type safety in .svelte?

Can you make a video about how we can do API multiple middleware per routes in SvelteKit such that the API can be used by other Frontends apps too and not be dependent on +layout or hooks.

Using Class is very cool in Svelte as it will automatically write setters and getters for you in the compiler. However one thing that I found the weakness of doing this is the typing because you can't set the initial value for $state in the constructor. Let's say for example:

class Monster {
stats = $state<Stats>()
constructor(data:Stats){
this.stats = data
}
}

typescript would scream that .stats could be an undefined so you would have to access it with something like monster?.stats every time. You could pass an initial value to form the shape but then again you would need to worry about side effects in case you're using $effect with it since the constructor would assign the state for the second time. In this case it would just be better to use something like a function wrapper although by doing it you would need to define the setters and getters yourself.

Well if svelte used a compiler that is not module scoped, they would be able to turn: export let count = $state(0); into a signal under the hood. So that import count would become import count, setCount

Cool, from svelte 5 are everything signals? And if so, how does it differ in perf or build size from solid?

hahaha how I love you bro!! !!, your videos are really a joy, very enriching by the way.

Do a video about integrate svelte runes with React to replace Redux xD

Thanks for making this! 🙏

One thing I don't understand — why is typing a word like ".value" or typing two parens like "()" to call a function such a big deal? I don't mind typing words or parens (or hitting tab and autocompleting them), to me it's such a minor thing it's not even worth thinking about... let alone being so consequential that my "Developer Experience" is noticeably impacted. I personally like Vue's approach here — you never have to waste brain cycles thinking about it when it's "always .value" instead of "maybe .value, maybe nothing"... but just like the alleged "DX" stuff, it's not really that big of a deal.

Best video of svelte out there . ❤

My memory is out 😂, super sir 🙏

When are you doing a full project using svelte? 🙂

Amazing explanation!!! Thank you.

how do you navigate so fast?

Again solving problems that you should not have in the first place