breaking: change $state.frozen -> $state.raw

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/visitors/CallExpression.js

@@ -73,7 +73,7 @@ export function CallExpression(node, context) {
 			break;
 
 		case '$state':
-		case '$state.frozen':
+		case '$state.raw':
 		case '$derived':
 		case '$derived.by':
 			if (

packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js

@@ -21,7 +21,7 @@ export function VariableDeclarator(node, context) {
 		// TODO feels like this should happen during scope creation?
 		if (
 			rune === '$state' ||
-			rune === '$state.frozen' ||
+			rune === '$state.raw' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
 			rune === '$props'
@@ -32,7 +32,7 @@ export function VariableDeclarator(node, context) {
 				binding.kind =
 					rune === '$state'
 						? 'state'
-						: rune === '$state.frozen'
+						: rune === '$state.raw'
 							? 'frozen_state'
 							: rune === '$derived' || rune === '$derived.by'
 								? 'derived'

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

@@ -256,18 +256,8 @@ export function client_component(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

@@ -210,7 +210,7 @@ export function build_setter(node, context, fallback, prefix, options) {
 						if (assignment.type === 'AssignmentExpression') {
 							assignment.right =
 								private_state.kind === 'frozen_state'
-									? b.call('$.freeze', value)
+									? value
 									: build_proxy_reassignment(value, private_state.id);
 							return assignment;
 						}
@@ -223,7 +223,7 @@ export function build_setter(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
 								: build_proxy_reassignment(value, private_state.id)
 							: value
 					);
@@ -247,7 +247,7 @@ export function build_setter(node, context, fallback, prefix, options) {
 				if (assignment.type === 'AssignmentExpression') {
 					assignment.right =
 						public_state.kind === 'frozen_state'
-							? b.call('$.freeze', value)
+							? value
 							: build_proxy_reassignment(value, public_state.id);
 					return assignment;
 				}
@@ -344,7 +344,7 @@ export function build_setter(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/ClassBody.js

@@ -44,7 +44,7 @@ export function ClassBody(node, context) {
 				const rune = get_rune(definition.value, context.state.scope);
 				if (
 					rune === '$state' ||
-					rune === '$state.frozen' ||
+					rune === '$state.raw' ||
 					rune === '$derived' ||
 					rune === '$derived.by'
 				) {
@@ -53,7 +53,7 @@ export function ClassBody(node, context) {
 						kind:
 							rune === '$state'
 								? 'state'
-								: rune === '$state.frozen'
+								: rune === '$state.raw'
 									? 'frozen_state'
 									: rune === '$derived.by'
 										? 'derived_by'
@@ -117,12 +117,7 @@ export function ClassBody(node, context) {
 									should_proxy_or_freeze(init, context.state.scope) ? b.call('$.proxy', init) : init
 								)
 							: field.kind === 'frozen_state'
-								? b.call(
-										'$.source',
-										should_proxy_or_freeze(init, context.state.scope)
-											? b.call('$.freeze', init)
-											: init
-									)
+								? b.call('$.source', init)
 								: field.kind === 'derived_by'
 									? b.call('$.derived', init)
 									: b.call('$.derived', b.thunk(init));
@@ -158,12 +153,7 @@ export function ClassBody(node, context) {
 						// 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))])
 						);
 					}
 

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

@@ -119,7 +119,7 @@ export function VariableDeclaration(node, context) {
 			const value =
 				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.frozen') {
+			if (rune === '$state' || rune === '$state.raw') {
 				/**
 				 * @param {Identifier} id
 				 * @param {Expression} value
@@ -128,8 +128,8 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-					if (should_proxy_or_freeze(value, context.state.scope)) {
-						value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
+					if (rune === '$state' && should_proxy_or_freeze(value, context.state.scope)) {
+						value = b.call('$.proxy', value);
 					}
 					if (is_state_source(binding, context.state)) {
 						value = b.call('$.source', value);

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

@@ -11,7 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (rune === '$state' || rune === '$state.frozen' || rune === '$derived') {
+		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
 			return {
 				...node,
 				value:

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('');

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -29,7 +29,7 @@ import {
 } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
 import { is_array, is_frozen } from '../../../shared/utils.js';
-import { INERT, STATE_FROZEN_SYMBOL, STATE_SYMBOL } from '../../constants.js';
+import { INERT, STATE_SYMBOL } from '../../constants.js';
 import { queue_micro_task } from '../task.js';
 import { current_effect } from '../../runtime.js';
 
@@ -142,12 +142,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
 		// are treated as reactive, so they get wrapped in a signal.
 		var flags = state.flags;
-		if (
-			(flags & EACH_IS_STRICT_EQUALS) !== 0 &&
-			!is_frozen(array) &&
-			!(STATE_FROZEN_SYMBOL in array) &&
-			!(STATE_SYMBOL in array)
-		) {
+		if ((flags & EACH_IS_STRICT_EQUALS) !== 0 && !is_frozen(array) && !(STATE_SYMBOL in array)) {
 			flags ^= EACH_IS_STRICT_EQUALS;
 
 			// Additionally if we're in an keyed each block, we'll need ensure the items are all wrapped in signals.

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

@@ -93,7 +93,6 @@ export {
 	template_with_script,
 	text
 } from './dom/template.js';
-export { freeze } from './freeze.js';
 export { derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
 	effect_tracking,

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

@@ -12,7 +12,7 @@ import {
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
 import { source, set } from './reactivity/sources.js';
-import { STATE_FROZEN_SYMBOL, STATE_SYMBOL } from './constants.js';
+import { STATE_SYMBOL } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 
@@ -24,12 +24,7 @@ import * as e from './errors.js';
  * @returns {ProxyStateObject<T> | T}
  */
 export function proxy(value, parent = null, prev) {
-	if (
-		typeof value === 'object' &&
-		value != null &&
-		!is_frozen(value) &&
-		!(STATE_FROZEN_SYMBOL in value)
-	) {
+	if (typeof value === 'object' && value != null && !is_frozen(value)) {
 		// If we have an existing proxy, return it...
 		if (STATE_SYMBOL in value) {
 			const metadata = /** @type {ProxyMetadata<T>} */ (value[STATE_SYMBOL]);

packages/svelte/src/utils.js

@@ -393,7 +393,7 @@ export function is_mathml(name) {
 
 const RUNES = /** @type {const} */ ([
 	'$state',
-	'$state.frozen',
+	'$state.raw',
 	'$state.snapshot',
 	'$state.is',
 	'$props',

packages/svelte/tests/runtime-runes/samples/bind-this-frozen/main.svelte

@@ -3,7 +3,7 @@
 	import ComponentB from './ComponentB.svelte';
 
 	let type = $state(ComponentA);
-	let elem = $state.frozen();
+	let elem = $state.raw();
 
 	$effect(() => {
 		console.log(elem);

packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js

@@ -8,9 +8,9 @@ export default test({
 	async test({ assert, warnings }) {
 		assert.deepEqual(warnings, [
 			'`bind:value={pojo.value}` (main.svelte:50:7) is binding to a non-reactive property',
-			'`bind:value={frozen.value}` (main.svelte:51:7) is binding to a non-reactive property',
+			'`bind:value={raw.value}` (main.svelte:51:7) is binding to a non-reactive property',
 			'`bind:value={pojo.value}` (main.svelte:52:7) is binding to a non-reactive property',
-			'`bind:value={frozen.value}` (main.svelte:53:7) is binding to a non-reactive property',
+			'`bind:value={raw.value}` (main.svelte:53:7) is binding to a non-reactive property',
 			'`bind:this={pojo.value}` (main.svelte:55:6) is binding to a non-reactive property'
 		]);
 	}

packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte

@@ -5,7 +5,7 @@
 		value: 1
 	};
 
-	let frozen = $state.frozen({
+	let raw = $state.raw({
 		value: 2
 	});
 
@@ -48,9 +48,9 @@
 
 <!-- should warn -->
 <input bind:value={pojo.value} />
-<input bind:value={frozen.value} />
+<input bind:value={raw.value} />
 <Child bind:value={pojo.value} />
-<Child bind:value={frozen.value} />
+<Child bind:value={raw.value} />
 {#if value}
 	<div bind:this={pojo.value}></div>
 {/if}

packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/_config.js

@@ -4,7 +4,7 @@ import { test } from '../../test';
 export default test({
 	html: `<button>0</button>`,
 
-	test({ assert, target, logs }) {
+	test({ assert, target }) {
 		const btn = target.querySelector('button');
 
 		btn?.click();
@@ -14,7 +14,5 @@ export default test({
 		btn?.click();
 		flushSync();
 		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
-
-		assert.deepEqual(logs, ['read only', 'read only']);
 	}
 });