From d600b35c1c8a573e83dd32188867190078e8beac Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Tue, 24 Dec 2019 17:49:54 +0800
Subject: [PATCH] fix dynamic event handler for bind variables

---
 src/compiler/compile/nodes/EventHandler.ts    | 25 +++++++++++++++----
 .../Nested.svelte                             |  7 ++++++
 .../_config.js                                | 20 +++++++++++++++
 .../main.svelte                               |  8 ++++++
 4 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/main.svelte

diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts
index bee10be659f8..4242c82394c4 100644
--- a/src/compiler/compile/nodes/EventHandler.ts
+++ b/src/compiler/compile/nodes/EventHandler.ts
@@ -12,7 +12,6 @@ export default class EventHandler extends Node {
 	handler_name: Identifier;
 	uses_context = false;
 	can_make_passive = false;
-	reassigned?: boolean;
 
 	constructor(component: Component, parent, template_scope, info) {
 		super(component, parent, template_scope, info);
@@ -41,14 +40,30 @@ export default class EventHandler extends Node {
 					if (node && (node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration' || node.type === 'ArrowFunctionExpression') && node.params.length === 0) {
 						this.can_make_passive = true;
 					}
-
-					this.reassigned = component.var_lookup.get(info.expression.name).reassigned;
 				}
-			} else if (this.expression.dynamic_dependencies().length > 0) {
-				this.reassigned = true;
 			}
 		} else {
 			this.handler_name = component.get_unique_name(`${sanitize(this.name)}_handler`);
 		}
 	}
+
+	get reassigned(): boolean {
+		if (!this.expression) {
+			return false;
+		}
+		const node = this.expression.node;
+
+		if (node.type === 'Identifier') {
+			return (
+				this.component.node_for_declaration.get(node.name) &&
+				this.component.var_lookup.get(node.name).reassigned
+			);
+		}
+
+		if (/FunctionExpression/.test(node.type)) {
+			return false;
+		}
+
+		return this.expression.dynamic_dependencies().length > 0;
+	}
 }
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte b/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
new file mode 100644
index 000000000000..948fc308c0a3
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+  let text = 'Hello World';
+  export function updateText() {
+    text = 'Bye World';
+  }
+</script>
+{text}
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/_config.js b/test/runtime/samples/event-handler-dynamic-bound-var/_config.js
new file mode 100644
index 000000000000..c832127c092d
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<button>Click Me</button>
+		Hello World
+	`,
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Click Me</button>
+				Bye World
+			`
+		);
+	},
+};
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte b/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte
new file mode 100644
index 000000000000..bb7d9befc409
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	let nested;
+</script>
+
+<button on:click={nested && nested.updateText}>Click Me</button>
+
+<Nested bind:this={nested} />