fix: disallow mixing event-handling syntaxes (#11295)

Closes #11262

---------

Co-authored-by: Simon Holthausen <[email protected]>

Author: caiquetorres

.changeset/cool-poems-watch.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: disallow mixing on:click and onclick syntax

packages/svelte/messages/compile-errors/template.md

@@ -172,6 +172,10 @@
 
 > `let:` directive at invalid position
 
+## mixed_event_handler_syntaxes
+
+> Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax.
+
 ## node_invalid_placement
 
 > %thing% is invalid inside <%parent%>

packages/svelte/src/compiler/errors.js

@@ -918,6 +918,16 @@ export function let_directive_invalid_placement(node) {
 	e(node, "let_directive_invalid_placement", "`let:` directive at invalid position");
 }
 
+/**
+ * Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax.
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function mixed_event_handler_syntaxes(node, name) {
+	e(node, "mixed_event_handler_syntaxes", `Mixing old (on:${name}) and new syntaxes for event handling is not allowed. Use only the on${name} syntax.`);
+}
+
 /**
  * %thing% is invalid inside <%parent%>
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -372,6 +372,8 @@ export function analyze_component(root, source, options) {
 		uses_render_tags: false,
 		needs_context: false,
 		needs_props: false,
+		event_directive_node: null,
+		uses_event_attributes: false,
 		custom_element: options.customElementOptions ?? options.customElement,
 		inject_styles: options.css === 'injected' || options.customElement,
 		accessors: options.customElement
@@ -494,6 +496,13 @@ export function analyze_component(root, source, options) {
 		analysis.reactive_statements = order_reactive_statements(analysis.reactive_statements);
 	}
 
+	if (analysis.event_directive_node && analysis.uses_event_attributes) {
+		e.mixed_event_handler_syntaxes(
+			analysis.event_directive_node,
+			analysis.event_directive_node.name
+		);
+	}
+
 	if (analysis.uses_render_tags && (analysis.uses_slots || analysis.slot_names.size > 0)) {
 		e.slot_snippet_conflict(analysis.slot_names.values().next().value);
 	}
@@ -1153,6 +1162,11 @@ const common_visitors = {
 		});
 
 		if (is_event_attribute(node)) {
+			const parent = context.path.at(-1);
+			if (parent?.type === 'RegularElement' || parent?.type === 'SvelteElement') {
+				context.state.analysis.uses_event_attributes = true;
+			}
+
 			const expression = node.value[0].expression;
 
 			const delegated_event = get_delegated_event(node.name.slice(2), expression, context);
@@ -1286,6 +1300,13 @@ const common_visitors = {
 
 		context.next();
 	},
+	OnDirective(node, { state, path, next }) {
+		const parent = path.at(-1);
+		if (parent?.type === 'SvelteElement' || parent?.type === 'RegularElement') {
+			state.analysis.event_directive_node ??= node;
+		}
+		next();
+	},
 	BindDirective(node, context) {
 		let i = context.path.length;
 		while (i--) {

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -8,6 +8,7 @@ import * as e from '../../errors.js';
 import {
 	extract_identifiers,
 	get_parent,
+	is_event_attribute,
 	is_expression_attribute,
 	is_text_attribute,
 	object,

packages/svelte/src/compiler/phases/types.d.ts

@@ -2,6 +2,7 @@ import type {
 	Binding,
 	Css,
 	Fragment,
+	OnDirective,
 	RegularElement,
 	SlotElement,
 	SvelteElement,
@@ -59,6 +60,10 @@ export interface ComponentAnalysis extends Analysis {
 	uses_render_tags: boolean;
 	needs_context: boolean;
 	needs_props: boolean;
+	/** Set to the first event directive (on:x) found on a DOM element in the code */
+	event_directive_node: OnDirective | null;
+	/** true if uses event attributes (onclick) on a DOM element */
+	uses_event_attributes: boolean;
 	custom_element: boolean | SvelteOptions['customElement'];
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-2/main.svelte

@@ -1,4 +1,4 @@
-<div on:click={(e) => { console.log('clicked div') }}>
+<div onclick={(e) => { console.log('clicked div') }}>
 	<button onclick={(e) => { console.log('clicked button'); e.stopPropagation() }}>
 		Button
 	</button>

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-4/Component.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { children, ...props } = $props();
+</script>
+
+<div {...props} on:click>
+	{@render children()}
+</div>

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-4/main.svelte

@@ -1,12 +1,13 @@
 <script>
+	import Component from "./Component.svelte";
 	import Sub from "./sub.svelte";
 </script>
 
 <svelte:window onclick="{() => console.log('window main')}" />
 <svelte:document onclick="{() => console.log('document main')}" />
 
-<div on:click={() => console.log('div main 1')} on:click={() => console.log('div main 2')}>
+<Component on:click={() => console.log('div main 1')} on:click={() => console.log('div main 2')}>
 	<button onclick={() => console.log('button main')}>main</button>
-</div>
+</Component>
 
 <Sub />

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-5/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { children, ...props } = $props();
+</script>
+
+<button {...props} on:click>
+	{@render children()}
+</button>