@vue/language-service 2.1.10 → 2.2.0

package/index.d.ts

@@ -13,5 +13,5 @@ declare module '@volar/language-service' {
 }
 export declare function getFullLanguageServicePlugins(ts: typeof import('typescript'), { disableAutoImportCache }?: {
     disableAutoImportCache?: boolean;
-}): LanguageServicePlugin[];
-export declare function getHybridModeLanguageServicePlugins(ts: typeof import('typescript'), getTsPluginClient: typeof import("@vue/typescript-plugin/lib/client")): LanguageServicePlugin[];
+}): LanguageServicePlugin<any>[];
+export declare function getHybridModeLanguageServicePlugins(ts: typeof import('typescript'), getTsPluginClient: typeof import("@vue/typescript-plugin/lib/client")): LanguageServicePlugin<any>[];

package/index.js

@@ -30,17 +30,17 @@ const volar_service_typescript_twoslash_queries_1 = require("volar-service-types
 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_complete_define_assignment_1 = require("./lib/plugins/vue-complete-define-assignment");
 const vue_autoinsert_dotvalue_1 = require("./lib/plugins/vue-autoinsert-dotvalue");
 const vue_autoinsert_space_1 = require("./lib/plugins/vue-autoinsert-space");
+const vue_complete_define_assignment_1 = require("./lib/plugins/vue-complete-define-assignment");
 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_links_1 = require("./lib/plugins/vue-document-links");
 const vue_extract_file_1 = require("./lib/plugins/vue-extract-file");
+const vue_inlayhints_1 = require("./lib/plugins/vue-inlayhints");
 const vue_sfc_1 = require("./lib/plugins/vue-sfc");
 const vue_template_1 = require("./lib/plugins/vue-template");
 const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
-const vue_inlayhints_1 = require("./lib/plugins/vue-inlayhints");
 const language_core_1 = require("@vue/language-core");
 const common_1 = require("@vue/typescript-plugin/lib/common");
 const collectExtractProps_1 = require("@vue/typescript-plugin/lib/requests/collectExtractProps");

package/lib/ideFeatures/nameCasing.js

@@ -13,19 +13,18 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
     if (!sourceFile) {
         return;
     }
-    const rootCode = sourceFile?.generated?.root;
-    if (!(rootCode instanceof language_core_1.VueVirtualCode)) {
+    const root = sourceFile?.generated?.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const desc = rootCode._sfc;
-    if (!desc.template) {
+    const { template } = root._sfc;
+    if (!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 tags = getTemplateTagsAndAttrs(rootCode);
+    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(root);
     for (const [tagName, { offsets }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
@@ -49,23 +48,22 @@ async function convertAttrName(context, uri, casing, tsPluginClient) {
     if (!sourceFile) {
         return;
     }
-    const rootCode = sourceFile?.generated?.root;
-    if (!(rootCode instanceof language_core_1.VueVirtualCode)) {
+    const root = sourceFile?.generated?.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const desc = rootCode._sfc;
-    if (!desc.template) {
+    const { template } = root._sfc;
+    if (!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 tags = getTemplateTagsAndAttrs(rootCode);
+    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(root);
     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) ?? []).map(prop => prop.name);
+            const props = (await tsPluginClient?.getComponentProps(root.fileName, componentName) ?? []).map(prop => prop.name);
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
                 if (propName) {
@@ -124,7 +122,7 @@ async function detect(context, uri) {
             }
             for (const [tagName] of attrs) {
                 // attr-name
-                if (tagName.indexOf('-') >= 0) {
+                if (tagName.includes('-')) {
                     result.push(types_1.AttrNameCasing.Kebab);
                     break;
                 }

package/lib/plugins/data.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTemplateData = loadTemplateData;
 exports.loadLanguageBlocks = loadLanguageBlocks;
 exports.loadModelModifiersData = loadModelModifiersData;
+let locale;
 function loadTemplateData(lang) {
     lang = lang.toLowerCase();
     let data;
@@ -36,6 +37,7 @@ function loadTemplateData(lang) {
     else {
         data = require('../../data/template/en.json');
     }
+    resolveReferences(data);
     for (const attr of [...data.globalAttributes ?? []]) {
         if (!attr.name.startsWith('v-')) {
             data.globalAttributes?.push({ ...attr, name: `:${attr.name}` }, { ...attr, name: `v-bind:${attr.name}` });
@@ -57,64 +59,89 @@ function loadTemplateData(lang) {
 }
 function loadLanguageBlocks(lang) {
     lang = lang.toLowerCase();
+    let data;
     if (lang === 'ja') {
-        return require('../../data/language-blocks/ja.json');
+        data = require('../../data/language-blocks/ja.json');
     }
     else if (lang === 'fr') {
-        return require('../../data/language-blocks/fr.json');
+        data = require('../../data/language-blocks/fr.json');
     }
     else if (lang === 'ko') {
-        return require('../../data/language-blocks/ko.json');
+        data = require('../../data/language-blocks/ko.json');
     }
     else if (lang === 'pt-br') {
-        return require('../../data/language-blocks/pt.json');
+        data = require('../../data/language-blocks/pt.json');
     }
     else if (lang === 'zh-cn') {
-        return require('../../data/language-blocks/zh-cn.json');
+        data = require('../../data/language-blocks/zh-cn.json');
     }
     else if (lang === 'zh-tw') {
-        return require('../../data/language-blocks/zh-hk.json');
+        data = require('../../data/language-blocks/zh-hk.json');
     }
     else if (lang === 'it') {
-        return require('../../data/language-blocks/it.json');
+        data = require('../../data/language-blocks/it.json');
     }
     else if (lang === 'cs') {
-        return require('../../data/language-blocks/cs.json');
+        data = require('../../data/language-blocks/cs.json');
     }
     else if (lang === 'ru') {
-        return require('../../data/language-blocks/ru.json');
+        data = require('../../data/language-blocks/ru.json');
+    }
+    else {
+        data = require('../../data/language-blocks/en.json');
     }
-    return require('../../data/language-blocks/en.json');
+    resolveReferences(data);
+    return data;
 }
 function loadModelModifiersData(lang) {
     lang = lang.toLowerCase();
+    let data;
     if (lang === 'ja') {
-        return require('../../data/model-modifiers/ja.json');
+        data = require('../../data/model-modifiers/ja.json');
     }
     else if (lang === 'fr') {
-        return require('../../data/model-modifiers/fr.json');
+        data = require('../../data/model-modifiers/fr.json');
     }
     else if (lang === 'ko') {
-        return require('../../data/model-modifiers/ko.json');
+        data = require('../../data/model-modifiers/ko.json');
     }
     else if (lang === 'pt-br') {
-        return require('../../data/model-modifiers/pt.json');
+        data = require('../../data/model-modifiers/pt.json');
     }
     else if (lang === 'zh-cn') {
-        return require('../../data/model-modifiers/zh-cn.json');
+        data = require('../../data/model-modifiers/zh-cn.json');
     }
     else if (lang === 'zh-tw') {
-        return require('../../data/model-modifiers/zh-hk.json');
+        data = require('../../data/model-modifiers/zh-hk.json');
     }
     else if (lang === 'it') {
-        return require('../../data/model-modifiers/it.json');
+        data = require('../../data/model-modifiers/it.json');
     }
     else if (lang === 'cs') {
-        return require('../../data/model-modifiers/cs.json');
+        data = require('../../data/model-modifiers/cs.json');
     }
     else if (lang === 'ru') {
-        return require('../../data/model-modifiers/ru.json');
+        data = require('../../data/model-modifiers/ru.json');
+    }
+    else {
+        data = require('../../data/model-modifiers/en.json');
+    }
+    resolveReferences(data);
+    return data;
+}
+function resolveReferences(data) {
+    locale ??= require('../../data/locale.json');
+    for (const item of [
+        ...data.globalAttributes ?? [],
+        ...data.tags?.flatMap(tag => [tag, ...tag.attributes]) ?? [],
+    ]) {
+        if (typeof item.references === 'string') {
+            const relativeUrl = item.references;
+            item.references = locale.map(({ name, url }) => ({
+                name,
+                url: url + relativeUrl
+            }));
+        }
     }
-    return require('../../data/model-modifiers/en.json');
 }
 //# sourceMappingURL=data.js.map

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

@@ -49,7 +49,8 @@ function create(ts, getTsPluginClient) {
                     if (!enabled) {
                         return;
                     }
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    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) {
@@ -107,11 +108,11 @@ function isTsDocument(document) {
 const charReg = /\w/;
 function isCharacterTyping(document, change) {
     const lastCharacter = change.text[change.text.length - 1];
-    const nextCharacter = document.getText().substring(change.rangeOffset + change.text.length, change.rangeOffset + change.text.length + 1);
+    const nextCharacter = document.getText().slice(change.rangeOffset + change.text.length, change.rangeOffset + change.text.length + 1);
     if (lastCharacter === undefined) { // delete text
         return false;
     }
-    if (change.text.indexOf('\n') >= 0) { // multi-line change
+    if (change.text.includes('\n')) { // multi-line change
         return false;
     }
     return charReg.test(lastCharacter) && !charReg.test(nextCharacter);

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

@@ -19,7 +19,7 @@ function create() {
                             return;
                         }
                         if (change.text === '{}'
-                            && document.getText().substring(change.rangeOffset - 1, change.rangeOffset + 3) === '{{}}'
+                            && document.getText().slice(change.rangeOffset - 1, change.rangeOffset + 3) === '{{}}'
                             && document.offsetAt(selection) === change.rangeOffset + 1) {
                             return ` $0 `;
                         }

package/lib/plugins/vue-complete-define-assignment.js

@@ -21,14 +21,14 @@ function create() {
                     if (!enabled) {
                         return;
                     }
-                    const result = [];
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    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 || !virtualCode) {
+                    if (!sourceScript?.generated || !virtualCode) {
                         return;
                     }
-                    const root = sourceScript?.generated?.root;
+                    const root = sourceScript.generated.root;
                     if (!(root instanceof language_core_1.VueVirtualCode)) {
                         return;
                     }
@@ -38,24 +38,22 @@ function create() {
                     if (!scriptSetup || !scriptSetupRanges) {
                         return;
                     }
+                    const result = [];
                     const mappings = [...context.language.maps.forEach(virtualCode)];
-                    addDefineCompletionItem(scriptSetupRanges.props.define && {
-                        exp: scriptSetupRanges.props.withDefaults ?? scriptSetupRanges.props.define.exp,
-                        statement: scriptSetupRanges.props.define.statement
-                    }, 'props');
-                    addDefineCompletionItem(scriptSetupRanges.emits.define, 'emit');
-                    addDefineCompletionItem(scriptSetupRanges.slots.define, 'slots');
+                    addDefineCompletionItem(scriptSetupRanges.defineProps?.statement, scriptSetupRanges.withDefaults?.exp ?? scriptSetupRanges.defineProps?.exp, 'props');
+                    addDefineCompletionItem(scriptSetupRanges.defineEmits?.statement, scriptSetupRanges.defineEmits?.exp, 'emit');
+                    addDefineCompletionItem(scriptSetupRanges.defineSlots?.statement, scriptSetupRanges.defineSlots?.exp, 'slots');
                     return {
                         isIncomplete: false,
                         items: result
                     };
-                    function addDefineCompletionItem(define, name) {
-                        if (!define || define.exp.start !== define.statement.start) {
+                    function addDefineCompletionItem(statement, exp, name) {
+                        if (!exp || exp.start !== statement?.start) {
                             return;
                         }
                         let offset;
                         for (const [, map] of mappings) {
-                            for (const [generatedOffset] of map.toGeneratedLocation(scriptSetup.startTagEnd + define.exp.start)) {
+                            for (const [generatedOffset] of map.toGeneratedLocation(scriptSetup.startTagEnd + exp.start)) {
                                 offset = generatedOffset;
                                 break;
                             }

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

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const cmds = [
-    'vue-ignore',
-    'vue-skip',
-    'vue-expect-error',
+    ['vue-ignore'],
+    ['vue-skip'],
+    ['vue-expect-error'],
+    ['vue-generic', 'vue-generic {$1}'],
 ];
 const directiveCommentReg = /<!--\s*@/;
 function create() {
@@ -27,19 +28,19 @@ function create() {
                         return;
                     }
                     const startIndex = cmdStart.index + cmdStart[0].length;
-                    const remainText = line.substring(startIndex);
+                    const remainText = line.slice(startIndex);
                     const result = [];
-                    for (const cmd of cmds) {
+                    for (const [label, text = label] of cmds) {
                         let match = true;
                         for (let i = 0; i < remainText.length; i++) {
-                            if (remainText[i] !== cmd[i]) {
+                            if (remainText[i] !== label[i]) {
                                 match = false;
                                 break;
                             }
                         }
                         if (match) {
                             result.push({
-                                label: '@' + cmd,
+                                label: '@' + label,
                                 textEdit: {
                                     range: {
                                         start: {
@@ -48,8 +49,9 @@ function create() {
                                         },
                                         end: position,
                                     },
-                                    newText: '@' + cmd,
+                                    newText: '@' + text,
                                 },
+                                insertTextFormat: 2
                             });
                         }
                     }

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

@@ -26,11 +26,14 @@ function create(ts, getTsPluginClient) {
                     if (document.languageId !== 'html') {
                         return;
                     }
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    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]);
-                    const vueVirtualCode = sourceScript?.generated?.root;
-                    if (!sourceScript || !virtualCode || !(vueVirtualCode instanceof language_core_1.VueVirtualCode)) {
+                    if (!sourceScript?.generated) {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
                         return;
                     }
                     let importUri;
@@ -42,33 +45,33 @@ function create(ts, getTsPluginClient) {
                     if (!importUri || !vueCompilerOptions.extensions.some(ext => importUri.endsWith(ext))) {
                         return;
                     }
-                    let baseName = importUri.substring(importUri.lastIndexOf('/') + 1);
-                    baseName = baseName.substring(0, baseName.lastIndexOf('.'));
+                    let baseName = importUri.slice(importUri.lastIndexOf('/') + 1);
+                    baseName = baseName.slice(0, baseName.lastIndexOf('.'));
                     const newName = (0, shared_1.capitalize)((0, shared_1.camelize)(baseName));
-                    const { _sfc: sfc } = vueVirtualCode;
+                    const sfc = root._sfc;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!script) {
                         return;
                     }
                     const additionalEdit = {};
-                    const code = [...(0, language_core_1.forEachEmbeddedCode)(vueVirtualCode)].find(code => code.id === (sfc.scriptSetup ? 'scriptsetup_raw' : 'script_raw'));
+                    const code = [...(0, language_core_1.forEachEmbeddedCode)(root)].find(code => code.id === (sfc.scriptSetup ? 'scriptsetup_raw' : 'script_raw'));
                     const lastImportNode = (0, vue_extract_file_1.getLastImportNode)(ts, script.ast);
                     const incomingFileName = context.project.typescript?.uriConverter.asFileName(vscode_uri_1.URI.parse(importUri))
                         ?? vscode_uri_1.URI.parse(importUri).fsPath.replace(/\\/g, '/');
                     let importPath;
-                    const serviceScript = sourceScript.generated?.languagePlugin.typescript?.getServiceScript(vueVirtualCode);
+                    const serviceScript = sourceScript.generated?.languagePlugin.typescript?.getServiceScript(root);
                     if (tsPluginClient && serviceScript) {
                         const tsDocumentUri = context.encodeEmbeddedDocumentUri(sourceScript.id, serviceScript.code.id);
                         const tsDocument = context.documents.get(tsDocumentUri, serviceScript.code.languageId, serviceScript.code.snapshot);
                         const preferences = await (0, getUserPreferences_1.getUserPreferences)(context, tsDocument);
-                        const importPathRequest = await tsPluginClient.getImportPathForFile(vueVirtualCode.fileName, incomingFileName, preferences);
+                        const importPathRequest = await tsPluginClient.getImportPathForFile(root.fileName, incomingFileName, preferences);
                         if (importPathRequest) {
                             importPath = importPathRequest;
                         }
                     }
                     if (!importPath) {
-                        importPath = path_browserify_1.posix.relative(path_browserify_1.posix.dirname(vueVirtualCode.fileName), incomingFileName)
-                            || importUri.substring(importUri.lastIndexOf('/') + 1);
+                        importPath = path_browserify_1.posix.relative(path_browserify_1.posix.dirname(root.fileName), incomingFileName)
+                            || importUri.slice(importUri.lastIndexOf('/') + 1);
                         if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
                             importPath = './' + importPath;
                         }

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

@@ -12,54 +12,60 @@ function create() {
         create(context) {
             return {
                 provideDocumentLinks(document) {
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    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?.root instanceof language_core_1.VueVirtualCode && virtualCode?.id === 'template') {
-                        const result = [];
-                        const codegen = language_core_1.tsCodegen.get(sourceScript.generated.root._sfc);
-                        const scopedClasses = codegen?.generatedTemplate.get()?.scopedClasses ?? [];
-                        const styleClasses = new Map();
-                        const option = sourceScript.generated.root.vueCompilerOptions.experimentalResolveStyleCssClasses;
-                        for (let i = 0; i < sourceScript.generated.root._sfc.styles.length; i++) {
-                            const style = sourceScript.generated.root._sfc.styles[i];
-                            if (option === 'always' || (option === 'scoped' && style.scoped)) {
-                                for (const className of style.classNames) {
-                                    if (!styleClasses.has(className.text.substring(1))) {
-                                        styleClasses.set(className.text.substring(1), []);
-                                    }
-                                    styleClasses.get(className.text.substring(1)).push({
-                                        index: i,
-                                        style,
-                                        classOffset: className.offset,
-                                    });
+                    if (!sourceScript?.generated || virtualCode?.id !== 'template') {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const result = [];
+                    const codegen = language_core_1.tsCodegen.get(root._sfc);
+                    const scopedClasses = codegen?.generatedTemplate.get()?.scopedClasses ?? [];
+                    const styleClasses = new Map();
+                    const option = root.vueCompilerOptions.experimentalResolveStyleCssClasses;
+                    for (let i = 0; i < root._sfc.styles.length; i++) {
+                        const style = root._sfc.styles[i];
+                        if (option === 'always' || (option === 'scoped' && style.scoped)) {
+                            for (const className of style.classNames) {
+                                if (!styleClasses.has(className.text.slice(1))) {
+                                    styleClasses.set(className.text.slice(1), []);
                                 }
+                                styleClasses.get(className.text.slice(1)).push({
+                                    index: i,
+                                    style,
+                                    classOffset: className.offset,
+                                });
                             }
                         }
-                        for (const { className, offset } of scopedClasses) {
-                            const styles = styleClasses.get(className);
-                            if (styles) {
-                                for (const style of styles) {
-                                    const styleDocumentUri = context.encodeEmbeddedDocumentUri(decoded[0], 'style_' + style.index);
-                                    const styleVirtualCode = sourceScript.generated.embeddedCodes.get('style_' + style.index);
-                                    if (!styleVirtualCode) {
-                                        continue;
-                                    }
-                                    const styleDocument = context.documents.get(styleDocumentUri, styleVirtualCode.languageId, styleVirtualCode.snapshot);
-                                    const start = styleDocument.positionAt(style.classOffset);
-                                    const end = styleDocument.positionAt(style.classOffset + className.length + 1);
-                                    result.push({
-                                        range: {
-                                            start: document.positionAt(offset),
-                                            end: document.positionAt(offset + className.length),
-                                        },
-                                        target: context.encodeEmbeddedDocumentUri(decoded[0], 'style_' + style.index) + `#L${start.line + 1},${start.character + 1}-L${end.line + 1},${end.character + 1}`,
-                                    });
+                    }
+                    for (const { className, offset } of scopedClasses) {
+                        const styles = styleClasses.get(className);
+                        if (styles) {
+                            for (const style of styles) {
+                                const styleDocumentUri = context.encodeEmbeddedDocumentUri(decoded[0], 'style_' + style.index);
+                                const styleVirtualCode = sourceScript.generated.embeddedCodes.get('style_' + style.index);
+                                if (!styleVirtualCode) {
+                                    continue;
                                 }
+                                const styleDocument = context.documents.get(styleDocumentUri, styleVirtualCode.languageId, styleVirtualCode.snapshot);
+                                const start = styleDocument.positionAt(style.classOffset);
+                                const end = styleDocument.positionAt(style.classOffset + className.length + 1);
+                                result.push({
+                                    range: {
+                                        start: document.positionAt(offset),
+                                        end: document.positionAt(offset + className.length),
+                                    },
+                                    target: context.encodeEmbeddedDocumentUri(decoded[0], 'style_' + style.index) + `#L${start.line + 1},${start.character + 1}-L${end.line + 1},${end.character + 1}`,
+                                });
                             }
                         }
-                        return result;
                     }
+                    return result;
                 },
             };
         },

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

@@ -23,13 +23,18 @@ function create(ts, getTsPluginClient) {
                     if (startOffset === endOffset) {
                         return;
                     }
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    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?.root instanceof language_core_1.VueVirtualCode) || virtualCode?.id !== 'template') {
+                    if (!sourceScript?.generated || virtualCode?.id !== 'template') {
                         return;
                     }
-                    const { _sfc: sfc } = sourceScript.generated.root;
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const sfc = root._sfc;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return;
@@ -57,12 +62,14 @@ function create(ts, getTsPluginClient) {
                     const decoded = context.decodeEmbeddedDocumentUri(parsedUri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
                     const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
-                    if (!(sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) || virtualCode?.id !== 'template') {
+                    if (!sourceScript?.generated || virtualCode?.id !== 'template') {
                         return codeAction;
                     }
-                    const document = context.documents.get(parsedUri, virtualCode.languageId, virtualCode.snapshot);
-                    const sfcDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
-                    const { _sfc: sfc } = sourceScript.generated.root;
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return codeAction;
+                    }
+                    const sfc = root._sfc;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return codeAction;
@@ -71,16 +78,18 @@ function create(ts, getTsPluginClient) {
                     if (!templateCodeRange) {
                         return codeAction;
                     }
-                    const toExtract = await tsPluginClient?.collectExtractProps(sourceScript.generated.root.fileName, templateCodeRange) ?? [];
+                    const toExtract = await tsPluginClient?.collectExtractProps(root.fileName, templateCodeRange) ?? [];
                     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`;
+                    const document = context.documents.get(parsedUri, virtualCode.languageId, virtualCode.snapshot);
+                    const sfcDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
+                    const newUri = sfcDocument.uri.slice(0, sfcDocument.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
                     const lastImportNode = getLastImportNode(ts, script.ast);
                     let newFileTags = [];
-                    newFileTags.push(constructTag('template', [], templateInitialIndent, sfc.template.content.substring(templateCodeRange[0], templateCodeRange[1])));
+                    newFileTags.push(constructTag('template', [], templateInitialIndent, sfc.template.content.slice(templateCodeRange[0], templateCodeRange[1])));
                     if (toExtract.length) {
                         newFileTags.push(constructTag('script', ['setup', 'lang="ts"'], scriptInitialIndent, generateNewScriptContents()));
                     }

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

@@ -1,5 +1,5 @@
-import type { LanguageServicePlugin } from '../types';
 import type * as ts from 'typescript';
+import type { LanguageServicePlugin } from '../types';
 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