Merge pull request #732 from sveltejs/gh-638

Event propagation shorthand

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 ) {

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

@@ -16,6 +16,10 @@ export default function visitEventHandler(
 	const isCustomEvent = generator.events.has(name);
 	const shouldHoist = !isCustomEvent && state.inEachBlock;
 
+	const context = shouldHoist ? null : state.parentNode;
+	const usedContexts: string[] = [];
+
+	if (attribute.expression) {
 		generator.addSourcemapLocations(attribute.expression);
 
 		const flattened = flattenReference(attribute.expression.callee);
@@ -29,8 +33,6 @@ export default function visitEventHandler(
 			if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
 		}
 
-	const context = shouldHoist ? null : state.parentNode;
-	const usedContexts: string[] = [];
 		attribute.expression.arguments.forEach((arg: Node) => {
 			const { contexts } = block.contextualise(arg, context, true);
 
@@ -40,6 +42,7 @@ export default function visitEventHandler(
 					state.allUsedContexts.push(context);
 			});
 		});
+	}
 
 	const _this = context || 'this';
 	const declarations = usedContexts.map(name => {
@@ -66,7 +69,9 @@ export default function visitEventHandler(
 		${state.usesComponent &&
 			`var ${block.alias('component')} = ${_this}._svelte.component;`}
 		${declarations}
-		[✂${attribute.expression.start}-${attribute.expression.end}✂];
+		${attribute.expression ?
+			`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
+			`${block.alias('component')}.fire('${attribute.name}', event);`}
 	`;
 
 	if (isCustomEvent) {

src/parse/index.ts

@@ -111,6 +111,8 @@ export class Parser {
 		if (required) {
 			this.error(`Expected ${str}`);
 		}
+
+		return false;
 	}
 
 	match(str: string) {

src/parse/read/directives.ts

@@ -43,17 +43,22 @@ function readExpression(parser: Parser, start: number, quoteMark) {
 export function readEventHandlerDirective(
 	parser: Parser,
 	start: number,
-	name: string
+	name: string,
+	hasValue: boolean
 ) {
+	let expression;
+
+	if (hasValue) {
 		const quoteMark = parser.eat(`'`) ? `'` : parser.eat(`"`) ? `"` : null;
 
 		const expressionStart = parser.index;
 
-	const expression = readExpression(parser, expressionStart, quoteMark);
+		expression = readExpression(parser, expressionStart, quoteMark);
 
 		if (expression.type !== 'CallExpression') {
 			parser.error(`Expected call expression`, expressionStart);
 		}
+	}
 
 	return {
 		start,

src/parse/state/tag.ts

@@ -256,8 +256,7 @@ function readAttribute(parser: Parser, uniqueNames) {
 	parser.allowWhitespace();
 
 	if (/^on:/.test(name)) {
-		parser.eat('=', true);
+		return readEventHandlerDirective(parser, start, name.slice(3), parser.eat('='));
-		return readEventHandlerDirective(parser, start, name.slice(3));
 	}
 
 	if (/^bind:/.test(name)) {

src/validate/html/validateEventHandler.ts

@@ -10,6 +10,8 @@ export default function validateEventHandlerCallee(
 	attribute: Node,
 	refCallees: Node[]
 ) {
+	if (!attribute.expression) return;
+
 	const { callee, start, type } = attribute.expression;
 
 	if (type !== 'CallExpression') {

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>

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

@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	test (assert, component, target, window) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.ok(component.clicked);
+	}
+};

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

@@ -0,0 +1,11 @@
+<button on:click>click me</button>
+
+<script>
+	export default {
+		oncreate () {
+			this.on('click', () => {
+				this.clicked = true;
+			});
+		}
+	};
+</script>