@vue/language-service 3.0.3 → 3.0.4

package/index.d.ts

@@ -1,14 +1,3 @@
 export * from '@volar/language-service';
 export * from '@volar/language-service/lib/utils/featureWorkers';
-import type { VueCompilerOptions } from '@vue/language-core';
-import type * as ts from 'typescript';
-declare module '@volar/language-service' {
-    interface ProjectContext {
-        vue?: {
-            compilerOptions: VueCompilerOptions;
-        };
-    }
-}
-export declare function createVueLanguageServicePlugins(ts: typeof import('typescript'), tsPluginClient: (import('@vue/typescript-plugin/lib/requests').Requests & {
-    getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>;
-}) | undefined): import("@volar/language-service").LanguageServicePlugin<any>[];
+export declare function createVueLanguageServicePlugins(ts: typeof import('typescript'), tsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined): import("@volar/language-service").LanguageServicePlugin<any>[];

package/index.js

@@ -33,40 +33,42 @@ const vue_component_semantic_tokens_1 = require("./lib/plugins/vue-component-sem
 const vue_directive_comments_1 = require("./lib/plugins/vue-directive-comments");
 const vue_document_drop_1 = require("./lib/plugins/vue-document-drop");
 const vue_document_highlights_1 = require("./lib/plugins/vue-document-highlights");
-const vue_document_links_1 = require("./lib/plugins/vue-document-links");
 const vue_extract_file_1 = require("./lib/plugins/vue-extract-file");
 const vue_global_types_error_1 = require("./lib/plugins/vue-global-types-error");
 const vue_inlayhints_1 = require("./lib/plugins/vue-inlayhints");
 const vue_missing_props_hints_1 = require("./lib/plugins/vue-missing-props-hints");
+const vue_scoped_class_links_1 = require("./lib/plugins/vue-scoped-class-links");
 const vue_sfc_1 = require("./lib/plugins/vue-sfc");
 const vue_suggest_define_assignment_1 = require("./lib/plugins/vue-suggest-define-assignment");
 const vue_template_1 = require("./lib/plugins/vue-template");
+const vue_template_ref_links_1 = require("./lib/plugins/vue-template-ref-links");
 const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
 function createVueLanguageServicePlugins(ts, tsPluginClient) {
-    const getTsPluginClient = () => tsPluginClient;
     const plugins = [
         (0, css_1.create)(),
         (0, volar_service_json_1.create)(),
         (0, volar_service_pug_beautify_1.create)(),
         (0, docCommentTemplate_1.create)(ts),
-        (0, typescript_semantic_tokens_1.create)(getTsPluginClient),
+        (0, typescript_semantic_tokens_1.create)(tsPluginClient),
         (0, syntactic_1.create)(ts),
         (0, vue_autoinsert_space_1.create)(),
-        (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient),
+        (0, vue_autoinsert_dotvalue_1.create)(ts, tsPluginClient),
         (0, vue_compiler_dom_errors_1.create)(),
-        (0, vue_component_semantic_tokens_1.create)(getTsPluginClient),
-        (0, vue_document_drop_1.create)(ts, getTsPluginClient),
-        (0, vue_document_links_1.create)(),
+        (0, vue_component_semantic_tokens_1.create)(tsPluginClient),
+        (0, vue_document_drop_1.create)(ts, tsPluginClient),
+        (0, vue_document_highlights_1.create)(tsPluginClient),
         (0, vue_directive_comments_1.create)(),
-        (0, vue_extract_file_1.create)(ts, getTsPluginClient),
+        (0, vue_extract_file_1.create)(ts, tsPluginClient),
         (0, vue_global_types_error_1.create)(),
         (0, vue_inlayhints_1.create)(ts),
-        (0, vue_missing_props_hints_1.create)(getTsPluginClient),
+        (0, vue_missing_props_hints_1.create)(tsPluginClient),
+        (0, vue_scoped_class_links_1.create)(),
         (0, vue_sfc_1.create)(),
         (0, vue_suggest_define_assignment_1.create)(),
-        (0, vue_template_1.create)('html', getTsPluginClient),
-        (0, vue_template_1.create)('pug', getTsPluginClient),
-        (0, vue_twoslash_queries_1.create)(getTsPluginClient),
+        (0, vue_template_1.create)('html', tsPluginClient),
+        (0, vue_template_1.create)('pug', tsPluginClient),
+        (0, vue_template_ref_links_1.create)(),
+        (0, vue_twoslash_queries_1.create)(tsPluginClient),
         (0, volar_service_emmet_1.create)({
             mappedLanguages: {
                 'vue-root-tags': 'html',
@@ -74,9 +76,6 @@ function createVueLanguageServicePlugins(ts, tsPluginClient) {
             },
         }),
     ];
-    if (tsPluginClient) {
-        plugins.push((0, vue_document_highlights_1.create)(tsPluginClient.getDocumentHighlights));
-    }
     return plugins;
 }
 //# sourceMappingURL=index.js.map

package/lib/plugins/css.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
 const volar_service_css_1 = require("volar-service-css");
-const vscode_uri_1 = require("vscode-uri");
+const utils_1 = require("./utils");
 function create() {
     const base = (0, volar_service_css_1.create)({ scssDocumentSelector: ['scss', 'postcss'] });
     return {
@@ -16,9 +16,9 @@ function create() {
                 async provideDiagnostics(document, token) {
                     let diagnostics = await baseInstance.provideDiagnostics?.(document, token) ?? [];
                     if (document.languageId === 'postcss') {
-                        diagnostics = diagnostics.filter(diag => diag.code !== 'css-semicolonexpected');
-                        diagnostics = diagnostics.filter(diag => diag.code !== 'css-ruleorselectorexpected');
-                        diagnostics = diagnostics.filter(diag => diag.code !== 'unknownAtRules');
+                        diagnostics = diagnostics.filter(diag => diag.code !== 'css-semicolonexpected'
+                            && diag.code !== 'css-ruleorselectorexpected'
+                            && diag.code !== 'unknownAtRules');
                     }
                     return diagnostics;
                 },
@@ -44,18 +44,12 @@ function create() {
                 },
             };
             function isWithinNavigationVirtualCode(document, position) {
-                const uri = vscode_uri_1.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.startsWith('style_')) {
+                const info = (0, utils_1.getEmbeddedInfo)(context, document, id => id.startsWith('style_'));
+                if (!info) {
                     return false;
                 }
-                const root = sourceScript.generated.root;
-                if (!(root instanceof language_core_1.VueVirtualCode)) {
-                    return false;
-                }
-                const block = root.sfc.styles.find(style => style.name === decoded[1]);
+                const { sourceScript, virtualCode, root } = info;
+                const block = root.sfc.styles.find(style => style.name === virtualCode.id);
                 if (!block) {
                     return false;
                 }
@@ -71,9 +65,7 @@ function create() {
                 }
                 const offset = document.offsetAt(position) + block.startTagEnd;
                 for (const { sourceOffsets, lengths, data } of script.mappings) {
-                    if (!sourceOffsets.length
-                        || !data.navigation
-                        || typeof data.navigation === 'object' && !data.navigation.shouldRename) {
+                    if (!sourceOffsets.length || !(0, language_core_1.isRenameEnabled)(data)) {
                         continue;
                     }
                     const start = sourceOffsets[0];

package/lib/plugins/typescript-semantic-tokens.d.ts

@@ -1,2 +1,2 @@
-import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-export declare function create(getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(tsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/typescript-semantic-tokens.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
-const language_core_1 = require("@vue/language-core");
 const semanticTokens_1 = require("volar-service-typescript/lib/semanticFeatures/semanticTokens");
-const vscode_uri_1 = require("vscode-uri");
-function create(getTsPluginClient) {
+const utils_1 = require("./utils");
+function create(tsPluginClient) {
     return {
-        name: 'typescript-highlights',
+        name: 'typescript-semantic-tokens',
         capabilities: {
             semanticTokensProvider: {
                 legend: {
@@ -36,20 +35,13 @@ function create(getTsPluginClient) {
             },
         },
         create(context) {
-            const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideDocumentSemanticTokens(document, range, legend) {
-                    const uri = vscode_uri_1.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 language_core_1.VueVirtualCode)) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, 'main');
+                    if (!info) {
                         return;
                     }
+                    const { root } = info;
                     const start = document.offsetAt(range.start);
                     const end = document.offsetAt(range.end);
                     const span = {

package/lib/plugins/utils.d.ts

@@ -1,3 +1,9 @@
-import type { TextDocument } from '@volar/language-service';
+import { type LanguageServiceContext, type SourceScript, type TextDocument } from '@volar/language-service';
+import { VueVirtualCode } from '@vue/language-core';
+import { URI } from 'vscode-uri';
 export declare function sleep(ms: number): Promise<unknown>;
-export declare function isTsDocument(document: TextDocument): boolean;
+export declare function getEmbeddedInfo(context: LanguageServiceContext, document: TextDocument, embeddedCodeId?: string | ((id: string) => boolean), languageId?: string): {
+    sourceScript: Required<SourceScript<URI>>;
+    virtualCode: import("@volar/language-service").VirtualCode;
+    root: VueVirtualCode;
+} | undefined;

package/lib/plugins/utils.js

@@ -1,14 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sleep = sleep;
-exports.isTsDocument = isTsDocument;
+exports.getEmbeddedInfo = getEmbeddedInfo;
+const language_core_1 = require("@vue/language-core");
+const vscode_uri_1 = require("vscode-uri");
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
-function isTsDocument(document) {
-    return document.languageId === 'javascript'
-        || document.languageId === 'typescript'
-        || document.languageId === 'javascriptreact'
-        || document.languageId === 'typescriptreact';
+function getEmbeddedInfo(context, document, embeddedCodeId, languageId) {
+    const uri = vscode_uri_1.URI.parse(document.uri);
+    const decoded = context.decodeEmbeddedDocumentUri(uri);
+    if (!decoded) {
+        return;
+    }
+    if (embeddedCodeId) {
+        if (typeof embeddedCodeId === 'string') {
+            if (decoded[1] !== embeddedCodeId) {
+                return;
+            }
+        }
+        else if (!embeddedCodeId(decoded[1])) {
+            return;
+        }
+    }
+    if (languageId && document.languageId !== languageId) {
+        return;
+    }
+    const sourceScript = context.language.scripts.get(decoded[0]);
+    if (!sourceScript?.generated) {
+        return;
+    }
+    const virtualCode = sourceScript.generated.embeddedCodes.get(decoded[1]);
+    if (!virtualCode) {
+        return;
+    }
+    const root = sourceScript.generated.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
+        return;
+    }
+    return {
+        sourceScript: sourceScript,
+        virtualCode,
+        root,
+    };
 }
 //# sourceMappingURL=utils.js.map

package/lib/plugins/vue-autoinsert-dotvalue.d copy.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
+export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/vue-autoinsert-dotvalue.d copy.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=vue-autoinsert-dotvalue.d%20copy.js.map

package/lib/plugins/vue-autoinsert-dotvalue.d.ts

@@ -1,2 +1,2 @@
-import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(ts: typeof import('typescript'), tsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/vue-autoinsert-dotvalue.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
-const vscode_uri_1 = require("vscode-uri");
 const utils_1 = require("./utils");
-function create(ts, getTsPluginClient) {
+function create(ts, tsPluginClient) {
     return {
         name: 'vue-autoinsert-dotvalue',
         capabilities: {
@@ -14,15 +13,15 @@ function create(ts, getTsPluginClient) {
             },
         },
         create(context) {
-            const tsPluginClient = getTsPluginClient?.(context);
             let currentReq = 0;
             return {
                 async provideAutoInsertSnippet(document, selection, change) {
-                    // selection must at end of change
-                    if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, id => id.startsWith('script_'));
+                    if (!info) {
                         return;
                     }
-                    if (!(0, utils_1.isTsDocument)(document)) {
+                    // selection must at end of change
+                    if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
                         return;
                     }
                     if (!isCharacterTyping(document, change)) {
@@ -38,46 +37,30 @@ function create(ts, getTsPluginClient) {
                     if (!enabled) {
                         return;
                     }
-                    const uri = vscode_uri_1.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) {
-                        return;
-                    }
-                    const root = sourceScript.generated.root;
-                    if (!(root instanceof language_core_1.VueVirtualCode)) {
-                        return;
-                    }
+                    const { sourceScript, virtualCode, root } = info;
                     const { sfc } = root;
                     const blocks = [sfc.script, sfc.scriptSetup].filter(block => !!block);
                     if (!blocks.length) {
                         return;
                     }
-                    let sourceCodeOffset = document.offsetAt(selection);
-                    let mapped = false;
-                    for (const [, map] of context.language.maps.forEach(virtualCode)) {
-                        for (const [sourceOffset] of map.toSourceLocation(sourceCodeOffset)) {
-                            sourceCodeOffset = sourceOffset;
-                            mapped = true;
-                            break;
-                        }
-                        if (mapped) {
-                            break;
-                        }
+                    let sourceOffset;
+                    const map = context.language.maps.get(virtualCode, sourceScript);
+                    for (const [offset] of map.toSourceLocation(document.offsetAt(selection))) {
+                        sourceOffset = offset;
+                        break;
                     }
-                    if (!mapped) {
+                    if (sourceOffset === undefined) {
                         return;
                     }
                     for (const { ast, startTagEnd, endTagStart } of blocks) {
-                        if (sourceCodeOffset < startTagEnd || sourceCodeOffset > endTagStart) {
+                        if (sourceOffset < startTagEnd || sourceOffset > endTagStart) {
                             continue;
                         }
-                        if (isBlacklistNode(ts, ast, sourceCodeOffset - startTagEnd, false)) {
+                        if (isBlacklistNode(ts, ast, sourceOffset - startTagEnd, false)) {
                             return;
                         }
                     }
-                    const props = await tsPluginClient?.getPropertiesAtLocation(root.fileName, sourceCodeOffset) ?? [];
+                    const props = await tsPluginClient?.getPropertiesAtLocation(root.fileName, sourceOffset) ?? [];
                     if (props.some(prop => prop === 'value')) {
                         return '${1:.value}';
                     }

package/lib/plugins/vue-compiler-dom-errors.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
-const language_core_1 = require("@vue/language-core");
-const vscode_uri_1 = require("vscode-uri");
+const utils_1 = require("./utils");
 function create() {
     return {
         name: 'vue-compiler-dom-errors',
@@ -15,54 +14,37 @@ function create() {
         create(context) {
             return {
                 provideDiagnostics(document) {
-                    if (!isSupportedDocument(document)) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, 'template');
+                    if (!info) {
                         return;
                     }
-                    const uri = vscode_uri_1.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 (!virtualCode) {
-                        return;
-                    }
-                    const root = sourceScript?.generated?.root;
-                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                    const { root } = info;
+                    const { template } = root.sfc;
+                    if (!template) {
                         return;
                     }
-                    const templateErrors = [];
-                    const { template } = root.sfc;
-                    if (template) {
-                        for (const error of template.errors) {
-                            onCompilerError(error, 1);
-                        }
-                        for (const warning of template.warnings) {
-                            onCompilerError(warning, 2);
-                        }
-                        function onCompilerError(error, severity) {
-                            const templateHtmlRange = {
-                                start: error.loc?.start.offset ?? 0,
-                                end: error.loc?.end.offset ?? 0,
-                            };
-                            let errorMessage = error.message;
-                            templateErrors.push({
+                    const diagnostics = [];
+                    for (const [errors, severity] of [
+                        [template.errors, 1],
+                        [template.warnings, 2],
+                    ]) {
+                        for (const error of errors) {
+                            diagnostics.push({
                                 range: {
-                                    start: document.positionAt(templateHtmlRange.start),
-                                    end: document.positionAt(templateHtmlRange.end),
+                                    start: document.positionAt(error.loc?.start.offset ?? 0),
+                                    end: document.positionAt(error.loc?.end.offset ?? 0),
                                 },
                                 severity,
                                 code: error.code,
                                 source: 'vue',
-                                message: errorMessage,
+                                message: error.message,
                             });
                         }
                     }
-                    return templateErrors;
+                    return diagnostics;
                 },
             };
         },
     };
-    function isSupportedDocument(document) {
-        return document.languageId === 'jade' || document.languageId === 'html';
-    }
 }
 //# sourceMappingURL=vue-compiler-dom-errors.js.map

package/lib/plugins/vue-component-semantic-tokens.d.ts

@@ -1,2 +1,2 @@
-import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-export declare function create(getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(tsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/vue-component-semantic-tokens.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
-const vscode_uri_1 = require("vscode-uri");
-function create(getTsPluginClient) {
+const utils_1 = require("./utils");
+function create(tsPluginClient) {
     return {
-        name: 'vue-component-highlights',
+        name: 'vue-component-semantic-tokens',
         capabilities: {
             semanticTokensProvider: {
                 legend: {
@@ -15,55 +15,29 @@ function create(getTsPluginClient) {
             },
         },
         create(context) {
-            const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideDocumentSemanticTokens(document, range, legend) {
-                    const uri = vscode_uri_1.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 language_core_1.VueVirtualCode)) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, 'template');
+                    if (!info) {
                         return;
                     }
+                    const { root } = info;
                     const { template } = root.sfc;
-                    if (!template) {
+                    if (!template?.ast) {
                         return;
                     }
-                    const result = [];
-                    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, template, spanTemplateRange) {
-                const result = [];
-                const validComponentNames = await tsPluginClient?.getComponentNames(fileName) ?? [];
-                const elements = new Set(await tsPluginClient?.getElementNames(fileName) ?? []);
-                const components = new Set([
-                    ...validComponentNames,
-                    ...validComponentNames.map(language_core_1.hyphenateTag),
-                ]);
-                if (template.ast) {
+                    const componentSpans = [];
+                    const start = document.offsetAt(range.start);
+                    const end = document.offsetAt(range.end);
+                    const validComponentNames = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+                    const elements = new Set(await tsPluginClient?.getElementNames(root.fileName) ?? []);
+                    const components = new Set([
+                        ...validComponentNames,
+                        ...validComponentNames.map(language_core_1.hyphenateTag),
+                    ]);
                     for (const node of (0, language_core_1.forEachElementNode)(template.ast)) {
-                        if (node.loc.end.offset <= spanTemplateRange.start
-                            || node.loc.start.offset >= (spanTemplateRange.start + spanTemplateRange.length)) {
+                        if (node.loc.end.offset <= start
+                            || node.loc.start.offset >= end) {
                             continue;
                         }
                         if (components.has(node.tag) && !elements.has(node.tag)) {
@@ -71,21 +45,33 @@ function create(getTsPluginClient) {
                             if (template.lang === 'html') {
                                 start += '<'.length;
                             }
-                            result.push({
+                            componentSpans.push({
                                 start,
                                 length: node.tag.length,
                             });
                             if (template.lang === 'html' && !node.isSelfClosing) {
-                                result.push({
+                                componentSpans.push({
                                     start: node.loc.start.offset + node.loc.source.lastIndexOf(node.tag),
                                     length: node.tag.length,
                                 });
                             }
                         }
                     }
-                }
-                return result;
-            }
+                    const result = [];
+                    const tokenType = legend.tokenTypes.indexOf('component');
+                    for (const span of componentSpans) {
+                        const position = document.positionAt(span.start);
+                        result.push([
+                            position.line,
+                            position.character,
+                            span.length,
+                            tokenType,
+                            0,
+                        ]);
+                    }
+                    return result;
+                },
+            };
         },
     };
 }

package/lib/plugins/vue-destructured-props-hints.d.ts

@@ -0,0 +1,7 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+import type * as ts from 'typescript';
+export declare function create(ts: typeof import('typescript')): LanguageServicePlugin;
+/**
+ * Refactored from https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/definePropsDestructure.ts
+ */
+export declare function findDestructuredProps(ts: typeof import('typescript'), ast: ts.SourceFile, props: MapIterator<string>): [ts.Identifier, boolean][];