feat: forward tsserver's semantic tokens via language server (#5512)

KazariEX · web-flow · commit 0e917c601bdd · 2025-07-17T23:52:24.000+08:00
diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
@@ -217,6 +217,32 @@
 				]
 			}
 		],
+		"semanticTokenScopes": [
+			{
+				"language": "vue",
+				"scopes": {
+					"component": [
+						"support.class.component.vue"
+					]
+				}
+			},
+			{
+				"language": "markdown",
+				"scopes": {
+					"component": [
+						"support.class.component.vue"
+					]
+				}
+			},
+			{
+				"language": "html",
+				"scopes": {
+					"component": [
+						"support.class.component.vue"
+					]
+				}
+			}
+		],
 		"breakpoints": [
 			{
 				"language": "vue"
diff --git a/packages/language-plugin-pug/package.json b/packages/language-plugin-pug/package.json
@@ -14,7 +14,7 @@
 	},
 	"dependencies": {
 		"@volar/source-map": "2.4.19",
-		"volar-service-pug": "0.0.64"
+		"volar-service-pug": "0.0.65"
 	},
 	"devDependencies": {
 		"@types/node": "^22.10.4",
diff --git a/packages/language-server/index.ts b/packages/language-server/index.ts
@@ -139,6 +139,16 @@ connection.onInitialize(params => {
 					} satisfies ts.server.protocol.DocumentHighlightsRequestArgs,
 				);
 			},
+			getEncodedSemanticClassifications(fileName, span) {
+				return sendTsServerRequest(
+					'_vue:encodedSemanticClassifications-full',
+					{
+						file: fileName,
+						...span,
+						format: ts.SemanticClassificationFormat.TwentyTwenty,
+					} satisfies ts.server.protocol.EncodedSemanticClassificationsRequestArgs,
+				);
+			},
 			async getQuickInfoAtPosition(fileName, { line, character }) {
 				const result = await sendTsServerRequest<ts.server.protocol.QuickInfoResponseBody>(
 					'_vue:' + ts.server.protocol.CommandTypes.Quickinfo,
diff --git a/packages/language-service/index.ts b/packages/language-service/index.ts
@@ -13,9 +13,11 @@ import { create as createPugFormatPlugin } from 'volar-service-pug-beautify';
 import { create as createTypeScriptDocCommentTemplatePlugin } from 'volar-service-typescript/lib/plugins/docCommentTemplate';
 import { create as createTypeScriptSyntacticPlugin } from 'volar-service-typescript/lib/plugins/syntactic';
 import { create as createCssPlugin } from './lib/plugins/css';
+import { create as createTypescriptSemanticTokensPlugin } from './lib/plugins/typescript-semantic-tokens';
 import { create as createVueAutoDotValuePlugin } from './lib/plugins/vue-autoinsert-dotvalue';
 import { create as createVueAutoAddSpacePlugin } from './lib/plugins/vue-autoinsert-space';
 import { create as createVueCompilerDomErrorsPlugin } from './lib/plugins/vue-compiler-dom-errors';
+import { create as createVueComponentSemanticTokensPlugin } from './lib/plugins/vue-component-semantic-tokens';
 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';
@@ -51,10 +53,12 @@ export function createVueLanguageServicePlugins(
 		createJsonPlugin(),
 		createPugFormatPlugin(),
 		createTypeScriptDocCommentTemplatePlugin(ts),
+		createTypescriptSemanticTokensPlugin(getTsPluginClient),
 		createTypeScriptSyntacticPlugin(ts),
 		createVueAutoAddSpacePlugin(),
 		createVueAutoDotValuePlugin(ts, getTsPluginClient),
 		createVueCompilerDomErrorsPlugin(),
+		createVueComponentSemanticTokensPlugin(getTsPluginClient),
 		createVueDocumentDropPlugin(ts, getTsPluginClient),
 		createVueDocumentLinksPlugin(),
 		createVueDirectiveCommentsPlugin(),
@@ -77,9 +81,5 @@ export function createVueLanguageServicePlugins(
 	if (tsPluginClient) {
 		plugins.push(createVueDocumentHighlightsPlugin(tsPluginClient.getDocumentHighlights));
 	}
-	for (const plugin of plugins) {
-		// avoid affecting TS plugin
-		delete plugin.capabilities.semanticTokensProvider;
-	}
 	return plugins;
 }
diff --git a/packages/language-service/lib/plugins/typescript-semantic-tokens.ts b/packages/language-service/lib/plugins/typescript-semantic-tokens.ts
@@ -0,0 +1,77 @@
+import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
+import { VueVirtualCode } from '@vue/language-core';
+import { convertClassificationsToSemanticTokens } from 'volar-service-typescript/lib/semanticFeatures/semanticTokens';
+import { URI } from 'vscode-uri';
+
+export function create(
+	getTsPluginClient?: (
+		context: LanguageServiceContext,
+	) => import('@vue/typescript-plugin/lib/requests').Requests | undefined,
+): LanguageServicePlugin {
+	return {
+		name: 'typescript-highlights',
+		capabilities: {
+			semanticTokensProvider: {
+				legend: {
+					tokenTypes: [
+						'namespace',
+						'class',
+						'enum',
+						'interface',
+						'typeParameter',
+						'type',
+						'parameter',
+						'variable',
+						'property',
+						'enumMember',
+						'function',
+						'method',
+					],
+					tokenModifiers: [
+						'declaration',
+						'readonly',
+						'static',
+						'async',
+						'defaultLibrary',
+						'local',
+					],
+				},
+			},
+		},
+		create(context) {
+			const tsPluginClient = getTsPluginClient?.(context);
+
+			return {
+				async provideDocumentSemanticTokens(document, range, legend) {
+					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 start = document.offsetAt(range.start);
+					const end = document.offsetAt(range.end);
+					const span = {
+						start: start,
+						length: end - start,
+					};
+					const classifications = await tsPluginClient?.getEncodedSemanticClassifications(
+						root.fileName,
+						span,
+					);
+
+					if (classifications) {
+						return convertClassificationsToSemanticTokens(document, span, legend, classifications);
+					}
+				},
+			};
+		},
+	};
+}
diff --git a/packages/language-service/lib/plugins/vue-component-semantic-tokens.ts b/packages/language-service/lib/plugins/vue-component-semantic-tokens.ts
@@ -0,0 +1,109 @@
+import type { LanguageServiceContext, LanguageServicePlugin, SemanticToken } from '@volar/language-service';
+import { forEachElementNode, hyphenateTag, VueVirtualCode } from '@vue/language-core';
+import type * as ts from 'typescript';
+import { URI } from 'vscode-uri';
+
+export function create(
+	getTsPluginClient?: (
+		context: LanguageServiceContext,
+	) => import('@vue/typescript-plugin/lib/requests').Requests | undefined,
+): LanguageServicePlugin {
+	return {
+		name: 'vue-component-highlights',
+		capabilities: {
+			semanticTokensProvider: {
+				legend: {
+					tokenTypes: ['component'],
+					tokenModifiers: [],
+				},
+			},
+		},
+		create(context) {
+			const tsPluginClient = getTsPluginClient?.(context);
+
+			return {
+				async provideDocumentSemanticTokens(document, range, legend) {
+					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 !== 'template') {
+						return;
+					}
+
+					const root = sourceScript.generated.root;
+					if (!(root instanceof VueVirtualCode)) {
+						return;
+					}
+
+					const { template } = root.sfc;
+					if (!template) {
+						return;
+					}
+
+					const result: SemanticToken[] = [];
+
+					const tokenTypes = legend.tokenTypes.indexOf('component');
+					const componentSpans = await getComponentSpans(root.fileName, template, {
+						start: document.offsetAt(range.start),
+						length: document.offsetAt(range.end) - document.offsetAt(range.start),
+					});
+
+					for (const span of componentSpans) {
+						const position = document.positionAt(span.start);
+						result.push([
+							position.line,
+							position.character,
+							span.length,
+							tokenTypes,
+							0,
+						]);
+					}
+					return result;
+				},
+			};
+
+			async function getComponentSpans(
+				fileName: string,
+				template: NonNullable<VueVirtualCode['_sfc']['template']>,
+				spanTemplateRange: ts.TextSpan,
+			) {
+				const result: ts.TextSpan[] = [];
+				const validComponentNames = await tsPluginClient?.getComponentNames(fileName) ?? [];
+				const elements = new Set(await tsPluginClient?.getElementNames(fileName) ?? []);
+				const components = new Set([
+					...validComponentNames,
+					...validComponentNames.map(hyphenateTag),
+				]);
+
+				if (template.ast) {
+					for (const node of forEachElementNode(template.ast)) {
+						if (
+							node.loc.end.offset <= spanTemplateRange.start
+							|| node.loc.start.offset >= (spanTemplateRange.start + spanTemplateRange.length)
+						) {
+							continue;
+						}
+						if (components.has(node.tag) && !elements.has(node.tag)) {
+							let start = node.loc.start.offset;
+							if (template.lang === 'html') {
+								start += '<'.length;
+							}
+							result.push({
+								start,
+								length: node.tag.length,
+							});
+							if (template.lang === 'html' && !node.isSelfClosing) {
+								result.push({
+									start: node.loc.start.offset + node.loc.source.lastIndexOf(node.tag),
+									length: node.tag.length,
+								});
+							}
+						}
+					}
+				}
+				return result;
+			}
+		},
+	};
+}
diff --git a/packages/language-service/package.json b/packages/language-service/package.json
@@ -21,13 +21,13 @@
 		"@vue/language-core": "3.0.1",
 		"@vue/shared": "^3.5.0",
 		"path-browserify": "^1.0.1",
-		"volar-service-css": "0.0.64",
-		"volar-service-emmet": "0.0.64",
-		"volar-service-html": "0.0.64",
-		"volar-service-json": "0.0.64",
-		"volar-service-pug": "0.0.64",
-		"volar-service-pug-beautify": "0.0.64",
-		"volar-service-typescript": "0.0.64",
+		"volar-service-css": "0.0.65",
+		"volar-service-emmet": "0.0.65",
+		"volar-service-html": "0.0.65",
+		"volar-service-json": "0.0.65",
+		"volar-service-pug": "0.0.65",
+		"volar-service-pug-beautify": "0.0.65",
+		"volar-service-typescript": "0.0.65",
 		"vscode-html-languageservice": "^5.2.0",
 		"vscode-uri": "^3.0.8"
 	},
diff --git a/packages/typescript-plugin/index.ts b/packages/typescript-plugin/index.ts
@@ -93,6 +93,9 @@ export = createLanguageServicePlugin(
 			session.addProtocolHandler('_vue:documentHighlights-full', ({ arguments: args }) => {
 				return (session as any).handlers.get('documentHighlights-full')?.({ arguments: args });
 			});
+			session.addProtocolHandler('_vue:encodedSemanticClassifications-full', ({ arguments: args }) => {
+				return (session as any).handlers.get('encodedSemanticClassifications-full')?.({ arguments: args });
+			});
 			session.addProtocolHandler('_vue:quickinfo', ({ arguments: args }) => {
 				return (session as any).handlers.get('quickinfo')?.({ arguments: args });
 			});
diff --git a/packages/typescript-plugin/lib/common.ts b/packages/typescript-plugin/lib/common.ts
diff --git a/packages/typescript-plugin/lib/requests/index.ts b/packages/typescript-plugin/lib/requests/index.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
