Proxied state (#9739)

* magic objects

* read length eagerly — triggers reconciliation

* nested magic

* tests

* more tests

* fix array memory leak

* skipped, partially passing array test

* Fix each

revert bad changes

* more 1337

* eliminate closures

* maybe this is unnecessary?

* only create sources for own properties

* more

* rename stuff

* shuffle things around

* emit $.proxy

* remove proxy helper from public API

* only create sources for writable properties

* update test

* get tests passing

* fix

* remove state-not-mutated warning, which is no longer valid

* track reassignments separately from mutations

* update test - effects no longer fire on mutations unnecessarily

* move util into utils file

* move each logic into its own module; breathe sigh of relief

* tweaks

* more tweaks

* improve runtime

* fix mistake

* ensure we proxy when assigning to state

* fix test

* handle frozen

* create sources when reading proxy properties inside deriveds

* only mutate in legacy mode

* add immutable to transform state

* remove unused second argument to derived

* remove unused second argument to source, and runtime immutable option to createRoot (not sure what that was doing there?)

* oops, backwards

* dedicated binding.kind for legacy reactive imports

* avoid using prop_source in more cases. bit hacky, could be tidier, but it works

* distinguish between source and mutable_source

* remove immutable option from mount

* remove unused apparatus around immutable option

* deprecate immutable

* fix

* tweak

* better default value handling

* remove unnecessary exports

* whitespace is free

* remove obsolete symbol from proxy

* cleanup ts

* improve runtime perf by removing version reads in has()

* add missing proxy call

* tune perf of has() more

* ensure we only create sources in effect_active()

* fix proxy of computed fields

* simplify and fix issue with indexed each blocks

* fix compiler errors around exported state

* only create source for state that is reassigned

* temporary fix, we should come up with something better than this

* readonly props

* fix test

* add test for bind:

* make readonly dev-only

* docs

* forbid setPrototypeOf

* lol whoops

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Dominic Gannaway <dg@domgan.com>

Author: Rich-Harris

packages/svelte/src/compiler/errors.js

@@ -167,8 +167,8 @@ const runes = {
 	'invalid-legacy-export': () => `Cannot use \`export let\` in runes mode — use $props instead`,
 	/** @param {string} rune */
 	'invalid-rune-usage': (rune) => `Cannot use ${rune} rune in non-runes mode`,
-	/** @param {string} rune */
-	'invalid-rune-export': (rune) => `Cannot export value created with ${rune}`,
+	'invalid-state-export': () => `Cannot export state if it is reassigned`,
+	'invalid-derived-export': () => `Cannot export derived state`,
 	'invalid-props-id': () => `$props() can only be used with an object destructuring pattern`,
 	'invalid-props-pattern': () =>
 		`$props() assignment must not contain nested properties or computed keys`,

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

@@ -183,7 +183,7 @@ function get_delegated_event(node, context) {
 					// or any normal not reactive bindings that are mutated.
 					binding.kind === 'normal' ||
 					// or any reactive imports (those are rewritten) (can only happen in legacy mode)
-					(binding.kind === 'state' && binding.declaration_kind === 'import')) &&
+					binding.kind === 'legacy_reactive_import') &&
 					binding.mutated))
 		) {
 			return non_hoistable;
@@ -221,20 +221,13 @@ export function analyze_module(ast, options) {
 		merge(set_scope(scopes), validation_runes_js, runes_scope_js_tweaker)
 	);
 
-	// If we are in runes mode, then check for possible misuses of state runes
-	for (const [, scope] of scopes) {
-		for (const [name, binding] of scope.declarations) {
-			if (binding.kind === 'state' && !binding.mutated) {
-				warn(warnings, binding.node, [], 'state-not-mutated', name);
-			}
-		}
-	}
-
 	return {
 		module: { ast, scope, scopes },
 		name: options.filename || 'module',
 		warnings,
-		accessors: false
+		accessors: false,
+		runes: true,
+		immutable: true
 	};
 }
 
@@ -315,6 +308,10 @@ export function analyze_component(root, options) {
 
 	const component_name = get_component_name(options.filename ?? 'Component');
 
+	const runes =
+		options.runes ??
+		Array.from(module.scope.references).some(([name]) => Runes.includes(/** @type {any} */ (name)));
+
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
 	/** @type {import('../types.js').ComponentAnalysis} */
 	const analysis = {
@@ -331,11 +328,8 @@ export function analyze_component(root, options) {
 			component_name,
 			get_css_hash: options.cssHash
 		}),
-		runes:
-			options.runes ??
-			Array.from(module.scope.references).some(([name]) =>
-				Runes.includes(/** @type {any} */ (name))
-			),
+		runes,
+		immutable: runes || options.immutable,
 		exports: [],
 		uses_props: false,
 		uses_rest_props: false,
@@ -382,15 +376,6 @@ export function analyze_component(root, options) {
 				merge(set_scope(scopes), validation_runes, runes_scope_tweaker, common_visitors)
 			);
 		}
-
-		// If we are in runes mode, then check for possible misuses of state runes
-		for (const [, scope] of instance.scopes) {
-			for (const [name, binding] of scope.declarations) {
-				if (binding.kind === 'state' && !binding.mutated) {
-					warn(warnings, binding.node, [], 'state-not-mutated', name);
-				}
-			}
-		}
 	} else {
 		instance.scope.declare(b.id('$$props'), 'prop', 'synthetic');
 		instance.scope.declare(b.id('$$restProps'), 'rest_prop', 'synthetic');
@@ -553,7 +538,7 @@ const legacy_scope_tweaker = {
 						(state.reactive_statement || state.ast_type === 'template') &&
 						parent.type === 'MemberExpression'
 					) {
-						binding.kind = 'state';
+						binding.kind = 'legacy_reactive_import';
 					}
 				} else if (
 					binding.mutated &&

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

@@ -649,8 +649,14 @@ export const validation_legacy = merge(validation, a11y_validators, {
  */
 function validate_export(node, scope, name) {
 	const binding = scope.get(name);
-	if (binding && (binding.kind === 'derived' || binding.kind === 'state')) {
-		error(node, 'invalid-rune-export', `$${binding.kind}`);
+	if (!binding) return;
+
+	if (binding.kind === 'derived') {
+		error(node, 'invalid-derived-export');
+	}
+
+	if (binding.kind === 'state' && binding.reassigned) {
+		error(node, 'invalid-state-export');
 	}
 }
 

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

@@ -159,7 +159,7 @@ export function client_component(source, analysis, options) {
 	// Very very dirty way of making import statements reactive in legacy mode if needed
 	if (!analysis.runes) {
 		for (const [name, binding] of analysis.module.scope.declarations) {
-			if (binding.kind === 'state' && binding.declaration_kind === 'import') {
+			if (binding.kind === 'legacy_reactive_import') {
 				instance.body.unshift(
 					b.var('$$_import_' + name, b.call('$.reactive_import', b.thunk(b.id(name))))
 				);
@@ -175,7 +175,7 @@ export function client_component(source, analysis, options) {
 
 	for (const [name, binding] of analysis.instance.scope.declarations) {
 		if (binding.kind === 'legacy_reactive') {
-			legacy_reactive_declarations.push(b.const(name, b.call('$.source')));
+			legacy_reactive_declarations.push(b.const(name, b.call('$.mutable_source')));
 		}
 		if (binding.kind === 'store_sub') {
 			if (store_setup.length === 0) {
@@ -240,11 +240,12 @@ export function client_component(source, analysis, options) {
 
 	const properties = analysis.exports.map(({ name, alias }) => {
 		const binding = analysis.instance.scope.get(name);
+		const is_source =
+			binding?.kind === 'state' && (!state.analysis.immutable || binding.reassigned);
+
 		// TODO This is always a getter because the `renamed-instance-exports` test wants it that way.
 		// Should we for code size reasons make it an init in runes mode and/or non-dev mode?
-		return b.get(alias ?? name, [
-			b.return(binding?.kind === 'state' ? b.call('$.get', b.id(name)) : b.id(name))
-		]);
+		return b.get(alias ?? name, [b.return(is_source ? b.call('$.get', b.id(name)) : b.id(name))]);
 	});
 
 	if (analysis.accessors) {
@@ -261,14 +262,7 @@ export function client_component(source, analysis, options) {
 	}
 
 	const component_block = b.block([
-		b.stmt(
-			b.call(
-				'$.push',
-				b.id('$$props'),
-				b.literal(analysis.runes),
-				...(options.immutable ? [b.literal(true)] : [])
-			)
-		),
+		b.stmt(b.call('$.push', b.id('$$props'), b.literal(analysis.runes))),
 		...store_setup,
 		...legacy_reactive_declarations,
 		...group_binding_declarations,

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

@@ -1,5 +1,5 @@
 import * as b from '../../../utils/builders.js';
-import { extract_paths } from '../../../utils/ast.js';
+import { extract_paths, is_simple_expression } from '../../../utils/ast.js';
 import { error } from '../../../errors.js';
 
 /**
@@ -67,19 +67,20 @@ export function serialize_get_binding(node, state) {
 
 	if (
 		binding.kind === 'prop' &&
-		!binding.mutated &&
+		!(state.analysis.immutable ? binding.reassigned : binding.mutated) &&
 		!binding.initial &&
 		!state.analysis.accessors
 	) {
 		return b.call(node);
 	}
 
-	if (binding.kind === 'state' && binding.declaration_kind === 'import') {
+	if (binding.kind === 'legacy_reactive_import') {
 		return b.call('$$_import_' + node.name);
 	}
 
 	if (
-		binding.kind === 'state' ||
+		(binding.kind === 'state' &&
+			(!state.analysis.immutable || state.analysis.accessors || binding.reassigned)) ||
 		binding.kind === 'derived' ||
 		binding.kind === 'prop' ||
 		binding.kind === 'rest_prop' ||
@@ -99,7 +100,7 @@ export function serialize_get_binding(node, state) {
  * @returns {import('estree').Expression}
  */
 export function serialize_set_binding(node, context, fallback) {
-	const { state, visit, path } = context;
+	const { state, visit } = context;
 
 	if (
 		node.left.type === 'ArrayPattern' ||
@@ -152,7 +153,11 @@ export function serialize_set_binding(node, context, fallback) {
 		if (left.object.type === 'ThisExpression' && left.property.type === 'PrivateIdentifier') {
 			if (context.state.private_state.has(left.property.name) && !state.in_constructor) {
 				const value = get_assignment_value(node, context);
-				return b.call('$.set', left, value);
+				return b.call(
+					'$.set',
+					left,
+					context.state.analysis.runes && should_proxy(value) ? b.call('$.proxy', value) : value
+				);
 			}
 		}
 		// @ts-expect-error
@@ -171,7 +176,7 @@ export function serialize_set_binding(node, context, fallback) {
 		return binding.mutation(node, context);
 	}
 
-	if (binding.kind === 'state' && binding.declaration_kind === 'import') {
+	if (binding.kind === 'legacy_reactive_import') {
 		return b.call(
 			'$$_import_' + binding.node.name,
 			b.assignment(
@@ -202,7 +207,11 @@ export function serialize_set_binding(node, context, fallback) {
 			if (is_store) {
 				return b.call('$.store_set', serialize_get_binding(b.id(left_name), state), value);
 			} else {
-				return b.call('$.set', b.id(left_name), value);
+				return b.call(
+					'$.set',
+					b.id(left_name),
+					context.state.analysis.runes && should_proxy(value) ? b.call('$.proxy', value) : value
+				);
 			}
 		} else {
 			if (is_store) {
@@ -216,7 +225,7 @@ export function serialize_set_binding(node, context, fallback) {
 					),
 					b.call('$' + left_name)
 				);
-			} else {
+			} else if (!state.analysis.runes) {
 				return b.call(
 					'$.mutate',
 					b.id(left_name),
@@ -226,6 +235,12 @@ export function serialize_set_binding(node, context, fallback) {
 						value
 					)
 				);
+			} else {
+				return b.assignment(
+					node.operator,
+					/** @type {import('estree').Pattern} */ (visit(node.left)),
+					/** @type {import('estree').Expression} */ (visit(node.right))
+				);
 			}
 		}
 	};
@@ -335,24 +350,38 @@ export function get_props_method(binding, state, name, default_value) {
 	/** @type {import('estree').Expression[]} */
 	const args = [b.id('$$props'), b.literal(name)];
 
+	// Use $.prop_source in the following cases:
+	// - accessors/mutated: needs to be able to set the prop value from within
+	// - default value: we set the fallback value only initially, and it's not possible to know this timing in $.prop
+	const needs_source =
+		default_value ||
+		state.analysis.accessors ||
+		(state.analysis.immutable ? binding.reassigned : binding.mutated);
+
+	if (needs_source) {
+		args.push(b.literal(state.analysis.immutable));
+	}
+
 	if (default_value) {
 		// To avoid eagerly evaluating the right-hand-side, we wrap it in a thunk if necessary
-		if (default_value.type !== 'Literal' && default_value.type !== 'Identifier') {
-			args.push(b.thunk(default_value));
-			args.push(b.true);
-		} else {
+		if (is_simple_expression(default_value)) {
 			args.push(default_value);
-			args.push(b.false);
+		} else {
+			if (
+				default_value.type === 'CallExpression' &&
+				default_value.callee.type === 'Identifier' &&
+				default_value.arguments.length === 0
+			) {
+				args.push(default_value.callee);
+			} else {
+				args.push(b.thunk(default_value));
+			}
+
+			args.push(b.true);
 		}
 	}
 
-	return b.call(
-		// Use $.prop_source in the following cases:
-		// - accessors/mutated: needs to be able to set the prop value from within
-		// - default value: we set the fallback value only initially, and it's not possible to know this timing in $.prop
-		binding.mutated || binding.initial || state.analysis.accessors ? '$.prop_source' : '$.prop',
-		...args
-	);
+	return b.call(needs_source ? '$.prop_source' : '$.prop', ...args);
 }
 
 /**
@@ -364,7 +393,7 @@ export function get_props_method(binding, state, name, default_value) {
 export function create_state_declarators(declarator, scope, value) {
 	// in the simple `let count = $state(0)` case, we rewrite `$state` as `$.source`
 	if (declarator.id.type === 'Identifier') {
-		return [b.declarator(declarator.id, b.call('$.source', value))];
+		return [b.declarator(declarator.id, b.call('$.mutable_source', value))];
 	}
 
 	const tmp = scope.generate('tmp');
@@ -374,7 +403,25 @@ export function create_state_declarators(declarator, scope, value) {
 		...paths.map((path) => {
 			const value = path.expression?.(b.id(tmp));
 			const binding = scope.get(/** @type {import('estree').Identifier} */ (path.node).name);
-			return b.declarator(path.node, binding?.kind === 'state' ? b.call('$.source', value) : value);
+			return b.declarator(
+				path.node,
+				binding?.kind === 'state' ? b.call('$.mutable_source', value) : value
+			);
 		})
 	];
 }
+
+/** @param {import('estree').Expression} node */
+export function should_proxy(node) {
+	if (
+		!node ||
+		node.type === 'Literal' ||
+		node.type === 'ArrowFunctionExpression' ||
+		node.type === 'FunctionExpression' ||
+		(node.type === 'Identifier' && node.name === 'undefined')
+	) {
+		return false;
+	}
+
+	return true;
+}

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

@@ -2,7 +2,7 @@ import { get_rune } from '../../../scope.js';
 import { is_hoistable_function } from '../../utils.js';
 import * as b from '../../../../utils/builders.js';
 import * as assert from '../../../../utils/assert.js';
-import { create_state_declarators, get_props_method } from '../utils.js';
+import { create_state_declarators, get_props_method, should_proxy } from '../utils.js';
 import { unwrap_ts_expression } from '../../../../utils/ast.js';
 
 /** @type {import('../types.js').ComponentVisitors} */
@@ -84,7 +84,7 @@ export const javascript_visitors_runes = {
 
 						value =
 							field.kind === 'state'
-								? b.call('$.source', init)
+								? b.call('$.source', should_proxy(init) ? b.call('$.proxy', init) : init)
 								: b.call('$.derived', b.thunk(init));
 					} else {
 						// if no arguments, we know it's state as `$derived()` is a compile error
@@ -211,16 +211,28 @@ export const javascript_visitors_runes = {
 			}
 
 			const args = /** @type {import('estree').CallExpression} */ (init).arguments;
-			const value =
+			let value =
 				args.length === 0
 					? b.id('undefined')
 					: /** @type {import('estree').Expression} */ (visit(args[0]));
-			const opts = args[1] && /** @type {import('estree').Expression} */ (visit(args[1]));
 
 			if (declarator.id.type === 'Identifier') {
-				const callee = rune === '$state' ? '$.source' : '$.derived';
-				const arg = rune === '$state' ? value : b.thunk(value);
-				declarations.push(b.declarator(declarator.id, b.call(callee, arg, opts)));
+				if (rune === '$state') {
+					const binding = /** @type {import('#compiler').Binding} */ (
+						state.scope.get(declarator.id.name)
+					);
+					if (should_proxy(value)) {
+						value = b.call('$.proxy', value);
+					}
+
+					if (!state.analysis.immutable || state.analysis.accessors || binding.reassigned) {
+						value = b.call('$.source', value);
+					}
+				} else {
+					value = b.call('$.derived', b.thunk(value));
+				}
+
+				declarations.push(b.declarator(declarator.id, value));
 				continue;
 			}