feat(language-core): support navigation of events with v-on syntax (#5275)

Author: KazariEX

packages/language-core/lib/codegen/globalTypes.ts

@@ -79,13 +79,13 @@ export function generateGlobalTypes({
 		: true
 		: false
 		: false;
-	type __VLS_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (
+	type __VLS_NormalizeComponentEvent<Props, Emits, onEvent extends keyof Props, Event extends keyof Emits, CamelizedEvent extends keyof Emits> = (
 		__VLS_IsFunction<Props, onEvent> extends true
 			? Props
-			: __VLS_IsFunction<Events, Event> extends true
-				? { [K in onEvent]?: Events[Event] }
-				: __VLS_IsFunction<Events, CamelizedEvent> extends true
-					? { [K in onEvent]?: Events[CamelizedEvent] }
+			: __VLS_IsFunction<Emits, Event> extends true
+				? { [K in onEvent]?: Emits[Event] }
+				: __VLS_IsFunction<Emits, CamelizedEvent> extends true
+					? { [K in onEvent]?: Emits[CamelizedEvent] }
 					: Props
 	)${checkUnknownEvents ? '' : ' & Record<string, unknown>'};
 	// fix https://github.com/vuejs/language-tools/issues/926
@@ -111,6 +111,12 @@ export function generateGlobalTypes({
 			}
 		>
 	>;
+	type __VLS_ResolveEmits<
+		Comp,
+		Emits,
+		TypeEmits = ${target >= 3.6 ? `Comp extends { __typeEmits?: infer T } ? unknown extends T ? {} : import('${lib}').ShortEmitsToObject<T> : {}` : `{}`},
+		NormalizedEmits = __VLS_NormalizeEmits<Emits> extends infer E ? string extends keyof E ? {} : E : never,
+	> = __VLS_SpreadMerge<NormalizedEmits, TypeEmits>;
 	type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
 	type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any

packages/language-core/lib/codegen/template/element.ts

@@ -245,7 +245,7 @@ export function* generateComponent(
 	yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${endOfLine}`;
 
 	yield* generateFailedPropExps(options, ctx, failedPropExps);
-	yield* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+	yield* generateElementEvents(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar);
 	yield* generateElementDirectives(options, ctx, node);
 
 	const [refName, offset] = yield* generateElementReference(options, ctx, node);

packages/language-core/lib/codegen/template/elementEvents.ts

@@ -8,17 +8,18 @@ import { wrapWith } from '../utils/wrapWith';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 import { generateInterpolation } from './interpolation';
+import { generatePropertyAccess } from './propertyAccess';
 
 export function* generateElementEvents(
 	options: TemplateCodegenOptions,
 	ctx: TemplateCodegenContext,
 	node: CompilerDOM.ElementNode,
+	componentOriginalVar: string,
 	componentFunctionalVar: string,
 	componentVNodeVar: string,
 	componentCtxVar: string
 ): Generator<Code> {
-	let emitVar: string | undefined;
-	let eventsVar: string | undefined;
+	let emitsVar: string | undefined;
 	let propsVar: string | undefined;
 
 	for (const prop of node.props) {
@@ -33,12 +34,10 @@ export function* generateElementEvents(
 			)
 		) {
 			ctx.currentComponent!.used = true;
-			if (!emitVar) {
-				emitVar = ctx.getInternalVariable();
-				eventsVar = ctx.getInternalVariable();
+			if (!emitsVar) {
+				emitsVar = ctx.getInternalVariable();
 				propsVar = ctx.getInternalVariable();
-				yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${endOfLine}`;
-				yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${endOfLine}`;
+				yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${componentCtxVar}.emit>${endOfLine}`;
 				yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${endOfLine}`;
 			}
 			let source = prop.arg?.loc.source ?? 'model-value';
@@ -55,7 +54,16 @@ export function* generateElementEvents(
 				propPrefix = 'onVnode-';
 				emitPrefix = 'vnode-';
 			}
-			yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${camelize(propPrefix + source)}', '${emitPrefix + source}', '${camelize(emitPrefix + source)}'> => ({${newLine}`;
+			yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${emitsVar}, '${camelize(propPrefix + source)}', '${emitPrefix + source}', '${camelize(emitPrefix + source)}'> => (`;
+			yield emitsVar;
+			yield* generatePropertyAccess(
+				options,
+				ctx,
+				emitPrefix + source,
+				start,
+				ctx.codeFeatures.navigation
+			);
+			yield `, {${newLine}`;
 			if (prop.name === 'on') {
 				yield* generateEventArg(ctx, source, start!, propPrefix.slice(0, -1));
 				yield `: `;

packages/typescript-plugin/lib/common.ts

@@ -185,6 +185,18 @@ function getDefinitionAndBoundSpan<T>(
 		const definitions = new Set<ts.DefinitionInfo>(result.definitions);
 		const skippedDefinitions: ts.DefinitionInfo[] = [];
 
+		// #5275
+		if (result.definitions.length >= 2) {
+			for (const definition of result.definitions) {
+				if (
+					root.sfc.content[definition.textSpan.start - 1] === '@'
+					|| root.sfc.content.slice(definition.textSpan.start - 5, definition.textSpan.start) === 'v-on:'
+				) {
+					skippedDefinitions.push(definition);
+				}
+			}
+		}
+
 		for (const definition of result.definitions) {
 			if (vueOptions.extensions.some(ext => definition.fileName.endsWith(ext))) {
 				continue;