Merge pull request #701 from sveltejs/gh-699

alias #component in hoisted event handlers

Author: Rich-Harris

src/generators/dom/visitors/Element/EventHandler.ts

@@ -45,7 +45,7 @@ export default function visitEventHandler(
 	const declarations = usedContexts.map(name => {
 		if (name === 'state') {
 			if (shouldHoist) state.usesComponent = true;
-			return `var state = #component.get();`;
+			return `var state = ${block.alias('component')}.get();`;
 		}
 
 		const listName = block.listNames.get(name);

test/runtime/samples/event-handler-hoisted/_config.js

@@ -0,0 +1,18 @@
+export default {
+	data: {
+		foo: [1],
+		a: 42
+	},
+
+	html: `
+		<button>click me</button>
+	`,
+
+	test (assert, component, target, window) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.equal(component.snapshot, 42);
+	}
+};

test/runtime/samples/event-handler-hoisted/main.html

@@ -0,0 +1,13 @@
+{{#each foo as bar}}
+	<button on:click='baz(a)'>click me</button>
+{{/each}}
+
+<script>
+	export default {
+		methods: {
+			baz(a) {
+				this.snapshot = a;
+			}
+		}
+	};
+</script>