tweak docs, to make it explicitly that we're converting to and from proxies

pull/11180/head
Rich Harris 2 years ago
parent af7d5c3c0c
commit 9afc5dcc90

@ -43,14 +43,15 @@ declare namespace $state {
export function frozen<T>(initial: T): Readonly<T>;
export function frozen<T>(): Readonly<T> | undefined;
/**
* To remove reactivity from objects and arrays created with `$state`, use `$state.snapshot`:
* To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
*
* Example:
* ```ts
* <script>
* let counter = $state({ count: 0 });
*
* $effect(() => {
* function onclick() {
* // Will log `{ count: ... }` rather than `Proxy { ... }`
* console.log($state.snapshot(counter));
* };
* </script>

@ -2551,14 +2551,15 @@ declare namespace $state {
export function frozen<T>(initial: T): Readonly<T>;
export function frozen<T>(): Readonly<T> | undefined;
/**
* To remove reactivity from objects and arrays created with `$state`, use `$state.snapshot`:
* To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
*
* Example:
* ```ts
* <script>
* let counter = $state({ count: 0 });
*
* $effect(() => {
* function onclick() {
* // Will log `{ count: ... }` rather than `Proxy { ... }`
* console.log($state.snapshot(counter));
* };
* </script>

@ -40,7 +40,7 @@ class Todo {
> In this example, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields
Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDMBBEf2URhUhUNEl7c21DviPOwZY3jVpZEtIqUBz9e-UUt9BTj7M784bdmZ21wciq48xsPyGr2MF7Jhl9-kXEKxrCoqNLQS2TOqqgPbWd7cgggU3TgCFCAw-RekJ-3Et4lvByEq-drbe_dlsPichZcFYZrT6amQto2pXw5FO88FUYtG90gUfYi3zvWrYL75vxL57zfA07_zfr23k1vjtt-aZ0bQTcbrDL5ZifZcAxKeS8lzDc8X0xDhJ2ItdbX1jlOZMb9VnjyCoKCfMpfwG975NFVwEAAA==):
Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDMBBEf2URhUhUNEl7c21DviPOwZY3jVpZEtIqUBz9e-UUt9BTj7M784bdmZ21wciq48xsPyGr2MF7Jhl9-kXEKxrCoqNLQS2TOqqgPbWd7cgggU3TgCFCAw-RekJ-3Et4lvByEq-drbe_dlsPichZcFYZrT6amQto2pXw5FO88FUYtG90gUfYi3zvWrYL75vxL57zfA07_zfr23k1vjtt-aZ0bQTcbrDL5ZifZcAxKeS8lzDc8X0xDhJ2ItdbX1jlOZMb9VnjyCoKCfMpfwG975NFVwEAAA==) by wrapping with with [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy):
```svelte
<script>
@ -114,22 +114,22 @@ Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported
## `$state.snapshot`
To remove reactivity from objects and arrays created with `$state`, use `$state.snapshot`:
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
```svelte
<script>
let counter = $state({ count: 0 });
$effect(() => {
// Will log { count: 0 }
function onclick() {
// Will log `{ count: ... }` rather than `Proxy { ... }`
console.log($state.snapshot(counter));
});
}
</script>
```
This is handy when you want to pass some state to an external library or API that doesn't expect a reactive object such as `structuredClone`.
This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
> Note that `$state.snapshot` will return a new object from the input when removing reactivity. If the object passed isn't reactive, it will be returned as is.
> Note that `$state.snapshot` will clone the data when removing reactivity. If the value passed isn't a `$state` proxy, it will be returned as-is.
## `$derived`

Loading…
Cancel
Save