From 8f23a475b88472b44fe7e98df23806e1880ecc2a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 12 Jul 2024 16:49:55 -0400 Subject: [PATCH 1/2] typo --- documentation/docs/03-runes/01-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md index 241e6b71bf1e..88d166b3ec06 100644 --- a/documentation/docs/03-runes/01-state.md +++ b/documentation/docs/03-runes/01-state.md @@ -66,7 +66,7 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht ``` -> Only POJOs (plain of JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone +> Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone ## `$state.frozen` From ba1e2fae42e5c95ab1d8ffa4f1624e8d5f55fc38 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 12 Jul 2024 16:56:03 -0400 Subject: [PATCH 2/2] docs: improve $state.snapshot docs --- documentation/docs/03-runes/01-state.md | 29 +++++++++++++------------ 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md index 88d166b3ec06..4bfa56323906 100644 --- a/documentation/docs/03-runes/01-state.md +++ b/documentation/docs/03-runes/01-state.md @@ -72,26 +72,27 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht State declared with `$state.frozen` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it: -```svelte - +```js +let person = $state.frozen({ + name: 'Heraclitus', + age: 49 +}); -{#each entries as entry (entry.id)} - {entry.text} -{/each} +// this will have no effect (and will throw an error in dev) +person.age += 1; - +// this will work, because we're creating a new person +person = { + name: 'Heraclitus', + age: 50 +}; ``` This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that frozen state can _contain_ reactive state (for example, a frozen array of reactive objects). -> Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead. +In development mode, the argument to `$state.frozen` will be shallowly frozen with `Object.freeze()`, to make it obvious if you accidentally mutate it. + +> Objects and arrays passed to `$state.frozen` will have a `Symbol` property added to them to signal to Svelte that they are frozen. If you don't want this, pass in a clone of the object or array instead. ## `$state.snapshot`