@vue/language-service 3.0.3 → 3.0.5

package/lib/plugins/vue-template.js

@@ -7,8 +7,9 @@ const volar_service_html_1 = require("volar-service-html");
 const volar_service_pug_1 = require("volar-service-pug");
 const html = require("vscode-html-languageservice");
 const vscode_uri_1 = require("vscode-uri");
+const data_1 = require("../data");
 const nameCasing_1 = require("../nameCasing");
-const data_1 = require("./data");
+const utils_1 = require("../utils");
 const specialTags = new Set([
     'slot',
     'component',
@@ -24,11 +25,9 @@ const specialProps = new Set([
 ]);
 let builtInData;
 let modelData;
-function create(mode, getTsPluginClient) {
+function create(languageId, { getComponentNames, getElementAttrs, getComponentProps, getComponentEvents, getComponentDirectives, getComponentSlots, }) {
     let customData = [];
     let extraCustomData = [];
-    let lastCompletionComponentNames = new Set();
-    const cachedPropInfos = new Map();
     const onDidChangeCustomDataListeners = new Set();
     const onDidChangeCustomData = (listener) => {
         onDidChangeCustomDataListeners.add(listener);
@@ -38,8 +37,9 @@ function create(mode, getTsPluginClient) {
             },
         };
     };
-    const baseService = mode === 'pug'
+    const baseService = languageId === 'jade'
         ? (0, volar_service_pug_1.create)({
+            useDefaultDataProvider: false,
             getCustomData() {
                 return [
                     ...customData,
@@ -50,6 +50,7 @@ function create(mode, getTsPluginClient) {
         })
         : (0, volar_service_html_1.create)({
             documentSelector: ['html', 'markdown'],
+            useDefaultDataProvider: false,
             getCustomData() {
                 return [
                     ...customData,
@@ -58,8 +59,9 @@ function create(mode, getTsPluginClient) {
             },
             onDidChangeCustomData,
         });
+    const htmlDataProvider = html.getDefaultHTMLDataProvider();
     return {
-        name: `vue-template (${mode})`,
+        name: `vue-template (${languageId})`,
         capabilities: {
             ...baseService.capabilities,
             completionProvider: {
@@ -71,7 +73,6 @@ function create(mode, getTsPluginClient) {
             hoverProvider: true,
         },
         create(context) {
-            const tsPluginClient = getTsPluginClient?.(context);
             const baseServiceInstance = baseService.create(context);
             builtInData ??= (0, data_1.loadTemplateData)(context.env.locale ?? 'en');
             modelData ??= (0, data_1.loadModelModifiersData)(context.env.locale ?? 'en');
@@ -84,7 +85,9 @@ function create(mode, getTsPluginClient) {
             const vBind = builtInData.globalAttributes?.find(x => x.name === 'v-bind');
             const vModel = builtInData.globalAttributes?.find(x => x.name === 'v-model');
             if (vOn) {
-                const markdown = (typeof vOn.description === 'string' ? vOn.description : vOn.description?.value) ?? '';
+                const markdown = typeof vOn.description === 'object'
+                    ? vOn.description.value
+                    : vOn.description ?? '';
                 const modifiers = markdown
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
@@ -95,7 +98,9 @@ function create(mode, getTsPluginClient) {
                 }
             }
             if (vBind) {
-                const markdown = (typeof vBind.description === 'string' ? vBind.description : vBind.description?.value) ?? '';
+                const markdown = typeof vBind.description === 'object'
+                    ? vBind.description.value
+                    : vBind.description ?? '';
                 const modifiers = markdown
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
@@ -109,7 +114,7 @@ function create(mode, getTsPluginClient) {
                 for (const modifier of modelData.globalAttributes ?? []) {
                     const description = typeof modifier.description === 'object'
                         ? modifier.description.value
-                        : modifier.description;
+                        : modifier.description ?? '';
                     const references = modifier.references?.map(ref => `[${ref.name}](${ref.url})`).join(' | ');
                     vModelModifiers[modifier.name] = description + '\n\n' + references;
                 }
@@ -123,94 +128,211 @@ function create(mode, getTsPluginClient) {
                     disposable?.dispose();
                 },
                 async provideCompletionItems(document, position, completionContext, token) {
-                    if (!isSupportedDocument(document)) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, 'template', languageId);
+                    if (!info) {
                         return;
                     }
-                    if (!context.project.vue) {
+                    const { sourceScript, root } = info;
+                    const { result: completionList, target, info: { components, propMap, }, } = await runWithVueData(sourceScript.id, root, () => baseServiceInstance.provideCompletionItems(document, position, completionContext, token));
+                    if (!completionList) {
                         return;
                     }
-                    let sync;
-                    let currentVersion;
-                    const uri = vscode_uri_1.URI.parse(document.uri);
-                    const decoded = context.decodeEmbeddedDocumentUri(uri);
-                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
-                    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(sourceScript.id, root)).sync;
-                        currentVersion = await sync();
-                    }
-                    let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
-                    while (currentVersion !== (currentVersion = await sync?.())) {
-                        htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
+                    switch (target) {
+                        case 'tag': {
+                            completionList.items.forEach(transformTag);
+                            break;
+                        }
+                        case 'attribute': {
+                            addDirectiveModifiers(completionList, document);
+                            completionList.items.forEach(transformAttribute);
+                            break;
+                        }
                     }
-                    if (!htmlComplete) {
-                        return;
+                    updateExtraCustomData([]);
+                    return completionList;
+                    function transformTag(item) {
+                        const tagName = (0, shared_1.capitalize)((0, shared_1.camelize)(item.label));
+                        if (components?.includes(tagName)) {
+                            item.kind = 6;
+                            item.sortText = '\u0000' + (item.sortText ?? item.label);
+                        }
                     }
-                    if (sourceScript?.generated) {
-                        const virtualCode = sourceScript.generated.embeddedCodes.get('template');
-                        if (virtualCode) {
-                            const embeddedDocumentUri = context.encodeEmbeddedDocumentUri(sourceScript.id, virtualCode.id);
-                            afterHtmlCompletion(htmlComplete, context.documents.get(embeddedDocumentUri, virtualCode.languageId, virtualCode.snapshot));
+                    function transformAttribute(item) {
+                        let prop = propMap.get(item.label);
+                        if (prop) {
+                            if (prop.info?.documentation) {
+                                item.documentation = {
+                                    kind: 'markdown',
+                                    value: prop.info.documentation,
+                                };
+                            }
+                            if (prop.info?.deprecated) {
+                                item.tags = [1];
+                            }
+                        }
+                        else {
+                            let name = item.label;
+                            for (const str of ['v-bind:', ':']) {
+                                if (name.startsWith(str) && name !== str) {
+                                    name = name.slice(str.length);
+                                    break;
+                                }
+                            }
+                            if (specialProps.has(name)) {
+                                prop = {
+                                    name,
+                                    kind: 'prop',
+                                    isGlobal: true,
+                                };
+                            }
+                        }
+                        const tokens = [];
+                        if (prop) {
+                            const { isEvent, propName } = getPropName(prop.name, prop.kind === 'event');
+                            if (prop.kind === 'prop') {
+                                if (!prop.isGlobal || specialProps.has(propName)) {
+                                    item.kind = 5;
+                                }
+                            }
+                            else if (isEvent) {
+                                item.kind = 23;
+                                if (propName.startsWith('vue:')) {
+                                    tokens.push('\u0004');
+                                }
+                            }
+                            if (!prop.isGlobal || specialProps.has(propName)) {
+                                tokens.push('\u0000');
+                                if (item.label.startsWith(':')) {
+                                    tokens.push('\u0001');
+                                }
+                                else if (item.label.startsWith('@')) {
+                                    tokens.push('\u0002');
+                                }
+                                else if (item.label.startsWith('v-bind:')) {
+                                    tokens.push('\u0003');
+                                }
+                                else if (item.label.startsWith('v-model:')) {
+                                    tokens.push('\u0004');
+                                }
+                                else if (item.label.startsWith('v-on:')) {
+                                    tokens.push('\u0005');
+                                }
+                                else {
+                                    tokens.push('\u0000');
+                                }
+                                if (specialProps.has(propName)) {
+                                    tokens.push('\u0001');
+                                }
+                                else {
+                                    tokens.push('\u0000');
+                                }
+                            }
+                        }
+                        else if (item.label === 'v-if'
+                            || item.label === 'v-else-if'
+                            || item.label === 'v-else'
+                            || item.label === 'v-for') {
+                            item.kind = 14;
+                            tokens.push('\u0003');
+                        }
+                        else if (item.label.startsWith('v-')) {
+                            item.kind = 3;
+                            tokens.push('\u0002');
+                        }
+                        else {
+                            tokens.push('\u0001');
                         }
+                        item.sortText = tokens.join('') + (item.sortText ?? item.label);
                     }
-                    return htmlComplete;
                 },
                 provideHover(document, position, token) {
-                    if (!isSupportedDocument(document)) {
+                    const info = (0, utils_1.getEmbeddedInfo)(context, document, 'template', languageId);
+                    if (!info) {
                         return;
                     }
                     if (context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri))) {
-                        updateExtraCustomData([]);
+                        updateExtraCustomData([
+                            htmlDataProvider,
+                        ]);
                     }
                     return baseServiceInstance.provideHover?.(document, position, token);
                 },
             };
-            async function provideHtmlData(sourceDocumentUri, vueCode) {
+            async function runWithVueData(sourceDocumentUri, root, fn) {
+                // #4298: Precompute HTMLDocument before provideHtmlData to avoid parseHTMLDocument requesting component names from tsserver
+                await fn();
+                const { sync } = await provideHtmlData(sourceDocumentUri, root);
+                let lastSync = await sync();
+                let result = await fn();
+                while (lastSync.version !== (lastSync = await sync()).version) {
+                    result = await fn();
+                }
+                return { result, ...lastSync };
+            }
+            async function provideHtmlData(sourceDocumentUri, root) {
                 await (initializing ??= initialize());
                 const casing = await (0, nameCasing_1.checkCasing)(context, sourceDocumentUri);
-                if (builtInData.tags) {
-                    for (const tag of builtInData.tags) {
-                        if (isItemKey(tag.name)) {
-                            continue;
-                        }
-                        if (specialTags.has(tag.name)) {
-                            tag.name = generateItemKey('specialTag', tag.name, '');
-                        }
-                        else if (casing.tag === nameCasing_1.TagNameCasing.Kebab) {
-                            tag.name = (0, language_core_1.hyphenateTag)(tag.name);
-                        }
-                        else {
-                            tag.name = (0, shared_1.camelize)((0, shared_1.capitalize)(tag.name));
-                        }
+                for (const tag of builtInData.tags ?? []) {
+                    if (specialTags.has(tag.name)) {
+                        continue;
+                    }
+                    if (casing.tag === nameCasing_1.TagNameCasing.Kebab) {
+                        tag.name = (0, language_core_1.hyphenateTag)(tag.name);
+                    }
+                    else {
+                        tag.name = (0, shared_1.camelize)((0, shared_1.capitalize)(tag.name));
                     }
                 }
-                const promises = [];
-                const tagInfos = new Map();
                 let version = 0;
+                let target;
                 let components;
-                cachedPropInfos.clear();
+                let values;
+                const tasks = [];
+                const tagMap = new Map();
+                const propMap = new Map();
                 updateExtraCustomData([
+                    {
+                        getId: () => htmlDataProvider.getId(),
+                        isApplicable: () => true,
+                        provideTags() {
+                            target = 'tag';
+                            return htmlDataProvider.provideTags()
+                                .filter(tag => !specialTags.has(tag.name));
+                        },
+                        provideAttributes(tag) {
+                            target = 'attribute';
+                            const attrs = htmlDataProvider.provideAttributes(tag);
+                            if (tag === 'slot') {
+                                const nameAttr = attrs.find(attr => attr.name === 'name');
+                                if (nameAttr) {
+                                    nameAttr.valueSet = 'slot';
+                                }
+                            }
+                            return attrs;
+                        },
+                        provideValues(tag, attr) {
+                            target = 'value';
+                            return htmlDataProvider.provideValues(tag, attr);
+                        },
+                    },
                     html.newHTMLDataProvider('vue-template-built-in', builtInData),
                     {
                         getId: () => 'vue-template',
                         isApplicable: () => true,
                         provideTags: () => {
                             if (!components) {
-                                promises.push((async () => {
-                                    components = (await tsPluginClient?.getComponentNames(vueCode.fileName) ?? [])
+                                components = [];
+                                tasks.push((async () => {
+                                    components = (await getComponentNames(root.fileName) ?? [])
                                         .filter(name => name !== 'Transition'
                                         && name !== 'TransitionGroup'
                                         && name !== 'KeepAlive'
                                         && name !== 'Suspense'
                                         && name !== 'Teleport');
-                                    lastCompletionComponentNames = new Set(components);
                                     version++;
                                 })());
-                                return [];
                             }
-                            const scriptSetupRanges = language_core_1.tsCodegen.get(vueCode.sfc)?.getScriptSetupRanges();
+                            const scriptSetupRanges = language_core_1.tsCodegen.get(root.sfc)?.getScriptSetupRanges();
                             const names = new Set();
                             const tags = [];
                             for (const tag of components) {
@@ -222,7 +344,7 @@ function create(mode, getTsPluginClient) {
                                 }
                             }
                             for (const binding of scriptSetupRanges?.bindings ?? []) {
-                                const name = vueCode.sfc.scriptSetup.content.slice(binding.range.start, binding.range.end);
+                                const name = root.sfc.scriptSetup.content.slice(binding.range.start, binding.range.end);
                                 if (casing.tag === nameCasing_1.TagNameCasing.Kebab) {
                                     names.add((0, language_core_1.hyphenateTag)(name));
                                 }
@@ -239,84 +361,98 @@ function create(mode, getTsPluginClient) {
                             return tags;
                         },
                         provideAttributes: tag => {
-                            const tagInfo = tagInfos.get(tag);
+                            let tagInfo = tagMap.get(tag);
                             if (!tagInfo) {
-                                promises.push((async () => {
-                                    const attrs = await tsPluginClient?.getElementAttrs(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,
-                                        propInfos: propInfos.filter(prop => !prop.name.startsWith('ref_')),
-                                        events,
-                                        directives,
+                                tagInfo = {
+                                    attrs: [],
+                                    propInfos: [],
+                                    events: [],
+                                    directives: [],
+                                };
+                                tagMap.set(tag, tagInfo);
+                                tasks.push((async () => {
+                                    tagMap.set(tag, {
+                                        attrs: await getElementAttrs(root.fileName, tag) ?? [],
+                                        propInfos: await getComponentProps(root.fileName, tag) ?? [],
+                                        events: await getComponentEvents(root.fileName, tag) ?? [],
+                                        directives: await getComponentDirectives(root.fileName) ?? [],
                                     });
                                     version++;
                                 })());
-                                return [];
                             }
                             const { attrs, propInfos, events, directives } = tagInfo;
-                            for (const prop of propInfos) {
+                            for (let i = 0; i < propInfos.length; i++) {
+                                const prop = propInfos[i];
+                                if (prop.name.startsWith('ref_')) {
+                                    propInfos.splice(i--, 1);
+                                    continue;
+                                }
                                 if ((0, language_core_1.hyphenateTag)(prop.name).startsWith('on-vnode-')) {
-                                    prop.name = 'onVue:' + prop.name.slice('onVnode'.length);
+                                    prop.name = 'onVue:' + prop.name['onVnode'.length].toLowerCase()
+                                        + prop.name.slice('onVnodeX'.length);
                                 }
                             }
                             const attributes = [];
-                            const propsSet = new Set(propInfos.map(prop => prop.name));
+                            const propNameSet = new Set(propInfos.map(prop => prop.name));
                             for (const prop of [
                                 ...propInfos,
                                 ...attrs.map(attr => ({ name: attr })),
                             ]) {
-                                const isGlobal = prop.isAttribute || !propsSet.has(prop.name);
-                                const name = casing.attr === nameCasing_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
-                                const isEvent = (0, language_core_1.hyphenateAttr)(name).startsWith('on-');
+                                const isGlobal = prop.isAttribute || !propNameSet.has(prop.name);
+                                const propName = casing.attr === nameCasing_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
+                                const isEvent = (0, language_core_1.hyphenateAttr)(propName).startsWith('on-');
                                 if (isEvent) {
-                                    const propNameBase = name.startsWith('on-')
-                                        ? name.slice('on-'.length)
-                                        : (name['on'.length].toLowerCase() + name.slice('onX'.length));
-                                    const propKey = generateItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
-                                    attributes.push({
-                                        name: 'v-on:' + propNameBase,
-                                        description: propKey,
-                                    }, {
-                                        name: '@' + propNameBase,
-                                        description: propKey,
-                                    });
+                                    const eventName = casing.attr === nameCasing_1.AttrNameCasing.Camel
+                                        ? propName['on'.length].toLowerCase() + propName.slice('onX'.length)
+                                        : propName.slice('on-'.length);
+                                    for (const name of [
+                                        'v-on:' + eventName,
+                                        '@' + eventName,
+                                    ]) {
+                                        attributes.push({ name });
+                                        propMap.set(name, {
+                                            name: propName,
+                                            kind: 'event',
+                                            isGlobal,
+                                            info: prop,
+                                        });
+                                    }
                                 }
                                 else {
-                                    const propName = name;
                                     const propInfo = propInfos.find(prop => {
                                         const name = casing.attr === nameCasing_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
                                         return name === propName;
                                     });
-                                    const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName, propInfo?.deprecated);
-                                    if (propInfo) {
-                                        cachedPropInfos.set(propName, propInfo);
+                                    for (const name of [
+                                        propName,
+                                        ':' + propName,
+                                        'v-bind:' + propName,
+                                    ]) {
+                                        attributes.push({
+                                            name,
+                                            valueSet: prop.values?.some(value => typeof value === 'string') ? '__deferred__' : undefined,
+                                        });
+                                        propMap.set(name, {
+                                            name: propName,
+                                            kind: 'prop',
+                                            isGlobal,
+                                            info: propInfo,
+                                        });
                                     }
-                                    attributes.push({
-                                        name: propName,
-                                        description: propKey,
-                                        valueSet: prop.values?.some(value => typeof value === 'string') ? '__deferred__' : undefined,
-                                    }, {
-                                        name: ':' + propName,
-                                        description: propKey,
-                                    }, {
-                                        name: 'v-bind:' + propName,
-                                        description: propKey,
-                                    });
                                 }
                             }
                             for (const event of events) {
-                                const name = casing.attr === nameCasing_1.AttrNameCasing.Camel ? event : (0, language_core_1.hyphenateAttr)(event);
-                                const propKey = generateItemKey('componentEvent', tag, name);
-                                attributes.push({
-                                    name: 'v-on:' + name,
-                                    description: propKey,
-                                }, {
-                                    name: '@' + name,
-                                    description: propKey,
-                                });
+                                const eventName = casing.attr === nameCasing_1.AttrNameCasing.Camel ? event : (0, language_core_1.hyphenateAttr)(event);
+                                for (const name of [
+                                    'v-on:' + eventName,
+                                    '@' + eventName,
+                                ]) {
+                                    attributes.push({ name });
+                                    propMap.set(name, {
+                                        name: eventName,
+                                        kind: 'event',
+                                    });
+                                }
                             }
                             for (const directive of directives) {
                                 const name = (0, language_core_1.hyphenateAttr)(directive);
@@ -330,7 +466,7 @@ function create(mode, getTsPluginClient) {
                                 ...attrs.map(attr => ({ name: attr })),
                             ]) {
                                 if (prop.name.startsWith('onUpdate:')) {
-                                    const isGlobal = !propsSet.has(prop.name);
+                                    const isGlobal = !propNameSet.has(prop.name);
                                     models.push([isGlobal, prop.name.slice('onUpdate:'.length)]);
                                 }
                             }
@@ -341,224 +477,92 @@ function create(mode, getTsPluginClient) {
                             }
                             for (const [isGlobal, model] of models) {
                                 const name = casing.attr === nameCasing_1.AttrNameCasing.Camel ? model : (0, language_core_1.hyphenateAttr)(model);
-                                const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, name);
-                                attributes.push({
-                                    name: 'v-model:' + name,
-                                    description: propKey,
+                                attributes.push({ name: 'v-model:' + name });
+                                propMap.set('v-model:' + name, {
+                                    name,
+                                    kind: 'prop',
+                                    isGlobal,
                                 });
                                 if (model === 'modelValue') {
-                                    attributes.push({
-                                        name: 'v-model',
-                                        description: propKey,
+                                    propMap.set('v-model', {
+                                        name,
+                                        kind: 'prop',
+                                        isGlobal,
                                     });
                                 }
                             }
                             return attributes;
                         },
-                        provideValues: () => [],
+                        provideValues: (tag, attr) => {
+                            if (!values) {
+                                values = [];
+                                tasks.push((async () => {
+                                    if (tag === 'slot' && attr === 'name') {
+                                        values = await getComponentSlots(root.fileName) ?? [];
+                                    }
+                                    version++;
+                                })());
+                            }
+                            return values.map(value => ({
+                                name: value,
+                            }));
+                        },
                     },
                 ]);
                 return {
                     async sync() {
-                        await Promise.all(promises);
-                        return version;
+                        await Promise.all(tasks);
+                        return {
+                            version,
+                            target,
+                            info: {
+                                components,
+                                propMap,
+                            },
+                        };
                     },
                 };
             }
-            function afterHtmlCompletion(completionList, document) {
-                addDirectiveModifiers();
-                function addDirectiveModifiers() {
-                    const replacement = getReplacement(completionList, document);
-                    if (!replacement?.text.includes('.')) {
-                        return;
-                    }
-                    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 currentModifiers = isVOn
-                        ? vOnModifiers
-                        : isVBind
-                            ? vBindModifiers
-                            : isVModel
-                                ? vModelModifiers
-                                : undefined;
-                    if (!currentModifiers) {
-                        return;
-                    }
-                    for (const modifier in currentModifiers) {
-                        if (modifiers.includes(modifier)) {
-                            continue;
-                        }
-                        const description = currentModifiers[modifier];
-                        const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
-                        const newItem = {
-                            label: modifier,
-                            filterText: insertText,
-                            documentation: {
-                                kind: 'markdown',
-                                value: description,
-                            },
-                            textEdit: {
-                                range: replacement.textEdit.range,
-                                newText: insertText,
-                            },
-                            kind: 20,
-                        };
-                        completionList.items.push(newItem);
-                    }
+            function addDirectiveModifiers(completionList, document) {
+                const replacement = getReplacement(completionList, document);
+                if (!replacement?.text.includes('.')) {
+                    return;
                 }
-                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)) {
-                        htmlDocumentations.set(item.label, documentation);
-                    }
+                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 currentModifiers = isVOn
+                    ? vOnModifiers
+                    : isVBind
+                        ? vBindModifiers
+                        : isVModel
+                            ? vModelModifiers
+                            : undefined;
+                if (!currentModifiers) {
+                    return;
                 }
-                for (const item of completionList.items) {
-                    const parsedLabel = parseItemKey(item.label);
-                    if (parsedLabel) {
-                        const name = parsedLabel.tag;
-                        item.label = parsedLabel.leadingSlash ? '/' + name : name;
-                        const text = parsedLabel.leadingSlash ? `/${name}>` : name;
-                        if (item.textEdit) {
-                            item.textEdit.newText = text;
-                        }
-                        if (item.insertText) {
-                            item.insertText = text;
-                        }
-                        if (item.sortText) {
-                            item.sortText = text;
-                        }
-                    }
-                    const itemKey = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    let parsedItem = itemKey ? parseItemKey(itemKey) : undefined;
-                    let propInfo;
-                    if (parsedItem) {
-                        const documentations = [];
-                        propInfo = cachedPropInfos.get(parsedItem.prop);
-                        if (propInfo?.commentMarkdown) {
-                            documentations.push(propInfo.commentMarkdown);
-                        }
-                        let { isEvent, propName } = getPropName(parsedItem);
-                        if (isEvent) {
-                            // click -> onclick
-                            propName = 'on' + propName;
-                        }
-                        if (htmlDocumentations.has(propName)) {
-                            documentations.push(htmlDocumentations.get(propName));
-                        }
-                        if (documentations.length) {
-                            item.documentation = {
-                                kind: 'markdown',
-                                value: documentations.join('\n\n'),
-                            };
-                        }
-                        else {
-                            item.documentation = undefined;
-                        }
-                    }
-                    else {
-                        let propName = item.label;
-                        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)) {
-                            parsedItem = {
-                                type: 'componentProp',
-                                tag: '^',
-                                prop: propName,
-                                deprecated: false,
-                                leadingSlash: false,
-                            };
-                        }
-                        propInfo = cachedPropInfos.get(propName);
-                        if (propInfo?.commentMarkdown) {
-                            const originalDocumentation = typeof item.documentation === 'string'
-                                ? item.documentation
-                                : item.documentation?.value;
-                            item.documentation = {
-                                kind: 'markdown',
-                                value: [
-                                    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))) {
-                        item.kind = 6;
-                        tokens.push('\u0000');
-                    }
-                    else if (parsedItem) {
-                        const isComponent = parsedItem.tag !== '*';
-                        const { isEvent, propName } = getPropName(parsedItem);
-                        if (parsedItem.type === 'componentProp') {
-                            if (isComponent || specialProps.has(propName)) {
-                                item.kind = 5;
-                            }
-                        }
-                        else if (isEvent) {
-                            item.kind = 23;
-                            if (propName.startsWith('vue:')) {
-                                tokens.push('\u0004');
-                            }
-                        }
-                        if (isComponent || specialProps.has(propName)) {
-                            tokens.push('\u0000');
-                            if (item.label.startsWith(':')) {
-                                tokens.push('\u0001');
-                            }
-                            else if (item.label.startsWith('@')) {
-                                tokens.push('\u0002');
-                            }
-                            else if (item.label.startsWith('v-bind:')) {
-                                tokens.push('\u0003');
-                            }
-                            else if (item.label.startsWith('v-model:')) {
-                                tokens.push('\u0004');
-                            }
-                            else if (item.label.startsWith('v-on:')) {
-                                tokens.push('\u0005');
-                            }
-                            else {
-                                tokens.push('\u0000');
-                            }
-                            if (specialProps.has(propName)) {
-                                tokens.push('\u0001');
-                            }
-                            else {
-                                tokens.push('\u0000');
-                            }
-                        }
-                    }
-                    else if (item.label === 'v-if'
-                        || item.label === 'v-else-if'
-                        || item.label === 'v-else'
-                        || item.label === 'v-for') {
-                        item.kind = 14;
-                        tokens.push('\u0003');
+                for (const modifier in currentModifiers) {
+                    if (modifiers.includes(modifier)) {
+                        continue;
                     }
-                    else if (item.label.startsWith('v-')) {
-                        item.kind = 3;
-                        tokens.push('\u0002');
-                    }
-                    else {
-                        tokens.push('\u0001');
-                    }
-                    item.sortText = tokens.join('') + (item.sortText ?? item.label);
+                    const description = currentModifiers[modifier];
+                    const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
+                    const newItem = {
+                        label: modifier,
+                        filterText: insertText,
+                        documentation: {
+                            kind: 'markdown',
+                            value: description,
+                        },
+                        textEdit: {
+                            range: replacement.textEdit.range,
+                            newText: insertText,
+                        },
+                        kind: 20,
+                    };
+                    completionList.items.push(newItem);
                 }
-                updateExtraCustomData([]);
             }
             async function initialize() {
                 customData = await getHtmlCustomData();
@@ -589,41 +593,6 @@ function create(mode, getTsPluginClient) {
         extraCustomData = extraData;
         onDidChangeCustomDataListeners.forEach(l => l());
     }
-    function isSupportedDocument(document) {
-        if (mode === 'pug') {
-            return document.languageId === 'jade';
-        }
-        else {
-            return document.languageId === 'html';
-        }
-    }
-}
-function parseLabel(label) {
-    const leadingSlash = label.startsWith('/');
-    const name = label.slice(leadingSlash ? 1 : 0);
-    return {
-        name,
-        leadingSlash,
-    };
-}
-function generateItemKey(type, tag, prop, deprecated) {
-    return `__VLS_data=${type},${tag},${prop},${Number(deprecated)}`;
-}
-function isItemKey(key) {
-    return key.startsWith('__VLS_data=');
-}
-function parseItemKey(key) {
-    const { leadingSlash, name } = parseLabel(key);
-    if (isItemKey(name)) {
-        const strs = name.slice('__VLS_data='.length).split(',');
-        return {
-            type: strs[0],
-            tag: strs[1],
-            prop: strs[2],
-            deprecated: strs[3] === '1',
-            leadingSlash,
-        };
-    }
 }
 function getReplacement(list, doc) {
     for (const item of list.items) {
@@ -636,14 +605,11 @@ function getReplacement(list, doc) {
         }
     }
 }
-function getPropName(parsedItem) {
-    const name = (0, language_core_1.hyphenateAttr)(parsedItem.prop);
+function getPropName(prop, isEvent) {
+    const name = (0, language_core_1.hyphenateAttr)(prop);
     if (name.startsWith('on-')) {
         return { isEvent: true, propName: name.slice('on-'.length) };
     }
-    else if (parsedItem.type === 'componentEvent') {
-        return { isEvent: true, propName: name };
-    }
-    return { isEvent: false, propName: name };
+    return { isEvent, propName: name };
 }
 //# sourceMappingURL=vue-template.js.map