event propagation shorthand for components (#638)

src/generators/dom/visitors/Component/EventHandler.ts

@@ -13,13 +13,15 @@ export default function visitEventHandler(
 	local
 ) {
 	// TODO verify that it's a valid callee (i.e. built-in or declared method)
+	const usedContexts: string[] = [];
+
+	if (attribute.expression) {
 		generator.addSourcemapLocations(attribute.expression);
 		generator.code.prependRight(
 			attribute.expression.start,
 			`${block.alias('component')}.`
 		);
 
-	const usedContexts: string[] = [];
 		attribute.expression.arguments.forEach((arg: Node) => {
 			const { contexts } = block.contextualise(arg, null, true);
 
@@ -29,6 +31,7 @@ export default function visitEventHandler(
 					local.allUsedContexts.push(context);
 			});
 		});
+	}
 
 	// TODO hoist event handlers? can do `this.__component.method(...)`
 	const declarations = usedContexts.map(name => {
@@ -42,7 +45,9 @@ export default function visitEventHandler(
 
 	const handlerBody =
 		(declarations.length ? declarations.join('\n') + '\n\n' : '') +
-		`[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
+		(attribute.expression ?
+			`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
+			`${block.alias('component')}.fire('${attribute.name}', event);`);
 
 	local.create.addBlock(deindent`
 		${local.name}.on( '${attribute.name}', function ( event ) {

test/runtime/samples/event-handler-shorthand-component/Widget.html

@@ -0,0 +1 @@
+<button on:click='fire("foo", { answer: 42 })'>click me</button>

test/runtime/samples/event-handler-shorthand-component/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	test (assert, component, target, window) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		let answer;
+		component.on('foo', event => {
+			answer = event.answer;
+		});
+
+		button.dispatchEvent(event);
+		assert.equal(answer, 42);
+	}
+};

test/runtime/samples/event-handler-shorthand-component/main.html

@@ -0,0 +1,11 @@
+<Widget on:foo/>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: {
+			Widget
+		}
+	};
+</script>