From 02f5efd9e7ed99ae5873a00f7a0c32966ec0353d Mon Sep 17 00:00:00 2001
From: Peter Maatman <peter.maatman@rentman.nl>
Date: Fri, 4 Oct 2019 14:36:04 +0200
Subject: [PATCH] fix compound assignment dependencies in reactive statements
 (#3634)

---
 src/compiler/compile/Component.ts             |  8 ++++-
 .../reactive-compound-operator/_config.js     | 27 +++++++++++++++++
 .../reactive-compound-operator/main.svelte    |  8 +++++
 .../reactive-update-expression/_config.js     | 29 +++++++++++++++++++
 .../reactive-update-expression/main.svelte    | 12 ++++++++
 5 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/reactive-compound-operator/_config.js
 create mode 100644 test/runtime/samples/reactive-compound-operator/main.svelte
 create mode 100644 test/runtime/samples/reactive-update-expression/_config.js
 create mode 100644 test/runtime/samples/reactive-update-expression/main.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index fa8665ffde..423186e4f3 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1265,10 +1265,16 @@ export default class Component {
 						}
 
 						if (node.type === 'AssignmentExpression') {
-							extract_identifiers(get_object(node.left)).forEach(node => {
+							const left = get_object(node.left);
+
+							extract_identifiers(left).forEach(node => {
 								assignee_nodes.add(node);
 								assignees.add(node.name);
 							});
+
+							if (node.operator !== '=') {
+								dependencies.add(left.name);
+							}
 						} else if (node.type === 'UpdateExpression') {
 							const identifier = get_object(node.argument);
 							assignees.add(identifier.name);
diff --git a/test/runtime/samples/reactive-compound-operator/_config.js b/test/runtime/samples/reactive-compound-operator/_config.js
new file mode 100644
index 0000000000..dd59fbbf0a
--- /dev/null
+++ b/test/runtime/samples/reactive-compound-operator/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>+1</button>
+		<p>count: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 2);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 2</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 6);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 6</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-compound-operator/main.svelte b/test/runtime/samples/reactive-compound-operator/main.svelte
new file mode 100644
index 0000000000..52654aed59
--- /dev/null
+++ b/test/runtime/samples/reactive-compound-operator/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let x = 0;
+
+	$: x *= 2;
+</script>
+
+<button on:click='{() => x += 1}'>+1</button>
+<p>count: {x}</p>
diff --git a/test/runtime/samples/reactive-update-expression/_config.js b/test/runtime/samples/reactive-update-expression/_config.js
new file mode 100644
index 0000000000..111460f7dd
--- /dev/null
+++ b/test/runtime/samples/reactive-update-expression/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+	<button>+1</button>
+	<p>count: 1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		assert.equal(component.x, 1);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 3);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 3</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 5);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 5</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-update-expression/main.svelte b/test/runtime/samples/reactive-update-expression/main.svelte
new file mode 100644
index 0000000000..0e0b45ddd6
--- /dev/null
+++ b/test/runtime/samples/reactive-update-expression/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let x = 0;
+
+  $: x++;
+
+  function onClick() {
+    x += 1;
+  }
+</script>
+
+<button on:click='{() => x += 1}'>+1</button>
+<p>count: {x}</p>