@vue/language-service 2.0.14 → 2.0.16

package/data/language-blocks/zh-cn.json

@@ -688,7 +688,7 @@
           "valueSet": "v",
           "description": {
             "kind": "markdown",
-            "value": "\n一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下, 返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下, 返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```\n"
+            "value": "\n一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下, 返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下, 返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```\n"
           },
           "references": [
             {

package/data/template/en.json

@@ -237,7 +237,7 @@
       "name": "Suspense",
       "description": {
         "kind": "markdown",
-        "value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **Events**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Details**\n\n  `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n  If it encounters async dependencies ([Async Components](https://vuejs.org/guide/components/async.html) and components with [`async setup()`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n  By setting the Suspense as `suspensible`, all the async dependency handling\n  will be handled by the parent Suspense. See [implementation details](https://github.com/vuejs/core/pull/6736)\n\n- **See also** [Guide - Suspense](https://vuejs.org/guide/built-ins/suspense.html)\n"
+        "value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **Events**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Details**\n\n  `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n  If it encounters async dependencies ([Async Components](https://vuejs.org/guide/components/async.html) and components with [`async setup()`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n  By setting the Suspense as `suspensible`, all the async dependency handling will be handled by the parent Suspense. See [implementation details](https://github.com/vuejs/core/pull/6736)\n\n- **See also** [Guide - Suspense](https://vuejs.org/guide/built-ins/suspense.html)\n"
       },
       "attributes": [],
       "references": [
@@ -1156,7 +1156,7 @@
       "name": "v-once",
       "description": {
         "kind": "markdown",
-        "value": "\nRender the element and component once only, and skip future updates.\n\n- **Does not expect expression**\n\n- **Details**\n\n  On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.\n\n  ```html\n  <!-- single element -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- the element have children -->\n  <div v-once>\n    <h1>comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- component -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- `v-for` directive -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo).\n\n- **See also**\n  - [Data Binding Syntax - interpolations](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)\n"
+        "value": "\nRender the element and component once only, and skip future updates.\n\n- **Does not expect expression**\n\n- **Details**\n\n  On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.\n\n  ```html\n  <!-- single element -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- the element have children -->\n  <div v-once>\n    <h1>Comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- component -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- `v-for` directive -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo).\n\n- **See also**\n  - [Data Binding Syntax - interpolations](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)\n"
       },
       "references": [
         {

package/data/template/fr.json

@@ -237,7 +237,7 @@
       "name": "Suspense",
       "description": {
         "kind": "markdown",
-        "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number,\n    suspensible?: boolean\n  }\n  ```\n\n- **Événements :**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Détails**\n\n  `<Suspense>` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n  S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n  En définissant Suspense comme `suspensible`, toutes les dépendances asynchrones seront gérées par le Suspense parent.\n  Voir [les détails d'implémentation](https://github.com/vuejs/core/pull/6736)\n\n- **Voir aussi** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n"
+        "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number,\n    suspensible?: boolean\n  }\n  ```\n\n- **Événements :**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Détails**\n\n  `<Suspense>` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n  S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n  En définissant Suspense comme `suspensible`, toutes les dépendances asynchrones seront gérées par le Suspense parent. Voir [les détails d'implémentation](https://github.com/vuejs/core/pull/6736)\n\n- **Voir aussi** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n"
       },
       "attributes": [],
       "references": [

package/data/template/ja.json

@@ -237,7 +237,7 @@
       "name": "Suspense",
       "description": {
         "kind": "markdown",
-        "value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **イベント**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **詳細**\n\n  `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n  デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n  Suspense を `suspensible` に設定することで、すべての非同期依存処理は親の Suspense によって処理されます。[実装の詳細](https://github.com/vuejs/core/pull/6736) を参照してください。\n\n\n- **参照** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
+        "value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **イベント**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **詳細**\n\n  `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n  デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n  Suspense を `suspensible` に設定することで、すべての非同期依存処理は親の Suspense によって処理されます。[実装の詳細](https://github.com/vuejs/core/pull/6736) を参照してください。\n\n- **参照** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
       },
       "attributes": [],
       "references": [

package/index.d.ts

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

package/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDefaultGetTsPluginClient = exports.createVueServicePlugins = void 0;
+exports.createDefaultGetTsPluginClient = exports.getVueLanguageServicePlugins = void 0;
 __exportStar(require("@volar/language-service"), exports);
 __exportStar(require("@vue/language-core"), exports);
 __exportStar(require("./lib/ideFeatures/nameCasing"), exports);
@@ -45,7 +45,7 @@ const componentInfos_1 = require("@vue/typescript-plugin/lib/requests/componentI
 const getImportPathForFile_1 = require("@vue/typescript-plugin/lib/requests/getImportPathForFile");
 const getPropertiesAtLocation_1 = require("@vue/typescript-plugin/lib/requests/getPropertiesAtLocation");
 const getQuickInfoAtPosition_1 = require("@vue/typescript-plugin/lib/requests/getQuickInfoAtPosition");
-function createVueServicePlugins(ts, getVueOptions, getTsPluginClient = createDefaultGetTsPluginClient(ts, getVueOptions), hybridMode = false) {
+function getVueLanguageServicePlugins(ts, getVueOptions, getTsPluginClient = createDefaultGetTsPluginClient(ts, getVueOptions), hybridMode = false) {
     const plugins = [];
     if (!hybridMode) {
         plugins.push(...(0, volar_service_typescript_1.create)(ts));
@@ -72,10 +72,15 @@ function createVueServicePlugins(ts, getVueOptions, getTsPluginClient = createDe
     else {
         plugins.push((0, syntactic_1.create)(ts), (0, docCommentTemplate_1.create)(ts));
     }
-    plugins.push((0, volar_service_typescript_twoslash_queries_1.create)(ts), (0, css_1.create)(), (0, volar_service_pug_beautify_1.create)(), (0, volar_service_json_1.create)(), (0, vue_template_1.create)('html', ts, getVueOptions, getTsPluginClient), (0, vue_template_1.create)('pug', ts, getVueOptions, getTsPluginClient), (0, vue_sfc_1.create)(), (0, vue_twoslash_queries_1.create)(ts, getTsPluginClient), (0, vue_codelens_references_1.create)(), (0, vue_document_drop_1.create)(ts, getTsPluginClient), (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient), (0, vue_autoinsert_parentheses_1.create)(ts), (0, vue_autoinsert_space_1.create)(), (0, vue_visualize_hidden_callback_param_1.create)(), (0, vue_directive_comments_1.create)(), (0, vue_extract_file_1.create)(ts, getTsPluginClient), (0, vue_toggle_v_bind_codeaction_1.create)(ts), (0, volar_service_emmet_1.create)());
+    plugins.push((0, volar_service_typescript_twoslash_queries_1.create)(ts), (0, css_1.create)(), (0, volar_service_pug_beautify_1.create)(), (0, volar_service_json_1.create)(), (0, vue_template_1.create)('html', ts, getVueOptions, getTsPluginClient), (0, vue_template_1.create)('pug', ts, getVueOptions, getTsPluginClient), (0, vue_sfc_1.create)(), (0, vue_twoslash_queries_1.create)(ts, getTsPluginClient), (0, vue_codelens_references_1.create)(), (0, vue_document_drop_1.create)(ts, getTsPluginClient), (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient), (0, vue_autoinsert_parentheses_1.create)(ts), (0, vue_autoinsert_space_1.create)(), (0, vue_visualize_hidden_callback_param_1.create)(), (0, vue_directive_comments_1.create)(), (0, vue_extract_file_1.create)(ts, getTsPluginClient), (0, vue_toggle_v_bind_codeaction_1.create)(ts), (0, volar_service_emmet_1.create)({
+        mappedModes: {
+            'vue': 'html',
+            'postcss': 'scss',
+        },
+    }));
     return plugins;
 }
-exports.createVueServicePlugins = createVueServicePlugins;
+exports.getVueLanguageServicePlugins = getVueLanguageServicePlugins;
 function createDefaultGetTsPluginClient(ts, getVueOptions) {
     return context => {
         if (!context.language.typescript) {

package/lib/ideFeatures/nameCasing.d.ts

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

package/lib/ideFeatures/nameCasing.js

@@ -85,8 +85,8 @@ async function convertAttrName(context, uri, casing, tsPluginClient) {
     return edits;
 }
 exports.convertAttrName = convertAttrName;
-async function getNameCasing(context, uri, tsPluginClient) {
-    const detected = await detect(context, uri, tsPluginClient);
+async function getNameCasing(context, uri) {
+    const detected = await detect(context, uri);
     const [attr, tag] = await Promise.all([
         context.env.getConfiguration?.('vue.complete.casing.props', uri),
         context.env.getConfiguration?.('vue.complete.casing.tags', uri),
@@ -99,7 +99,7 @@ async function getNameCasing(context, uri, tsPluginClient) {
     };
 }
 exports.getNameCasing = getNameCasing;
-async function detect(context, uri, tsPluginClient) {
+async function detect(context, uri) {
     const rootFile = context.language.scripts.get(uri)?.generated?.root;
     if (!(rootFile instanceof language_core_1.VueVirtualCode)) {
         return {
@@ -133,35 +133,23 @@ async function detect(context, uri, tsPluginClient) {
         return result;
     }
     async function getTagNameCase(file) {
-        const components = await tsPluginClient?.getComponentNames(file.fileName) ?? [];
-        const tagNames = getTemplateTagsAndAttrs(file);
-        const result = [];
-        let anyComponentUsed = false;
-        for (const component of components) {
-            if (tagNames.has(component) || tagNames.has((0, language_core_1.hyphenateTag)(component))) {
-                anyComponentUsed = true;
-                break;
-            }
-        }
-        if (!anyComponentUsed) {
-            return []; // not sure component style, because do not have any component using in <template> for check
-        }
-        for (const [tagName] of tagNames) {
-            // TagName
-            if (tagName !== (0, language_core_1.hyphenateTag)(tagName)) {
-                result.push(types_1.TagNameCasing.Pascal);
-                break;
-            }
-        }
-        for (const component of components) {
-            // Tagname -> tagname
-            // TagName -> tag-name
-            if (component !== (0, language_core_1.hyphenateTag)(component) && tagNames.has((0, language_core_1.hyphenateTag)(component))) {
-                result.push(types_1.TagNameCasing.Kebab);
-                break;
+        const result = new Set();
+        if (file.sfc.template?.ast) {
+            for (const element of vue.forEachElementNode(file.sfc.template.ast)) {
+                if (element.tagType === 1) {
+                    if (element.tag !== (0, language_core_1.hyphenateTag)(element.tag)) {
+                        // TagName
+                        result.add(types_1.TagNameCasing.Pascal);
+                    }
+                    else {
+                        // Tagname -> tagname
+                        // TagName -> tag-name
+                        result.add(types_1.TagNameCasing.Kebab);
+                    }
+                }
             }
         }
-        return result;
+        return [...result];
     }
 }
 exports.detect = detect;

package/lib/plugins/vue-template.js

@@ -16,6 +16,7 @@ let modelData;
 function create(mode, ts, getVueOptions, getTsPluginClient) {
     let customData = [];
     let extraCustomData = [];
+    let lastCompletionComponentNames = new Set();
     const onDidChangeCustomDataListeners = new Set();
     const onDidChangeCustomData = (listener) => {
         onDidChangeCustomDataListeners.add(listener);
@@ -92,6 +93,8 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     const decoded = context.decodeEmbeddedDocumentUri(document.uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
                     if (sourceScript?.generated?.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, sourceScript.generated.root)).sync;
                         currentVersion = await sync();
                     }
@@ -103,7 +106,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                         return;
                     }
                     if (sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) {
-                        await afterHtmlCompletion(htmlComplete, context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot), sourceScript.generated.root);
+                        await afterHtmlCompletion(htmlComplete, context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot));
                     }
                     return htmlComplete;
                 },
@@ -127,7 +130,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                         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, map.sourceDocument.uri, tsPluginClient);
+                            const casing = await (0, nameCasing_1.getNameCasing)(context, map.sourceDocument.uri);
                             const components = await tsPluginClient?.getComponentNames(code.fileName) ?? [];
                             const componentProps = {};
                             let token;
@@ -135,10 +138,9 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                             while ((token = scanner.scan()) !== html.TokenType.EOS) {
                                 if (token === html.TokenType.StartTag) {
                                     const tagName = scanner.getTokenText();
-                                    const component = tagName.indexOf('.') >= 0
-                                        ? components.find(component => component === tagName.split('.')[0])
+                                    const checkTag = tagName.indexOf('.') >= 0
+                                        ? tagName
                                         : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
-                                    const checkTag = tagName.indexOf('.') >= 0 ? tagName : component;
                                     if (checkTag) {
                                         componentProps[checkTag] ??= await tsPluginClient?.getComponentProps(code.fileName, checkTag, true) ?? [];
                                         current = {
@@ -310,7 +312,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
             };
             async function provideHtmlData(sourceDocumentUri, vueCode) {
                 await (initializing ??= initialize());
-                const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri, tsPluginClient);
+                const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri);
                 if (builtInData.tags) {
                     for (const tag of builtInData.tags) {
                         if (tag.name === 'slot') {
@@ -349,6 +351,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                                         && name !== 'KeepAlive'
                                         && name !== 'Suspense'
                                         && name !== 'Teleport');
+                                    lastCompletionComponentNames = new Set(components);
                                     version++;
                                 })());
                                 return [];
@@ -503,10 +506,8 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     }
                 };
             }
-            async function afterHtmlCompletion(completionList, sourceDocument, code) {
+            async function afterHtmlCompletion(completionList, sourceDocument) {
                 const replacement = getReplacement(completionList, sourceDocument);
-                const componentNames = new Set((await tsPluginClient?.getComponentNames(code.fileName) ?? [])
-                    .map(language_core_1.hyphenateTag));
                 if (replacement) {
                     const isEvent = replacement.text.startsWith('v-on:') || replacement.text.startsWith('@');
                     const isProp = replacement.text.startsWith('v-bind:') || replacement.text.startsWith(':');
@@ -570,7 +571,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     if (itemId) {
                         item.documentation = undefined;
                     }
-                    if (item.kind === 10 && componentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
+                    if (item.kind === 10 && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
                         item.kind = 6;
                         item.sortText = '\u0000' + (item.sortText ?? item.label);
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "2.0.14",
+	"version": "2.0.16",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -16,32 +16,32 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-core": "2.2.0-alpha.10",
-		"@volar/language-service": "2.2.0-alpha.10",
-		"@volar/typescript": "2.2.0-alpha.10",
+		"@volar/language-core": "~2.2.0",
+		"@volar/language-service": "~2.2.0",
+		"@volar/typescript": "~2.2.0",
 		"@vue/compiler-dom": "^3.4.0",
-		"@vue/language-core": "2.0.14",
+		"@vue/language-core": "2.0.16",
 		"@vue/shared": "^3.4.0",
-		"@vue/typescript-plugin": "2.0.14",
+		"@vue/typescript-plugin": "2.0.16",
 		"computeds": "^0.0.1",
 		"path-browserify": "^1.0.1",
-		"volar-service-css": "0.0.38",
-		"volar-service-emmet": "0.0.38",
-		"volar-service-html": "0.0.38",
-		"volar-service-json": "0.0.38",
-		"volar-service-pug": "0.0.38",
-		"volar-service-pug-beautify": "0.0.38",
-		"volar-service-typescript": "0.0.38",
-		"volar-service-typescript-twoslash-queries": "0.0.38",
-		"vscode-html-languageservice": "^5.1.0",
+		"volar-service-css": "0.0.42",
+		"volar-service-emmet": "0.0.42",
+		"volar-service-html": "0.0.42",
+		"volar-service-json": "0.0.42",
+		"volar-service-pug": "0.0.42",
+		"volar-service-pug-beautify": "0.0.42",
+		"volar-service-typescript": "0.0.42",
+		"volar-service-typescript-twoslash-queries": "0.0.42",
+		"vscode-html-languageservice": "npm:@johnsoncodehk/vscode-html-languageservice@5.2.0-34a5462",
 		"vscode-languageserver-textdocument": "^1.0.11",
 		"vscode-uri": "^3.0.8"
 	},
 	"devDependencies": {
 		"@types/node": "latest",
 		"@types/path-browserify": "latest",
-		"@volar/kit": "2.2.0-alpha.10",
+		"@volar/kit": "~2.2.0",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "ce1412067f88b7f9af03a2d3e04c220b4921c363"
+	"gitHead": "95b78c38cbf75481ebb59e11956b592346f01d92"
 }