fix event handler context

src/compile/nodes/EventHandler.ts

@@ -63,7 +63,7 @@ export default class EventHandler extends Node {
 		this.shouldHoist = !this.isCustomEvent && parent.hasAncestor('EachBlock');
 	}
 
-	render(component, block, hoisted) { // TODO hoist more event handlers
+	render(component, block, context, hoisted) { // TODO hoist more event handlers
 		if (this.insertionPoint === null) return; // TODO handle shorthand events here?
 
 		if (!validCalleeObjects.has(this.callee.name)) {
@@ -87,12 +87,12 @@ export default class EventHandler extends Node {
 
 		if (this.isCustomEvent) {
 			this.args.forEach(arg => {
-				arg.overwriteThis(this.parent.var);
+				arg.overwriteThis(context);
 			});
 
 			if (this.callee && this.callee.name === 'this') {
 				const node = this.callee.nodes[0];
-				component.code.overwrite(node.start, node.end, this.parent.var, {
+				component.code.overwrite(node.start, node.end, context, {
 					storeName: true,
 					contentOnly: true
 				});

src/compile/render-dom/wrappers/Element/index.ts

@@ -601,7 +601,7 @@ export default class ElementWrapper extends Wrapper {
 
 			if (handler.callee) {
 				// TODO move handler render method into a wrapper
-				handler.render(this.renderer.component, block, handler.shouldHoist);
+				handler.render(this.renderer.component, block, this.var, handler.shouldHoist);
 			}
 
 			const target = handler.shouldHoist ? 'this' : this.var;

src/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -290,7 +290,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 		this.node.handlers.forEach(handler => {
 			handler.var = block.getUniqueName(`${this.var}_${handler.name}`); // TODO this is hacky
-			handler.render(component, block, false); // TODO hoist when possible
+			handler.render(component, block, this.var, false); // TODO hoist when possible
 			if (handler.usesContext) block.maintainContext = true; // TODO is there a better place to put this?
 		});
 

src/compile/render-dom/wrappers/Window.ts

@@ -47,7 +47,7 @@ export default class WindowWrapper extends Wrapper {
 
 			let usesState = handler.dependencies.size > 0;
 
-			handler.render(component, block, false); // TODO hoist?
+			handler.render(component, block, 'window', false); // TODO hoist?
 
 			const handlerName = block.getUniqueName(`onwindow${handler.name}`);
 			const handlerBody = deindent`

src/compile/render-dom/wrappers/shared/EventHandler.ts

@@ -0,0 +1,62 @@
+import Renderer from '../../Renderer';
+import Block from '../../Block';
+import Wrapper from './Wrapper';
+import EventHandler from '../../../nodes/EventHandler';
+import validCalleeObjects from '../../../../utils/validCalleeObjects';
+
+export default class EventHandlerWrapper extends Wrapper {
+	node: EventHandler;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: EventHandler,
+		stripWhitespace: boolean,
+		nextSibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		const { renderer } = this;
+		const { component } = renderer;
+
+		const hoisted = this.node.shouldHoist;
+
+		if (this.node.insertionPoint === null) return; // TODO handle shorthand events here?
+
+		if (!validCalleeObjects.has(this.node.callee.name)) {
+			const component_name = hoisted ? `component` : block.alias(`component`);
+
+			// allow event.stopPropagation(), this.select() etc
+			// TODO verify that it's a valid callee (i.e. built-in or declared method)
+			if (this.node.callee.name[0] === '$' && !component.methods.has(this.node.callee.name)) {
+				component.code.overwrite(
+					this.node.insertionPoint,
+					this.node.insertionPoint + 1,
+					`${component_name}.store.`
+				);
+			} else {
+				component.code.prependRight(
+					this.node.insertionPoint,
+					`${component_name}.`
+				);
+			}
+		}
+
+		if (this.node.isCustomEvent) {
+			this.node.args.forEach(arg => {
+				arg.overwriteThis(this.parent.var);
+			});
+
+			if (this.node.callee && this.node.callee.name === 'this') {
+				const node = this.node.callee.nodes[0];
+				component.code.overwrite(node.start, node.end, this.parent.var, {
+					storeName: true,
+					contentOnly: true
+				});
+			}
+		}
+	}
+}