Merge pull request #613 from sveltejs/gh-612

Sanitize event name in handler function name

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} );
 		` );
 	}
-}
+}

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>
+		` );
+	}
+};

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}}