fix: make $state component exports settable

fixes #11983

Author: dummdidumm

.changeset/tidy-lizards-happen.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make `$state` component exports settable

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

@@ -198,14 +198,38 @@ export function client_component(source, analysis, options) {
 	}
 
 	/** @type {Array<ESTree.Property | ESTree.SpreadElement>} */
-	const component_returned_object = analysis.exports.map(({ name, alias }) => {
+	const component_returned_object = analysis.exports.flatMap(({ name, alias }) => {
+		const binding = instance_state.scope.get(name);
 		const expression = serialize_get_binding(b.id(name), instance_state);
+		const getter = b.get(alias ?? name, [b.return(expression)]);
+
+		if (expression.type === 'Identifier') {
+			if (binding?.declaration_kind === 'let' || binding?.declaration_kind === 'var') {
+				return [
+					getter,
+					b.set(alias ?? name, [b.stmt(b.assignment('=', expression, b.id('$$value')))])
+				];
+			} else if (!options.dev) {
+				return b.init(alias ?? name, expression);
+			}
+		}
 
-		if (expression.type === 'Identifier' && !options.dev) {
-			return b.init(alias ?? name, expression);
+		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'))
+						)
+					)
+				])
+			];
 		}
 
-		return b.get(alias ?? name, [b.return(expression)]);
+		return getter;
 	});
 
 	const properties = [...analysis.instance.scope.declarations].filter(

packages/svelte/tests/runtime-runes/samples/exports-3/_config.js

@@ -3,11 +3,24 @@ import { test } from '../../test';
 
 export default test({
 	test({ assert, target }) {
-		assert.htmlEqual(target.innerHTML, `0 0 <button>0 / 0</button>`);
-		const [btn] = target.querySelectorAll('button');
+		assert.htmlEqual(
+			target.innerHTML,
+			`0 0 <button>0 / 0</button> <button>assign directly</button>`
+		);
+		const [btn1, btn2] = target.querySelectorAll('button');
 
-		btn?.click();
+		btn1.click();
 		flushSync();
-		assert.htmlEqual(target.innerHTML, '1 2 <button>1 / 2</button>');
+		assert.htmlEqual(
+			target.innerHTML,
+			'1 2 <button>1 / 2</button> <button>assign directly</button>'
+		);
+
+		btn2.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			'2 4 <button>2 / 4</button> <button>assign directly</button>'
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/exports-3/main.svelte

@@ -1,7 +1,8 @@
 <script>
-	import Sub from './sub.svelte'
+	import Sub from './sub.svelte';
 	let sub = $state();
 </script>
 
 <Sub bind:this={sub} />
 <button on:click={() => sub.increment()}>{sub?.count} / {sub?.doubled}</button>
+<button on:click={() => sub.count++}>assign directly</button>