@vue/language-service 2.0.7 → 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,7 +2,7 @@ export * from '@volar/language-service';
 export * from '@vue/language-core';
 export * from './lib/ideFeatures/nameCasing';
 export * from './lib/types';
-import type { ServiceContext, 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, getTsPluginClient?: (context: ServiceContext) => typeof import("@vue/typescript-plugin/lib/client") | undefined, hybridMode?: boolean): 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

@@ -42,6 +42,7 @@ const vue_visualize_hidden_callback_param_1 = require("./lib/plugins/vue-visuali
 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) {
@@ -60,7 +61,7 @@ function createVueServicePlugins(ts, getVueOptions, getTsPluginClient = createDe
                         }
                         const languageService = created.provide['typescript/languageService']();
                         const vueOptions = getVueOptions(context.env);
-                        (0, common_1.decorateLanguageServiceForVue)(context.language.files, languageService, vueOptions, ts, false);
+                        (0, common_1.decorateLanguageServiceForVue)(context.language, languageService, vueOptions, ts, false);
                         return created;
                     },
                 };
@@ -71,7 +72,7 @@ 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), (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)());
     return plugins;
 }
 exports.createVueServicePlugins = createVueServicePlugins;
@@ -80,10 +81,15 @@ function createDefaultGetTsPluginClient(ts, getVueOptions) {
         if (!context.language.typescript) {
             return;
         }
+        const languageService = context.inject('typescript/languageService');
+        if (!languageService) {
+            return;
+        }
         const requestContext = {
             typescript: ts,
-            files: context.language.files,
-            languageService: context.inject('typescript/languageService'),
+            language: context.language,
+            languageService,
+            languageServiceHost: context.language.typescript.languageServiceHost,
             vueOptions: getVueOptions(context.env),
             isTsPlugin: false,
             getFileId: context.env.typescript.fileNameToUri,
@@ -95,6 +101,9 @@ function createDefaultGetTsPluginClient(ts, getVueOptions) {
             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);
             },
@@ -115,7 +124,6 @@ function createDefaultGetTsPluginClient(ts, getVueOptions) {
             },
         };
     };
-    ;
 }
 exports.createDefaultGetTsPluginClient = createDefaultGetTsPluginClient;
 //# sourceMappingURL=index.js.map

package/lib/ideFeatures/nameCasing.js

@@ -6,11 +6,11 @@ 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);
+    const sourceFile = context.language.scripts.get(uri);
     if (!sourceFile) {
         return;
     }
-    const rootCode = sourceFile?.generated?.code;
+    const rootCode = sourceFile?.generated?.root;
     if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
     }
@@ -43,11 +43,11 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
 }
 exports.convertTagName = convertTagName;
 async function convertAttrName(context, uri, casing, tsPluginClient) {
-    const sourceFile = context.language.files.get(uri);
+    const sourceFile = context.language.scripts.get(uri);
     if (!sourceFile) {
         return;
     }
-    const rootCode = sourceFile?.generated?.code;
+    const rootCode = sourceFile?.generated?.root;
     if (!(rootCode instanceof language_core_1.VueGeneratedCode)) {
         return;
     }
@@ -100,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: [],
@@ -175,7 +175,7 @@ function getTemplateTagsAndAttrs(sourceFile) {
             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/vue-autoinsert-dotvalue.d.ts

@@ -1,10 +1,10 @@
-import type { ServiceContext, 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'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): 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

@@ -18,11 +18,15 @@ function create(ts, getTsPluginClient) {
             const tsPluginClient = getTsPluginClient?.(context);
             let currentReq = 0;
             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;
+                    }
                     if (!isTsDocument(document)) {
                         return;
                     }
-                    if (!isCharacterTyping(document, lastChange)) {
+                    if (!isCharacterTyping(document, change)) {
                         return;
                     }
                     const req = ++currentReq;
@@ -35,22 +39,24 @@ function create(ts, getTsPluginClient) {
                     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;
@@ -62,9 +68,9 @@ function create(ts, getTsPluginClient) {
                         }
                     }
                     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) ?? [];
@@ -87,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);

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,19 +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) {
                         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,24 +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) {
                             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

@@ -27,11 +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-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;

package/lib/plugins/vue-document-drop.js

@@ -6,19 +6,23 @@ const shared_1 = require("@vue/shared");
 const path = require("path-browserify");
 const vue_extract_file_1 = require("../plugins/vue-extract-file");
 const types_1 = require("../types");
-function create(ts) {
+const getUserPreferences_1 = require("volar-service-typescript/lib/configs/getUserPreferences");
+function create(ts, getTsPluginClient) {
     return {
         name: 'vue-document-drop',
         create(context) {
             let casing = types_1.TagNameCasing.Pascal; // TODO
+            const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideDocumentDropEdits(document, _position, dataTransfer) {
                     if (document.languageId !== 'html') {
                         return;
                     }
-                    const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    const vueVirtualCode = sourceFile?.generated?.code;
-                    if (!virtualCode || !(vueVirtualCode instanceof language_core_1.VueGeneratedCode)) {
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    const vueVirtualCode = sourceScript?.generated?.root;
+                    if (!sourceScript || !virtualCode || !(vueVirtualCode instanceof language_core_1.VueGeneratedCode)) {
                         return;
                     }
                     let importUri;
@@ -41,14 +45,28 @@ function create(ts) {
                     const additionalEdit = {};
                     const code = [...(0, language_core_1.forEachEmbeddedCode)(vueVirtualCode)].find(code => code.id === (sfc.scriptSetup ? 'scriptSetupFormat' : 'scriptFormat'));
                     const lastImportNode = (0, vue_extract_file_1.getLastImportNode)(ts, script.ast);
-                    let importPath = path.relative(path.dirname(document.uri), importUri)
-                        || importUri.substring(importUri.lastIndexOf('/') + 1);
-                    if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
-                        importPath = './' + importPath;
+                    const incomingFileName = context.env.typescript.uriToFileName(importUri);
+                    let importPath;
+                    const serviceScript = sourceScript.generated?.languagePlugin.typescript?.getServiceScript(vueVirtualCode);
+                    if (tsPluginClient && serviceScript) {
+                        const tsDocumentUri = context.encodeEmbeddedDocumentUri(sourceScript.id, serviceScript.code.id);
+                        const tsDocument = context.documents.get(tsDocumentUri, serviceScript.code.languageId, serviceScript.code.snapshot);
+                        const preferences = await (0, getUserPreferences_1.getUserPreferences)(context, tsDocument);
+                        const importPathRequest = await tsPluginClient.getImportPathForFile(vueVirtualCode.fileName, incomingFileName, preferences);
+                        if (importPathRequest) {
+                            importPath = importPathRequest;
+                        }
+                    }
+                    if (!importPath) {
+                        importPath = path.relative(path.dirname(vueVirtualCode.fileName), incomingFileName)
+                            || importUri.substring(importUri.lastIndexOf('/') + 1);
+                        if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
+                            importPath = './' + importPath;
+                        }
                     }
                     additionalEdit.changes ??= {};
-                    additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)] = [];
-                    additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)].push({
+                    additionalEdit.changes[context.encodeEmbeddedDocumentUri(sourceScript.id, code.id)] = [];
+                    additionalEdit.changes[context.encodeEmbeddedDocumentUri(sourceScript.id, code.id)].push({
                         range: lastImportNode ? {
                             start: script.ast.getLineAndCharacterOfPosition(lastImportNode.end),
                             end: script.ast.getLineAndCharacterOfPosition(lastImportNode.end),
@@ -62,7 +80,7 @@ function create(ts) {
                     if (sfc.script) {
                         const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc.script.ast, newName);
                         if (edit) {
-                            additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)].push({
+                            additionalEdit.changes[context.encodeEmbeddedDocumentUri(sourceScript.id, code.id)].push({
                                 range: {
                                     start: document.positionAt(edit.range.start),
                                     end: document.positionAt(edit.range.end),

package/lib/plugins/vue-extract-file.d.ts

@@ -1,6 +1,6 @@
-import type { ServiceContext, ServicePlugin } from '@volar/language-service';
+import type { ServiceContext, LanguageServicePlugin } from '@volar/language-service';
 import type * as ts from 'typescript';
-export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): ServicePlugin;
+export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): LanguageServicePlugin;
 export declare function getLastImportNode(ts: typeof import('typescript'), sourceFile: ts.SourceFile): ts.Node | undefined;
 export declare function createAddComponentToOptionEdit(ts: typeof import('typescript'), ast: ts.SourceFile, componentName: string): {
     range: import("@vue/language-core").TextRange;

package/lib/plugins/vue-extract-file.js

@@ -15,11 +15,13 @@ function create(ts, getTsPluginClient) {
                     if (startOffset === endOffset) {
                         return;
                     }
-                    const [code, vueCode] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!(vueCode?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template') {
+                    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?.generated?.root instanceof language_core_1.VueGeneratedCode) || virtualCode?.id !== 'template') {
                         return;
                     }
-                    const { sfc } = vueCode.generated.code;
+                    const { sfc } = sourceScript.generated.root;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return;
@@ -43,13 +45,15 @@ function create(ts, getTsPluginClient) {
                 async resolveCodeAction(codeAction) {
                     const { uri, range, newName } = codeAction.data;
                     const [startOffset, endOffset] = range;
-                    const [code, sourceFile] = context.documents.getVirtualCodeByUri(uri);
-                    if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template') {
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!(sourceScript?.generated?.root instanceof language_core_1.VueGeneratedCode) || virtualCode?.id !== 'template') {
                         return codeAction;
                     }
-                    const document = context.documents.get(uri, code.languageId, code.snapshot);
-                    const sfcDocument = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
-                    const { sfc } = sourceFile.generated.code;
+                    const document = context.documents.get(uri, virtualCode.languageId, virtualCode.snapshot);
+                    const sfcDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
+                    const { sfc } = sourceScript.generated.root;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return codeAction;
@@ -58,7 +62,7 @@ function create(ts, getTsPluginClient) {
                     if (!templateCodeRange) {
                         return codeAction;
                     }
-                    const toExtract = await tsPluginClient?.collectExtractProps(sourceFile.generated.code.fileName, templateCodeRange) ?? [];
+                    const toExtract = await tsPluginClient?.collectExtractProps(sourceScript.generated.root.fileName, templateCodeRange) ?? [];
                     if (!toExtract) {
                         return codeAction;
                     }
@@ -122,7 +126,7 @@ function create(ts, getTsPluginClient) {
                                 // editing vue sfc
                                 {
                                     textDocument: {
-                                        uri: sourceFile.id,
+                                        uri: sourceScript.id,
                                         version: null,
                                     },
                                     edits: sfcEdits,

package/lib/plugins/vue-sfc.d.ts

@@ -1,7 +1,7 @@
-import type { ServicePlugin } from '@volar/language-service';
+import type { LanguageServicePlugin } from '@volar/language-service';
 import * as vue from '@vue/language-core';
 import type { TextDocument } from 'vscode-languageserver-textdocument';
 export interface Provide {
     'vue/vueFile': (document: TextDocument) => vue.VueGeneratedCode | undefined;
 }
-export declare function create(): ServicePlugin;
+export declare function create(): LanguageServicePlugin;

package/lib/plugins/vue-sfc.js

@@ -17,8 +17,26 @@ function create() {
                     sfcDataProvider ??= html.newHTMLDataProvider('vue', (0, data_1.loadLanguageBlocks)(context.env.locale ?? 'en'));
                     return [sfcDataProvider];
                 },
+                async getFormattingOptions(document, options, context) {
+                    return await worker(document, async (vueCode) => {
+                        const formatSettings = await context.env.getConfiguration?.('html.format') ?? {};
+                        const blockTypes = ['template', 'script', 'style'];
+                        for (const customBlock of vueCode.sfc.customBlocks) {
+                            blockTypes.push(customBlock.type);
+                        }
+                        return {
+                            ...options,
+                            ...formatSettings,
+                            wrapAttributes: 'auto',
+                            unformatted: '',
+                            contentUnformatted: blockTypes.join(','),
+                            endWithNewline: options.insertFinalNewline ? true
+                                : options.trimFinalNewlines ? false
+                                    : document.getText().endsWith('\n'),
+                        };
+                    }) ?? {};
+                },
             }).create(context);
-            const htmlLanguageService = htmlPlugin.provide['html/languageService']();
             return {
                 ...htmlPlugin,
                 provide: {
@@ -28,20 +46,19 @@ function create() {
                         });
                     },
                 },
-                async resolveEmbeddedCodeFormattingOptions(code, options) {
-                    const sourceFile = context.language.files.getByVirtualCode(code);
-                    if (sourceFile.generated?.code instanceof vue.VueGeneratedCode) {
-                        if (code.id === 'scriptFormat' || code.id === 'scriptSetupFormat') {
+                async resolveEmbeddedCodeFormattingOptions(sourceScript, virtualCode, options) {
+                    if (sourceScript.generated?.root instanceof vue.VueGeneratedCode) {
+                        if (virtualCode.id === 'scriptFormat' || virtualCode.id === 'scriptSetupFormat') {
                             if (await context.env.getConfiguration?.('vue.format.script.initialIndent') ?? false) {
                                 options.initialIndentLevel++;
                             }
                         }
-                        else if (code.id.startsWith('style_')) {
+                        else if (virtualCode.id.startsWith('style_')) {
                             if (await context.env.getConfiguration?.('vue.format.style.initialIndent') ?? false) {
                                 options.initialIndentLevel++;
                             }
                         }
-                        else if (code.id === 'template') {
+                        else if (virtualCode.id === 'template') {
                             if (await context.env.getConfiguration?.('vue.format.template.initialIndent') ?? true) {
                                 options.initialIndentLevel++;
                             }
@@ -134,29 +151,13 @@ function create() {
                         return result;
                     });
                 },
-                provideDocumentFormattingEdits(document, range, options) {
-                    return worker(document, async (vueCode) => {
-                        const formatSettings = await context.env.getConfiguration?.('html.format') ?? {};
-                        const blockTypes = ['template', 'script', 'style'];
-                        for (const customBlock of vueCode.sfc.customBlocks) {
-                            blockTypes.push(customBlock.type);
-                        }
-                        return htmlLanguageService.format(document, range, {
-                            ...options,
-                            ...formatSettings,
-                            unformatted: '',
-                            contentUnformatted: blockTypes.join(','),
-                            endWithNewline: options.insertFinalNewline ? true
-                                : options.trimFinalNewlines ? false
-                                    : document.getText().endsWith('\n'),
-                        });
-                    });
-                },
             };
             function worker(document, callback) {
-                const [vueFile] = context.documents.getVirtualCodeByUri(document.uri);
-                if (vueFile instanceof vue.VueGeneratedCode) {
-                    return callback(vueFile);
+                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 instanceof vue.VueGeneratedCode) {
+                    return callback(virtualCode);
                 }
             }
         },

package/lib/plugins/vue-template.d.ts

@@ -1,3 +1,3 @@
 import type { ServiceContext, ServiceEnvironment } from '@volar/language-service';
-import { ServicePlugin, VueCompilerOptions } from '../types';
-export declare function create(mode: 'html' | 'pug', ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): ServicePlugin;
+import { LanguageServicePlugin, VueCompilerOptions } from '../types';
+export declare function create(mode: 'html' | 'pug', ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions, getTsPluginClient?: (context: ServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): LanguageServicePlugin;

package/lib/plugins/vue-template.js

@@ -89,9 +89,10 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     }
                     let sync;
                     let currentVersion;
-                    const [_, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) {
-                        sync = (await provideHtmlData(sourceFile.id, sourceFile.generated.code)).sync;
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    if (sourceScript?.generated?.root instanceof language_core_1.VueGeneratedCode) {
+                        sync = (await provideHtmlData(sourceScript.id, sourceScript.generated.root)).sync;
                         currentVersion = await sync();
                     }
                     let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
@@ -101,8 +102,8 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     if (!htmlComplete) {
                         return;
                     }
-                    if (sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) {
-                        await afterHtmlCompletion(htmlComplete, context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot), sourceFile.generated.code);
+                    if (sourceScript?.generated?.root instanceof language_core_1.VueGeneratedCode) {
+                        await afterHtmlCompletion(htmlComplete, context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot), sourceScript.generated.root);
                     }
                     return htmlComplete;
                 },
@@ -115,12 +116,14 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                         return;
                     }
                     const result = [];
-                    const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
+                    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) {
                         return;
                     }
                     for (const map of context.documents.getMaps(virtualCode)) {
-                        const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
+                        const code = context.language.scripts.get(map.sourceDocument.uri)?.generated?.root;
                         const scanner = getScanner(baseServiceInstance, document);
                         if (code instanceof language_core_1.VueGeneratedCode && scanner) {
                             // visualize missing required props
@@ -213,7 +216,7 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     if (!isSupportedDocument(document)) {
                         return;
                     }
-                    if (context.documents.getVirtualCodeByUri(document.uri)[0]) {
+                    if (context.decodeEmbeddedDocumentUri(document.uri)) {
                         updateExtraCustomData([]);
                     }
                     return baseServiceInstance.provideHover?.(document, position, token);
@@ -223,12 +226,14 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                         return;
                     }
                     const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
-                    const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
+                    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) {
                         return;
                     }
                     for (const map of context.documents.getMaps(virtualCode)) {
-                        const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
+                        const code = context.language.scripts.get(map.sourceDocument.uri)?.generated?.root;
                         if (!(code instanceof language_core_1.VueGeneratedCode)) {
                             continue;
                         }
@@ -269,19 +274,24 @@ function create(mode, ts, getVueOptions, getTsPluginClient) {
                     if (!isSupportedDocument(document)) {
                         return;
                     }
-                    const [_virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!sourceFile
-                        || !(sourceFile.generated?.code instanceof language_core_1.VueGeneratedCode)
-                        || !sourceFile.generated.code.sfc.template) {
+                    const languageService = context.inject('typescript/languageService');
+                    if (!languageService) {
+                        return;
+                    }
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    if (!sourceScript
+                        || !(sourceScript.generated?.root instanceof language_core_1.VueGeneratedCode)
+                        || !sourceScript.generated.root.sfc.template) {
                         return [];
                     }
-                    const { template } = sourceFile.generated.code.sfc;
+                    const { template } = sourceScript.generated.root.sfc;
                     const spans = common_1.getComponentSpans.call({
-                        files: context.language.files,
-                        languageService: context.inject('typescript/languageService'),
+                        files: context.language.scripts,
+                        languageService,
                         typescript: ts,
                         vueOptions: getVueOptions(context.env),
-                    }, sourceFile.generated.code, template, {
+                    }, sourceScript.generated.root, template, {
                         start: document.offsetAt(range.start),
                         length: document.offsetAt(range.end) - document.offsetAt(range.start),
                     });

package/lib/plugins/vue-toggle-v-bind-codeaction.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-toggle-v-bind-codeaction.js

@@ -10,7 +10,9 @@ function create(ts) {
                 provideCodeActions(document, range, _context) {
                     const startOffset = document.offsetAt(range.start);
                     const endOffset = document.offsetAt(range.end);
-                    const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
+                    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 instanceof language_core_1.VueGeneratedCode)) {
                         return;
                     }
@@ -20,7 +22,7 @@ function create(ts) {
                     }
                     const templateStartOffset = template.startTagEnd;
                     const result = [];
-                    for (const node of (0, language_core_1.eachElementNode)(template.ast)) {
+                    for (const node of (0, language_core_1.forEachElementNode)(template.ast)) {
                         if (startOffset > templateStartOffset + node.loc.end.offset || endOffset < templateStartOffset + node.loc.start.offset) {
                             return;
                         }

package/lib/plugins/vue-twoslash-queries.d.ts

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

package/lib/plugins/vue-twoslash-queries.js

@@ -10,8 +10,10 @@ function create(ts, getTsPluginClient) {
             const tsPluginClient = getTsPluginClient?.(context);
             return {
                 async provideInlayHints(document, range) {
-                    const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (!(sourceFile?.generated?.code instanceof vue.VueGeneratedCode) || virtualCode?.id !== 'template') {
+                    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?.generated?.root instanceof vue.VueGeneratedCode) || virtualCode?.id !== 'template') {
                         return;
                     }
                     const hoverOffsets = [];
@@ -25,9 +27,9 @@ function create(ts, getTsPluginClient) {
                             })]);
                     }
                     for (const [pointerPosition, hoverOffset] of hoverOffsets) {
-                        for (const [_1, [_2, map]] of context.language.files.getMaps(virtualCode)) {
+                        for (const [_1, [_2, map]] of context.language.maps.forEach(virtualCode)) {
                             for (const [sourceOffset] of map.getSourceOffsets(hoverOffset)) {
-                                const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(sourceFile.generated.code.fileName, sourceOffset);
+                                const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(sourceScript.generated.root.fileName, sourceOffset);
                                 if (quickInfo) {
                                     inlayHints.push({
                                         position: { line: pointerPosition.line, character: pointerPosition.character + 2 },

package/lib/plugins/vue-visualize-hidden-callback-param.d.ts

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

package/lib/plugins/vue-visualize-hidden-callback-param.js

@@ -9,11 +9,13 @@ function create() {
                 async provideInlayHints(document, range) {
                     const settings = {};
                     const result = [];
-                    const [vitualFile] = context.documents.getVirtualCodeByUri(document.uri);
-                    if (vitualFile) {
+                    const decoded = context.decodeEmbeddedDocumentUri(document.uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const vitualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (vitualCode) {
                         const start = document.offsetAt(range.start);
                         const end = document.offsetAt(range.end);
-                        for (const mapping of vitualFile.mappings) {
+                        for (const mapping of vitualCode.mappings) {
                             const hint = mapping.data.__hint;
                             if (mapping.generatedOffsets[0] >= start
                                 && mapping.generatedOffsets[mapping.generatedOffsets.length - 1] + mapping.lengths[mapping.lengths.length - 1] <= end

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "2.0.7",
+	"version": "2.0.10",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -16,23 +16,23 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-core": "~2.1.3",
-		"@volar/language-service": "~2.1.3",
-		"@volar/typescript": "~2.1.3",
+		"@volar/language-core": "~2.2.0-alpha.5",
+		"@volar/language-service": "~2.2.0-alpha.5",
+		"@volar/typescript": "~2.2.0-alpha.5",
 		"@vue/compiler-dom": "^3.4.0",
-		"@vue/language-core": "2.0.7",
+		"@vue/language-core": "2.0.10",
 		"@vue/shared": "^3.4.0",
-		"@vue/typescript-plugin": "2.0.7",
+		"@vue/typescript-plugin": "2.0.10",
 		"computeds": "^0.0.1",
 		"path-browserify": "^1.0.1",
-		"volar-service-css": "0.0.34",
-		"volar-service-emmet": "0.0.34",
-		"volar-service-html": "0.0.34",
-		"volar-service-json": "0.0.34",
-		"volar-service-pug": "0.0.34",
-		"volar-service-pug-beautify": "0.0.34",
-		"volar-service-typescript": "0.0.34",
-		"volar-service-typescript-twoslash-queries": "0.0.34",
+		"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",
 		"vscode-languageserver-textdocument": "^1.0.11",
 		"vscode-uri": "^3.0.8"
@@ -40,8 +40,8 @@
 	"devDependencies": {
 		"@types/node": "latest",
 		"@types/path-browserify": "latest",
-		"@volar/kit": "~2.1.3",
+		"@volar/kit": "~2.2.0-alpha.5",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "4a37e8f3ebcf31ecfd2ea627f7611d5990ec5df6"
+	"gitHead": "a20a2ee950b63a949660b7e8faf0faed0e5bad33"
 }