feat(language-service): display deprecated info of props in completion (#5134)

Author: KazariEX

packages/language-service/lib/plugins/vue-template.ts

@@ -2,6 +2,7 @@ import type { Disposable, LanguageServiceContext, LanguageServicePluginInstance
 import { VueVirtualCode, hyphenateAttr, hyphenateTag, tsCodegen } from '@vue/language-core';
 import { camelize, capitalize } from '@vue/shared';
 import { getComponentSpans } from '@vue/typescript-plugin/lib/common';
+import type { ComponentPropInfo } from '@vue/typescript-plugin/lib/requests/componentInfos';
 import { create as createHtmlService } from 'volar-service-html';
 import { create as createPugService } from 'volar-service-pug';
 import * as html from 'vscode-html-languageservice';
@@ -44,7 +45,7 @@ export function create(
 	let extraCustomData: html.IHTMLDataProvider[] = [];
 	let lastCompletionComponentNames = new Set<string>();
 
-	const tsDocumentations = new Map<string, string>();
+	const cachedPropInfos = new Map<string, ComponentPropInfo>();
 	const onDidChangeCustomDataListeners = new Set<() => void>();
 	const onDidChangeCustomData = (listener: () => void): Disposable => {
 		onDidChangeCustomDataListeners.add(listener);
@@ -488,15 +489,15 @@ export function create(
 				const promises: Promise<void>[] = [];
 				const tagInfos = new Map<string, {
 					attrs: string[];
-					propsInfo: { name: string, commentMarkdown?: string; }[];
+					propInfos: ComponentPropInfo[];
 					events: string[];
 					directives: string[];
 				}>();
 
 				let version = 0;
 				let components: string[] | undefined;
 
-				tsDocumentations.clear();
+				cachedPropInfos.clear();
 
 				updateExtraCustomData([
 					html.newHTMLDataProvider('vue-template-built-in', builtInData),
@@ -557,12 +558,12 @@ export function create(
 							if (!tagInfo) {
 								promises.push((async () => {
 									const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
-									const propsInfo = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
+									const propInfos = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
 									const events = await tsPluginClient?.getComponentEvents(vueCode.fileName, tag) ?? [];
 									const directives = await tsPluginClient?.getComponentDirectives(vueCode.fileName) ?? [];
 									tagInfos.set(tag, {
 										attrs,
-										propsInfo: propsInfo.filter(prop =>
+										propInfos: propInfos.filter(prop =>
 											!prop.name.startsWith('ref_')
 										),
 										events,
@@ -573,8 +574,8 @@ export function create(
 								return [];
 							}
 
-							const { attrs, propsInfo, events, directives } = tagInfo;
-							const props = propsInfo.map(prop =>
+							const { attrs, propInfos, events, directives } = tagInfo;
+							const props = propInfos.map(prop =>
 								hyphenateTag(prop.name).startsWith('on-vnode-')
 									? 'onVue:' + prop.name.slice('onVnode'.length)
 									: prop.name
@@ -611,14 +612,14 @@ export function create(
 								else {
 
 									const propName = name;
-									const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName);
-									const propDescription = propsInfo.find(prop => {
+									const propInfo = propInfos.find(prop => {
 										const name = casing.attr === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
 										return name === propName;
-									})?.commentMarkdown;
+									});
+									const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName, propInfo?.deprecated);
 
-									if (propDescription) {
-										tsDocumentations.set(propName, propDescription);
+									if (propInfo) {
+										cachedPropInfos.set(propName, propInfo);
 									}
 
 									attributes.push(
@@ -792,7 +793,7 @@ export function create(
 
 				for (const item of completionList.items) {
 					const documentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-					if (documentation && !isItemKey(documentation) && item.documentation) {
+					if (documentation && !isItemKey(documentation)) {
 						htmlDocumentations.set(item.label, documentation);
 					}
 				}
@@ -819,11 +820,14 @@ export function create(
 					const itemKeyStr = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
 
 					let parsedItemKey = itemKeyStr ? parseItemKey(itemKeyStr) : undefined;
+					let propInfo: ComponentPropInfo | undefined;
+
 					if (parsedItemKey) {
 						const documentations: string[] = [];
 
-						if (tsDocumentations.has(parsedItemKey.prop)) {
-							documentations.push(tsDocumentations.get(parsedItemKey.prop)!);
+						propInfo = cachedPropInfos.get(parsedItemKey.prop);
+						if (propInfo?.commentMarkdown) {
+							documentations.push(propInfo.commentMarkdown);
 						}
 
 						let { isEvent, propName } = getPropName(parsedItemKey);
@@ -861,22 +865,28 @@ export function create(
 								type: 'componentProp',
 								tag: '^',
 								prop: propName,
+								deprecated: false,
 								leadingSlash: false
 							};
 						}
 
-						if (tsDocumentations.has(propName)) {
+						propInfo = cachedPropInfos.get(propName);
+						if (propInfo?.commentMarkdown) {
 							const originalDocumentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
 							item.documentation = {
 								kind: 'markdown',
 								value: [
-									tsDocumentations.get(propName)!,
+									propInfo.commentMarkdown,
 									originalDocumentation,
 								].filter(str => !!str).join('\n\n'),
 							};
 						}
 					}
 
+					if (propInfo?.deprecated) {
+						item.tags = [1 satisfies typeof vscode.CompletionItemTag.Deprecated];
+					}
+
 					const tokens: string[] = [];
 
 					if (
@@ -1019,8 +1029,8 @@ function parseLabel(label: string) {
 	};
 }
 
-function generateItemKey(type: InternalItemId, tag: string, prop: string) {
-	return '__VLS_data=' + type + ',' + tag + ',' + prop;
+function generateItemKey(type: InternalItemId, tag: string, prop: string, deprecated?: boolean) {
+	return `__VLS_data=${type},${tag},${prop},${Number(deprecated)}`;
 }
 
 function isItemKey(key: string) {
@@ -1035,6 +1045,7 @@ function parseItemKey(key: string) {
 			type: strs[0] as InternalItemId,
 			tag: strs[1],
 			prop: strs[2],
+			deprecated: strs[3] === '1',
 			leadingSlash
 		};
 	}

packages/typescript-plugin/lib/requests/componentInfos.ts

@@ -4,6 +4,13 @@ import * as path from 'node:path';
 import type * as ts from 'typescript';
 import type { RequestContext } from './types';
 
+export interface ComponentPropInfo {
+	name: string;
+	required?: boolean;
+	deprecated?: boolean;
+	commentMarkdown?: string;
+}
+
 export function getComponentProps(
 	this: RequestContext,
 	fileName: string,
@@ -27,11 +34,7 @@ export function getComponentProps(
 		return [];
 	}
 
-	const result = new Map<string, {
-		name: string;
-		required?: true;
-		commentMarkdown?: string;
-	}>();
+	const result = new Map<string, ComponentPropInfo>();
 
 	for (const sig of componentType.getCallSignatures()) {
 		const propParam = sig.parameters[0];
@@ -41,9 +44,17 @@ export function getComponentProps(
 			for (const prop of props) {
 				const name = prop.name;
 				const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
-				const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags()) || undefined;
-
-				result.set(name, { name, required, commentMarkdown });
+				const {
+					content: commentMarkdown,
+					deprecated
+				} = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
+
+				result.set(name, {
+					name,
+					required,
+					deprecated,
+					commentMarkdown
+				});
 			}
 		}
 	}
@@ -60,9 +71,17 @@ export function getComponentProps(
 				}
 				const name = prop.name;
 				const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
-				const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags()) || undefined;
-
-				result.set(name, { name, required, commentMarkdown });
+				const {
+					content: commentMarkdown,
+					deprecated
+				} = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
+
+				result.set(name, {
+					name,
+					required,
+					deprecated,
+					commentMarkdown
+				});
 			}
 		}
 	}
@@ -302,8 +321,12 @@ function searchVariableDeclarationNode(
 function generateCommentMarkdown(parts: ts.SymbolDisplayPart[], jsDocTags: ts.JSDocTagInfo[]) {
 	const parsedComment = _symbolDisplayPartsToMarkdown(parts);
 	const parsedJsDoc = _jsDocTagInfoToMarkdown(jsDocTags);
-	let result = [parsedComment, parsedJsDoc].filter(str => !!str).join('\n\n');
-	return result;
+	const content = [parsedComment, parsedJsDoc].filter(str => !!str).join('\n\n');
+	const deprecated = jsDocTags.some((tag) => tag.name === 'deprecated');
+	return {
+		content,
+		deprecated
+	};
 }
 
 function _symbolDisplayPartsToMarkdown(parts: ts.SymbolDisplayPart[]) {

packages/typescript-plugin/lib/server.ts

@@ -3,7 +3,7 @@ import * as fs from 'node:fs';
 import * as net from 'node:net';
 import type * as ts from 'typescript';
 import { collectExtractProps } from './requests/collectExtractProps';
-import { getComponentDirectives, getComponentEvents, getComponentNames, getComponentProps, getElementAttrs } from './requests/componentInfos';
+import { type ComponentPropInfo, getComponentDirectives, getComponentEvents, getComponentNames, getComponentProps, getElementAttrs } from './requests/componentInfos';
 import { getImportPathForFile } from './requests/getImportPathForFile';
 import { getPropertiesAtLocation } from './requests/getPropertiesAtLocation';
 import { getQuickInfoAtPosition } from './requests/getQuickInfoAtPosition';
@@ -70,11 +70,7 @@ export async function startNamedPipeServer(
 	const dataChunks: Buffer[] = [];
 	const currentData = new FileMap<[
 		componentNames: string[],
-		Record<string, {
-			name: string;
-			required?: true;
-			commentMarkdown?: string;
-		}[]>,
+		Record<string, ComponentPropInfo[]>,
 	]>(false);
 	const allConnections = new Set<net.Socket>();
 	const pendingRequests = new Set<number>();

packages/typescript-plugin/lib/utils.ts

@@ -5,6 +5,7 @@ import * as net from 'node:net';
 import * as os from 'node:os';
 import * as path from 'node:path';
 import type * as ts from 'typescript';
+import type { ComponentPropInfo } from './requests/componentInfos';
 import type { NotificationData, ProjectInfo, RequestData, ResponseData } from './server';
 
 export { TypeScriptProjectHost } from '@volar/typescript';
@@ -29,11 +30,7 @@ class NamedPipeServer {
 	projectInfo?: ProjectInfo;
 	containsFileCache = new Map<string, Promise<boolean | undefined | null>>();
 	componentNamesAndProps = new FileMap<
-		Record<string, null | {
-			name: string;
-			required?: true;
-			commentMarkdown?: string;
-		}[]>
+		Record<string, null | ComponentPropInfo[]>
 	>(false);
 
 	constructor(kind: ts.server.ProjectKind, id: number) {
@@ -170,11 +167,7 @@ class NamedPipeServer {
 			const components = this.componentNamesAndProps.get(fileName) ?? {};
 			const [name, props]: [
 				name: string,
-				props: {
-					name: string;
-					required?: true;
-					commentMarkdown?: string;
-				}[],
+				props: ComponentPropInfo[],
 			] = data;
 			components[name] = props;
 		}