feat: raising a warning if the code contains both old and new event handling syntaxes

Author: caiquetorres

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

@@ -384,6 +384,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
@@ -1070,6 +1072,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);
@@ -1187,6 +1191,11 @@ const common_visitors = {
 
 		context.next();
 	},
+	OnDirective(node, context) {
+		context.state.analysis.event_directive_node = node;
+
+		context.next();
+	},
 	BindDirective(node, context) {
 		let i = context.path.length;
 		while (i--) {

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

@@ -7,6 +7,7 @@ import { error } from '../../errors.js';
 import {
 	extract_identifiers,
 	get_parent,
+	is_event_attribute,
 	is_expression_attribute,
 	is_text_attribute,
 	object,
@@ -98,6 +99,22 @@ function validate_element(node, context) {
 
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'Attribute') {
+			const parent_type = attribute.parent?.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
+			) {
+				warn(
+					context.state.analysis.warnings,
+					context.state.analysis.event_directive_node,
+					context.path,
+					'mixing-events-handling-syntax'
+				);
+			}
+
 			const is_expression = is_expression_attribute(attribute);
 
 			if (context.state.analysis.runes && is_expression) {
@@ -1214,6 +1231,9 @@ export const validation_runes = merge(validation, a11y_validators, {
 		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) {
+				warn(state.analysis.warnings, node, path, 'mixing-events-handling-syntax');
+			}
 			warn(state.analysis.warnings, node, path, 'deprecated-event-handler', node.name);
 		}
 	},

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

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

packages/svelte/src/compiler/warnings.js

@@ -238,7 +238,9 @@ const legacy = {
 		`Using <slot> to render parent content is deprecated. Use {@render ...} tags instead.`,
 	/** @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.`
+		`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.`
 };
 
 const block = {

packages/svelte/tests/validator/samples/runes-legacy-syntax-warnings/warnings.json

@@ -23,6 +23,18 @@
 			"line": 12
 		}
 	},
+	{
+		"code": "mixing-events-handling-syntax",
+		"end": {
+			"column": 22,
+			"line": 13
+		},
+		"message": "Do not mix old and new event handling syntaxes in the same component. Use only standard event attributes.",
+		"start": {
+			"column": 8,
+			"line": 13
+		}
+	},
 	{
 		"code": "deprecated-event-handler",
 		"end": {