fix: sanitize component event names (#10235)

fixes #9916

.changeset/hungry-boxes-relate.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: sanitize component event names

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -871,14 +871,10 @@ function serialize_inline_component(node, component_name, context) {
 	if (Object.keys(events).length > 0) {
 		const events_expression = b.object(
 			Object.keys(events).map((name) =>
-				b.prop(
-					'init',
-					b.id(name),
-					events[name].length > 1 ? b.array(events[name]) : events[name][0]
-				)
+				b.init(name, events[name].length > 1 ? b.array(events[name]) : events[name][0])
 			)
 		);
-		push_prop(b.prop('init', b.id('$$events'), events_expression));
+		push_prop(b.init('$$events', events_expression));
 	}
 
 	/** @type {import('estree').Statement[]} */
@@ -932,19 +928,18 @@ function serialize_inline_component(node, component_name, context) {
 
 		if (slot_name === 'default') {
 			push_prop(
-				b.prop(
-					'init',
-					b.id('children'),
+				b.init(
+					'children',
 					context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn
 				)
 			);
 		} else {
-			serialized_slots.push(b.prop('init', b.key(slot_name), slot_fn));
+			serialized_slots.push(b.init(slot_name, slot_fn));
 		}
 	}
 
 	if (serialized_slots.length > 0) {
-		push_prop(b.prop('init', b.id('$$slots'), b.object(serialized_slots)));
+		push_prop(b.init('$$slots', b.object(serialized_slots)));
 	}
 
 	const props_expression =

packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/Component.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<button on:click={() => dispatch('event-name')}>toggle</button>

packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/_config.js

@@ -3,11 +3,14 @@ import { ok, test } from '../../test';
 export default test({
 	html: `
 		<div>toggle</div>
+		<button>toggle</button>
 	`,
 
 	async test({ assert, target, window }) {
 		const div = target.querySelector('div');
+		const button = target.querySelector('button');
 		ok(div);
+		ok(button);
 		const event = new window.MouseEvent('some-event');
 
 		await div.dispatchEvent(event);
@@ -15,15 +18,17 @@ export default test({
 			target.innerHTML,
 			`
 			<div>toggle</div>
+			<button>toggle</button>
 			<p>hello!</p>
 		`
 		);
 
-		await div.dispatchEvent(event);
+		await button.click();
 		assert.htmlEqual(
 			target.innerHTML,
 			`
 			<div>toggle</div>
+			<button>toggle</button>
 		`
 		);
 	}

packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/main.svelte

@@ -1,8 +1,11 @@
 <script>
+	import Component from "./Component.svelte";
+
 	export let visible;
 </script>
 
 <div on:some-event='{() => visible = !visible}'>toggle</div>
+<Component on:event-name={() => visible = !visible}></Component>
 
 {#if visible}
 	<p>hello!</p>