@vue/language-service 2.0.6 → 2.0.10

package/data/language-blocks/en.json

@@ -556,7 +556,7 @@
           "valueSet": "v",
           "description": {
             "kind": "markdown",
-            "value": "\nA `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$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\nThe resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.\n\nRefer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).\n\n### Custom Inject Name \n\nYou can customize the property key of the injected classes object by giving the `module` attribute a value:\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### Usage with Composition API \n\nThe injected classes can be accessed in `setup()` and `<script setup>` via the `useCssModule` API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:\n\n```js\nimport { useCssModule } from 'vue'\n\n// inside setup() scope...\n// default, returns classes for <style module>\nuseCssModule()\n\n// named, returns classes for <style module=\"classes\">\nuseCssModule('classes')\n```\n"
+            "value": "\nA `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$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\nThe resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.\n\nRefer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) and [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition).\n\n### Custom Inject Name \n\nYou can customize the property key of the injected classes object by giving the `module` attribute a value:\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### Usage with Composition API \n\nThe injected classes can be accessed in `setup()` and `<script setup>` via the `useCssModule` API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:\n\n```js\nimport { useCssModule } from 'vue'\n\n// inside setup() scope...\n// default, returns classes for <style module>\nuseCssModule()\n\n// named, returns classes for <style module=\"classes\">\nuseCssModule('classes')\n```\n"
           },
           "references": [
             {

package/data/model-modifiers/ja.json

@@ -5,7 +5,7 @@
       "name": "lazy",
       "description": {
         "kind": "markdown",
-        "value": "\nデフォルトでは、 `v-model` は各 `input` イベントの後に、入力とデータを同期します ([上記](#vmodel-ime-tip) の IME による入力は例外とします)。 代わりに `change` イベント後に同期する `lazy` 修飾子を追加することができます。\n\n```html\n<!-- \"input\" の代わりに \"change\" イベント後に同期されます -->\n<input v-model.lazy=\"msg\" />\n```\n"
+        "value": "\nデフォルトでは、 `v-model` は各 `input` イベントの後に、入力とデータを同期します（[上記](#vmodel-ime-tip) の IME による入力は例外とします）。 代わりに `change` イベント後に同期する `lazy` 修飾子を追加することができます。\n\n```html\n<!-- \"input\" の代わりに \"change\" イベント後に同期されます -->\n<input v-model.lazy=\"msg\" />\n```\n"
       },
       "references": [
         {

package/data/template/ja.json

@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:**\n  - `:` or `.`（`.prop` 修飾子使用時）\n  - 値の省略（属性とバインドされた値が同じ名前の場合）<sup class=\"vt-badge\">3.4+</sup>\n\n- **期待する値:** `any（引数ありの場合） | Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n- **修飾子**\n\n  - `.camel` - kebab-case の属性名を camelCase に変換します。\n  - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n  `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n  要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n  コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\n\n  引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n  ```html\n  <!-- 属性をバインドする -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 動的な属性名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 省略記法 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 同名省略記法 (3.4+), :src=\"src\" のように展開する -->\n  <img :src />\n\n  <!-- 動的な属性名の省略記法 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- インラインの文字列連結 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- クラスのバインド -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- スタイルのバインド -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 属性のオブジェクトをバインド -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 親の props を子コンポーネントと共有するために渡す -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 以下と同じ -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n  - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n  - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\n1 つ以上の属性やコンポーネントの props を式に動的にバインドします。\n\n- **省略記法:**\n  - `:` or `.`（`.prop` 修飾子使用時）\n  - 値の省略（属性とバインドされた値が同じ名前の場合）<sup class=\"vt-badge\">3.4+</sup>\n\n- **期待する値:** `any（引数ありの場合）| Object（引数なしの場合）`\n\n- **引数:** `attrOrProp（省略可能）`\n\n- **修飾子**\n\n  - `.camel` - kebab-case の属性名を camelCase に変換します。\n  - `.prop` - バインディングを DOM プロパティとして設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - バインディングを DOM 属性として設定するよう強制します。<sup class=\"vt-badge\">3.2+</sup>\n\n- **使用法**\n\n  `class` や `style` 属性をバインドする際に使用する `v-bind` は、Array や Object などの追加の値の型をサポートします。詳しくは、以下のリンク先のガイドを参照してください。\n\n  要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](https://ja.vuejs.org/guide/extras/web-components.html#passing-dom-properties)ときに必要になることがあります。\n\n  コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。\n\n  引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。\n\n- **例**\n\n  ```html\n  <!-- 属性をバインドする -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 動的な属性名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 省略記法 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 同名省略記法（3.4+）, :src=\"src\" のように展開する -->\n  <img :src />\n\n  <!-- 動的な属性名の省略記法 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- インラインの文字列連結 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- クラスのバインド -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- スタイルのバインド -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 属性のオブジェクトをバインド -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- props のバインド。\"prop\" は子コンポーネントで宣言する必要があります。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 親の props を子コンポーネントと共有するために渡す -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修飾子には、専用の短縮形 `.` もあります:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 以下と同じ -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 修飾子は、DOM 内テンプレートを使用する際に、 `v-bind` 属性名をキャメル化できます（例: SVG の `viewBox` 属性）:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  文字列テンプレートを使用する場合や、ビルドステップでテンプレートを事前コンパイルする場合は、`.camel` は必要ありません。\n\n- **参照**\n  - [クラスとスタイルのバインディング](https://ja.vuejs.org/guide/essentials/class-and-style.html)\n  - [コンポーネント - props 渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {

package/index.d.ts

@@ -2,6 +2,7 @@ export * from '@volar/language-service';
 export * from '@vue/language-core';
 export * from './lib/ideFeatures/nameCasing';
 export * from './lib/types';
-import type { ServiceEnvironment, ServicePlugin } from '@volar/language-service';
+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, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): ServicePlugin[];
+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 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.createVueServicePlugins = void 0;
+exports.createDefaultGetTsPluginClient = exports.createVueServicePlugins = void 0;
 __exportStar(require("@volar/language-service"), exports);
 __exportStar(require("@vue/language-core"), exports);
 __exportStar(require("./lib/ideFeatures/nameCasing"), exports);
@@ -24,6 +24,8 @@ const volar_service_json_1 = require("volar-service-json");
 const volar_service_pug_beautify_1 = require("volar-service-pug-beautify");
 const volar_service_typescript_1 = require("volar-service-typescript");
 const volar_service_typescript_twoslash_queries_1 = require("volar-service-typescript-twoslash-queries");
+const docCommentTemplate_1 = require("volar-service-typescript/lib/plugins/docCommentTemplate");
+const syntactic_1 = require("volar-service-typescript/lib/plugins/syntactic");
 const css_1 = require("./lib/plugins/css");
 const vue_autoinsert_dotvalue_1 = require("./lib/plugins/vue-autoinsert-dotvalue");
 const vue_autoinsert_parentheses_1 = require("./lib/plugins/vue-autoinsert-parentheses");
@@ -37,28 +39,91 @@ const vue_template_1 = require("./lib/plugins/vue-template");
 const vue_toggle_v_bind_codeaction_1 = require("./lib/plugins/vue-toggle-v-bind-codeaction");
 const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
 const vue_visualize_hidden_callback_param_1 = require("./lib/plugins/vue-visualize-hidden-callback-param");
-function createVueServicePlugins(ts, getVueOptions, tsPluginClient) {
-    return [
-        (0, volar_service_typescript_1.create)(ts),
-        (0, volar_service_typescript_twoslash_queries_1.create)(),
-        (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, tsPluginClient),
-        (0, vue_template_1.create)('pug', ts, getVueOptions, tsPluginClient),
-        (0, vue_sfc_1.create)(),
-        (0, vue_twoslash_queries_1.create)(ts, tsPluginClient),
-        (0, vue_codelens_references_1.create)(),
-        (0, vue_document_drop_1.create)(ts),
-        (0, vue_autoinsert_dotvalue_1.create)(ts, tsPluginClient),
-        (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, tsPluginClient),
-        (0, vue_toggle_v_bind_codeaction_1.create)(ts),
-        (0, volar_service_emmet_1.create)(),
-    ];
+const common_1 = require("@vue/typescript-plugin/lib/common");
+const collectExtractProps_1 = require("@vue/typescript-plugin/lib/requests/collectExtractProps");
+const componentInfos_1 = require("@vue/typescript-plugin/lib/requests/componentInfos");
+const 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) {
+    const plugins = [];
+    if (!hybridMode) {
+        plugins.push(...(0, volar_service_typescript_1.create)(ts));
+        for (let i = 0; i < plugins.length; i++) {
+            const plugin = plugins[i];
+            if (plugin.name === 'typescript-semantic') {
+                plugins[i] = {
+                    ...plugin,
+                    create(context) {
+                        const created = plugin.create(context);
+                        if (!context.language.typescript) {
+                            return created;
+                        }
+                        const languageService = created.provide['typescript/languageService']();
+                        const vueOptions = getVueOptions(context.env);
+                        (0, common_1.decorateLanguageServiceForVue)(context.language, languageService, vueOptions, ts, false);
+                        return created;
+                    },
+                };
+                break;
+            }
+        }
+    }
+    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)());
+    return plugins;
 }
 exports.createVueServicePlugins = createVueServicePlugins;
+function createDefaultGetTsPluginClient(ts, getVueOptions) {
+    return context => {
+        if (!context.language.typescript) {
+            return;
+        }
+        const languageService = context.inject('typescript/languageService');
+        if (!languageService) {
+            return;
+        }
+        const requestContext = {
+            typescript: ts,
+            language: context.language,
+            languageService,
+            languageServiceHost: context.language.typescript.languageServiceHost,
+            vueOptions: getVueOptions(context.env),
+            isTsPlugin: false,
+            getFileId: context.env.typescript.fileNameToUri,
+        };
+        return {
+            async collectExtractProps(...args) {
+                return await collectExtractProps_1.collectExtractProps.apply(requestContext, args);
+            },
+            async getPropertiesAtLocation(...args) {
+                return await getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, args);
+            },
+            async getImportPathForFile(...args) {
+                return await getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
+            },
+            async getComponentEvents(...args) {
+                return await componentInfos_1.getComponentEvents.apply(requestContext, args);
+            },
+            async getComponentNames(...args) {
+                return await componentInfos_1.getComponentNames.apply(requestContext, args);
+            },
+            async getComponentProps(...args) {
+                return await componentInfos_1.getComponentProps.apply(requestContext, args);
+            },
+            async getElementAttrs(...args) {
+                return await componentInfos_1.getElementAttrs.apply(requestContext, args);
+            },
+            async getTemplateContextProps(...args) {
+                return await componentInfos_1.getTemplateContextProps.apply(requestContext, args);
+            },
+            async getQuickInfoAtPosition(...args) {
+                return await getQuickInfoAtPosition_1.getQuickInfoAtPosition.apply(requestContext, args);
+            },
+        };
+    };
+}
+exports.createDefaultGetTsPluginClient = createDefaultGetTsPluginClient;
 //# sourceMappingURL=index.js.map

package/lib/ideFeatures/nameCasing.d.ts

@@ -1,8 +1,8 @@
 import type { ServiceContext } from '@volar/language-service';
 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')): 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 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<{
     tag: TagNameCasing;
     attr: AttrNameCasing;

package/lib/ideFeatures/nameCasing.js

@@ -6,19 +6,22 @@ const language_core_1 = require("@vue/language-core");
 const computeds_1 = require("computeds");
 const types_1 = require("../types");
 async function convertTagName(context, uri, casing, tsPluginClient) {
-    const sourceFile = context.language.files.get(uri);
-    if (!sourceFile)
+    const sourceFile = context.language.scripts.get(uri);
+    if (!sourceFile) {
         return;
-    const rootCode = sourceFile?.generated?.code;
-    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
+    }
+    const rootCode = sourceFile?.generated?.root;
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
+    }
     const desc = rootCode.sfc;
-    if (!desc.template)
+    if (!desc.template) {
         return;
+    }
     const template = desc.template;
     const document = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = await tsPluginClient.getComponentNames(rootCode.fileName) ?? [];
+    const components = await tsPluginClient?.getComponentNames(rootCode.fileName) ?? [];
     const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { offsets }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
@@ -40,24 +43,27 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
 }
 exports.convertTagName = convertTagName;
 async function convertAttrName(context, uri, casing, tsPluginClient) {
-    const sourceFile = context.language.files.get(uri);
-    if (!sourceFile)
+    const sourceFile = context.language.scripts.get(uri);
+    if (!sourceFile) {
         return;
-    const rootCode = sourceFile?.generated?.code;
-    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
+    }
+    const rootCode = sourceFile?.generated?.root;
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
+    }
     const desc = rootCode.sfc;
-    if (!desc.template)
+    if (!desc.template) {
         return;
+    }
     const template = desc.template;
     const document = context.documents.get(uri, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = await tsPluginClient.getComponentNames(rootCode.fileName) ?? [];
+    const components = await tsPluginClient?.getComponentNames(rootCode.fileName) ?? [];
     const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { attrs }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
-            const props = await tsPluginClient.getComponentProps(rootCode.fileName, componentName) ?? [];
+            const props = await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? [];
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
                 if (propName) {
@@ -94,7 +100,7 @@ async function getNameCasing(context, uri, tsPluginClient) {
 }
 exports.getNameCasing = getNameCasing;
 async function detect(context, uri, tsPluginClient) {
-    const rootFile = context.language.files.get(uri)?.generated?.code;
+    const rootFile = context.language.scripts.get(uri)?.generated?.root;
     if (!(rootFile instanceof language_core_1.VueGeneratedCode)) {
         return {
             tag: [],
@@ -163,12 +169,13 @@ const map = new WeakMap();
 function getTemplateTagsAndAttrs(sourceFile) {
     if (!map.has(sourceFile)) {
         const getter = (0, computeds_1.computed)(() => {
-            if (!(sourceFile instanceof vue.VueGeneratedCode))
+            if (!(sourceFile instanceof vue.VueGeneratedCode)) {
                 return;
+            }
             const ast = sourceFile.sfc.template?.ast;
             const tags = new Map();
             if (ast) {
-                for (const node of vue.eachElementNode(ast)) {
+                for (const node of vue.forEachElementNode(ast)) {
                     if (!tags.has(node.tag)) {
                         tags.set(node.tag, { offsets: [], attrs: new Map() });
                     }

package/lib/plugins/css.d.ts

@@ -1,2 +1,2 @@
-import type { ServicePlugin } from '@volar/language-service';
-export declare function create(): ServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

package/lib/plugins/data.js

@@ -33,12 +33,15 @@ function loadTemplateData(lang) {
     const vOn = data.globalAttributes?.find(d => d.name === 'v-on');
     const vSlot = data.globalAttributes?.find(d => d.name === 'v-slot');
     const vBind = data.globalAttributes?.find(d => d.name === 'v-bind');
-    if (vOn)
+    if (vOn) {
         data.globalAttributes?.push({ ...vOn, name: '@' });
-    if (vSlot)
+    }
+    if (vSlot) {
         data.globalAttributes?.push({ ...vSlot, name: '#' });
-    if (vBind)
+    }
+    if (vBind) {
         data.globalAttributes?.push({ ...vBind, name: ':' });
+    }
     return data;
 }
 exports.loadTemplateData = loadTemplateData;

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

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

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

@@ -11,40 +11,52 @@ function getAst(ts, fileName, snapshot, scriptKind) {
     }
     return ast;
 }
-function create(ts, tsPluginClient) {
+function create(ts, getTsPluginClient) {
     return {
         name: 'vue-autoinsert-dotvalue',
         create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
             let currentReq = 0;
             return {
-                async provideAutoInsertionEdit(document, position, lastChange) {
-                    if (!isTsDocument(document))
+                async provideAutoInsertionEdit(document, selection, change) {
+                    // selection must at end of change
+                    if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
                         return;
-                    if (!isCharacterTyping(document, lastChange))
+                    }
+                    if (!isTsDocument(document)) {
+                        return;
+                    }
+                    if (!isCharacterTyping(document, change)) {
                         return;
+                    }
                     const req = ++currentReq;
                     // Wait for tsserver to sync
                     await sleep(250);
-                    if (req !== currentReq)
+                    if (req !== currentReq) {
                         return;
+                    }
                     const enabled = await context.env.getConfiguration?.('vue.autoInsert.dotValue') ?? true;
-                    if (!enabled)
+                    if (!enabled) {
                         return;
-                    const [code, file] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!file)
+                    }
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!sourceScript) {
                         return;
+                    }
                     let ast;
-                    let sourceCodeOffset = document.offsetAt(position);
-                    const fileName = context.env.typescript.uriToFileName(file.id);
-                    if (file?.generated) {
-                        const script = file.generated.languagePlugin.typescript?.getScript(file.generated.code);
-                        if (script?.code !== code) {
+                    let sourceCodeOffset = document.offsetAt(selection);
+                    const fileName = context.env.typescript.uriToFileName(sourceScript.id);
+                    if (sourceScript.generated) {
+                        const serviceScript = sourceScript.generated.languagePlugin.typescript?.getServiceScript(sourceScript.generated.root);
+                        if (!serviceScript || serviceScript?.code !== virtualCode) {
                             return;
                         }
-                        ast = getAst(ts, fileName, script.code.snapshot, script.scriptKind);
+                        ast = getAst(ts, fileName, virtualCode.snapshot, serviceScript.scriptKind);
                         let mapped = false;
-                        for (const [_1, [_2, map]] of context.language.files.getMaps(code)) {
-                            const sourceOffset = map.getSourceOffset(document.offsetAt(position));
+                        for (const [_1, [_2, map]] of context.language.maps.forEach(virtualCode)) {
+                            const sourceOffset = map.getSourceOffset(document.offsetAt(selection));
                             if (sourceOffset !== undefined) {
                                 sourceCodeOffset = sourceOffset[0];
                                 mapped = true;
@@ -56,10 +68,11 @@ function create(ts, tsPluginClient) {
                         }
                     }
                     else {
-                        ast = getAst(ts, fileName, file.snapshot);
+                        ast = getAst(ts, fileName, sourceScript.snapshot);
                     }
-                    if (isBlacklistNode(ts, ast, document.offsetAt(position), false))
+                    if (isBlacklistNode(ts, ast, document.offsetAt(selection), false)) {
                         return;
+                    }
                     const props = await tsPluginClient?.getPropertiesAtLocation(fileName, sourceCodeOffset) ?? [];
                     if (props.some(prop => prop === 'value')) {
                         return '${1:.value}';
@@ -80,21 +93,13 @@ function isTsDocument(document) {
         document.languageId === 'typescriptreact';
 }
 const charReg = /\w/;
-function isCharacterTyping(document, lastChange) {
-    const lastCharacter = lastChange.text[lastChange.text.length - 1];
-    const rangeStart = lastChange.range.start;
-    const position = {
-        line: rangeStart.line,
-        character: rangeStart.character + lastChange.text.length,
-    };
-    const nextCharacter = document.getText({
-        start: position,
-        end: { line: position.line, character: position.character + 1 },
-    });
+function isCharacterTyping(document, change) {
+    const lastCharacter = change.text[change.text.length - 1];
+    const nextCharacter = document.getText().substring(change.rangeOffset + change.text.length, change.rangeOffset + change.text.length + 1);
     if (lastCharacter === undefined) { // delete text
         return false;
     }
-    if (lastChange.text.indexOf('\n') >= 0) { // multi-line change
+    if (change.text.indexOf('\n') >= 0) { // multi-line change
         return false;
     }
     return charReg.test(lastCharacter) && !charReg.test(nextCharacter);
@@ -137,8 +142,9 @@ function isBlacklistNode(ts, node, pos, allowAccessDotValue) {
     else {
         let _isBlacklistNode = false;
         node.forEachChild(node => {
-            if (_isBlacklistNode)
+            if (_isBlacklistNode) {
                 return;
+            }
             if (pos >= node.getFullStart() && pos <= node.getEnd()) {
                 if (isBlacklistNode(ts, node, pos, allowAccessDotValue)) {
                     _isBlacklistNode = true;

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

@@ -1,2 +1,2 @@
-import type { ServicePlugin } from '@volar/language-service';
-export declare function create(ts: typeof import('typescript')): ServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(ts: typeof import('typescript')): LanguageServicePlugin;

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

@@ -7,16 +7,25 @@ function create(ts) {
         name: 'vue-autoinsert-parentheses',
         create(context) {
             return {
-                async provideAutoInsertionEdit(document, position, lastChange) {
+                async provideAutoInsertionEdit(document, selection, change) {
+                    // selection must at end of change
+                    if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
+                        return;
+                    }
                     const enabled = await context.env.getConfiguration?.('vue.autoInsert.parentheses') ?? false;
-                    if (!enabled)
+                    if (!enabled) {
                         return;
-                    if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, lastChange))
+                    }
+                    if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, change)) {
                         return;
-                    const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (virtualCode?.id !== 'template_format')
+                    }
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!virtualCode?.id.startsWith('template_inline_ts_')) {
                         return;
-                    const offset = document.offsetAt(position);
+                    }
+                    const offset = document.offsetAt(selection);
                     for (const mappedRange of virtualCode.mappings) {
                         const generatedCodeEnd = mappedRange.generatedOffsets[mappedRange.generatedOffsets.length - 1]
                             + mappedRange.lengths[mappedRange.lengths.length - 1];

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

@@ -1,2 +1,2 @@
-import type { ServicePlugin } from '@volar/language-service';
-export declare function create(): ServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

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

@@ -6,23 +6,16 @@ function create() {
         name: 'vue-autoinsert-space',
         create(context) {
             return {
-                async provideAutoInsertionEdit(document, _, lastChange) {
+                async provideAutoInsertionEdit(document, selection, change) {
                     if (document.languageId === 'html' || document.languageId === 'jade') {
                         const enabled = await context.env.getConfiguration?.('vue.autoInsert.bracketSpacing') ?? true;
-                        if (!enabled)
+                        if (!enabled) {
                             return;
-                        if (lastChange.text === '{}'
-                            && document.getText({
-                                start: { line: lastChange.range.start.line, character: lastChange.range.start.character - 1 },
-                                end: { line: lastChange.range.start.line, character: lastChange.range.start.character + 3 }
-                            }) === '{{}}') {
-                            return {
-                                newText: ` $0 `,
-                                range: {
-                                    start: { line: lastChange.range.start.line, character: lastChange.range.start.character + 1 },
-                                    end: { line: lastChange.range.start.line, character: lastChange.range.start.character + 1 }
-                                },
-                            };
+                        }
+                        if (change.text === '{}'
+                            && document.getText().substring(change.rangeOffset - 1, change.rangeOffset + 3) === '{{}}'
+                            && document.offsetAt(selection) === change.rangeOffset + 1) {
+                            return ` $0 `;
                         }
                     }
                 },

package/lib/plugins/vue-codelens-references.d.ts

@@ -1,2 +1,2 @@
-import type { ServicePlugin } from '@volar/language-service';
-export declare function create(): ServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

package/lib/plugins/vue-codelens-references.js

@@ -12,8 +12,9 @@ function create() {
                         const result = [];
                         for (const map of context.documents.getMaps(virtualCode) ?? []) {
                             for (const mapping of map.map.mappings) {
-                                if (!mapping.data.__referencesCodeLens)
+                                if (!mapping.data.__referencesCodeLens) {
                                     continue;
+                                }
                                 result.push({
                                     start: document.positionAt(mapping.generatedOffsets[0]),
                                     end: document.positionAt(mapping.generatedOffsets[mapping.generatedOffsets.length - 1]
@@ -26,10 +27,13 @@ function create() {
                 },
             };
             function worker(uri, callback) {
-                const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(uri);
-                if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || !sourceFile)
+                const decoded = context.decodeEmbeddedDocumentUri(uri);
+                const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                if (!virtualCode || !(sourceScript?.generated?.root instanceof language_core_1.VueGeneratedCode) || !sourceScript) {
                     return;
-                return callback(virtualCode, sourceFile);
+                }
+                return callback(virtualCode, sourceScript);
             }
         },
     };

package/lib/plugins/vue-directive-comments.d.ts

@@ -1,2 +1,2 @@
-import type { ServicePlugin } from '@volar/language-service';
-export declare function create(): ServicePlugin;
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

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

@@ -14,12 +14,14 @@ function create() {
         create() {
             return {
                 provideCompletionItems(document, position) {
-                    if (document.languageId !== 'html')
+                    if (document.languageId !== 'html') {
                         return;
+                    }
                     const line = document.getText({ start: { line: position.line, character: 0 }, end: position });
                     const cmdStart = line.match(directiveCommentReg);
-                    if (!cmdStart)
+                    if (!cmdStart) {
                         return;
+                    }
                     const startIndex = cmdStart.index + cmdStart[0].length;
                     const remainText = line.substring(startIndex);
                     const result = [];
@@ -27,7 +29,6 @@ function create() {
                         let match = true;
                         for (let i = 0; i < remainText.length; i++) {
                             if (remainText[i] !== cmd[i]) {
-                                console.log(JSON.stringify(remainText[i]), JSON.stringify(cmd[i]));
                                 match = false;
                                 break;
                             }

package/lib/plugins/vue-document-drop.d.ts

@@ -1,2 +1,2 @@
-import { ServicePlugin } from '../types';
-export declare function create(ts: typeof import('typescript')): ServicePlugin;
+import { LanguageServicePlugin, ServiceContext } from '../types';
+export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): LanguageServicePlugin;