feat: improved the "mixing-events-handling-syntax" warning description

Author: caiquetorres

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

@@ -107,11 +107,13 @@ function validate_element(node, context) {
 				is_event_attribute(attribute) &&
 				context.state.analysis.event_directive_node
 			) {
+				const node = context.state.analysis.event_directive_node;
 				warn(
 					context.state.analysis.warnings,
-					context.state.analysis.event_directive_node,
+					node,
 					context.path,
-					'mixing-events-handling-syntax'
+					'mixing-events-handling-syntax',
+					node.name
 				);
 			}
 
@@ -1232,7 +1234,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 		// 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) {
-				warn(state.analysis.warnings, node, path, 'mixing-events-handling-syntax');
+				warn(state.analysis.warnings, node, path, 'mixing-events-handling-syntax', node.name);
 			}
 			warn(state.analysis.warnings, node, path, 'deprecated-event-handler', node.name);
 		}

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

@@ -2,13 +2,14 @@ import type {
 	Binding,
 	Css,
 	Fragment,
+	OnDirective,
 	RegularElement,
 	SlotElement,
 	SvelteElement,
 	SvelteNode,
 	SvelteOptions
 } from '#compiler';
-import type { BaseNode, Identifier, LabeledStatement, Program } from 'estree';
+import type { Identifier, LabeledStatement, Program } from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
 
 export interface Js {
@@ -63,7 +64,7 @@ export interface ComponentAnalysis extends Analysis {
 	uses_slots: boolean;
 	uses_component_bindings: boolean;
 	uses_render_tags: boolean;
-	event_directive_node: BaseNode | null;
+	event_directive_node: OnDirective | null;
 	uses_event_attributes: boolean;
 	custom_element: boolean | SvelteOptions['customElement'];
 	/** If `true`, should append styles through JavaScript */

packages/svelte/src/compiler/warnings.js

@@ -239,8 +239,9 @@ const legacy = {
 	/** @param {string} name */
 	'deprecated-event-handler': (name) =>
 		`Using on:${name} to listen to the ${name} event is is deprecated. Use the event attribute on${name} instead.`,
-	'mixing-events-handling-syntax': () =>
-		`Do not mix old and new event handling syntaxes in the same component. Use only standard event attributes.`
+	/** @param {string} name */
+	'mixing-events-handling-syntax': (name) =>
+		`Mixing old (on:${name}) and new syntaxes for event handling is not recommended. Use only the on${name} syntax.`
 };
 
 const block = {