Merge pull request #3101 from sveltejs/gh-3044

always bail out of hoisting on encountering local state

Author: Rich-Harris

src/compiler/compile/Component.ts

@@ -1040,6 +1040,8 @@ export default class Component {
 
 			walk(fn_declaration, {
 				enter(node, parent) {
+					if (!hoistable) return this.skip();
+
 					if (map.has(node)) {
 						scope = map.get(node);
 					}
@@ -1048,7 +1050,7 @@ export default class Component {
 						const { name } = flatten_reference(node);
 						const owner = scope.find_owner(name);
 
-						if (node.type === 'Identifier' && injected_reactive_declaration_vars.has(name)) {
+						if (injected_reactive_declaration_vars.has(name)) {
 							hoistable = false;
 						} else if (name[0] === '$' && !owner) {
 							hoistable = false;

test/runtime/samples/reactive-value-function-hoist-b/_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>A,B,C</button>
+		`);
+	}
+};

test/runtime/samples/reactive-value-function-hoist-b/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let array = ['a', 'b', 'c'];
+	$: uppercase = array.map(str => str.toUpperCase());
+
+	function onClick() {
+		this.innerHTML = uppercase.join(',');
+	}
+</script>
+
+<button on:click={onClick}>Click me</button>