From 963f6e7aa6e48ef2761d67d82b58ac3a4dd27302 Mon Sep 17 00:00:00 2001
From: Emil Tholin <emtholin@gmail.com>
Date: Mon, 6 May 2019 22:41:51 +0200
Subject: [PATCH] Don't hoist functions dependent on injected reactive
 variables

---
 src/compile/Component.ts                          | 10 +++++-----
 .../reactive-value-function-hoist/_config.js      | 15 +++++++++++++++
 .../reactive-value-function-hoist/main.svelte     | 10 ++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 test/runtime/samples/reactive-value-function-hoist/_config.js
 create mode 100644 test/runtime/samples/reactive-value-function-hoist/main.svelte

diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 7d4aa72f03..5a31dcf501 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -920,7 +920,7 @@ export default class Component {
 		// reference instance variables other than other
 		// hoistable functions. TODO others?
 
-		const { hoistable_nodes, var_lookup } = this;
+		const { hoistable_nodes, var_lookup, injected_reactive_declaration_vars } = this;
 
 		const top_level_function_declarations = new Map();
 
@@ -987,11 +987,11 @@ export default class Component {
 						const { name } = flatten_reference(node);
 						const owner = scope.find_owner(name);
 
-						if (name[0] === '$' && !owner) {
+						if (node.type === 'Identifier' && injected_reactive_declaration_vars.has(name)) {
 							hoistable = false;
-						}
-
-						else if (owner === instance_scope) {
+						} else if (name[0] === '$' && !owner) {
+							hoistable = false;
+						} else if (owner === instance_scope) {
 							if (name === fn_declaration.id.name) return;
 
 							const variable = var_lookup.get(name);
diff --git a/test/runtime/samples/reactive-value-function-hoist/_config.js b/test/runtime/samples/reactive-value-function-hoist/_config.js
new file mode 100644
index 0000000000..6198a57ef6
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>Click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>4</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-value-function-hoist/main.svelte b/test/runtime/samples/reactive-value-function-hoist/main.svelte
new file mode 100644
index 0000000000..0f2dadb561
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let num = 2;
+	$: square = num * num;
+
+	function onClick() {
+		this.innerHTML = square;
+	}
+</script>
+
+<button on:click={onClick}>Click me</button>