fix: raising an error when mixing both old and new event-handling syntaxes

Author: caiquetorres

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

@@ -172,6 +172,10 @@
 
 > `let:` directive at invalid position
 
+## mixed_old_and_new_event_handler_syntaxes
+
+> Mixing old (on:%name%) and new syntaxes for event handling is not recommended. 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 recommended. Use only the on%name% syntax.
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function mixed_old_and_new_event_handler_syntaxes(node, name) {
+	e(node, "mixed_old_and_new_event_handler_syntaxes", `Mixing old (on:${name}) and new syntaxes for event handling is not recommended. 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

@@ -103,6 +103,10 @@ function get_delegated_event(event_name, handler, context) {
 		}
 
 		if (binding != null) {
+			if (binding.references.some(({ path }) => path.some(({ type }) => type === 'OnDirective'))) {
+				return non_hoistable;
+			}
+
 			for (const { path } of binding.references) {
 				const parent = path.at(-1);
 				if (parent == null) {
@@ -370,6 +374,8 @@ export function analyze_component(root, source, options) {
 		uses_slots: false,
 		uses_component_bindings: false,
 		uses_render_tags: 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
@@ -1120,6 +1126,8 @@ const common_visitors = {
 		});
 
 		if (is_event_attribute(node)) {
+			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);
@@ -1237,6 +1245,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,
@@ -104,6 +105,18 @@ function validate_element(node, context) {
 
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'Attribute') {
+			const parent_type = node.type;
+
+			// Don't warn on component events; these might not be under the author's control so the warning would be unactionable
+			if (
+				(parent_type === 'RegularElement' || parent_type === 'SvelteElement') &&
+				is_event_attribute(attribute) &&
+				context.state.analysis.event_directive_node
+			) {
+				const event_directive_node = context.state.analysis.event_directive_node;
+				e.mixed_old_and_new_event_handler_syntaxes(event_directive_node, event_directive_node.name);
+			}
+
 			const is_expression = is_expression_attribute(attribute);
 
 			if (context.state.analysis.runes && is_expression) {
@@ -1204,10 +1217,13 @@ export const validation_runes = merge(validation, a11y_validators, {
 			w.slot_element_deprecated(node);
 		}
 	},
-	OnDirective(node, { path }) {
+	OnDirective(node, { state, path }) {
 		const parent_type = path.at(-1)?.type;
 		// Don't warn on component events; these might not be under the author's control so the warning would be unactionable
 		if (parent_type === 'RegularElement' || parent_type === 'SvelteElement') {
+			if (state.analysis.uses_event_attributes) {
+				e.mixed_old_and_new_event_handler_syntaxes(node, node.name);
+			}
 			w.event_directive_deprecated(node, node.name);
 		}
 	},

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

@@ -2,6 +2,7 @@ import type {
 	Binding,
 	Css,
 	Fragment,
+	OnDirective,
 	RegularElement,
 	SlotElement,
 	SvelteElement,
@@ -57,6 +58,8 @@ export interface ComponentAnalysis extends Analysis {
 	uses_slots: boolean;
 	uses_component_bindings: boolean;
 	uses_render_tags: boolean;
+	event_directive_node: OnDirective | null;
+	uses_event_attributes: boolean;
 	custom_element: boolean | SvelteOptions['customElement'];
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;