fix: correctly transform reassignments to class fields in SSR mode (#16051)

* fix: correctly transform reassignments to class fields in SSR mode

* add test, fix more stuff

* fix

Author: Ocean-OS

.changeset/rude-drinks-relate.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly transform reassignments to class fields in SSR mode

packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js

@@ -24,7 +24,12 @@ export function AssignmentExpression(node, context) {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
-	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+	if (
+		context.state.analysis.runes &&
+		left.type === 'MemberExpression' &&
+		left.object.type === 'ThisExpression' &&
+		!left.computed
+	) {
 		const name = get_name(left.property);
 		const field = name && context.state.state_fields.get(name);
 
@@ -44,7 +49,11 @@ function build_assignment(operator, left, right, context) {
 					/** @type {Expression} */ (context.visit(right))
 				);
 			}
-		} else if (field && (field.type === '$derived' || field.type === '$derived.by')) {
+		} else if (
+			field &&
+			(field.type === '$derived' || field.type === '$derived.by') &&
+			left.property.type === 'PrivateIdentifier'
+		) {
 			let value = /** @type {Expression} */ (
 				context.visit(build_assignment_value(operator, left, right))
 			);

packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js

@@ -5,7 +5,7 @@ export default function Class_state_field_constructor_assignment($$anchor, $$pro
 	$.push($$props, true);
 
 	class Foo {
-		#a = $.state();
+		#a = $.state(0);
 
 		get a() {
 			return $.get(this.#a);
@@ -16,10 +16,31 @@ export default function Class_state_field_constructor_assignment($$anchor, $$pro
 		}
 
 		#b = $.state();
+		#foo = $.derived(() => ({ bar: this.a * 2 }));
+
+		get foo() {
+			return $.get(this.#foo);
+		}
+
+		set foo(value) {
+			$.set(this.#foo, value);
+		}
+
+		#bar = $.derived(() => ({ baz: this.foo }));
+
+		get bar() {
+			return $.get(this.#bar);
+		}
+
+		set bar(value) {
+			$.set(this.#bar, value);
+		}
 
 		constructor() {
 			this.a = 1;
 			$.set(this.#b, 2);
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 

packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js

@@ -4,12 +4,33 @@ export default function Class_state_field_constructor_assignment($$payload, $$pr
 	$.push();
 
 	class Foo {
-		a;
+		a = 0;
 		#b;
+		#foo = $.derived(() => ({ bar: this.a * 2 }));
+
+		get foo() {
+			return this.#foo();
+		}
+
+		set foo($$value) {
+			return this.#foo($$value);
+		}
+
+		#bar = $.derived(() => ({ baz: this.foo }));
+
+		get bar() {
+			return this.#bar();
+		}
+
+		set bar($$value) {
+			return this.#bar($$value);
+		}
 
 		constructor() {
 			this.a = 1;
 			this.#b = 2;
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 

packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte

@@ -1,11 +1,14 @@
 <script>
 	class Foo {
-		a = $state();
+		a = $state(0);
 		#b = $state();
-
+		foo = $derived({ bar: this.a * 2 });
+		bar = $derived({ baz: this.foo });
 		constructor() {
 			this.a = 1;
 			this.#b = 2;
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 </script>