From 32ca324788f75160ac95a6a204ee90e7d9826906 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 13 Aug 2020 02:53:18 +0800
Subject: [PATCH] do not declare variable for member assignment in reactive
 declaration in SSR (#5251)

---
 CHANGELOG.md                                  |  4 ++
 src/compiler/compile/render_ssr/index.ts      | 39 ++++++-------------
 .../reactive-value-assign-property/_config.js |  5 +++
 .../main.svelte                               |  6 +++
 4 files changed, 26 insertions(+), 28 deletions(-)
 create mode 100644 test/runtime/samples/reactive-value-assign-property/_config.js
 create mode 100644 test/runtime/samples/reactive-value-assign-property/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2863bf73eb99..fd590c71aaf5 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
index c87fe3bdd92b..a72b8b35aec1 100644
--- a/src/compiler/compile/render_ssr/index.ts
+++ b/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, ExpressionStatement, AssignmentExpression, Node } from 'estree';
+import { LabeledStatement, Statement, 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) {
-			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
+		if (!d.declaration) { // 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};`;
diff --git a/test/runtime/samples/reactive-value-assign-property/_config.js b/test/runtime/samples/reactive-value-assign-property/_config.js
new file mode 100644
index 000000000000..7b6c1d296559
--- /dev/null
+++ b/test/runtime/samples/reactive-value-assign-property/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>Hello world!</h1>
+	`,
+};
diff --git a/test/runtime/samples/reactive-value-assign-property/main.svelte b/test/runtime/samples/reactive-value-assign-property/main.svelte
new file mode 100644
index 000000000000..58e0fdb03c39
--- /dev/null
+++ b/test/runtime/samples/reactive-value-assign-property/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	$: user = {};
+	$: user.name = 'world';
+</script>
+
+<h1>Hello {user.name}!</h1>
\ No newline at end of file