@vue/language-service 2.1.10 → 2.2.2

package/lib/plugins/vue-template.js

@@ -11,15 +11,26 @@ const vscode_uri_1 = require("vscode-uri");
 const nameCasing_1 = require("../ideFeatures/nameCasing");
 const types_1 = require("../types");
 const data_1 = require("./data");
-const specialTags = new Set(['slot', 'component', 'template']);
-const specialProps = new Set(['class', 'is', 'key', 'ref', 'style']);
+const specialTags = new Set([
+    'slot',
+    'component',
+    'template',
+]);
+const specialProps = new Set([
+    'class',
+    'data-allow-mismatch',
+    'is',
+    'key',
+    'ref',
+    'style',
+]);
 let builtInData;
 let modelData;
 function create(mode, ts, getTsPluginClient) {
     let customData = [];
     let extraCustomData = [];
     let lastCompletionComponentNames = new Set();
-    const tsDocumentations = new Map();
+    const cachedPropInfos = new Map();
     const onDidChangeCustomDataListeners = new Set();
     const onDidChangeCustomData = (listener) => {
         onDidChangeCustomDataListeners.add(listener);
@@ -79,8 +90,8 @@ function create(mode, ts, getTsPluginClient) {
             modelData ??= (0, data_1.loadModelModifiersData)(context.env.locale ?? 'en');
             // https://vuejs.org/api/built-in-directives.html#v-on
             // https://vuejs.org/api/built-in-directives.html#v-bind
-            const eventModifiers = {};
-            const propModifiers = {};
+            const vOnModifiers = {};
+            const vBindModifiers = {};
             const vOn = builtInData.globalAttributes?.find(x => x.name === 'v-on');
             const vBind = builtInData.globalAttributes?.find(x => x.name === 'v-bind');
             if (vOn) {
@@ -89,9 +100,9 @@ function create(mode, ts, getTsPluginClient) {
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
                 for (let text of modifiers) {
-                    text = text.substring('  - `.'.length);
-                    const [name, disc] = text.split('` - ');
-                    eventModifiers[name] = disc;
+                    text = text.slice('  - `.'.length);
+                    const [name, desc] = text.split('` - ');
+                    vOnModifiers[name] = desc;
                 }
             }
             if (vBind) {
@@ -100,9 +111,9 @@ function create(mode, ts, getTsPluginClient) {
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
                 for (let text of modifiers) {
-                    text = text.substring('  - `.'.length);
-                    const [name, disc] = text.split('` - ');
-                    propModifiers[name] = disc;
+                    text = text.slice('  - `.'.length);
+                    const [name, desc] = text.split('` - ');
+                    vBindModifiers[name] = desc;
                 }
             }
             const disposable = context.env.onDidChangeConfiguration?.(() => initializing = undefined);
@@ -120,15 +131,16 @@ function create(mode, ts, getTsPluginClient) {
                     if (!context.project.vue) {
                         return;
                     }
-                    const vueCompilerOptions = context.project.vue.compilerOptions;
                     let sync;
                     let currentVersion;
-                    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]);
-                    if (sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) {
+                    const root = sourceScript?.generated?.root;
+                    if (root instanceof language_core_1.VueVirtualCode) {
                         // #4298: Precompute HTMLDocument before provideHtmlData to avoid parseHTMLDocument requesting component names from tsserver
                         baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
-                        sync = (await provideHtmlData(vueCompilerOptions, sourceScript.id, sourceScript.generated.root)).sync;
+                        sync = (await provideHtmlData(sourceScript.id, root)).sync;
                         currentVersion = await sync();
                     }
                     let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
@@ -159,7 +171,6 @@ function create(mode, ts, getTsPluginClient) {
                     if (!enabled) {
                         return;
                     }
-                    const result = [];
                     const uri = vscode_uri_1.URI.parse(document.uri);
                     const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
@@ -167,88 +178,98 @@ function create(mode, ts, getTsPluginClient) {
                     if (!virtualCode) {
                         return;
                     }
-                    const code = context.language.scripts.get(decoded[0])?.generated?.root;
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
                     const scanner = getScanner(baseServiceInstance, document);
-                    if (code instanceof language_core_1.VueVirtualCode && scanner) {
-                        // visualize missing required props
-                        const casing = await (0, nameCasing_1.getNameCasing)(context, decoded[0]);
-                        const components = await tsPluginClient?.getComponentNames(code.fileName) ?? [];
-                        const componentProps = {};
-                        let token;
-                        let current;
-                        while ((token = scanner.scan()) !== html.TokenType.EOS) {
-                            if (token === html.TokenType.StartTag) {
-                                const tagName = scanner.getTokenText();
-                                const checkTag = tagName.indexOf('.') >= 0
-                                    ? tagName
-                                    : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
-                                if (checkTag) {
-                                    componentProps[checkTag] ??= (await tsPluginClient?.getComponentProps(code.fileName, checkTag, true) ?? []).map(prop => prop.name);
-                                    current = {
-                                        unburnedRequiredProps: [...componentProps[checkTag]],
-                                        labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
-                                        insertOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
-                                    };
-                                }
+                    if (!scanner) {
+                        return;
+                    }
+                    const result = [];
+                    // visualize missing required props
+                    const casing = await (0, nameCasing_1.getNameCasing)(context, decoded[0]);
+                    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+                    const componentProps = {};
+                    let token;
+                    let current;
+                    while ((token = scanner.scan()) !== html.TokenType.EOS) {
+                        if (token === html.TokenType.StartTag) {
+                            const tagName = scanner.getTokenText();
+                            const checkTag = tagName.includes('.')
+                                ? tagName
+                                : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
+                            if (checkTag) {
+                                componentProps[checkTag] ??= (await tsPluginClient?.getComponentProps(root.fileName, checkTag) ?? [])
+                                    .filter(prop => prop.required)
+                                    .map(prop => prop.name);
+                                current = {
+                                    unburnedRequiredProps: [...componentProps[checkTag]],
+                                    labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
+                                    insertOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
+                                };
                             }
-                            else if (token === html.TokenType.AttributeName) {
-                                if (current) {
-                                    let attrText = scanner.getTokenText();
-                                    if (attrText === 'v-bind') {
-                                        current.unburnedRequiredProps = [];
+                        }
+                        else if (token === html.TokenType.AttributeName) {
+                            if (current) {
+                                let attrText = scanner.getTokenText();
+                                if (attrText === 'v-bind') {
+                                    current.unburnedRequiredProps = [];
+                                }
+                                else {
+                                    // remove modifiers
+                                    if (attrText.includes('.')) {
+                                        attrText = attrText.split('.')[0];
                                     }
-                                    else {
-                                        // remove modifiers
-                                        if (attrText.indexOf('.') >= 0) {
-                                            attrText = attrText.split('.')[0];
-                                        }
-                                        // normalize
-                                        if (attrText.startsWith('v-bind:')) {
-                                            attrText = attrText.substring('v-bind:'.length);
-                                        }
-                                        else if (attrText.startsWith(':')) {
-                                            attrText = attrText.substring(':'.length);
-                                        }
-                                        else if (attrText.startsWith('v-model:')) {
-                                            attrText = attrText.substring('v-model:'.length);
-                                        }
-                                        else if (attrText === 'v-model') {
-                                            attrText = vueCompilerOptions.target >= 3 ? 'modelValue' : 'value'; // TODO: support for experimentalModelPropName?
-                                        }
-                                        else if (attrText.startsWith('@')) {
-                                            attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.substring('@'.length));
-                                        }
-                                        current.unburnedRequiredProps = current.unburnedRequiredProps.filter(propName => {
-                                            return attrText !== propName
-                                                && attrText !== (0, language_core_1.hyphenateAttr)(propName);
-                                        });
+                                    // normalize
+                                    if (attrText.startsWith('v-bind:')) {
+                                        attrText = attrText.slice('v-bind:'.length);
                                     }
-                                }
-                            }
-                            else if (token === html.TokenType.StartTagSelfClose || token === html.TokenType.StartTagClose) {
-                                if (current) {
-                                    for (const requiredProp of current.unburnedRequiredProps) {
-                                        result.push({
-                                            label: `${requiredProp}!`,
-                                            paddingLeft: true,
-                                            position: document.positionAt(current.labelOffset),
-                                            kind: 2,
-                                            textEdits: [{
-                                                    range: {
-                                                        start: document.positionAt(current.insertOffset),
-                                                        end: document.positionAt(current.insertOffset),
-                                                    },
-                                                    newText: ` :${casing.attr === types_1.AttrNameCasing.Kebab ? (0, language_core_1.hyphenateAttr)(requiredProp) : requiredProp}=`,
-                                                }],
-                                        });
+                                    else if (attrText.startsWith(':')) {
+                                        attrText = attrText.slice(':'.length);
+                                    }
+                                    else if (attrText.startsWith('v-model:')) {
+                                        attrText = attrText.slice('v-model:'.length);
+                                    }
+                                    else if (attrText === 'v-model') {
+                                        attrText = vueCompilerOptions.target >= 3 ? 'modelValue' : 'value'; // TODO: support for experimentalModelPropName?
+                                    }
+                                    else if (attrText.startsWith('v-on:')) {
+                                        attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.slice('v-on:'.length));
+                                    }
+                                    else if (attrText.startsWith('@')) {
+                                        attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.slice('@'.length));
                                     }
-                                    current = undefined;
+                                    current.unburnedRequiredProps = current.unburnedRequiredProps.filter(propName => {
+                                        return attrText !== propName
+                                            && attrText !== (0, language_core_1.hyphenateAttr)(propName);
+                                    });
                                 }
                             }
-                            if (token === html.TokenType.AttributeName || token === html.TokenType.AttributeValue) {
-                                if (current) {
-                                    current.insertOffset = scanner.getTokenOffset() + scanner.getTokenLength();
+                        }
+                        else if (token === html.TokenType.StartTagSelfClose || token === html.TokenType.StartTagClose) {
+                            if (current) {
+                                for (const requiredProp of current.unburnedRequiredProps) {
+                                    result.push({
+                                        label: `${requiredProp}!`,
+                                        paddingLeft: true,
+                                        position: document.positionAt(current.labelOffset),
+                                        kind: 2,
+                                        textEdits: [{
+                                                range: {
+                                                    start: document.positionAt(current.insertOffset),
+                                                    end: document.positionAt(current.insertOffset),
+                                                },
+                                                newText: ` :${casing.attr === types_1.AttrNameCasing.Kebab ? (0, language_core_1.hyphenateAttr)(requiredProp) : requiredProp}=`,
+                                            }],
+                                    });
                                 }
+                                current = undefined;
+                            }
+                        }
+                        if (token === html.TokenType.AttributeName || token === html.TokenType.AttributeValue) {
+                            if (current) {
+                                current.insertOffset = scanner.getTokenOffset() + scanner.getTokenLength();
                             }
                         }
                     }
@@ -267,7 +288,6 @@ function create(mode, ts, getTsPluginClient) {
                     if (!isSupportedDocument(document)) {
                         return;
                     }
-                    const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
                     const uri = vscode_uri_1.URI.parse(document.uri);
                     const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
@@ -275,12 +295,13 @@ function create(mode, ts, getTsPluginClient) {
                     if (!virtualCode) {
                         return;
                     }
-                    const code = context.language.scripts.get(decoded[0])?.generated?.root;
-                    if (!(code instanceof language_core_1.VueVirtualCode)) {
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
                         return;
                     }
+                    const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
                     const templateErrors = [];
-                    const { template } = code._sfc;
+                    const { template } = root._sfc;
                     if (template) {
                         for (const error of template.errors) {
                             onCompilerError(error, 1);
@@ -323,20 +344,23 @@ function create(mode, ts, getTsPluginClient) {
                     if (!languageService) {
                         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]);
-                    if (!sourceScript
-                        || !(sourceScript.generated?.root instanceof language_core_1.VueVirtualCode)
-                        || !sourceScript.generated.root._sfc.template) {
-                        return [];
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const { template } = root._sfc;
+                    if (!template) {
+                        return;
                     }
-                    const { template } = sourceScript.generated.root._sfc;
                     const spans = common_1.getComponentSpans.call({
                         files: context.language.scripts,
                         languageService,
                         typescript: ts,
                         vueOptions: vueCompilerOptions,
-                    }, sourceScript.generated.root, template, {
+                    }, root, template, {
                         start: document.offsetAt(range.start),
                         length: document.offsetAt(range.end) - document.offsetAt(range.start),
                     });
@@ -353,7 +377,7 @@ function create(mode, ts, getTsPluginClient) {
                     });
                 },
             };
-            async function provideHtmlData(vueCompilerOptions, sourceDocumentUri, vueCode) {
+            async function provideHtmlData(sourceDocumentUri, vueCode) {
                 await (initializing ??= initialize());
                 const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri);
                 if (builtInData.tags) {
@@ -362,7 +386,7 @@ function create(mode, ts, getTsPluginClient) {
                             continue;
                         }
                         if (specialTags.has(tag.name)) {
-                            tag.name = parseItemKey('specialTag', tag.name, '');
+                            tag.name = generateItemKey('specialTag', tag.name, '');
                         }
                         else if (casing.tag === types_1.TagNameCasing.Kebab) {
                             tag.name = (0, language_core_1.hyphenateTag)(tag.name);
@@ -376,8 +400,7 @@ function create(mode, ts, getTsPluginClient) {
                 const tagInfos = new Map();
                 let version = 0;
                 let components;
-                let templateContextProps;
-                tsDocumentations.clear();
+                cachedPropInfos.clear();
                 updateExtraCustomData([
                     html.newHTMLDataProvider('vue-template-built-in', builtInData),
                     {
@@ -397,9 +420,7 @@ function create(mode, ts, getTsPluginClient) {
                                 })());
                                 return [];
                             }
-                            const scriptSetupRanges = vueCode._sfc.scriptSetup
-                                ? (0, language_core_1.parseScriptSetupRanges)(ts, vueCode._sfc.scriptSetup.ast, vueCompilerOptions)
-                                : undefined;
+                            const scriptSetupRanges = language_core_1.tsCodegen.get(vueCode._sfc)?.getScriptSetupRanges();
                             const names = new Set();
                             const tags = [];
                             for (const tag of components) {
@@ -411,7 +432,7 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                             }
                             for (const binding of scriptSetupRanges?.bindings ?? []) {
-                                const name = vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end);
+                                const name = vueCode._sfc.scriptSetup.content.slice(binding.range.start, binding.range.end);
                                 if (casing.tag === types_1.TagNameCasing.Kebab) {
                                     names.add((0, language_core_1.hyphenateTag)(name));
                                 }
@@ -432,42 +453,24 @@ function create(mode, ts, getTsPluginClient) {
                             if (!tagInfo) {
                                 promises.push((async () => {
                                     const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
-                                    const propsInfo = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
+                                    const propInfos = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
                                     const events = await tsPluginClient?.getComponentEvents(vueCode.fileName, tag) ?? [];
+                                    const directives = await tsPluginClient?.getComponentDirectives(vueCode.fileName) ?? [];
                                     tagInfos.set(tag, {
                                         attrs,
-                                        propsInfo: propsInfo.filter(prop => !prop.name.startsWith('ref_')),
+                                        propInfos: propInfos.filter(prop => !prop.name.startsWith('ref_')),
                                         events,
+                                        directives,
                                     });
                                     version++;
                                 })());
                                 return [];
                             }
-                            const { attrs, propsInfo, events } = tagInfo;
-                            const props = propsInfo.map(prop => prop.name);
+                            const { attrs, propInfos, events, directives } = tagInfo;
+                            const props = propInfos.map(prop => (0, language_core_1.hyphenateTag)(prop.name).startsWith('on-vnode-')
+                                ? 'onVue:' + prop.name.slice('onVnode'.length)
+                                : prop.name);
                             const attributes = [];
-                            const _tsCodegen = language_core_1.tsCodegen.get(vueCode._sfc);
-                            if (_tsCodegen) {
-                                if (!templateContextProps) {
-                                    promises.push((async () => {
-                                        templateContextProps = await tsPluginClient?.getTemplateContextProps(vueCode.fileName) ?? [];
-                                        version++;
-                                    })());
-                                    return [];
-                                }
-                                let ctxVars = [
-                                    ..._tsCodegen.scriptRanges.get()?.bindings.map(binding => vueCode._sfc.script.content.substring(binding.start, binding.end)) ?? [],
-                                    ..._tsCodegen.scriptSetupRanges.get()?.bindings.map(binding => vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end)) ?? [],
-                                    ...templateContextProps,
-                                ];
-                                ctxVars = [...new Set(ctxVars)];
-                                const dirs = ctxVars.map(language_core_1.hyphenateAttr).filter(v => v.startsWith('v-'));
-                                for (const dir of dirs) {
-                                    attributes.push({
-                                        name: dir,
-                                    });
-                                }
-                            }
                             const propsSet = new Set(props);
                             for (const prop of [...props, ...attrs]) {
                                 const isGlobal = !propsSet.has(prop);
@@ -477,7 +480,7 @@ function create(mode, ts, getTsPluginClient) {
                                     const propNameBase = name.startsWith('on-')
                                         ? name.slice('on-'.length)
                                         : (name['on'.length].toLowerCase() + name.slice('onX'.length));
-                                    const propKey = parseItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
+                                    const propKey = generateItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
                                     attributes.push({
                                         name: 'v-on:' + propNameBase,
                                         description: propKey,
@@ -488,13 +491,13 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                                 else {
                                     const propName = name;
-                                    const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, propName);
-                                    const propDescription = propsInfo.find(prop => {
+                                    const propInfo = propInfos.find(prop => {
                                         const name = casing.attr === types_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
                                         return name === propName;
-                                    })?.commentMarkdown;
-                                    if (propDescription) {
-                                        tsDocumentations.set(propName, propDescription);
+                                    });
+                                    const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName, propInfo?.deprecated);
+                                    if (propInfo) {
+                                        cachedPropInfos.set(propName, propInfo);
                                     }
                                     attributes.push({
                                         name: propName,
@@ -510,7 +513,7 @@ function create(mode, ts, getTsPluginClient) {
                             }
                             for (const event of events) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? event : (0, language_core_1.hyphenateAttr)(event);
-                                const propKey = parseItemKey('componentEvent', tag, name);
+                                const propKey = generateItemKey('componentEvent', tag, name);
                                 attributes.push({
                                     name: 'v-on:' + name,
                                     description: propKey,
@@ -519,21 +522,27 @@ function create(mode, ts, getTsPluginClient) {
                                     description: propKey,
                                 });
                             }
+                            for (const directive of directives) {
+                                const name = (0, language_core_1.hyphenateAttr)(directive);
+                                attributes.push({
+                                    name
+                                });
+                            }
                             const models = [];
                             for (const prop of [...props, ...attrs]) {
                                 if (prop.startsWith('onUpdate:')) {
                                     const isGlobal = !propsSet.has(prop);
-                                    models.push([isGlobal, prop.substring('onUpdate:'.length)]);
+                                    models.push([isGlobal, prop.slice('onUpdate:'.length)]);
                                 }
                             }
                             for (const event of events) {
                                 if (event.startsWith('update:')) {
-                                    models.push([false, event.substring('update:'.length)]);
+                                    models.push([false, event.slice('update:'.length)]);
                                 }
                             }
                             for (const [isGlobal, model] of models) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? model : (0, language_core_1.hyphenateAttr)(model);
-                                const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, name);
+                                const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, name);
                                 attributes.push({
                                     name: 'v-model:' + name,
                                     description: propKey,
@@ -558,30 +567,35 @@ function create(mode, ts, getTsPluginClient) {
                 };
             }
             function afterHtmlCompletion(completionList, document) {
-                const replacement = getReplacement(completionList, document);
-                if (replacement) {
-                    const isEvent = replacement.text.startsWith('v-on:') || replacement.text.startsWith('@');
-                    const isProp = replacement.text.startsWith('v-bind:') || replacement.text.startsWith(':');
-                    const isModel = replacement.text.startsWith('v-model:') || replacement.text.split('.')[0] === 'v-model';
+                do {
+                    const replacement = getReplacement(completionList, document);
+                    if (!replacement) {
+                        break;
+                    }
                     const hasModifier = replacement.text.includes('.');
-                    const validModifiers = isEvent ? eventModifiers
-                        : isProp ? propModifiers
+                    if (!hasModifier) {
+                        break;
+                    }
+                    const [text, ...modifiers] = replacement.text.split('.');
+                    const isVOn = text.startsWith('v-on:') || text.startsWith('@') && text.length > 1;
+                    const isVBind = text.startsWith('v-bind:') || text.startsWith(':') && text.length > 1;
+                    const isVModel = text.startsWith('v-model:') || text === 'v-model';
+                    const validModifiers = isVOn ? vOnModifiers
+                        : isVBind ? vBindModifiers
                             : undefined;
-                    const modifiers = replacement.text.split('.').slice(1);
-                    const textWithoutModifier = replacement.text.split('.')[0];
-                    if (validModifiers && hasModifier) {
+                    if (validModifiers) {
                         for (const modifier in validModifiers) {
                             if (modifiers.includes(modifier)) {
                                 continue;
                             }
-                            const modifierDes = validModifiers[modifier];
-                            const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
+                            const description = validModifiers[modifier];
+                            const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
                             const newItem = {
                                 label: modifier,
                                 filterText: insertText,
                                 documentation: {
                                     kind: 'markdown',
-                                    value: modifierDes,
+                                    value: description,
                                 },
                                 textEdit: {
                                     range: replacement.textEdit.range,
@@ -592,12 +606,12 @@ function create(mode, ts, getTsPluginClient) {
                             completionList.items.push(newItem);
                         }
                     }
-                    else if (hasModifier && isModel) {
+                    else if (isVModel) {
                         for (const modifier of modelData.globalAttributes ?? []) {
                             if (modifiers.includes(modifier.name)) {
                                 continue;
                             }
-                            const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier.name;
+                            const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier.name;
                             const newItem = {
                                 label: modifier.name,
                                 filterText: insertText,
@@ -615,39 +629,42 @@ function create(mode, ts, getTsPluginClient) {
                             completionList.items.push(newItem);
                         }
                     }
-                }
+                } while (0);
                 completionList.items = completionList.items.filter(item => !specialTags.has(parseLabel(item.label).name));
                 const htmlDocumentations = new Map();
                 for (const item of completionList.items) {
                     const documentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    if (documentation && !isItemKey(documentation) && item.documentation) {
+                    if (documentation && !isItemKey(documentation)) {
                         htmlDocumentations.set(item.label, documentation);
                     }
                 }
                 for (const item of completionList.items) {
-                    const resolvedLabelKey = resolveItemKey(item.label);
-                    if (resolvedLabelKey) {
-                        const name = resolvedLabelKey.tag;
-                        item.label = resolvedLabelKey.leadingSlash ? '/' + name : name;
+                    const parsedLabelKey = parseItemKey(item.label);
+                    if (parsedLabelKey) {
+                        const name = parsedLabelKey.tag;
+                        item.label = parsedLabelKey.leadingSlash ? '/' + name : name;
+                        const text = parsedLabelKey.leadingSlash ? `/${name}>` : name;
                         if (item.textEdit) {
-                            item.textEdit.newText = name;
+                            item.textEdit.newText = text;
                         }
                         ;
                         if (item.insertText) {
-                            item.insertText = name;
+                            item.insertText = text;
                         }
                         if (item.sortText) {
-                            item.sortText = name;
+                            item.sortText = text;
                         }
                     }
                     const itemKeyStr = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    let resolvedKey = itemKeyStr ? resolveItemKey(itemKeyStr) : undefined;
-                    if (resolvedKey) {
+                    let parsedItemKey = itemKeyStr ? parseItemKey(itemKeyStr) : undefined;
+                    let propInfo;
+                    if (parsedItemKey) {
                         const documentations = [];
-                        if (tsDocumentations.has(resolvedKey.prop)) {
-                            documentations.push(tsDocumentations.get(resolvedKey.prop));
+                        propInfo = cachedPropInfos.get(parsedItemKey.prop);
+                        if (propInfo?.commentMarkdown) {
+                            documentations.push(propInfo.commentMarkdown);
                         }
-                        let { isEvent, propName } = getPropName(resolvedKey);
+                        let { isEvent, propName } = getPropName(parsedItemKey);
                         if (isEvent) {
                             // click -> onclick
                             propName = 'on' + propName;
@@ -667,53 +684,58 @@ function create(mode, ts, getTsPluginClient) {
                     }
                     else {
                         let propName = item.label;
-                        const isVBind = propName.startsWith('v-bind:') ? (propName = propName.slice('v-bind:'.length), true) : false;
-                        const isVBindAbbr = propName.startsWith(':') && propName !== ':' ? (propName = propName.slice(':'.length), true) : false;
-                        /**
-                         * for `is`, `key` and `ref` starting with `v-bind:` or `:`
-                         * that without `internalItemId`.
-                         */
-                        if (isVBind || isVBindAbbr) {
-                            resolvedKey = {
+                        for (const str of ['v-bind:', ':']) {
+                            if (propName.startsWith(str) && propName !== str) {
+                                propName = propName.slice(str.length);
+                                break;
+                            }
+                        }
+                        // for special props without internal item key
+                        if (specialProps.has(propName)) {
+                            parsedItemKey = {
                                 type: 'componentProp',
                                 tag: '^',
                                 prop: propName,
+                                deprecated: false,
                                 leadingSlash: false
                             };
                         }
-                        if (tsDocumentations.has(propName)) {
+                        propInfo = cachedPropInfos.get(propName);
+                        if (propInfo?.commentMarkdown) {
                             const originalDocumentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
                             item.documentation = {
                                 kind: 'markdown',
                                 value: [
-                                    tsDocumentations.get(propName),
+                                    propInfo.commentMarkdown,
                                     originalDocumentation,
                                 ].filter(str => !!str).join('\n\n'),
                             };
                         }
                     }
+                    if (propInfo?.deprecated) {
+                        item.tags = [1];
+                    }
                     const tokens = [];
-                    if (item.kind === 10 && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
+                    if (item.kind === 10
+                        && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
                         item.kind = 6;
                         tokens.push('\u0000');
                     }
-                    else if (resolvedKey) {
-                        const isComponent = resolvedKey.tag !== '*';
-                        const { isEvent, propName } = getPropName(resolvedKey);
-                        if (resolvedKey.type === 'componentProp') {
+                    else if (parsedItemKey) {
+                        const isComponent = parsedItemKey.tag !== '*';
+                        const { isEvent, propName } = getPropName(parsedItemKey);
+                        if (parsedItemKey.type === 'componentProp') {
                             if (isComponent || specialProps.has(propName)) {
                                 item.kind = 5;
                             }
                         }
                         else if (isEvent) {
                             item.kind = 23;
-                            if (propName.startsWith('vnode-')) {
+                            if (propName.startsWith('vue:')) {
                                 tokens.push('\u0004');
                             }
                         }
-                        if (isComponent
-                            || (isComponent && isEvent)
-                            || specialProps.has(propName)) {
+                        if (isComponent || specialProps.has(propName)) {
                             tokens.push('\u0000');
                             if (item.label.startsWith(':')) {
                                 tokens.push('\u0001');
@@ -724,9 +746,12 @@ function create(mode, ts, getTsPluginClient) {
                             else if (item.label.startsWith('v-bind:')) {
                                 tokens.push('\u0003');
                             }
-                            else if (item.label.startsWith('v-on:')) {
+                            else if (item.label.startsWith('v-model:')) {
                                 tokens.push('\u0004');
                             }
+                            else if (item.label.startsWith('v-on:')) {
+                                tokens.push('\u0005');
+                            }
                             else {
                                 tokens.push('\u0000');
                             }
@@ -738,10 +763,6 @@ function create(mode, ts, getTsPluginClient) {
                             }
                         }
                     }
-                    else if (specialProps.has(item.label)) {
-                        item.kind = 5;
-                        tokens.push('\u0000', '\u0000', '\u0001');
-                    }
                     else if (item.label === 'v-if'
                         || item.label === 'v-else-if'
                         || item.label === 'v-else'
@@ -818,13 +839,13 @@ function parseLabel(label) {
         leadingSlash
     };
 }
-function parseItemKey(type, tag, prop) {
-    return '__VLS_data=' + type + ',' + tag + ',' + prop;
+function generateItemKey(type, tag, prop, deprecated) {
+    return `__VLS_data=${type},${tag},${prop},${Number(deprecated)}`;
 }
 function isItemKey(key) {
     return key.startsWith('__VLS_data=');
 }
-function resolveItemKey(key) {
+function parseItemKey(key) {
     const { leadingSlash, name } = parseLabel(key);
     if (isItemKey(name)) {
         const strs = name.slice('__VLS_data='.length).split(',');
@@ -832,6 +853,7 @@ function resolveItemKey(key) {
             type: strs[0],
             tag: strs[1],
             prop: strs[2],
+            deprecated: strs[3] === '1',
             leadingSlash
         };
     }