@vue/language-service 2.1.10 → 2.2.2

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,21 +30,25 @@ 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");
-const componentInfos_1 = require("@vue/typescript-plugin/lib/requests/componentInfos");
+const getComponentDirectives_1 = require("@vue/typescript-plugin/lib/requests/getComponentDirectives");
+const getComponentEvents_1 = require("@vue/typescript-plugin/lib/requests/getComponentEvents");
+const getComponentNames_1 = require("@vue/typescript-plugin/lib/requests/getComponentNames");
+const getComponentProps_1 = require("@vue/typescript-plugin/lib/requests/getComponentProps");
+const getElementAttrs_1 = require("@vue/typescript-plugin/lib/requests/getElementAttrs");
 const getImportPathForFile_1 = require("@vue/typescript-plugin/lib/requests/getImportPathForFile");
 const getPropertiesAtLocation_1 = require("@vue/typescript-plugin/lib/requests/getPropertiesAtLocation");
 const vscode_uri_1 = require("vscode-uri");
@@ -106,19 +110,19 @@ function getFullLanguageServicePlugins(ts, { disableAutoImportCache } = {}) {
                 return await getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
             },
             async getComponentEvents(...args) {
-                return await componentInfos_1.getComponentEvents.apply(requestContext, args);
+                return await getComponentEvents_1.getComponentEvents.apply(requestContext, args);
+            },
+            async getComponentDirectives(...args) {
+                return await getComponentDirectives_1.getComponentDirectives.apply(requestContext, args);
             },
             async getComponentNames(...args) {
-                return await componentInfos_1.getComponentNames.apply(requestContext, args);
+                return await getComponentNames_1.getComponentNames.apply(requestContext, args);
             },
             async getComponentProps(...args) {
-                return await componentInfos_1.getComponentProps.apply(requestContext, args);
+                return await getComponentProps_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);
+                return await getElementAttrs_1.getElementAttrs.apply(requestContext, args);
             },
             async getQuickInfoAtPosition(fileName, position) {
                 const languageService = context.getLanguageService();

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;
                 }
@@ -199,6 +197,6 @@ function getTemplateTagsAndAttrs(sourceFile) {
         });
         map.set(sourceFile, getter);
     }
-    return map.get(sourceFile).get() ?? new Map();
+    return map.get(sourceFile)() ?? new Map();
 }
 //# sourceMappingURL=nameCasing.js.map

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/utils.d.ts

@@ -0,0 +1,3 @@
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export declare function sleep(ms: number): Promise<unknown>;
+export declare function isTsDocument(document: TextDocument): boolean;

package/lib/plugins/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sleep = sleep;
+exports.isTsDocument = isTsDocument;
+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';
+}
+//# sourceMappingURL=utils.js.map

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

@@ -1,11 +1,2 @@
 import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-import type * as ts from 'typescript';
-import type { TextDocument } from 'vscode-languageserver-textdocument';
 export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): LanguageServicePlugin;
-export declare function isTsDocument(document: TextDocument): boolean;
-export declare function isCharacterTyping(document: TextDocument, change: {
-    text: string;
-    rangeOffset: number;
-    rangeLength: number;
-}): boolean;
-export declare function isBlacklistNode(ts: typeof import('typescript'), node: ts.Node, pos: number, allowAccessDotValue: boolean): boolean;

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

@@ -1,20 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
-exports.isTsDocument = isTsDocument;
-exports.isCharacterTyping = isCharacterTyping;
-exports.isBlacklistNode = isBlacklistNode;
 const language_core_1 = require("@vue/language-core");
 const vscode_uri_1 = require("vscode-uri");
-const asts = new WeakMap();
-function getAst(ts, fileName, snapshot, scriptKind) {
-    let ast = asts.get(snapshot);
-    if (!ast) {
-        ast = ts.createSourceFile(fileName, snapshot.getText(0, snapshot.getLength()), ts.ScriptTarget.Latest, undefined, scriptKind);
-        asts.set(snapshot, ast);
-    }
-    return ast;
-}
+const utils_1 = require("./utils");
 function create(ts, getTsPluginClient) {
     return {
         name: 'vue-autoinsert-dotvalue',
@@ -33,7 +22,7 @@ function create(ts, getTsPluginClient) {
                     if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
                         return;
                     }
-                    if (!isTsDocument(document)) {
+                    if (!(0, utils_1.isTsDocument)(document)) {
                         return;
                     }
                     if (!isCharacterTyping(document, change)) {
@@ -41,7 +30,7 @@ function create(ts, getTsPluginClient) {
                     }
                     const req = ++currentReq;
                     // Wait for tsserver to sync
-                    await sleep(250);
+                    await (0, utils_1.sleep)(250);
                     if (req !== currentReq) {
                         return;
                     }
@@ -49,44 +38,48 @@ 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) {
+                    if (!sourceScript?.generated || !virtualCode) {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const blocks = [
+                        root._sfc.script,
+                        root._sfc.scriptSetup,
+                    ].filter(block => !!block);
+                    if (!blocks.length) {
                         return;
                     }
-                    let ast;
                     let sourceCodeOffset = document.offsetAt(selection);
-                    const fileName = context.project.typescript?.uriConverter.asFileName(sourceScript.id)
-                        ?? sourceScript.id.fsPath.replace(/\\/g, '/');
-                    if (sourceScript.generated) {
-                        const serviceScript = sourceScript.generated.languagePlugin.typescript?.getServiceScript(sourceScript.generated.root);
-                        if (!serviceScript || serviceScript?.code !== virtualCode) {
-                            return;
-                        }
-                        ast = getAst(ts, fileName, virtualCode.snapshot, serviceScript.scriptKind);
-                        let mapped = false;
-                        for (const [_sourceScript, map] of context.language.maps.forEach(virtualCode)) {
-                            for (const [sourceOffset] of map.toSourceLocation(document.offsetAt(selection))) {
-                                sourceCodeOffset = sourceOffset;
-                                mapped = true;
-                                break;
-                            }
-                            if (mapped) {
-                                break;
-                            }
+                    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) {
-                            return;
+                        if (mapped) {
+                            break;
                         }
                     }
-                    else {
-                        ast = getAst(ts, fileName, sourceScript.snapshot);
-                    }
-                    if (isBlacklistNode(ts, ast, document.offsetAt(selection), false)) {
+                    if (!mapped) {
                         return;
                     }
-                    const props = await tsPluginClient?.getPropertiesAtLocation(fileName, sourceCodeOffset) ?? [];
+                    for (const { ast, startTagEnd, endTagStart } of blocks) {
+                        if (sourceCodeOffset < startTagEnd || sourceCodeOffset > endTagStart) {
+                            continue;
+                        }
+                        if (isBlacklistNode(ts, ast, sourceCodeOffset - startTagEnd, false)) {
+                            return;
+                        }
+                    }
+                    const props = await tsPluginClient?.getPropertiesAtLocation(root.fileName, sourceCodeOffset) ?? [];
                     if (props.some(prop => prop === 'value')) {
                         return '${1:.value}';
                     }
@@ -95,23 +88,14 @@ function create(ts, getTsPluginClient) {
         },
     };
 }
-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';
-}
 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

@@ -3,7 +3,7 @@ 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 vue_autoinsert_dotvalue_1 = require("./vue-autoinsert-dotvalue");
+const utils_1 = require("./utils");
 function create() {
     return {
         name: 'vue-complete-define-assignment',
@@ -14,48 +14,46 @@ function create() {
             return {
                 isAdditionalCompletion: true,
                 async provideCompletionItems(document) {
-                    if (!(0, vue_autoinsert_dotvalue_1.isTsDocument)(document)) {
+                    if (!(0, utils_1.isTsDocument)(document)) {
                         return;
                     }
                     const enabled = await context.env.getConfiguration?.('vue.complete.defineAssignment') ?? true;
                     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;
                     }
                     const codegen = language_core_1.tsCodegen.get(root._sfc);
                     const scriptSetup = root._sfc.scriptSetup;
-                    const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+                    const scriptSetupRanges = codegen?.getScriptSetupRanges();
                     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;
                         }
@@ -88,7 +91,7 @@ function create(ts, getTsPluginClient) {
                             + (lastImportNode ? '' : '\n'),
                     });
                     if (sfc.script) {
-                        const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc.script.ast, newName);
+                        const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc, sfc.script.ast, newName);
                         if (edit) {
                             additionalEdit.changes[embeddedDocumentUriStr].push({
                                 range: {