docs: replace `$state.frozen` docs with `$state.raw` (#12812)

pull/12814/head
Rich Harris 4 months ago committed by GitHub
parent 9f17f766b7
commit 9ba370f305
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -2,12 +2,6 @@
title: State title: State
--- ---
- `$state` (.frozen)
- `$derived` (.by)
- using classes
- getters/setters (what to do to keep reactivity "alive")
- universal reactivity
Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules. Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application. Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
@ -68,12 +62,12 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
> Only POJOs (plain old 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` ## `$state.raw`
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: State declared with `$state.raw` 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:
```js ```js
let person = $state.frozen({ let person = $state.raw({
name: 'Heraclitus', name: 'Heraclitus',
age: 49 age: 49
}); });
@ -88,11 +82,7 @@ person = {
}; };
``` ```
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). 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 raw state can _contain_ reactive state (for example, a raw array of reactive objects).
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. The argument cannot be an existing state proxy created with `$state(...)`.
## `$state.snapshot` ## `$state.snapshot`

@ -256,9 +256,10 @@ export function should_proxy(node, scope) {
) { ) {
return false; return false;
} }
if (node.type === 'Identifier' && scope !== null) { if (node.type === 'Identifier' && scope !== null) {
const binding = scope.get(node.name); const binding = scope.get(node.name);
// Let's see if the reference is something that can be proxied or frozen // Let's see if the reference is something that can be proxied
if ( if (
binding !== null && binding !== null &&
!binding.reassigned && !binding.reassigned &&
@ -271,6 +272,7 @@ export function should_proxy(node, scope) {
return should_proxy(binding.initial, null); return should_proxy(binding.initial, null);
} }
} }
return true; return true;
} }

@ -68,7 +68,7 @@ function is_state(node) {
/** /**
* Returns `true` if we're already in a valid call expression, e.g. * Returns `true` if we're already in a valid call expression, e.g.
* changing an existing `$state()` to `$state.frozen()` * changing an existing `$state()` to `$state.raw()`
* @type {Test} * @type {Test}
*/ */
function is_state_call(node) { function is_state_call(node) {
@ -113,8 +113,8 @@ const runes = [
{ snippet: '$derived.by', test: is_state_call }, { snippet: '$derived.by', test: is_state_call },
{ snippet: '$effect(() => {\n\t${}\n});', test: is_statement }, { snippet: '$effect(() => {\n\t${}\n});', test: is_statement },
{ snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement }, { snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement },
{ snippet: '$state.frozen(${});', test: is_state }, { snippet: '$state.raw(${});', test: is_state },
{ snippet: '$state.frozen', test: is_state_call }, { snippet: '$state.raw', test: is_state_call },
{ snippet: '$bindable()', test: is_bindable }, { snippet: '$bindable()', test: is_bindable },
{ snippet: '$effect.root(() => {\n\t${}\n})' }, { snippet: '$effect.root(() => {\n\t${}\n})' },
{ snippet: '$state.snapshot(${})' }, { snippet: '$state.snapshot(${})' },

@ -64,14 +64,14 @@ Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDM
In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component. In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component.
## `$state.frozen` ## `$state.raw`
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: State declared with `$state.raw` 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:
```diff ```diff
<script> <script>
- let numbers = $state([1, 2, 3]); - let numbers = $state([1, 2, 3]);
+ let numbers = $state.frozen([1, 2, 3]); + let numbers = $state.raw([1, 2, 3]);
</script> </script>
-<button onclick={() => numbers.push(numbers.length + 1)}> -<button onclick={() => numbers.push(numbers.length + 1)}>
@ -89,9 +89,7 @@ State declared with `$state.frozen` cannot be mutated; it can only be _reassigne
</p> </p>
``` ```
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). 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 raw state can _contain_ reactive state (for example, a raw 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.
## `$state.snapshot` ## `$state.snapshot`

Loading…
Cancel
Save