fix(language-service): add document highlights support

packages/language-server/node.ts

@@ -53,7 +53,7 @@ connection.onInitialize(params => {
 							{
 								file: fileName,
 								needFileNameList: false,
-							}
+							} satisfies ts.server.protocol.ProjectInfoRequestArgs
 						);
 						file2ProjectInfo.set(fileName, projectInfoPromise);
 					}
@@ -115,8 +115,26 @@ connection.onInitialize(params => {
 			getPropertiesAtLocation(...args) {
 				return sendTsRequest('vue:getPropertiesAtLocation', args);
 			},
-			getQuickInfoAtPosition(...args) {
-				return sendTsRequest('vue:getQuickInfoAtPosition', args);
+			getDocumentHighlights(fileName, position) {
+				return sendTsRequest(
+					'documentHighlights-full', // internal command
+					{
+						file: fileName,
+						...{ position } as unknown as { line: number; offset: number; },
+						filesToSearch: [fileName],
+					} satisfies ts.server.protocol.DocumentHighlightsRequestArgs
+				);
+			},
+			async getQuickInfoAtPosition(fileName, { line, character }) {
+				const result = await sendTsRequest<ts.QuickInfo>(
+					ts.server.protocol.CommandTypes.Quickinfo,
+					{
+						file: fileName,
+						line: line + 1,
+						offset: character + 1,
+					} satisfies ts.server.protocol.FileLocationRequestArgs
+				);
+				return ts.displayPartsToString(result?.displayParts ?? []);
 			},
 		} : undefined)
 	);

packages/language-service/index.ts

@@ -22,6 +22,7 @@ import { create as createVueCompilerDomErrorsPlugin } from './lib/plugins/vue-co
 import { create as createVueCompleteDefineAssignmentPlugin } from './lib/plugins/vue-complete-define-assignment';
 import { create as createVueDirectiveCommentsPlugin } from './lib/plugins/vue-directive-comments';
 import { create as createVueDocumentDropPlugin } from './lib/plugins/vue-document-drop';
+import { create as createVueDocumentHighlightsPlugin } from './lib/plugins/vue-document-highlights';
 import { create as createVueDocumentLinksPlugin } from './lib/plugins/vue-document-links';
 import { create as createVueExtractFilePlugin } from './lib/plugins/vue-extract-file';
 import { create as createVueInlayHintsPlugin } from './lib/plugins/vue-inlayhints';
@@ -142,8 +143,7 @@ export function getFullLanguageServicePlugins(ts: typeof import('typescript')) {
 				if (!sourceScript) {
 					return;
 				}
-				const document = context.documents.get(uri, sourceScript.languageId, sourceScript.snapshot);
-				const hover = await languageService.getHover(uri, document.positionAt(position));
+				const hover = await languageService.getHover(uri, position);
 				let text = '';
 				if (typeof hover?.contents === 'string') {
 					text = hover.contents;
@@ -172,15 +172,22 @@ export function getFullLanguageServicePlugins(ts: typeof import('typescript')) {
 	}
 }
 
+import type * as ts from 'typescript';
+
 export function getHybridModeLanguageServicePlugins(
 	ts: typeof import('typescript'),
-	getTsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined
+	tsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests & {
+		getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>;
+	} | undefined
 ) {
 	const plugins = [
 		createTypeScriptSyntacticPlugin(ts),
 		createTypeScriptDocCommentTemplatePlugin(ts),
-		...getCommonLanguageServicePlugins(ts, () => getTsPluginClient)
+		...getCommonLanguageServicePlugins(ts, () => tsPluginClient)
 	];
+	if (tsPluginClient) {
+		plugins.push(createVueDocumentHighlightsPlugin(tsPluginClient.getDocumentHighlights));
+	}
 	for (const plugin of plugins) {
 		// avoid affecting TS plugin
 		delete plugin.capabilities.semanticTokensProvider;
@@ -203,8 +210,8 @@ function getCommonLanguageServicePlugins(
 		createVueCompilerDomErrorsPlugin(),
 		createVueSfcPlugin(),
 		createVueTwoslashQueriesPlugin(getTsPluginClient),
-		createVueDocumentLinksPlugin(),
 		createVueDocumentDropPlugin(ts, getTsPluginClient),
+		createVueDocumentLinksPlugin(),
 		createVueCompleteDefineAssignmentPlugin(),
 		createVueAutoDotValuePlugin(ts, getTsPluginClient),
 		createVueAutoAddSpacePlugin(),

packages/language-service/lib/plugins/vue-document-highlights.ts

@@ -0,0 +1,50 @@
+import type { DocumentHighlightKind, LanguageServicePlugin } from '@volar/language-service';
+import { VueVirtualCode } from '@vue/language-core';
+import type * as ts from 'typescript';
+import { URI } from 'vscode-uri';
+
+export function create(
+	getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>
+): LanguageServicePlugin {
+	return {
+		name: 'vue-document-highlights',
+		capabilities: {
+			documentHighlightProvider: true,
+		},
+		create(context) {
+			return {
+				async provideDocumentHighlights(document, position) {
+					const uri = URI.parse(document.uri);
+					const decoded = context.decodeEmbeddedDocumentUri(uri);
+					const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+					const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+					if (!sourceScript?.generated || virtualCode?.id !== 'main') {
+						return;
+					}
+
+					const root = sourceScript.generated.root;
+					if (!(root instanceof VueVirtualCode)) {
+						return;
+					}
+
+					const result = await getDocumentHighlights(root.fileName, document.offsetAt(position));
+
+					return result
+						?.filter(({ fileName }) => fileName === root.fileName)
+						.flatMap(({ highlightSpans }) => highlightSpans)
+						.map(({ textSpan, kind }) => ({
+							range: {
+								start: document.positionAt(textSpan.start),
+								end: document.positionAt(textSpan.start + textSpan.length),
+							},
+							kind: kind === 'reference'
+								? 2 satisfies typeof DocumentHighlightKind.Read
+								: kind === 'writtenReference'
+									? 3 satisfies typeof DocumentHighlightKind.Write
+									: 1 satisfies typeof DocumentHighlightKind.Text,
+						}));
+				},
+			};
+		},
+	};
+}

packages/language-service/lib/plugins/vue-twoslash-queries.ts

@@ -46,7 +46,7 @@ export function create(
 					for (const [pointerPosition, hoverOffset] of hoverOffsets) {
 						const map = context.language.maps.get(virtualCode, sourceScript);
 						for (const [sourceOffset] of map.toSourceLocation(hoverOffset)) {
-							const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(root.fileName, sourceOffset);
+							const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(root.fileName, document.positionAt(sourceOffset));
 							if (quickInfo) {
 								inlayHints.push({
 									position: { line: pointerPosition.line, character: pointerPosition.character + 2 },

packages/typescript-plugin/index.ts

@@ -11,7 +11,6 @@ import { getElementAttrs } from './lib/requests/getElementAttrs';
 import { getElementNames } from './lib/requests/getElementNames';
 import { getImportPathForFile } from './lib/requests/getImportPathForFile';
 import { getPropertiesAtLocation } from './lib/requests/getPropertiesAtLocation';
-import { getQuickInfoAtPosition } from './lib/requests/getQuickInfoAtPosition';
 import type { RequestContext } from './lib/requests/types';
 
 const windowsPathReg = /\\/g;
@@ -92,11 +91,6 @@ export = createLanguageServicePlugin(
 					response: getPropertiesAtLocation.apply(getRequestContext(args[0]), args),
 				};
 			});
-			session.addProtocolHandler('vue:getQuickInfoAtPosition', ({ arguments: args }) => {
-				return {
-					response: getQuickInfoAtPosition.apply(getRequestContext(args[0]), args),
-				};
-			});
 			session.addProtocolHandler('vue:getComponentNames', ({ arguments: args }) => {
 				return {
 					response: getComponentNames.apply(getRequestContext(args[0]), args) ?? [],

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

@@ -4,11 +4,11 @@ export type Requests = {
 	collectExtractProps: ToRequest<typeof import('./collectExtractProps.js')['collectExtractProps']>;
 	getImportPathForFile: ToRequest<typeof import('./getImportPathForFile.js')['getImportPathForFile']>;
 	getPropertiesAtLocation: ToRequest<typeof import('./getPropertiesAtLocation.js')['getPropertiesAtLocation']>;
-	getQuickInfoAtPosition: ToRequest<typeof import('./getQuickInfoAtPosition.js')['getQuickInfoAtPosition']>;
 	getComponentNames: ToRequest<typeof import('./getComponentNames.js')['getComponentNames']>;
 	getComponentProps: ToRequest<typeof import('./getComponentProps.js')['getComponentProps']>;
 	getComponentEvents: ToRequest<typeof import('./getComponentEvents.js')['getComponentEvents']>;
 	getComponentDirectives: ToRequest<typeof import('./getComponentDirectives.js')['getComponentDirectives']>;
 	getElementAttrs: ToRequest<typeof import('./getElementAttrs.js')['getElementAttrs']>;
 	getElementNames: ToRequest<typeof import('./getElementNames.js')['getElementNames']>;
+	getQuickInfoAtPosition: ToRequest<(fileName: string, position: { line: number; character: number; }) => string>;
 };