do not declare variable for member assignment in reactive declaration in SSR (#5251)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
+
 ## 3.24.1
 
 * Prevent duplicate invalidation with certain two-way component bindings ([#3180](https://github.com/sveltejs/svelte/issues/3180), [#5117](https://github.com/sveltejs/svelte/issues/5117), [#5144](https://github.com/sveltejs/svelte/issues/5144))

src/compiler/compile/render_ssr/index.ts

@@ -5,8 +5,7 @@ import { string_literal } from '../utils/stringify';
 import Renderer from './Renderer';
 import { INode as TemplateNode } from '../nodes/interfaces'; // TODO
 import Text from '../nodes/Text';
-import { extract_names } from '../utils/scope';
+import { LabeledStatement, Statement, Node } from 'estree';
-import { LabeledStatement, Statement, ExpressionStatement, AssignmentExpression, Node } from 'estree';
 
 export default function ssr(
 	component: Component,
@@ -72,37 +71,17 @@ export default function ssr(
 			})
 		: [];
 
+	const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => {
+		const variable = component.var_lookup.get(name);
+		return variable.injected;
+	});
+
 	const reactive_declarations = component.reactive_declarations.map(d => {
 		const body: Statement = (d.node as LabeledStatement).body;
 
 		let statement = b`${body}`;
 
-		if (d.declaration) {
+		if (!d.declaration) { // TODO do not add label if it's not referenced
-			const declared = extract_names(d.declaration);
-			const injected = declared.filter(name => {
-				return name[0] !== '$' && component.var_lookup.get(name).injected;
-			});
-
-			const self_dependencies = injected.filter(name => d.dependencies.has(name));
-
-			if (injected.length) {
-				// in some cases we need to do `let foo; [expression]`, in
-				// others we can do `let [expression]`
-				const separate = (
-					self_dependencies.length > 0 ||
-					declared.length > injected.length
-				);
-
-				const { left, right } = (body as ExpressionStatement).expression as AssignmentExpression;
-
-				statement = separate
-					? b`
-						${injected.map(name => b`let ${name};`)}
-						${statement}`
-					: b`
-						let ${left} = ${right}`;
-			}
-		} else { // TODO do not add label if it's not referenced
 			statement = b`$: { ${statement} }`;
 		}
 
@@ -119,6 +98,8 @@ export default function ssr(
 
 				${reactive_store_values}
 
+				${injected.map(name => b`let ${name};`)}
+
 				${reactive_declarations}
 
 				$$rendered = ${literal};
@@ -129,6 +110,8 @@ export default function ssr(
 		: b`
 			${reactive_store_values}
 
+			${injected.map(name => b`let ${name};`)}
+
 			${reactive_declarations}
 
 			return ${literal};`;

test/runtime/samples/reactive-value-assign-property/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>Hello world!</h1>
+	`,
+};

test/runtime/samples/reactive-value-assign-property/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	$: user = {};
+	$: user.name = 'world';
+</script>
+
+<h1>Hello {user.name}!</h1>