From 3bb1af9677ad145a5a048311090b3bada54aef12 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Tue, 13 May 2025 03:05:15 +0300
Subject: [PATCH] fix: proxify the value in assignment shorthands to the
 private field (#15862)

Co-authored-by: 7nik <kifiranet@gmail.com>
---
 .changeset/shaggy-toys-arrive.md              |  5 ++++
 packages/svelte/src/compiler/utils/ast.js     |  4 ++-
 .../_config.js                                | 20 +++++++++++++
 .../main.svelte                               | 28 +++++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shaggy-toys-arrive.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte

diff --git a/.changeset/shaggy-toys-arrive.md b/.changeset/shaggy-toys-arrive.md
new file mode 100644
index 0000000000..440fa042c9
--- /dev/null
+++ b/.changeset/shaggy-toys-arrive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: proxify the value in assignment shorthands to the private field
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 108f4eff64..23a95a1026 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -580,5 +580,7 @@ export function build_assignment_value(operator, left, right) {
 	return operator === '='
 		? right
 		: // turn something like x += 1 into x = x + 1
-			b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
+			['||=', '&&=', '??='].includes(operator)
+			? b.logical(/** @type {ESTree.LogicalOperator} */ (operator.slice(0, -1)), left, right)
+			: b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
new file mode 100644
index 0000000000..0fdeabfe0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>inc</button>
+			<p>a:1</p>
+			<p>b:2</p>
+			<p>c:3</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
new file mode 100644
index 0000000000..746f22b1e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#a = $state();
+		#b = $state({ val: -1 });
+		#c = $state();
+		constructor() {
+			this.#a ||= {val: 0}
+			this.#b &&= {val: 0}
+			this.#c ??= {val: 0}
+		}
+		inc() {
+			this.#a.val += 1;
+			this.#b.val += 2;
+			this.#c.val += 3;
+		}
+		get a() { return this.#a?.val; }
+		get b() { return this.#b?.val; }
+		get c() { return this.#c?.val; }
+	}
+
+	let counter = new Counter();
+</script>
+
+<button onclick={() => counter.inc()}>inc</button>
+<!-- prevent updating outputs in a common effect -->
+{#key 1}<p>a:{counter.a}</p>{/key}
+{#key 2}<p>b:{counter.b}</p>{/key}
+{#key 3}<p>c:{counter.c}</p>{/key}