fix: improve state store mutation compiler output (#10561)

.changeset/witty-years-crash.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve state store mutation compiler output

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

@@ -431,7 +431,7 @@ export function serialize_set_binding(node, context, fallback, options) {
 						return {
 							...node,
 							object: visit_node(/** @type {import("estree").Expression} */ (node.object)),
-							property: /** @type {import("estree").Expression} */ (visit(node.property))
+							property: /** @type {import("estree").MemberExpression} */ (visit(node)).property
 						};
 					}
 					if (node.type === 'Identifier') {

packages/svelte/tests/runtime-runes/samples/state-store-props/Component.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let { data } = $props();
+	let form = writable(data.form);
+
+	function addTag() {
+		$form.data.tags['third'] = 3;
+	}
+</script>
+
+<pre>{JSON.stringify($form, null, 2)}</pre>
+
+<button on:click={addTag}>add</button>

packages/svelte/tests/runtime-runes/samples/state-store-props/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from '../../../../src/main/main-client';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<pre>{\n"data": { "tags": { "first": 1, "second": 2, "third": 3 } } }</pre><button>add</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-store-props/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Page from './Component.svelte';
+
+	let data = $state({ form: { data: { tags: { first: 1, second: 2 }}}});
+</script>
+<Page {data} />