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>