diff --git a/.changeset/rude-drinks-relate.md b/.changeset/rude-drinks-relate.md new file mode 100644 index 000000000000..d0eab6ba114c --- /dev/null +++ b/.changeset/rude-drinks-relate.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly transform reassignments to class fields in SSR mode diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js index 466682fb82b8..49a284d12bc9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js +++ b/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)) ); diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js index 21339741761f..c9725d6718dd 100644 --- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js +++ b/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; } } diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js index 2a115a498373..abfc264fea0a 100644 --- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js +++ b/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; } } diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte index a3ff5917e77f..127cfd4d2a7d 100644 --- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte +++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte @@ -1,11 +1,14 @@