docs: explain how to pass reactivity across boundaries #14311
Conversation
|
|
preview: https://svelte-dev-git-preview-svelte-14311-svelte.vercel.app/ this is an automated message |
|
| @@ -64,9 +64,35 @@ todos.push({ | |||
|
|
|||
| > [!NOTE] When you update properties of proxies, the original object is _not_ mutated. | |||
|
|
|||
| Since `$state` stops at boundaries that are not simple arrays or objects, the following will not trigger any reactivity: | |||
There was a problem hiding this comment.
boundaries that are not simple arrays or objects
I'm having a bit of a hard time parsing this. What does it include besides classes? Does it mean that closures don't work?
There was a problem hiding this comment.
What does closures have to do with this? This is about what gets proxified when you pass it to $state
There was a problem hiding this comment.
Ohhh. I didn't read it that way at all. I thought it was saying $state that has been created can't be created across a boundary. But you're talking about the $state(...) initializer? Maybe something like this then:
| Since `$state` stops at boundaries that are not simple arrays or objects, the following will not trigger any reactivity: | |
| Since the `$state` initializer deeply creates reactive state only when encountering simple arrays or objects, the following will not trigger any reactivity: |
| @@ -85,7 +111,7 @@ class Todo { | |||
| } | |||
| ``` | |||
|
|
|||
| > [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. | |||
| Under the hood, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. That means the properties are _not_ enumerable. | |||
There was a problem hiding this comment.
The second part sounds like it could be a note
| Under the hood, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. That means the properties are _not_ enumerable. | |
| Under the hood, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. | |
| > [!NOTE] Class properties are _not_ enumerable due to the compiler transforms mentioned just above. |
There was a problem hiding this comment.
I avoided the note because I felt it disrupts the reading flow for no sufficient reason
| todo.log(); // logs "'right', true" | ||
| ``` | ||
|
|
||
| Notice how we didn't use _any_ Svelte specifics, this is just regular JavaScript semantics. `$state` and `$state.raw` (and [`$derived`]($derived)) don't change these, they just add reactivity on top, so that when you change a variable something can happen in reaction to it. |
There was a problem hiding this comment.
I was trying to split the second part into a separate sentence to avoid it being a run-on and realized we probably don't need the second part at all
| Notice how we didn't use _any_ Svelte specifics, this is just regular JavaScript semantics. `$state` and `$state.raw` (and [`$derived`]($derived)) don't change these, they just add reactivity on top, so that when you change a variable something can happen in reaction to it. | |
| Notice how we didn't use _any_ Svelte specifics, this is just regular JavaScript semantics. `$state`, `$state.raw`, and [`$derived`]($derived) doesn't change this. |
There was a problem hiding this comment.
I wanted to emphasize what the runes actually do instead.
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
closes #14300
closes #14261