From 9112671263399212eb96b07996dd38c78c3d46c9 Mon Sep 17 00:00:00 2001
From: Conduitry <git@fur.army>
Date: Thu, 1 Jun 2017 07:28:27 -0400
Subject: [PATCH] sanitize event name in handler function name (#612)

---
 .../dom/visitors/Element/EventHandler.ts      |  8 +++----
 .../samples/event-handler-sanitize/_config.js | 21 +++++++++++++++++++
 .../samples/event-handler-sanitize/main.html  |  5 +++++
 3 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 test/runtime/samples/event-handler-sanitize/_config.js
 create mode 100644 test/runtime/samples/event-handler-sanitize/main.html

diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 1bf9dda947..b244bdcae4 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -47,9 +47,7 @@ export default function visitEventHandler ( generator: DomGenerator, block: Bloc
 
 	// get a name for the event handler that is globally unique
 	// if hoisted, locally unique otherwise
-	const handlerName = shouldHoist ?
-		generator.getUniqueName( `${name}_handler` ) :
-		block.getUniqueName( `${name}_handler` );
+	const handlerName = ( shouldHoist ? generator : block ).getUniqueName( `${name.replace( /[^a-zA-Z0-9_$]/g, '_' )}_handler` );
 
 	// create the handler body
 	const handlerBody = deindent`
@@ -71,7 +69,7 @@ export default function visitEventHandler ( generator: DomGenerator, block: Bloc
 		`;
 
 	if ( shouldHoist ) {
-		generator.blocks.push({
+		generator.blocks.push(<Block>{
 			render: () => handler
 		});
 	} else {
@@ -91,4 +89,4 @@ export default function visitEventHandler ( generator: DomGenerator, block: Bloc
 			${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
 		` );
 	}
-}
\ No newline at end of file
+}
diff --git a/test/runtime/samples/event-handler-sanitize/_config.js b/test/runtime/samples/event-handler-sanitize/_config.js
new file mode 100644
index 0000000000..2037f292f2
--- /dev/null
+++ b/test/runtime/samples/event-handler-sanitize/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<div>toggle</div>
+	`,
+
+	test ( assert, component, target, window ) {
+		const div = target.querySelector( 'div' );
+		const event = new window.MouseEvent( 'some-event' );
+
+		div.dispatchEvent( event );
+		assert.htmlEqual( target.innerHTML, `
+			<div>toggle</div>
+			<p>hello!</p>
+		` );
+
+		div.dispatchEvent( event );
+		assert.htmlEqual( target.innerHTML, `
+			<div>toggle</div>
+		` );
+	}
+};
diff --git a/test/runtime/samples/event-handler-sanitize/main.html b/test/runtime/samples/event-handler-sanitize/main.html
new file mode 100644
index 0000000000..eb8e10f825
--- /dev/null
+++ b/test/runtime/samples/event-handler-sanitize/main.html
@@ -0,0 +1,5 @@
+<div on:some-event='set({ visible: !visible })'>toggle</div>
+
+{{#if visible}}
+	<p>hello!</p>
+{{/if}}