diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js index de644b4bbe66..987586f9d19d 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/validation.js +++ b/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); } diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts index 3661ac4f40bf..fbc46857abf7 100644 --- a/packages/svelte/src/compiler/phases/types.d.ts +++ b/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 */ diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index c1d67f33aebc..93337f193172 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/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 = {