fix: ensure $state proxy invokes set accessor if present (#12503)

.changeset/shiny-starfishes-cross.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure $state proxy invokes set accessor if present

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

@@ -243,9 +243,14 @@ const state_proxy_handler = {
 			}
 		}
 
+		var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
 		// Set the new value before updating any signals so that any listeners get the new value
-		// @ts-ignore
+		if (descriptor?.set) {
-		target[prop] = value;
+			descriptor.set.call(receiver, value);
+		} else {
+			target[prop] = value;
+		}
 
 		if (not_has) {
 			// If we have mutated an array directly, we might need to

packages/svelte/tests/runtime-runes/samples/proxy-set-accessor/_config.js

@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test, ok } from '../../test';
+
+export default test({
+	html: `<input><p>svelte</p>`,
+	ssrHtml: `<input value="SVELTE"><p>svelte</p>`,
+
+	test({ assert, target }) {
+		const input = target.querySelector('input');
+		ok(input);
+
+		const event = new window.Event('input');
+
+		input.value = 'SVELTEy';
+		input.dispatchEvent(event);
+
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<input><p>sveltey</p>`);
+		assert.equal(input.value, 'SVELTEY');
+	}
+});

packages/svelte/tests/runtime-runes/samples/proxy-set-accessor/main.svelte

@@ -0,0 +1,14 @@
+<script>
+  let text = $state({
+    value: 'svelte',
+    get uppercase() {
+      return this.value.toUpperCase()
+    },
+    set uppercase(v) {
+      this.value = v.toLowerCase()
+    }
+  })
+</script>
+
+<input bind:value={text.uppercase} />
+<p>{text.value}</p>