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>(initial: T): Readonly<T>;
export function frozen<T>(): Readonly<T> | undefined; 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: * Example:
* ```ts * ```ts
* <script> * <script>
* let counter = $state({ count: 0 }); * let counter = $state({ count: 0 });
* *
* $effect(() => { * function onclick() {
* // Will log `{ count: ... }` rather than `Proxy { ... }`
* console.log($state.snapshot(counter)); * console.log($state.snapshot(counter));
* }; * };
* </script> * </script>

@ -2551,14 +2551,15 @@ declare namespace $state {
export function frozen<T>(initial: T): Readonly<T>; export function frozen<T>(initial: T): Readonly<T>;
export function frozen<T>(): Readonly<T> | undefined; 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: * Example:
* ```ts * ```ts
* <script> * <script>
* let counter = $state({ count: 0 }); * let counter = $state({ count: 0 });
* *
* $effect(() => { * function onclick() {
* // Will log `{ count: ... }` rather than `Proxy { ... }`
* console.log($state.snapshot(counter)); * console.log($state.snapshot(counter));
* }; * };
* </script> * </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 > 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 ```svelte
<script> <script>
@ -114,22 +114,22 @@ Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported
## `$state.snapshot` ## `$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 ```svelte
<script> <script>
let counter = $state({ count: 0 }); let counter = $state({ count: 0 });
$effect(() => { function onclick() {
// Will log { count: 0 } // Will log `{ count: ... }` rather than `Proxy { ... }`
console.log($state.snapshot(counter)); console.log($state.snapshot(counter));
}); }
</script> </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` ## `$derived`

Loading…
Cancel
Save