From 105919e7bae5a65071e7d4180a4c27e3d6a9b60e Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Thu, 7 Nov 2019 00:39:03 +0800
Subject: [PATCH 1/3] feat dynamic event handler

---
 src/compiler/compile/nodes/EventHandler.ts    |  33 +-----
 src/compiler/compile/render_dom/Block.ts      |  14 +--
 .../compile/render_dom/wrappers/Body.ts       |  21 ++--
 .../wrappers/Element/EventHandler.ts          |  69 ++++++++++++
 .../render_dom/wrappers/Element/index.ts      |   6 +-
 .../wrappers/InlineComponent/index.ts         |   4 +-
 .../compile/render_dom/wrappers/Window.ts     |   5 +-
 .../wrappers/shared/add_event_handlers.ts     |  33 +-----
 .../samples/event-handler-dynamic/expected.js | 106 ++++++++++++++++++
 .../event-handler-dynamic/input.svelte        |  23 ++++
 .../Button.svelte                             |   1 +
 .../_config.js                                |  18 +++
 .../main.svelte                               |  11 ++
 .../Button.svelte                             |   1 +
 .../_config.js                                |  18 +++
 .../main.svelte                               |  11 ++
 .../samples/event-handler-dynamic/_config.js  |  50 +++++++++
 .../samples/event-handler-dynamic/main.svelte |  23 ++++
 18 files changed, 368 insertions(+), 79 deletions(-)
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
 create mode 100644 test/js/samples/event-handler-dynamic/expected.js
 create mode 100644 test/js/samples/event-handler-dynamic/input.svelte
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/Button.svelte
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic/main.svelte

diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts
index 7faf5d15dd..19da3d9dd7 100644
--- a/src/compiler/compile/nodes/EventHandler.ts
+++ b/src/compiler/compile/nodes/EventHandler.ts
@@ -1,8 +1,6 @@
 import Node from './shared/Node';
 import Expression from './shared/Expression';
 import Component from '../Component';
-import { b, x } from 'code-red';
-import Block from '../render_dom/Block';
 import { sanitize } from '../../utils/names';
 import { Identifier } from 'estree';
 
@@ -14,6 +12,7 @@ export default class EventHandler extends Node {
 	handler_name: Identifier;
 	uses_context = false;
 	can_make_passive = false;
+	reassigned?: boolean;
 
 	constructor(component: Component, parent, template_scope, info) {
 		super(component, parent, template_scope, info);
@@ -22,7 +21,7 @@ export default class EventHandler extends Node {
 		this.modifiers = new Set(info.modifiers);
 
 		if (info.expression) {
-			this.expression = new Expression(component, this, template_scope, info.expression, true);
+			this.expression = new Expression(component, this, template_scope, info.expression);
 			this.uses_context = this.expression.uses_context;
 
 			if (/FunctionExpression/.test(info.expression.type) && info.expression.params.length === 0) {
@@ -42,34 +41,12 @@ export default class EventHandler extends Node {
 					if (node && (node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration' || node.type === 'ArrowFunctionExpression') && node.params.length === 0) {
 						this.can_make_passive = true;
 					}
+
+					this.reassigned = component.var_lookup.get(info.expression.name).reassigned;
 				}
 			}
 		} else {
-			const id = component.get_unique_name(`${sanitize(this.name)}_handler`);
-
-			component.add_var({
-				name: id.name,
-				internal: true,
-				referenced: true
-			});
-
-			component.partly_hoisted.push(b`
-				function ${id}(event) {
-					@bubble($$self, event);
-				}
-			`);
-
-			this.handler_name = id;
+			this.handler_name = component.get_unique_name(`${sanitize(this.name)}_handler`);
 		}
 	}
-
-	// TODO move this? it is specific to render-dom
-	render(block: Block) {
-		if (this.expression) {
-			return this.expression.manipulate(block);
-		}
-
-		// this.component.add_reference(this.handler_name);
-		return x`#ctx.${this.handler_name}`;
-	}
 }
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 8f5740ecb4..49e40c3a4f 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -60,7 +60,7 @@ export default class Block {
 		destroy: Array<Node | Node[]>;
 	};
 
-	event_listeners: Node[] = [];
+	event_listeners: Array<Node> = [];
 
 	maintain_context: boolean;
 	has_animation: boolean;
@@ -203,13 +203,11 @@ export default class Block {
 	}
 
 	add_variable(id: Identifier, init?: Node) {
-		this.variables.forEach(v => {
-			if (v.id.name === id.name) {
-				throw new Error(
-					`Variable '${id.name}' already initialised with a different value`
-				);
-			}
-		});
+		if (this.variables.has(id.name)) {
+			throw new Error(
+				`Variable '${id.name}' already initialised with a different value`
+			);
+		}
 
 		this.variables.set(id.name, { id, init });
 	}
diff --git a/src/compiler/compile/render_dom/wrappers/Body.ts b/src/compiler/compile/render_dom/wrappers/Body.ts
index dc1f561b1f..e16ebc25bd 100644
--- a/src/compiler/compile/render_dom/wrappers/Body.ts
+++ b/src/compiler/compile/render_dom/wrappers/Body.ts
@@ -3,21 +3,24 @@ import Wrapper from './shared/Wrapper';
 import { b } from 'code-red';
 import Body from '../../nodes/Body';
 import { Identifier } from 'estree';
+import EventHandler from './Element/EventHandler';
 
 export default class BodyWrapper extends Wrapper {
 	node: Body;
 
 	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
-		this.node.handlers.forEach(handler => {
-			const snippet = handler.render(block);
+		this.node.handlers
+			.map(handler => new EventHandler(handler, this))
+			.forEach(handler => {
+				const snippet = handler.get_snippet(block);
 
-			block.chunks.init.push(b`
-				@_document.body.addEventListener("${handler.name}", ${snippet});
-			`);
+				block.chunks.init.push(b`
+					@_document.body.addEventListener("${handler.node.name}", ${snippet});
+				`);
 
-			block.chunks.destroy.push(b`
-				@_document.body.removeEventListener("${handler.name}", ${snippet});
-			`);
-		});
+				block.chunks.destroy.push(b`
+					@_document.body.removeEventListener("${handler.node.name}", ${snippet});
+				`);
+			});
 	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
new file mode 100644
index 0000000000..37089e7493
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
@@ -0,0 +1,69 @@
+import EventHandler from '../../../nodes/EventHandler';
+import Wrapper from '../shared/Wrapper';
+import Block from '../../Block';
+import { b, x, p } from 'code-red';
+
+const TRUE = x`true`;
+const FALSE = x`false`;
+
+export default class EventHandlerWrapper {
+	node: EventHandler;
+	parent: Wrapper;
+
+	constructor(node: EventHandler, parent: Wrapper) {
+		this.node = node;
+		this.parent = parent;
+
+		if (!node.expression) {
+			this.parent.renderer.component.add_var({
+				name: node.handler_name.name,
+				internal: true,
+				referenced: true,
+			});
+
+			this.parent.renderer.component.partly_hoisted.push(b`
+        function ${node.handler_name.name}(event) {
+          @bubble($$self, event);
+        }
+      `);
+		}
+	}
+
+  get_snippet(block) {
+		const snippet = this.node.expression ? this.node.expression.manipulate(block) : x`#ctx.${this.node.handler_name}`;
+
+		if (this.node.reassigned) {
+			block.maintain_context = true;
+			return x`function () { ${snippet}.apply(this, arguments); }`;
+		}
+		return snippet;
+  }
+
+	render(block: Block, target: string) {
+		let snippet = this.get_snippet(block);
+
+    if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
+		if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
+		if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`;
+    
+    const args = [];
+
+    const opts = ['passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod));
+		if (opts.length) {
+			args.push((opts.length === 1 && opts[0] === 'capture')
+				? TRUE
+				: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
+		} else if (block.renderer.options.dev) {
+			args.push(FALSE);
+		}
+
+		if (block.renderer.options.dev) {
+			args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
+			args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
+		}
+
+    block.event_listeners.push(
+			x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`
+		);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 033ef85ef4..9b7bbfef74 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -24,6 +24,7 @@ import bind_this from '../shared/bind_this';
 import { changed } from '../shared/changed';
 import { is_head } from '../shared/is_head';
 import { Identifier } from 'estree';
+import EventHandler from './EventHandler';
 
 const events = [
 	{
@@ -113,6 +114,7 @@ export default class ElementWrapper extends Wrapper {
 	fragment: FragmentWrapper;
 	attributes: AttributeWrapper[];
 	bindings: Binding[];
+	event_handlers: EventHandler[];
 	class_dependencies: string[];
 
 	slot_block: Block;
@@ -194,6 +196,8 @@ export default class ElementWrapper extends Wrapper {
 		// e.g. <audio bind:paused bind:currentTime>
 		this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
 
+		this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
+
 		if (node.intro || node.outro) {
 			if (node.intro) block.add_intro(node.intro.is_local);
 			if (node.outro) block.add_outro(node.outro.is_local);
@@ -643,7 +647,7 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	add_event_handlers(block: Block) {
-		add_event_handlers(block, this.var, this.node.handlers);
+		add_event_handlers(block, this.var, this.event_handlers);
 	}
 
 	add_transitions(
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index a9d989c92a..a3d1492281 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -16,6 +16,7 @@ import is_dynamic from '../shared/is_dynamic';
 import bind_this from '../shared/bind_this';
 import { changed } from '../shared/changed';
 import { Node, Identifier, ObjectExpression } from 'estree';
+import EventHandler from '../Element/EventHandler';
 
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
@@ -365,7 +366,8 @@ export default class InlineComponentWrapper extends Wrapper {
 		});
 
 		const munged_handlers = this.node.handlers.map(handler => {
-			let snippet = handler.render(block);
+			const event_handler = new EventHandler(handler, this);
+			let snippet = event_handler.get_snippet(block);
 			if (handler.modifiers.has('once')) snippet = x`@once(${snippet})`;
 
 			return b`${name}.$on("${handler.name}", ${snippet});`;
diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts
index b9a32c03fd..7594adee67 100644
--- a/src/compiler/compile/render_dom/wrappers/Window.ts
+++ b/src/compiler/compile/render_dom/wrappers/Window.ts
@@ -8,6 +8,7 @@ import add_actions from './shared/add_actions';
 import { changed } from './shared/changed';
 import { Identifier } from 'estree';
 import { TemplateNode } from '../../../interfaces';
+import EventHandler from './Element/EventHandler';
 
 const associated_events = {
 	innerWidth: 'resize',
@@ -34,9 +35,11 @@ const readonly = new Set([
 
 export default class WindowWrapper extends Wrapper {
 	node: Window;
+	handlers: EventHandler[];
 
 	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
 		super(renderer, block, parent, node);
+		this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
 	}
 
 	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
@@ -47,7 +50,7 @@ export default class WindowWrapper extends Wrapper {
 		const bindings: Record<string, string> = {};
 
 		add_actions(component, block, '@_window', this.node.actions);
-		add_event_handlers(block, '@_window', this.node.handlers);
+		add_event_handlers(block, '@_window', this.handlers);
 
 		this.node.bindings.forEach(binding => {
 			// in dev mode, throw if read-only values are written to
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts b/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
index 4ef4593c0a..ca4f5a24c7 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
@@ -1,39 +1,10 @@
 import Block from '../../Block';
-import EventHandler from '../../../nodes/EventHandler';
-import { x, p } from 'code-red';
-
-const TRUE = x`true`;
-const FALSE = x`false`;
+import EventHandler from '../Element/EventHandler';
 
 export default function add_event_handlers(
 	block: Block,
 	target: string,
 	handlers: EventHandler[]
 ) {
-	handlers.forEach(handler => {
-		let snippet = handler.render(block);
-		if (handler.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
-		if (handler.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
-		if (handler.modifiers.has('self')) snippet = x`@self(${snippet})`;
-
-		const args = [];
-
-		const opts = ['passive', 'once', 'capture'].filter(mod => handler.modifiers.has(mod));
-		if (opts.length) {
-			args.push((opts.length === 1 && opts[0] === 'capture')
-				? TRUE
-				: x`{ ${opts.map(opt => p`${opt}: true`)} }`);
-		} else if (block.renderer.options.dev) {
-			args.push(FALSE);
-		}
-
-		if (block.renderer.options.dev) {
-			args.push(handler.modifiers.has('stopPropagation') ? TRUE : FALSE);
-			args.push(handler.modifiers.has('preventDefault') ? TRUE : FALSE);
-		}
-
-		block.event_listeners.push(
-			x`@listen(${target}, "${handler.name}", ${snippet}, ${args})`
-		);
-	});
+	handlers.forEach(handler => handler.render(block, target));
 }
diff --git a/test/js/samples/event-handler-dynamic/expected.js b/test/js/samples/event-handler-dynamic/expected.js
new file mode 100644
index 0000000000..94f3c0667d
--- /dev/null
+++ b/test/js/samples/event-handler-dynamic/expected.js
@@ -0,0 +1,106 @@
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let p0;
+	let button0;
+	let t1;
+	let button1;
+	let t3;
+	let p1;
+	let t4;
+	let t5;
+	let button2;
+	let dispose;
+
+	return {
+		c() {
+			p0 = element("p");
+			button0 = element("button");
+			button0.textContent = "set handler 1";
+			t1 = space();
+			button1 = element("button");
+			button1.textContent = "set handler 2";
+			t3 = space();
+			p1 = element("p");
+			t4 = text(ctx.number);
+			t5 = space();
+			button2 = element("button");
+			button2.textContent = "click";
+
+			dispose = [
+				listen(button0, "click", ctx.updateHandler1),
+				listen(button1, "click", ctx.updateHandler2),
+				listen(button2, "click", function () {
+					ctx.clickHandler.apply(this, arguments);
+				})
+			];
+		},
+		m(target, anchor) {
+			insert(target, p0, anchor);
+			append(p0, button0);
+			append(p0, t1);
+			append(p0, button1);
+			insert(target, t3, anchor);
+			insert(target, p1, anchor);
+			append(p1, t4);
+			insert(target, t5, anchor);
+			insert(target, button2, anchor);
+		},
+		p(changed, ctx) {
+			if (changed.number) set_data(t4, ctx.number);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p0);
+			if (detaching) detach(t3);
+			if (detaching) detach(p1);
+			if (detaching) detach(t5);
+			if (detaching) detach(button2);
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let clickHandler;
+	let number = 0;
+
+	function updateHandler1() {
+		$$invalidate("clickHandler", clickHandler = () => $$invalidate("number", number = 1));
+	}
+
+	function updateHandler2() {
+		$$invalidate("clickHandler", clickHandler = () => $$invalidate("number", number = 2));
+	}
+
+	return {
+		clickHandler,
+		number,
+		updateHandler1,
+		updateHandler2
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/event-handler-dynamic/input.svelte b/test/js/samples/event-handler-dynamic/input.svelte
new file mode 100644
index 0000000000..17c9ae6cf0
--- /dev/null
+++ b/test/js/samples/event-handler-dynamic/input.svelte
@@ -0,0 +1,23 @@
+<script>
+	let clickHandler;
+	let number = 0;
+	
+	function updateHandler1(){
+		clickHandler = () => number = 1;
+	}
+
+	function updateHandler2(){
+		clickHandler = () => number = 2;
+	}
+	
+
+</script>
+
+<p>
+<button on:click={updateHandler1}>set handler 1</button>
+<button on:click={updateHandler2}>set handler 2</button>
+</p>
+
+<p>{ number }</p>
+
+<button on:click={clickHandler}>click</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-dynamic/Button.svelte b/test/runtime/samples/component-event-handler-dynamic/Button.svelte
new file mode 100644
index 0000000000..9b5b7a5f67
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot></slot></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-dynamic/_config.js b/test/runtime/samples/component-event-handler-dynamic/_config.js
new file mode 100644
index 0000000000..415b860828
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>update handler</button>
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [updateButton, button] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await updateButton.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 11);
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-dynamic/main.svelte b/test/runtime/samples/component-event-handler-dynamic/main.svelte
new file mode 100644
index 0000000000..7555ea8c17
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Button from './Button.svelte';
+	export let count = 0;
+	let clickHandler = () => count += 1;
+	function updateHandler(){
+		clickHandler = () => count += 10;
+	}
+</script>
+
+<button on:click={updateHandler}>update handler</button>
+<Button on:click={clickHandler}>{count}</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte b/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
new file mode 100644
index 0000000000..9b5b7a5f67
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot></slot></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js b/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
new file mode 100644
index 0000000000..8796e0faf6
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>update handler</button>
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [updateButton, button] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await updateButton.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 10);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 10);
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte b/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
new file mode 100644
index 0000000000..93ec90d5ce
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Button from './Button.svelte';
+	export let count = 0;
+	let clickHandler = () => count += 1;
+	function updateHandler(){
+		clickHandler = () => count += 10;
+	}
+</script>
+
+<button on:click={updateHandler}>update handler</button>
+<Button on:click|once={clickHandler}>{count}</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic/_config.js b/test/runtime/samples/event-handler-dynamic/_config.js
new file mode 100644
index 0000000000..41cfd6e729
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic/_config.js
@@ -0,0 +1,50 @@
+export default {
+	html: `
+	<p>
+		<button>set handler 1</button>
+		<button>set handler 2</button>
+	</p>
+	<p>0</p>
+	<button>click</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [updateButton1, updateButton2, button] = target.querySelectorAll(
+			'button'
+		);
+
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>0</p>
+			<button>click</button>
+		`);
+		
+		await updateButton1.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>1</p>
+			<button>click</button>
+		`);
+		
+		await updateButton2.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>2</p>
+			<button>click</button>
+		`);
+	},
+};
diff --git a/test/runtime/samples/event-handler-dynamic/main.svelte b/test/runtime/samples/event-handler-dynamic/main.svelte
new file mode 100644
index 0000000000..17c9ae6cf0
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let clickHandler;
+	let number = 0;
+	
+	function updateHandler1(){
+		clickHandler = () => number = 1;
+	}
+
+	function updateHandler2(){
+		clickHandler = () => number = 2;
+	}
+	
+
+</script>
+
+<p>
+<button on:click={updateHandler1}>set handler 1</button>
+<button on:click={updateHandler2}>set handler 2</button>
+</p>
+
+<p>{ number }</p>
+
+<button on:click={clickHandler}>click</button>
\ No newline at end of file

From 6a0a1210ecaaa8d9446e51f7d37bd8d3a81f7dfc Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 6 Nov 2019 13:17:35 -0500
Subject: [PATCH 2/3] update test

---
 test/js/samples/event-handler-dynamic/expected.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/js/samples/event-handler-dynamic/expected.js b/test/js/samples/event-handler-dynamic/expected.js
index 94f3c0667d..0678d229b9 100644
--- a/test/js/samples/event-handler-dynamic/expected.js
+++ b/test/js/samples/event-handler-dynamic/expected.js
@@ -60,7 +60,8 @@ function create_fragment(ctx) {
 			insert(target, t5, anchor);
 			insert(target, button2, anchor);
 		},
-		p(changed, ctx) {
+		p(changed, new_ctx) {
+			ctx = new_ctx;
 			if (changed.number) set_data(t4, ctx.number);
 		},
 		i: noop,

From 62ce5441b18f048c6585cf5e8456047d03e7ea1b Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 6 Nov 2019 13:18:38 -0500
Subject: [PATCH 3/3] lint

---
 src/compiler/compile/render_dom/Block.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 49e40c3a4f..56b5d08489 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -60,7 +60,7 @@ export default class Block {
 		destroy: Array<Node | Node[]>;
 	};
 
-	event_listeners: Array<Node> = [];
+	event_listeners: Node[] = [];
 
 	maintain_context: boolean;
 	has_animation: boolean;