From 0afb8d489e9902cf28ba07026fb5a4bba44ddacf Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:12:59 +0000
Subject: [PATCH] fix: improve state store mutation compiler output (#10561)

---
 .changeset/witty-years-crash.md                 |  5 +++++
 .../compiler/phases/3-transform/client/utils.js |  2 +-
 .../samples/state-store-props/Component.svelte  | 14 ++++++++++++++
 .../samples/state-store-props/_config.js        | 17 +++++++++++++++++
 .../samples/state-store-props/main.svelte       |  6 ++++++
 5 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/witty-years-crash.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-store-props/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-store-props/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-store-props/main.svelte

diff --git a/.changeset/witty-years-crash.md b/.changeset/witty-years-crash.md
new file mode 100644
index 0000000000..f92a5166e0
--- /dev/null
+++ b/.changeset/witty-years-crash.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve state store mutation compiler output
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 49e5bb1d2d..6723ed3da1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/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') {
diff --git a/packages/svelte/tests/runtime-runes/samples/state-store-props/Component.svelte b/packages/svelte/tests/runtime-runes/samples/state-store-props/Component.svelte
new file mode 100644
index 0000000000..c45c69c667
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-store-props/_config.js b/packages/svelte/tests/runtime-runes/samples/state-store-props/_config.js
new file mode 100644
index 0000000000..916aabc9a5
--- /dev/null
+++ b/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>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-store-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-store-props/main.svelte
new file mode 100644
index 0000000000..718816736b
--- /dev/null
+++ b/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} />