diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md index ba07ecf0cb..64f5e171c0 100644 --- a/documentation/docs/03-runes/01-state.md +++ b/documentation/docs/03-runes/01-state.md @@ -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. @@ -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 }); @@ -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` diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js index 1fc7798c99..333f5ebc1c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js @@ -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 && @@ -271,6 +272,7 @@ export function should_proxy(node, scope) { return should_proxy(binding.initial, null); } } + return true; } diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js index 750b9f2e7c..99ec238834 100644 --- a/sites/svelte-5-preview/src/lib/autocomplete.js +++ b/sites/svelte-5-preview/src/lib/autocomplete.js @@ -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) { @@ -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(${})' }, diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md index a5074f386b..2cc70d0536 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md @@ -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 -