Skip to content

docs: replace $state.frozen docs with $state.raw #12812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions documentation/docs/03-runes/01-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@
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.

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.
Expand Down Expand Up @@ -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

## `$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
let person = $state.frozen({
let person = $state.raw({
name: 'Heraclitus',
age: 49
});
Expand All @@ -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).

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(...)`.
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).

## `$state.snapshot`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -256,9 +256,10 @@ export function should_proxy(node, scope) {
) {
return false;
}

if (node.type === 'Identifier' && scope !== null) {
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 (
binding !== null &&
!binding.reassigned &&
Expand All @@ -271,6 +272,7 @@ export function should_proxy(node, scope) {
return should_proxy(binding.initial, null);
}
}

return true;
}

Expand Down
6 changes: 3 additions & 3 deletions sites/svelte-5-preview/src/lib/autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function is_state(node) {

/**
* 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}
*/
function is_state_call(node) {
Expand Down Expand Up @@ -113,8 +113,8 @@ const runes = [
{ snippet: '$derived.by', test: is_state_call },
{ snippet: '$effect(() => {\n\t${}\n});', test: is_statement },
{ snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement },
{ snippet: '$state.frozen(${});', test: is_state },
{ snippet: '$state.frozen', test: is_state_call },
{ snippet: '$state.raw(${});', test: is_state },
{ snippet: '$state.raw', test: is_state_call },
{ snippet: '$bindable()', test: is_bindable },
{ snippet: '$effect.root(() => {\n\t${}\n})' },
{ snippet: '$state.snapshot(${})' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

## `$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
<script>
- let numbers = $state([1, 2, 3]);
+ let numbers = $state.frozen([1, 2, 3]);
+ let numbers = $state.raw([1, 2, 3]);
</script>

-<button onclick={() => numbers.push(numbers.length + 1)}>
Expand All @@ -89,9 +89,7 @@ State declared with `$state.frozen` cannot be mutated; it can only be _reassigne
</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).

> 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.
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).

## `$state.snapshot`

Expand Down
Loading