bind this in bubbled events (#6417)

src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts

@@ -20,7 +20,7 @@ export default class EventHandlerWrapper {
 
 			this.parent.renderer.component.partly_hoisted.push(b`
 				function ${node.handler_name.name}(event) {
-					@bubble($$self, event);
+					@bubble.call(this, $$self, event);
 				}
 			`);
 		}

src/runtime/internal/lifecycle.ts

@@ -65,6 +65,7 @@ export function bubble(component, event) {
 	const callbacks = component.$$.callbacks[event.type];
 
 	if (callbacks) {
-		callbacks.slice().forEach(fn => fn(event));
+		// @ts-ignore
+		callbacks.slice().forEach(fn => fn.call(this, event));
 	}
 }

test/runtime/samples/component-events-this/Inner.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+</script>
+
+<button on:click={() => dispatch('bar')} />

test/runtime/samples/component-events-this/Widget.svelte

@@ -0,0 +1,6 @@
+<script>
+  import Inner from './Inner.svelte';
+</script>
+
+<button on:click>click me</button>
+<Inner on:bar />

test/runtime/samples/component-events-this/_config.js

@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component, target, window }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.dispatchEvent(new window.MouseEvent('click'));
+		button2.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.strictEqual(component.logs[0], button1);
+		assert.ok(component.logs[1] instanceof component.Inner);
+	}
+};

test/runtime/samples/component-events-this/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Widget from './Widget.svelte';
+	import Inner from './Inner.svelte';
+
+	export let logs = [];
+	export { Inner };
+
+	function foo() {
+		logs.push(this);
+	}
+	function bar() {
+		logs.push(this);
+	}
+</script>
+
+<Widget on:click={foo} on:bar={bar} />