$state.frozen -> $state.raw

Author: Rich-Harris

packages/svelte/messages/client-errors/errors.md

@@ -60,10 +60,6 @@
 
 > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
-## state_frozen_invalid_argument
-
-> The argument to `$state.frozen(...)` cannot be an object created with `$state(...)`. You should create a copy of it first, for example with `$state.snapshot`
-
 ## state_prototype_fixed
 
 > Cannot set prototype of `$state` object

packages/svelte/src/ambient.d.ts

@@ -102,12 +102,13 @@ declare namespace $state {
 						: never;
 
 	/**
-	 * Declares reactive read-only state that is shallowly immutable.
+	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
+	 * you must reassign it.
 	 *
 	 * Example:
 	 * ```ts
 	 * <script>
-	 *   let items = $state.frozen([0]);
+	 *   let items = $state.raw([0]);
 	 *
 	 *   const addItem = () => {
 	 *     items = [...items, items.length];
@@ -123,8 +124,8 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-	export function frozen<T>(initial: T): Readonly<T>;
-	export function frozen<T>(): Readonly<T> | undefined;
+	export function raw<T>(initial: T): T;
+	export function raw<T>(): T | undefined;
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -909,19 +909,14 @@ const runes_scope_js_tweaker = {
 		const callee = node.init.callee;
 		if (callee.type !== 'Identifier' && callee.type !== 'MemberExpression') return;
 
-		if (
-			rune !== '$state' &&
-			rune !== '$state.frozen' &&
-			rune !== '$derived' &&
-			rune !== '$derived.by'
-		)
+		if (rune !== '$state' && rune !== '$state.raw' && rune !== '$derived' && rune !== '$derived.by')
 			return;
 
 		for (const path of extract_paths(node.id)) {
 			// @ts-ignore this fails in CI for some insane reason
 			const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(path.node.name));
 			binding.kind =
-				rune === '$state' ? 'state' : rune === '$state.frozen' ? 'frozen_state' : 'derived';
+				rune === '$state' ? 'state' : rune === '$state.raw' ? 'frozen_state' : 'derived';
 		}
 	}
 };
@@ -947,7 +942,7 @@ const runes_scope_tweaker = {
 
 		if (
 			rune !== '$state' &&
-			rune !== '$state.frozen' &&
+			rune !== '$state.raw' &&
 			rune !== '$derived' &&
 			rune !== '$derived.by' &&
 			rune !== '$props'
@@ -960,7 +955,7 @@ const runes_scope_tweaker = {
 			binding.kind =
 				rune === '$state'
 					? 'state'
-					: rune === '$state.frozen'
+					: rune === '$state.raw'
 						? 'frozen_state'
 						: rune === '$derived' || rune === '$derived.by'
 							? 'derived'

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -903,12 +903,7 @@ function validate_call_expression(node, scope, path) {
 		e.bindable_invalid_location(node);
 	}
 
-	if (
-		rune === '$state' ||
-		rune === '$state.frozen' ||
-		rune === '$derived' ||
-		rune === '$derived.by'
-	) {
+	if (rune === '$state' || rune === '$state.raw' || rune === '$derived' || rune === '$derived.by') {
 		if (parent.type === 'VariableDeclarator') return;
 		if (parent.type === 'PropertyDefinition' && !parent.static && !parent.computed) return;
 		e.state_invalid_placement(node, rune);

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -215,18 +215,8 @@ export function client_component(source, analysis, options) {
 		}
 
 		if (binding?.kind === 'state' || binding?.kind === 'frozen_state') {
-			return [
-				getter,
-				b.set(alias ?? name, [
-					b.stmt(
-						b.call(
-							'$.set',
-							b.id(name),
-							b.call(binding.kind === 'state' ? '$.proxy' : '$.freeze', b.id('$$value'))
-						)
-					)
-				])
-			];
+			const value = binding.kind === 'state' ? b.call('$.proxy', b.id('$$value')) : b.id('$$value');
+			return [getter, b.set(alias ?? name, [b.stmt(b.call('$.set', b.id(name), value))])];
 		}
 
 		return getter;

packages/svelte/src/compiler/phases/3-transform/client/utils.js

@@ -206,7 +206,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 						if (assignment.type === 'AssignmentExpression') {
 							assignment.right =
 								private_state.kind === 'frozen_state'
-									? b.call('$.freeze', value)
+									? value
 									: serialize_proxy_reassignment(value, private_state.id, state);
 							return assignment;
 						}
@@ -219,7 +219,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope)
 							? private_state.kind === 'frozen_state'
-								? b.call('$.freeze', value)
+								? value
 								: serialize_proxy_reassignment(value, private_state.id, state)
 							: value
 					);
@@ -243,7 +243,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 				if (assignment.type === 'AssignmentExpression') {
 					assignment.right =
 						public_state.kind === 'frozen_state'
-							? b.call('$.freeze', value)
+							? value
 							: serialize_proxy_reassignment(value, public_state.id, state);
 					return assignment;
 				}
@@ -325,7 +325,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 						context.state.analysis.runes &&
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope)
-							? b.call('$.freeze', value)
+							? value
 							: value
 					);
 				} else if (

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -42,7 +42,7 @@ export const javascript_visitors_runes = {
 					const rune = get_rune(definition.value, state.scope);
 					if (
 						rune === '$state' ||
-						rune === '$state.frozen' ||
+						rune === '$state.raw' ||
 						rune === '$derived' ||
 						rune === '$derived.by'
 					) {
@@ -51,7 +51,7 @@ export const javascript_visitors_runes = {
 							kind:
 								rune === '$state'
 									? 'state'
-									: rune === '$state.frozen'
+									: rune === '$state.raw'
 										? 'frozen_state'
 										: rune === '$derived.by'
 											? 'derived_call'
@@ -115,10 +115,7 @@ export const javascript_visitors_runes = {
 										should_proxy_or_freeze(init, state.scope) ? b.call('$.proxy', init) : init
 									)
 								: field.kind === 'frozen_state'
-									? b.call(
-											'$.source',
-											should_proxy_or_freeze(init, state.scope) ? b.call('$.freeze', init) : init
-										)
+									? b.call('$.source', init)
 									: field.kind === 'derived_call'
 										? b.call('$.derived', init)
 										: b.call('$.derived', b.thunk(init));
@@ -158,12 +155,7 @@ export const javascript_visitors_runes = {
 							// set foo(value) { this.#foo = value; }
 							const value = b.id('value');
 							body.push(
-								b.method(
-									'set',
-									definition.key,
-									[value],
-									[b.stmt(b.call('$.set', member, b.call('$.freeze', value)))]
-								)
+								b.method('set', definition.key, [value], [b.stmt(b.call('$.set', member, value))])
 							);
 						}
 
@@ -314,15 +306,15 @@ export const javascript_visitors_runes = {
 					? b.id('undefined')
 					: /** @type {import('estree').Expression} */ (visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.frozen') {
+			if (rune === '$state' || rune === '$state.raw') {
 				/**
 				 * @param {import('estree').Identifier} id
 				 * @param {import('estree').Expression} value
 				 */
 				const create_state_declarator = (id, value) => {
 					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
 					if (should_proxy_or_freeze(value, state.scope)) {
-						value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
+						value = rune === '$state' ? b.call('$.proxy', value) : value;
 					}
 					if (is_state_source(binding, state)) {
 						value = b.call('$.source', value);

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -559,7 +559,7 @@ const javascript_visitors_runes = {
 		if (node.value != null && node.value.type === 'CallExpression') {
 			const rune = get_rune(node.value, state.scope);
 
-			if (rune === '$state' || rune === '$state.frozen' || rune === '$derived') {
+			if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
 				return {
 					...node,
 					value:

packages/svelte/src/compiler/phases/constants.js

@@ -31,7 +31,7 @@ export const PassiveEvents = ['wheel', 'touchstart', 'touchmove', 'touchend', 't
 
 export const Runes = /** @type {const} */ ([
 	'$state',
-	'$state.frozen',
+	'$state.raw',
 	'$state.snapshot',
 	'$state.is',
 	'$props',

packages/svelte/src/internal/client/constants.js

@@ -20,5 +20,4 @@ export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 
 export const STATE_SYMBOL = Symbol('$state');
-export const STATE_FROZEN_SYMBOL = Symbol('$state.frozen');
 export const LOADING_ATTR_SYMBOL = Symbol('');