@vue/language-service 2.0.5 → 2.0.7

package/index.d.ts

@@ -2,6 +2,7 @@ export * from '@volar/language-service';
 export * from '@vue/language-core';
 export * from './lib/ideFeatures/nameCasing';
 export * from './lib/types';
-import type { ServiceEnvironment, ServicePlugin } from '@volar/language-service';
+import type { ServiceContext, ServiceEnvironment, ServicePlugin } from '@volar/language-service';
 import type { VueCompilerOptions } from './lib/types';
-export declare function createVueServicePlugins(ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): ServicePlugin[];
+export declare function createVueServicePlugins(ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, getTsPluginClient?: (context: ServiceContext) => typeof import("@vue/typescript-plugin/lib/client") | undefined, hybridMode?: boolean): ServicePlugin[];
+export declare function createDefaultGetTsPluginClient(ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions): (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined;

package/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createVueServicePlugins = void 0;
+exports.createDefaultGetTsPluginClient = exports.createVueServicePlugins = void 0;
 __exportStar(require("@volar/language-service"), exports);
 __exportStar(require("@vue/language-core"), exports);
 __exportStar(require("./lib/ideFeatures/nameCasing"), exports);
@@ -24,6 +24,8 @@ const volar_service_json_1 = require("volar-service-json");
 const volar_service_pug_beautify_1 = require("volar-service-pug-beautify");
 const volar_service_typescript_1 = require("volar-service-typescript");
 const volar_service_typescript_twoslash_queries_1 = require("volar-service-typescript-twoslash-queries");
+const docCommentTemplate_1 = require("volar-service-typescript/lib/plugins/docCommentTemplate");
+const syntactic_1 = require("volar-service-typescript/lib/plugins/syntactic");
 const css_1 = require("./lib/plugins/css");
 const vue_autoinsert_dotvalue_1 = require("./lib/plugins/vue-autoinsert-dotvalue");
 const vue_autoinsert_parentheses_1 = require("./lib/plugins/vue-autoinsert-parentheses");
@@ -37,28 +39,83 @@ const vue_template_1 = require("./lib/plugins/vue-template");
 const vue_toggle_v_bind_codeaction_1 = require("./lib/plugins/vue-toggle-v-bind-codeaction");
 const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
 const vue_visualize_hidden_callback_param_1 = require("./lib/plugins/vue-visualize-hidden-callback-param");
-function createVueServicePlugins(ts, getVueOptions, tsPluginClient) {
-    return [
-        (0, volar_service_typescript_1.create)(ts),
-        (0, volar_service_typescript_twoslash_queries_1.create)(),
-        (0, css_1.create)(),
-        (0, volar_service_pug_beautify_1.create)(),
-        (0, volar_service_json_1.create)(),
-        (0, vue_template_1.create)('html', ts, getVueOptions, tsPluginClient),
-        (0, vue_template_1.create)('pug', ts, getVueOptions, tsPluginClient),
-        (0, vue_sfc_1.create)(),
-        (0, vue_twoslash_queries_1.create)(ts, tsPluginClient),
-        (0, vue_codelens_references_1.create)(),
-        (0, vue_document_drop_1.create)(ts),
-        (0, vue_autoinsert_dotvalue_1.create)(ts, tsPluginClient),
-        (0, vue_autoinsert_parentheses_1.create)(ts),
-        (0, vue_autoinsert_space_1.create)(),
-        (0, vue_visualize_hidden_callback_param_1.create)(),
-        (0, vue_directive_comments_1.create)(),
-        (0, vue_extract_file_1.create)(ts, tsPluginClient),
-        (0, vue_toggle_v_bind_codeaction_1.create)(ts),
-        (0, volar_service_emmet_1.create)(),
-    ];
+const common_1 = require("@vue/typescript-plugin/lib/common");
+const collectExtractProps_1 = require("@vue/typescript-plugin/lib/requests/collectExtractProps");
+const componentInfos_1 = require("@vue/typescript-plugin/lib/requests/componentInfos");
+const getPropertiesAtLocation_1 = require("@vue/typescript-plugin/lib/requests/getPropertiesAtLocation");
+const getQuickInfoAtPosition_1 = require("@vue/typescript-plugin/lib/requests/getQuickInfoAtPosition");
+function createVueServicePlugins(ts, getVueOptions, getTsPluginClient = createDefaultGetTsPluginClient(ts, getVueOptions), hybridMode = false) {
+    const plugins = [];
+    if (!hybridMode) {
+        plugins.push(...(0, volar_service_typescript_1.create)(ts));
+        for (let i = 0; i < plugins.length; i++) {
+            const plugin = plugins[i];
+            if (plugin.name === 'typescript-semantic') {
+                plugins[i] = {
+                    ...plugin,
+                    create(context) {
+                        const created = plugin.create(context);
+                        if (!context.language.typescript) {
+                            return created;
+                        }
+                        const languageService = created.provide['typescript/languageService']();
+                        const vueOptions = getVueOptions(context.env);
+                        (0, common_1.decorateLanguageServiceForVue)(context.language.files, languageService, vueOptions, ts, false);
+                        return created;
+                    },
+                };
+                break;
+            }
+        }
+    }
+    else {
+        plugins.push((0, syntactic_1.create)(ts), (0, docCommentTemplate_1.create)(ts));
+    }
+    plugins.push((0, volar_service_typescript_twoslash_queries_1.create)(ts), (0, css_1.create)(), (0, volar_service_pug_beautify_1.create)(), (0, volar_service_json_1.create)(), (0, vue_template_1.create)('html', ts, getVueOptions, getTsPluginClient), (0, vue_template_1.create)('pug', ts, getVueOptions, getTsPluginClient), (0, vue_sfc_1.create)(), (0, vue_twoslash_queries_1.create)(ts, getTsPluginClient), (0, vue_codelens_references_1.create)(), (0, vue_document_drop_1.create)(ts), (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient), (0, vue_autoinsert_parentheses_1.create)(ts), (0, vue_autoinsert_space_1.create)(), (0, vue_visualize_hidden_callback_param_1.create)(), (0, vue_directive_comments_1.create)(), (0, vue_extract_file_1.create)(ts, getTsPluginClient), (0, vue_toggle_v_bind_codeaction_1.create)(ts), (0, volar_service_emmet_1.create)());
+    return plugins;
 }
 exports.createVueServicePlugins = createVueServicePlugins;
+function createDefaultGetTsPluginClient(ts, getVueOptions) {
+    return context => {
+        if (!context.language.typescript) {
+            return;
+        }
+        const requestContext = {
+            typescript: ts,
+            files: context.language.files,
+            languageService: context.inject('typescript/languageService'),
+            vueOptions: getVueOptions(context.env),
+            isTsPlugin: false,
+            getFileId: context.env.typescript.fileNameToUri,
+        };
+        return {
+            async collectExtractProps(...args) {
+                return await collectExtractProps_1.collectExtractProps.apply(requestContext, args);
+            },
+            async getPropertiesAtLocation(...args) {
+                return await getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, args);
+            },
+            async getComponentEvents(...args) {
+                return await componentInfos_1.getComponentEvents.apply(requestContext, args);
+            },
+            async getComponentNames(...args) {
+                return await componentInfos_1.getComponentNames.apply(requestContext, args);
+            },
+            async getComponentProps(...args) {
+                return await componentInfos_1.getComponentProps.apply(requestContext, args);
+            },
+            async getElementAttrs(...args) {
+                return await componentInfos_1.getElementAttrs.apply(requestContext, args);
+            },
+            async getTemplateContextProps(...args) {
+                return await componentInfos_1.getTemplateContextProps.apply(requestContext, args);
+            },
+            async getQuickInfoAtPosition(...args) {
+                return await getQuickInfoAtPosition_1.getQuickInfoAtPosition.apply(requestContext, args);
+            },
+        };
+    };
+    ;
+}
+exports.createDefaultGetTsPluginClient = createDefaultGetTsPluginClient;
 //# sourceMappingURL=index.js.map

package/lib/ideFeatures/nameCasing.d.ts

@@ -1,8 +1,8 @@
 import type { ServiceContext } from '@volar/language-service';
 import type * as vscode from 'vscode-languageserver-protocol';
 import { AttrNameCasing, TagNameCasing } from '../types';
-export declare function convertTagName(context: ServiceContext, uri: string, casing: TagNameCasing, tsPluginClient: typeof import('@vue/typescript-plugin/lib/client')): Promise<vscode.TextEdit[] | undefined>;
-export declare function convertAttrName(context: ServiceContext, uri: string, casing: AttrNameCasing, tsPluginClient: typeof import('@vue/typescript-plugin/lib/client')): Promise<vscode.TextEdit[] | undefined>;
+export declare function convertTagName(context: ServiceContext, uri: string, casing: TagNameCasing, tsPluginClient: typeof import('@vue/typescript-plugin/lib/client') | undefined): Promise<vscode.TextEdit[] | undefined>;
+export declare function convertAttrName(context: ServiceContext, uri: string, casing: AttrNameCasing, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): Promise<vscode.TextEdit[] | undefined>;
 export declare function getNameCasing(context: ServiceContext, uri: string, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): Promise<{
     tag: TagNameCasing;
     attr: AttrNameCasing;

package/lib/ideFeatures/nameCasing.js

@@ -7,18 +7,21 @@ const computeds_1 = require("computeds");
 const types_1 = require("../types");
 async function convertTagName(context, uri, casing, tsPluginClient) {
     const sourceFile = context.language.files.get(uri);
-    if (!sourceFile)
+    if (!sourceFile) {
         return;
+    }
     const rootCode = sourceFile?.generated?.code;
-    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
+    }
     const desc = rootCode.sfc;
-    if (!desc.template)
+    if (!desc.template) {
         return;
+    }
     const template = desc.template;
     const document = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = await tsPluginClient.getComponentNames(rootCode.fileName) ?? [];
+    const components = await tsPluginClient?.getComponentNames(rootCode.fileName) ?? [];
     const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { offsets }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
@@ -41,23 +44,26 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
 exports.convertTagName = convertTagName;
 async function convertAttrName(context, uri, casing, tsPluginClient) {
     const sourceFile = context.language.files.get(uri);
-    if (!sourceFile)
+    if (!sourceFile) {
         return;
+    }
     const rootCode = sourceFile?.generated?.code;
-    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
+    }
     const desc = rootCode.sfc;
-    if (!desc.template)
+    if (!desc.template) {
         return;
+    }
     const template = desc.template;
     const document = context.documents.get(uri, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = await tsPluginClient.getComponentNames(rootCode.fileName) ?? [];
+    const components = await tsPluginClient?.getComponentNames(rootCode.fileName) ?? [];
     const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { attrs }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
-            const props = await tsPluginClient.getComponentProps(rootCode.fileName, componentName) ?? [];
+            const props = await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? [];
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
                 if (propName) {
@@ -163,8 +169,9 @@ const map = new WeakMap();
 function getTemplateTagsAndAttrs(sourceFile) {
     if (!map.has(sourceFile)) {
         const getter = (0, computeds_1.computed)(() => {
-            if (!(sourceFile instanceof vue.VueGeneratedCode))
+            if (!(sourceFile instanceof vue.VueGeneratedCode)) {
                 return;
+            }
             const ast = sourceFile.sfc.template?.ast;
             const tags = new Map();
             if (ast) {

package/lib/plugins/data.js

@@ -33,12 +33,15 @@ function loadTemplateData(lang) {
     const vOn = data.globalAttributes?.find(d => d.name === 'v-on');
     const vSlot = data.globalAttributes?.find(d => d.name === 'v-slot');
     const vBind = data.globalAttributes?.find(d => d.name === 'v-bind');
-    if (vOn)
+    if (vOn) {
         data.globalAttributes?.push({ ...vOn, name: '@' });
-    if (vSlot)
+    }
+    if (vSlot) {
         data.globalAttributes?.push({ ...vSlot, name: '#' });
-    if (vBind)
+    }
+    if (vBind) {
         data.globalAttributes?.push({ ...vBind, name: ':' });
+    }
     return data;
 }
 exports.loadTemplateData = loadTemplateData;

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

@@ -1,8 +1,8 @@
-import type { ServicePlugin } from '@volar/language-service';
+import type { ServiceContext, ServicePlugin } from '@volar/language-service';
 import type * as ts from 'typescript';
 import type * as vscode from 'vscode-languageserver-protocol';
 import type { TextDocument } from 'vscode-languageserver-textdocument';
-export declare function create(ts: typeof import('typescript'), tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): ServicePlugin;
+export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): ServicePlugin;
 export declare function isCharacterTyping(document: TextDocument, lastChange: {
     range: vscode.Range;
     text: string;

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

@@ -11,28 +11,34 @@ function getAst(ts, fileName, snapshot, scriptKind) {
     }
     return ast;
 }
-function create(ts, tsPluginClient) {
+function create(ts, getTsPluginClient) {
     return {
         name: 'vue-autoinsert-dotvalue',
         create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
             let currentReq = 0;
             return {
                 async provideAutoInsertionEdit(document, position, lastChange) {
-                    if (!isTsDocument(document))
+                    if (!isTsDocument(document)) {
                         return;
-                    if (!isCharacterTyping(document, lastChange))
+                    }
+                    if (!isCharacterTyping(document, lastChange)) {
                         return;
+                    }
                     const req = ++currentReq;
                     // Wait for tsserver to sync
                     await sleep(250);
-                    if (req !== currentReq)
+                    if (req !== currentReq) {
                         return;
+                    }
                     const enabled = await context.env.getConfiguration?.('vue.autoInsert.dotValue') ?? true;
-                    if (!enabled)
+                    if (!enabled) {
                         return;
+                    }
                     const [code, file] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!file)
+                    if (!file) {
                         return;
+                    }
                     let ast;
                     let sourceCodeOffset = document.offsetAt(position);
                     const fileName = context.env.typescript.uriToFileName(file.id);
@@ -58,8 +64,9 @@ function create(ts, tsPluginClient) {
                     else {
                         ast = getAst(ts, fileName, file.snapshot);
                     }
-                    if (isBlacklistNode(ts, ast, document.offsetAt(position), false))
+                    if (isBlacklistNode(ts, ast, document.offsetAt(position), false)) {
                         return;
+                    }
                     const props = await tsPluginClient?.getPropertiesAtLocation(fileName, sourceCodeOffset) ?? [];
                     if (props.some(prop => prop === 'value')) {
                         return '${1:.value}';
@@ -137,8 +144,9 @@ function isBlacklistNode(ts, node, pos, allowAccessDotValue) {
     else {
         let _isBlacklistNode = false;
         node.forEachChild(node => {
-            if (_isBlacklistNode)
+            if (_isBlacklistNode) {
                 return;
+            }
             if (pos >= node.getFullStart() && pos <= node.getEnd()) {
                 if (isBlacklistNode(ts, node, pos, allowAccessDotValue)) {
                     _isBlacklistNode = true;

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

@@ -9,13 +9,16 @@ function create(ts) {
             return {
                 async provideAutoInsertionEdit(document, position, lastChange) {
                     const enabled = await context.env.getConfiguration?.('vue.autoInsert.parentheses') ?? false;
-                    if (!enabled)
+                    if (!enabled) {
                         return;
-                    if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, lastChange))
+                    }
+                    if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, lastChange)) {
                         return;
+                    }
                     const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (virtualCode?.id !== 'template_format')
+                    if (virtualCode?.id !== 'template_format') {
                         return;
+                    }
                     const offset = document.offsetAt(position);
                     for (const mappedRange of virtualCode.mappings) {
                         const generatedCodeEnd = mappedRange.generatedOffsets[mappedRange.generatedOffsets.length - 1]

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

@@ -9,8 +9,9 @@ function create() {
                 async provideAutoInsertionEdit(document, _, lastChange) {
                     if (document.languageId === 'html' || document.languageId === 'jade') {
                         const enabled = await context.env.getConfiguration?.('vue.autoInsert.bracketSpacing') ?? true;
-                        if (!enabled)
+                        if (!enabled) {
                             return;
+                        }
                         if (lastChange.text === '{}'
                             && document.getText({
                                 start: { line: lastChange.range.start.line, character: lastChange.range.start.character - 1 },

package/lib/plugins/vue-codelens-references.js

@@ -12,8 +12,9 @@ function create() {
                         const result = [];
                         for (const map of context.documents.getMaps(virtualCode) ?? []) {
                             for (const mapping of map.map.mappings) {
-                                if (!mapping.data.__referencesCodeLens)
+                                if (!mapping.data.__referencesCodeLens) {
                                     continue;
+                                }
                                 result.push({
                                     start: document.positionAt(mapping.generatedOffsets[0]),
                                     end: document.positionAt(mapping.generatedOffsets[mapping.generatedOffsets.length - 1]
@@ -27,8 +28,9 @@ function create() {
             };
             function worker(uri, callback) {
                 const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(uri);
-                if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || !sourceFile)
+                if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || !sourceFile) {
                     return;
+                }
                 return callback(virtualCode, sourceFile);
             }
         },

package/lib/plugins/vue-directive-comments.js

@@ -14,12 +14,14 @@ function create() {
         create() {
             return {
                 provideCompletionItems(document, position) {
-                    if (document.languageId !== 'html')
+                    if (document.languageId !== 'html') {
                         return;
+                    }
                     const line = document.getText({ start: { line: position.line, character: 0 }, end: position });
                     const cmdStart = line.match(directiveCommentReg);
-                    if (!cmdStart)
+                    if (!cmdStart) {
                         return;
+                    }
                     const startIndex = cmdStart.index + cmdStart[0].length;
                     const remainText = line.substring(startIndex);
                     const result = [];
@@ -27,7 +29,6 @@ function create() {
                         let match = true;
                         for (let i = 0; i < remainText.length; i++) {
                             if (remainText[i] !== cmd[i]) {
-                                console.log(JSON.stringify(remainText[i]), JSON.stringify(cmd[i]));
                                 match = false;
                                 break;
                             }

package/lib/plugins/vue-document-drop.js

@@ -13,27 +13,31 @@ function create(ts) {
             let casing = types_1.TagNameCasing.Pascal; // TODO
             return {
                 async provideDocumentDropEdits(document, _position, dataTransfer) {
-                    if (document.languageId !== 'html')
+                    if (document.languageId !== 'html') {
                         return;
+                    }
                     const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
                     const vueVirtualCode = sourceFile?.generated?.code;
-                    if (!virtualCode || !(vueVirtualCode instanceof language_core_1.VueGeneratedCode))
+                    if (!virtualCode || !(vueVirtualCode instanceof language_core_1.VueGeneratedCode)) {
                         return;
+                    }
                     let importUri;
                     for (const [mimeType, item] of dataTransfer) {
                         if (mimeType === 'text/uri-list') {
                             importUri = item.value;
                         }
                     }
-                    if (!importUri?.endsWith('.vue'))
+                    if (!importUri?.endsWith('.vue')) {
                         return;
+                    }
                     let baseName = importUri.substring(importUri.lastIndexOf('/') + 1);
                     baseName = baseName.substring(0, baseName.lastIndexOf('.'));
                     const newName = (0, shared_1.capitalize)((0, shared_1.camelize)(baseName));
                     const { sfc } = vueVirtualCode;
                     const script = sfc.scriptSetup ?? sfc.script;
-                    if (!script)
+                    if (!script) {
                         return;
+                    }
                     const additionalEdit = {};
                     const code = [...(0, language_core_1.forEachEmbeddedCode)(vueVirtualCode)].find(code => code.id === (sfc.scriptSetup ? 'scriptSetupFormat' : 'scriptFormat'));
                     const lastImportNode = (0, vue_extract_file_1.getLastImportNode)(ts, script.ast);

package/lib/plugins/vue-extract-file.d.ts

@@ -1,6 +1,6 @@
-import type { ServicePlugin } from '@volar/language-service';
+import type { ServiceContext, ServicePlugin } from '@volar/language-service';
 import type * as ts from 'typescript';
-export declare function create(ts: typeof import('typescript'), tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): ServicePlugin;
+export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): ServicePlugin;
 export declare function getLastImportNode(ts: typeof import('typescript'), sourceFile: ts.SourceFile): ts.Node | undefined;
 export declare function createAddComponentToOptionEdit(ts: typeof import('typescript'), ast: ts.SourceFile, componentName: string): {
     range: import("@vue/language-core").TextRange;

package/lib/plugins/vue-extract-file.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAddComponentToOptionEdit = exports.getLastImportNode = exports.create = void 0;
 const language_core_1 = require("@vue/language-core");
 const unicodeReg = /\\u/g;
-function create(ts, tsPluginClient) {
+function create(ts, getTsPluginClient) {
     return {
         name: 'vue-extract-file',
         create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideCodeActions(document, range, _context) {
                     const startOffset = document.offsetAt(range.start);
@@ -15,15 +16,18 @@ function create(ts, tsPluginClient) {
                         return;
                     }
                     const [code, vueCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!(vueCode?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template')
+                    if (!(vueCode?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template') {
                         return;
+                    }
                     const { sfc } = vueCode.generated.code;
                     const script = sfc.scriptSetup ?? sfc.script;
-                    if (!sfc.template || !script)
+                    if (!sfc.template || !script) {
                         return;
+                    }
                     const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template);
-                    if (!templateCodeRange)
+                    if (!templateCodeRange) {
                         return;
+                    }
                     return [
                         {
                             title: 'Extract into new dumb component',
@@ -40,20 +44,24 @@ function create(ts, tsPluginClient) {
                     const { uri, range, newName } = codeAction.data;
                     const [startOffset, endOffset] = range;
                     const [code, sourceFile] = context.documents.getVirtualCodeByUri(uri);
-                    if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template')
+                    if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template') {
                         return codeAction;
+                    }
                     const document = context.documents.get(uri, code.languageId, code.snapshot);
                     const sfcDocument = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
                     const { sfc } = sourceFile.generated.code;
                     const script = sfc.scriptSetup ?? sfc.script;
-                    if (!sfc.template || !script)
+                    if (!sfc.template || !script) {
                         return codeAction;
+                    }
                     const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template);
-                    if (!templateCodeRange)
+                    if (!templateCodeRange) {
                         return codeAction;
+                    }
                     const toExtract = await tsPluginClient?.collectExtractProps(sourceFile.generated.code.fileName, templateCodeRange) ?? [];
-                    if (!toExtract)
+                    if (!toExtract) {
                         return codeAction;
+                    }
                     const templateInitialIndent = await context.env.getConfiguration('vue.format.template.initialIndent') ?? true;
                     const scriptInitialIndent = await context.env.getConfiguration('vue.format.script.initialIndent') ?? false;
                     const newUri = sfcDocument.uri.substring(0, sfcDocument.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
@@ -200,8 +208,9 @@ function selectTemplateCode(startOffset, endOffset, templateBlock) {
     }
 }
 function constructTag(name, attributes, initialIndent, content) {
-    if (initialIndent)
+    if (initialIndent) {
         content = content.split('\n').map(line => `\t${line}`).join('\n');
+    }
     const attributesString = attributes.length ? ` ${attributes.join(' ')}` : '';
     return `<${name}${attributesString}>\n${content}\n</${name}>\n`;
 }
@@ -220,8 +229,9 @@ function getLastImportNode(ts, sourceFile) {
 exports.getLastImportNode = getLastImportNode;
 function createAddComponentToOptionEdit(ts, ast, componentName) {
     const exportDefault = language_core_1.scriptRanges.parseScriptRanges(ts, ast, false, true).exportDefault;
-    if (!exportDefault)
+    if (!exportDefault) {
         return;
+    }
     // https://github.com/microsoft/TypeScript/issues/36174
     const printer = ts.createPrinter();
     if (exportDefault.componentsOption && exportDefault.componentsOptionNode) {

package/lib/plugins/vue-sfc.js

@@ -12,16 +12,18 @@ function create() {
         create(context) {
             const htmlPlugin = (0, volar_service_html_1.create)({
                 documentSelector: ['vue'],
-                useCustomDataProviders: false,
+                useDefaultDataProvider: false,
+                getCustomData(context) {
+                    sfcDataProvider ??= html.newHTMLDataProvider('vue', (0, data_1.loadLanguageBlocks)(context.env.locale ?? 'en'));
+                    return [sfcDataProvider];
+                },
             }).create(context);
             const htmlLanguageService = htmlPlugin.provide['html/languageService']();
-            sfcDataProvider ??= html.newHTMLDataProvider('vue', (0, data_1.loadLanguageBlocks)(context.env.locale ?? 'en'));
-            htmlLanguageService.setDataProviders(false, [sfcDataProvider]);
             return {
                 ...htmlPlugin,
                 provide: {
                     'vue/vueFile': document => {
-                        return worker(document, (vueFile) => {
+                        return worker(document, vueFile => {
                             return vueFile;
                         });
                     },
@@ -49,7 +51,7 @@ function create() {
                 },
                 provideDocumentLinks: undefined,
                 provideDocumentSymbols(document) {
-                    return worker(document, (vueSourceFile) => {
+                    return worker(document, vueSourceFile => {
                         const result = [];
                         const descriptor = vueSourceFile.sfc;
                         if (descriptor.template) {
@@ -96,10 +98,12 @@ function create() {
                         }
                         for (const style of descriptor.styles) {
                             let name = 'style';
-                            if (style.scoped)
+                            if (style.scoped) {
                                 name += ' scoped';
-                            if (style.module)
+                            }
+                            if (style.module) {
                                 name += ' module';
+                            }
                             result.push({
                                 name,
                                 kind: 2,
@@ -142,7 +146,6 @@ function create() {
                             ...formatSettings,
                             unformatted: '',
                             contentUnformatted: blockTypes.join(','),
-                            extraLiners: blockTypes.join(','),
                             endWithNewline: options.insertFinalNewline ? true
                                 : options.trimFinalNewlines ? false
                                     : document.getText().endsWith('\n'),

package/lib/plugins/vue-template.d.ts

@@ -1,3 +1,3 @@
-import type { ServiceEnvironment } from '@volar/language-service';
+import type { ServiceContext, ServiceEnvironment } from '@volar/language-service';
 import { ServicePlugin, VueCompilerOptions } from '../types';
-export declare function create(mode: 'html' | 'pug', ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): ServicePlugin;
+export declare function create(mode: 'html' | 'pug', ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): ServicePlugin;

package/lib/plugins/vue-template.js

@@ -10,9 +10,10 @@ const nameCasing_1 = require("../ideFeatures/nameCasing");
 const types_1 = require("../types");
 const data_1 = require("./data");
 const vscode_uri_1 = require("vscode-uri");
+const common_1 = require("@vue/typescript-plugin/lib/common");
 let builtInData;
 let modelData;
-function create(mode, ts, getVueOptions, tsPluginClient) {
+function create(mode, ts, getVueOptions, getTsPluginClient) {
     let customData = [];
     let extraCustomData = [];
     const onDidChangeCustomDataListeners = new Set();
@@ -41,6 +42,7 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
             '@', // vue event shorthand
         ],
         create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
             const baseServiceInstance = baseService.create(context);
             const vueCompilerOptions = getVueOptions(context.env);
             builtInData ??= (0, data_1.loadTemplateData)(context.env.locale ?? 'en');
@@ -82,8 +84,9 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                     disposable?.dispose();
                 },
                 async provideCompletionItems(document, position, completionContext, token) {
-                    if (!isSupportedDocument(document))
+                    if (!isSupportedDocument(document)) {
                         return;
+                    }
                     let sync;
                     let currentVersion;
                     const [_, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
@@ -95,23 +98,27 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                     while (currentVersion !== (currentVersion = await sync?.())) {
                         htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
                     }
-                    if (!htmlComplete)
+                    if (!htmlComplete) {
                         return;
+                    }
                     if (sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) {
                         await afterHtmlCompletion(htmlComplete, context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot), sourceFile.generated.code);
                     }
                     return htmlComplete;
                 },
                 async provideInlayHints(document) {
-                    if (!isSupportedDocument(document))
+                    if (!isSupportedDocument(document)) {
                         return;
+                    }
                     const enabled = await context.env.getConfiguration?.('vue.inlayHints.missingProps') ?? false;
-                    if (!enabled)
+                    if (!enabled) {
                         return;
+                    }
                     const result = [];
                     const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!virtualCode)
+                    if (!virtualCode) {
                         return;
+                    }
                     for (const map of context.documents.getMaps(virtualCode)) {
                         const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
                         const scanner = getScanner(baseServiceInstance, document);
@@ -203,23 +210,28 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                     return result;
                 },
                 provideHover(document, position, token) {
-                    if (!isSupportedDocument(document))
+                    if (!isSupportedDocument(document)) {
                         return;
-                    if (context.documents.getVirtualCodeByUri(document.uri)[0])
+                    }
+                    if (context.documents.getVirtualCodeByUri(document.uri)[0]) {
                         updateExtraCustomData([]);
+                    }
                     return baseServiceInstance.provideHover?.(document, position, token);
                 },
                 async provideDiagnostics(document, token) {
-                    if (!isSupportedDocument(document))
+                    if (!isSupportedDocument(document)) {
                         return;
+                    }
                     const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
                     const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!virtualCode)
+                    if (!virtualCode) {
                         return;
+                    }
                     for (const map of context.documents.getMaps(virtualCode)) {
                         const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
-                        if (!(code instanceof language_core_1.VueGeneratedCode))
+                        if (!(code instanceof language_core_1.VueGeneratedCode)) {
                             continue;
+                        }
                         const templateErrors = [];
                         const { template } = code.sfc;
                         if (template) {
@@ -253,18 +265,53 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                         ];
                     }
                 },
+                provideDocumentSemanticTokens(document, range, legend) {
+                    if (!isSupportedDocument(document)) {
+                        return;
+                    }
+                    const [_virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
+                    if (!sourceFile
+                        || !(sourceFile.generated?.code instanceof language_core_1.VueGeneratedCode)
+                        || !sourceFile.generated.code.sfc.template) {
+                        return [];
+                    }
+                    const { template } = sourceFile.generated.code.sfc;
+                    const spans = common_1.getComponentSpans.call({
+                        files: context.language.files,
+                        languageService: context.inject('typescript/languageService'),
+                        typescript: ts,
+                        vueOptions: getVueOptions(context.env),
+                    }, sourceFile.generated.code, template, {
+                        start: document.offsetAt(range.start),
+                        length: document.offsetAt(range.end) - document.offsetAt(range.start),
+                    });
+                    const classTokenIndex = legend.tokenTypes.indexOf('class');
+                    return spans.map(span => {
+                        const start = document.positionAt(span.start);
+                        return [
+                            start.line,
+                            start.character,
+                            span.length,
+                            classTokenIndex,
+                            0,
+                        ];
+                    });
+                },
             };
             async function provideHtmlData(sourceDocumentUri, vueCode) {
                 await (initializing ??= initialize());
                 const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri, tsPluginClient);
                 if (builtInData.tags) {
                     for (const tag of builtInData.tags) {
-                        if (tag.name === 'slot')
+                        if (tag.name === 'slot') {
                             continue;
-                        if (tag.name === 'component')
+                        }
+                        if (tag.name === 'component') {
                             continue;
-                        if (tag.name === 'template')
+                        }
+                        if (tag.name === 'template') {
                             continue;
+                        }
                         if (casing.tag === types_1.TagNameCasing.Kebab) {
                             tag.name = (0, language_core_1.hyphenateTag)(tag.name);
                         }
@@ -324,10 +371,8 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                             }
                             return tags;
                         },
-                        provideAttributes: (tag) => {
-                            tsPluginClient?.getTemplateContextProps;
-                            let failed = false;
-                            let tagInfo = tagInfos.get(tag);
+                        provideAttributes: tag => {
+                            const tagInfo = tagInfos.get(tag);
                             if (!tagInfo) {
                                 promises.push((async () => {
                                     const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
@@ -342,9 +387,6 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                                 })());
                                 return [];
                             }
-                            if (failed) {
-                                return [];
-                            }
                             const { attrs, props, events } = tagInfo;
                             const attributes = [];
                             const _tsCodegen = language_core_1.tsCodegen.get(vueCode.sfc);
@@ -467,8 +509,9 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                     const textWithoutModifier = replacement.text.split('.')[0];
                     if (validModifiers && hasModifier) {
                         for (const modifier in validModifiers) {
-                            if (modifiers.includes(modifier))
+                            if (modifiers.includes(modifier)) {
                                 continue;
+                            }
                             const modifierDes = validModifiers[modifier];
                             const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
                             const newItem = {
@@ -489,8 +532,9 @@ function create(mode, ts, getVueOptions, tsPluginClient) {
                     }
                     else if (hasModifier && isModel) {
                         for (const modifier of modelData.globalAttributes ?? []) {
-                            if (modifiers.includes(modifier.name))
+                            if (modifiers.includes(modifier.name)) {
                                 continue;
+                            }
                             const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier.name;
                             const newItem = {
                                 label: modifier.name,

package/lib/plugins/vue-toggle-v-bind-codeaction.js

@@ -15,8 +15,9 @@ function create(ts) {
                         return;
                     }
                     const { template } = virtualCode.sfc;
-                    if (!template?.ast)
+                    if (!template?.ast) {
                         return;
+                    }
                     const templateStartOffset = template.startTagEnd;
                     const result = [];
                     for (const node of (0, language_core_1.eachElementNode)(template.ast)) {

package/lib/plugins/vue-twoslash-queries.d.ts

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

package/lib/plugins/vue-twoslash-queries.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = void 0;
 const vue = require("@vue/language-core");
 const twoslashReg = /<!--\s*\^\?\s*-->/g;
-function create(ts, tsPluginClient) {
+function create(ts, getTsPluginClient) {
     return {
         name: 'vue-twoslash-queries',
         create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideInlayHints(document, range) {
                     const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!(sourceFile?.generated?.code instanceof vue.VueGeneratedCode) || virtualCode?.id !== 'template')
+                    if (!(sourceFile?.generated?.code instanceof vue.VueGeneratedCode) || virtualCode?.id !== 'template') {
                         return;
+                    }
                     const hoverOffsets = [];
                     const inlayHints = [];
                     for (const pointer of document.getText(range).matchAll(twoslashReg)) {

package/lib/plugins/vue-visualize-hidden-callback-param.js

@@ -19,8 +19,9 @@ function create() {
                                 && mapping.generatedOffsets[mapping.generatedOffsets.length - 1] + mapping.lengths[mapping.lengths.length - 1] <= end
                                 && hint) {
                                 settings[hint.setting] ??= await context.env.getConfiguration?.(hint.setting) ?? false;
-                                if (!settings[hint.setting])
+                                if (!settings[hint.setting]) {
                                     continue;
+                                }
                                 result.push({
                                     label: hint.label,
                                     paddingRight: hint.paddingRight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "2.0.5",
+	"version": "2.0.7",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -16,32 +16,32 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-core": "~2.1.1",
-		"@volar/language-service": "~2.1.1",
-		"@volar/typescript": "~2.1.1",
+		"@volar/language-core": "~2.1.3",
+		"@volar/language-service": "~2.1.3",
+		"@volar/typescript": "~2.1.3",
 		"@vue/compiler-dom": "^3.4.0",
-		"@vue/language-core": "2.0.5",
+		"@vue/language-core": "2.0.7",
 		"@vue/shared": "^3.4.0",
+		"@vue/typescript-plugin": "2.0.7",
 		"computeds": "^0.0.1",
 		"path-browserify": "^1.0.1",
-		"volar-service-css": "0.0.31",
-		"volar-service-emmet": "0.0.31",
-		"volar-service-html": "0.0.31",
-		"volar-service-json": "0.0.31",
-		"volar-service-pug": "0.0.31",
-		"volar-service-pug-beautify": "0.0.31",
-		"volar-service-typescript": "0.0.31",
-		"volar-service-typescript-twoslash-queries": "0.0.31",
+		"volar-service-css": "0.0.34",
+		"volar-service-emmet": "0.0.34",
+		"volar-service-html": "0.0.34",
+		"volar-service-json": "0.0.34",
+		"volar-service-pug": "0.0.34",
+		"volar-service-pug-beautify": "0.0.34",
+		"volar-service-typescript": "0.0.34",
+		"volar-service-typescript-twoslash-queries": "0.0.34",
 		"vscode-html-languageservice": "^5.1.0",
-		"vscode-languageserver-textdocument": "^1.0.11"
+		"vscode-languageserver-textdocument": "^1.0.11",
+		"vscode-uri": "^3.0.8"
 	},
 	"devDependencies": {
 		"@types/node": "latest",
 		"@types/path-browserify": "latest",
-		"@volar/kit": "~2.1.1",
-		"@vue/typescript-plugin": "2.0.5",
-		"vscode-languageserver-protocol": "^3.17.5",
-		"vscode-uri": "^3.0.8"
+		"@volar/kit": "~2.1.3",
+		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "62b4fcb0d3f7153b5b2f5571af32f519117d8466"
+	"gitHead": "4a37e8f3ebcf31ecfd2ea627f7611d5990ec5df6"
 }