Merge pull request #2709 from LostKobrakai/multiple-event-listeners

Allow multiple event listeners on a single node

Author: Rich-Harris

src/parse/state/tag.ts

@@ -131,8 +131,8 @@ export default function tag(parser: Parser) {
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
 		: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
-		: name === 'title' && parent_is_head(parser.stack) ? 'Title'
-		: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
+			: name === 'title' && parent_is_head(parser.stack) ? 'Title'
+				: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
 
 	const element: Node = {
 		start,
@@ -360,14 +360,6 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 
 	let name = parser.read_until(/(\s|=|\/|>)/);
 	if (!name) return null;
-	if (unique_names.has(name)) {
-		parser.error({
-			code: `duplicate-attribute`,
-			message: 'Attributes need to be unique'
-		}, start);
-	}
-
-	unique_names.add(name);
 
 	let end = parser.index;
 
@@ -376,6 +368,17 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
+	if (unique_names.has(name)) {
+		parser.error({
+			code: `duplicate-attribute`,
+			message: 'Attributes need to be unique'
+		}, start);
+	}
+
+	if (type !== "EventHandler") {
+		unique_names.add(name);
+	}
+
 	let value: any[] | true = true;
 	if (parser.eat('=')) {
 		value = read_attribute_value(parser);
@@ -453,8 +456,8 @@ function read_attribute_value(parser: Parser) {
 
 	const regex = (
 		quote_mark === `'` ? /'/ :
-		quote_mark === `"` ? /"/ :
-		/(\/>|[\s"'=<>`])/
+			quote_mark === `"` ? /"/ :
+				/(\/>|[\s"'=<>`])/
 	);
 
 	const value = read_sequence(parser, () => !!parser.match_regex(regex));

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

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

test/runtime/samples/event-handler-multiple/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let clickHandlerOne = 0;
+	export let clickHandlerTwo = 0;
+</script>
+
+<button on:click='{() => clickHandlerOne++}' on:click='{() => clickHandlerTwo++}'>click me</button>