@vue/language-service 2.2.0 → 2.2.2

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

@@ -8,7 +8,7 @@
           "name": "src",
           "description": {
             "kind": "markdown",
-            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
           },
           "references": "api/sfc-spec.html#src-imports"
         },
@@ -42,7 +42,7 @@
           "name": "src",
           "description": {
             "kind": "markdown",
-            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
           },
           "references": "api/sfc-spec.html#src-imports"
         },
@@ -103,7 +103,7 @@
           "name": "src",
           "description": {
             "kind": "markdown",
-            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
           },
           "references": "api/sfc-spec.html#src-imports"
         },
@@ -149,7 +149,7 @@
           "valueSet": "v",
           "description": {
             "kind": "markdown",
-            "value": "一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下，返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下，返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```"
+            "value": "一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下，返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下，返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```\n\n- **示例**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n</script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```"
           },
           "references": "api/sfc-css-features.html#css-modules"
         }
@@ -167,7 +167,7 @@
           "name": "src",
           "description": {
             "kind": "markdown",
-            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+            "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
           },
           "references": "api/sfc-spec.html#src-imports"
         }
@@ -193,7 +193,7 @@
       "name": "src",
       "description": {
         "kind": "markdown",
-        "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+        "value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
       },
       "references": "api/sfc-spec.html#src-imports"
     }

package/data/model-modifiers/zh-cn.json

@@ -13,7 +13,7 @@
       "name": "number",
       "description": {
         "kind": "markdown",
-        "value": "如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入：\n\n```html\n<input v-model.number=\"age\" />\n```\n\n如果该值无法被 `parseFloat()` 处理，那么将返回原始值。\n\n`number` 修饰符会在输入框有 `type=\"number\"` 时自动启用。"
+        "value": "如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入：\n\n```html\n<input v-model.number=\"age\" />\n```\n\n如果该值无法被 `parseFloat()` 处理，那么将返回原始值。特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。这种行为与 [DOM 属性 valueAsNumber](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement#valueasnumber) 有所不同。\n\n`number` 修饰符会在输入框有 `type=\"number\"` 时自动启用。"
       },
       "references": "guide/essentials/forms.html#number"
     },

package/data/template/it.json

@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "value": "\nProvides animated transition effects to a **single** element or component.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * Used to automatically generate transition CSS class names.\n     * e.g. `name: 'fade'` will auto expand to `.fade-enter`,\n     * `.fade-enter-active`, etc.\n     */\n    name?: string\n    /**\n     * Whether to apply CSS transition classes.\n     * Default: true\n     */\n    css?: boolean\n    /**\n     * Specifies the type of transition events to wait for to\n     * determine transition end timing.\n     * Default behavior is auto detecting the type that has\n     * longer duration.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * Specifies explicit durations of the transition.\n     * Default behavior is wait for the first `transitionend`\n     * or `animationend` event on the root transition element.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * Controls the timing sequence of leaving/entering transitions.\n     * Default behavior is simultaneous.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * Whether to apply transition on initial render.\n     * Default: false\n     */\n    appear?: boolean\n\n    /**\n     * Props for customizing transition classes.\n     * Use kebab-case in templates, e.g. enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **Events**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **Example**\n\n  Simple element:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  Forcing a transition by changing the `key` attribute:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  Dynamic component, with transition mode + animate on appear:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  Listening to transition events:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **See also** [`<Transition>` Guide](https://it.vuejs.org/guide/built-ins/transition.html)\n"
+        "value": "\nFornisce un'animazione di transizione a un **solo** elemento o componente.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * Usato per generare automaticamente classi CSS per le transizioni.\n     * Per esempio `name: 'fade'` verrà automaticamente espanso in `.fade-enter`,\n     * `.fade-enter-active`, etc.\n     */\n    name?: string\n    /**\n     * Definisce se applicare le classi di transizione CSS.\n     * Predefinito: true\n     */\n    css?: boolean\n    /**\n     * Specifica il tipo di evento di transizione da attendere\n     * per determinare la tempistica della fine della transizione.\n     * Il comportamento predefinito rileva automaticamente il tipo che ha\n     * la durata maggiore.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * Specifica esplicitamente la durata della transizione.\n     * Il comportamento predefinito è di attendere il primo evento\n     * `transitionend` o `animationend` nel root dell'elemento transition.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * Controlla la sequenza temporale delle transizioni di uscita/entrata.\n     * Il comportamento predefinito è simultaneo\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * Definisce se applicare la transizione al rendering iniziale.\n     * Predefinito: false\n     */\n    appear?: boolean\n\n    /**\n     * Props per personalizzare le classi di transizione.\n     * Usa il kebab-case nei template, per esempio enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **Eventi**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (solo `v-show`)\n  - `@appear-cancelled`\n\n- **Esempio**\n\n  Elemento semplice:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">contenuto attivato</div>\n  </Transition>\n  ```\n\n  Forzare una transizione cambiando l'attributo `key`:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  Componente dinamico, con modalità di transizione + animazione in entrata:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  Ascolto eventi transizione:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **Vedi anche** [Guida `<Transition>`](https://it.vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": "api/built-in-components.html#transition"
@@ -14,7 +14,7 @@
       "name": "TransitionGroup",
       "description": {
         "kind": "markdown",
-        "value": "\nProvides transition effects for **multiple** elements or components in a list.\n\n- **Props**\n\n  `<TransitionGroup>` accepts the same props as `<Transition>` except `mode`, plus two additional props:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * If not defined, renders as a fragment.\n     */\n    tag?: string\n    /**\n     * For customizing the CSS class applied during move transitions.\n     * Use kebab-case in templates, e.g. move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **Events**\n\n  `<TransitionGroup>` emits the same events as `<Transition>`.\n\n- **Details**\n\n  By default, `<TransitionGroup>` doesn't render a wrapper DOM element, but one can be defined via the `tag` prop.\n\n  Note that every child in a `<transition-group>` must be [**uniquely keyed**](https://it.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) for the animations to work properly.\n\n  `<TransitionGroup>` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` prop). If the CSS `transform` property is \"transition-able\" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Example**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **See also** [Guide - TransitionGroup](https://it.vuejs.org/guide/built-ins/transition-group.html)\n"
+        "value": "\nFornisce effetti di transizione per elementi **multipli** o componenti in un elenco.\n\n- **Props**\n\n  `<TransitionGroup>` accetta le stesse props di `<Transition>` tranne `mode`, più due prop aggiuntive:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * Se non definito, renderizza come un fragment\n     */\n    tag?: string\n    /**\n     * Per personalizzare la classe CSS applicata durante la transizione.\n     * Usa il kebab-case nel template, per esempio move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **Eventi**\n\n  `<TransitionGroup>` emette gli stessi eventi di `<Transition>`.\n\n- **Dettagli**\n\n  Di default, `<TransitionGroup>` non renderizza un elemento DOM wrapper, ma uno può essere definito attraverso la prop `tag`.\n\n  Nota che ogni figlio in `<transition-group>` deve avere una [**chiave univoca**](https://it.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) per l'animazione per funzionare correttamente.\n\n  `<TransitionGroup>` supporta le transizioni tramite trasformazione CSS. Quando la posizione di un figlio nello schermo cambia dopo un aggiornamento, gli verrà applicata una classe CSS di movimento (generata automaticamente dall'attributo `name` o configurato con la prop `move-class`). Se la proprietà CSS `transform` è \"transition-able\" quando la classe di movimento è applicata, l'elemento verrà animato fluidamente alla sua destinazione usando la [tecnica FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Esempio**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **Vedi anche** [Guida - TransitionGroup](https://it.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
       "attributes": [],
       "references": "api/built-in-components.html#transitiongroup"
@@ -23,7 +23,7 @@
       "name": "KeepAlive",
       "description": {
         "kind": "markdown",
-        "value": "\nCaches dynamically toggled components wrapped inside.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * If specified, only components with names matched by\n     * `include` will be cached.\n     */\n    include?: MatchPattern\n    /**\n     * Any component with a name matched by `exclude` will\n     * not be cached.\n     */\n    exclude?: MatchPattern\n    /**\n     * The maximum number of component instances to cache.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **Details**\n\n  When wrapped around a dynamic component, `<KeepAlive>` caches the inactive component instances without destroying them.\n\n  There can only be one active component instance as the direct child of `<KeepAlive>` at any time.\n\n  When a component is toggled inside `<KeepAlive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly, providing an alternative to `mounted` and `unmounted`, which are not called. This applies to the direct child of `<KeepAlive>` as well as to all of its descendants.\n\n- **Example**\n\n  Utilizzo Base:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  When used with `v-if` / `v-else` branches, there must be only one component rendered at a time:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  Used together with `<Transition>`:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  Using `include` / `exclude`:\n\n  ```html\n  <!-- comma-delimited string -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- regex (use `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- Array (use `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Usage with `max`:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **See also** [Guide - KeepAlive](https://it.vuejs.org/guide/built-ins/keep-alive.html)\n"
+        "value": "\nMemorizza nella cache i componenti attivati/disattivati ​​dinamicamente racchiusi all'interno.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * Se specificata, solo i componenti con gli stessi nomi corrispondenti a \n     * `include` saranno memorizzati nella cache.\n     */\n    include?: MatchPattern\n    /**\n     * Qualsiasi componente con un nome corrispondente a `exclude`\n     * non verrà memorizzato nella cache.\n     */\n    exclude?: MatchPattern\n    /**\n     * Il numero massimo di istanze del componente da memorizzare nella cache.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **Dettagli**\n\n  Quando racchiuso in un componente dinamico, `<KeepAlive>` memorizza nella cache le istanze dei componenti inattivi senza distruggerle.\n\n  Ci può essere solo un'istanza di un componente come figlio diretto di `<KeepAlive>` in qualsiasi momento.\n\n  Quando un componente è azionato dentro `<KeepAlive>`, i suoi lifecycle hooks `activated` e `deactivated` verranno richiamati di conseguenza, offrendo un alternativa a `mounted` e `unmounted`, che non sono chiamati. Questo si applica ai figli diretti di `<KeepAlive>` e anche a tutti i suoi discendenti.\n\n- **Esempio**\n\n  Utilizzo Base:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n  Quando usato con `v-if` / `v-else`, ci deve essere solo un componente renderizzato alla volta:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n  Usato insieme a `<Transition>`:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n  Usando `include` / `exclude`: \n\n  ```html\n  <!-- stringa con delimitatore virgola -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- regex (usando `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- Array (usando `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n  Utilizzo con `max`:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **Vedi anche** [Guida - KeepAlive](https://it.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
       "attributes": [],
       "references": "api/built-in-components.html#keepalive"
@@ -32,7 +32,7 @@
       "name": "Teleport",
       "description": {
         "kind": "markdown",
-        "value": "\nRenders its slot content to another part of the DOM.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Required. Specify target container.\n     * Can either be a selector or an actual element.\n     */\n    to: string | HTMLElement\n    /**\n     * When `true`, the content will remain in its original\n     * location instead of moved into the target container.\n     * Can be changed dynamically.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Example**\n\n  Specifying target container:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  Conditionally disabling:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **See also** [Guide - Teleport](https://it.vuejs.org/guide/built-ins/teleport.html)\n"
+        "value": "\nRenderizza il contenuto dello slot in un' altra parte del DOM.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Obbligatoria. Specifica il container di destinazione.\n     * Può essere sia un selettore o un elemento reale.\n     */\n    to: string | HTMLElement\n    /**\n     * Quando `true`, il contenuto resterà nella posizione\n     * originale invece di essere spostato nel container di destinazione.\n     * Può essere cambiato dinamicamente.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Esempio**\n\n  Specificando un container di destinazione\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n  Disabilitazione condizionale:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **Vedi anche** [Guida - Teleport](https://it.vuejs.org/guide/built-ins/teleport.html)\n"
       },
       "attributes": [],
       "references": "api/built-in-components.html#teleport"
@@ -41,7 +41,7 @@
       "name": "Suspense",
       "description": {
         "kind": "markdown",
-        "value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **Events**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Details**\n\n  `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n  If it encounters async dependencies ([Async Components](https://it.vuejs.org/guide/components/async.html) and components with [`async setup()`](https://it.vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n- **See also** [Guide - Suspense](https://it.vuejs.org/guide/built-ins/suspense.html)\n"
+        "value": "\nUsato per orchestrare dipendenze asincrone annidate in un albero di componenti.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **Eventi**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Dettagli**\n\n  `<Suspense>` accetta due slots: lo slot di `#default` e lo slot `#fallback`. Mostrerà il contenuto dello slot di fallback mentre renderizza lo slot default in memoria.\n\n  Se incontra dipendenze asincrone ([Componente asincrono](https://it.vuejs.org/guide/components/async.html) e componenti con [`async setup()`](https://it.vuejs.org/guide/built-ins/suspense.html#async-setup)) mentre renderizza lo slot di default, aspetterà fino a quando tutti sono risolti prima di visualizzare lo slot di default.\n\n- **Vedi anche** [Guida - Suspense](https://it.vuejs.org/guide/built-ins/suspense.html)\n"
       },
       "attributes": [],
       "references": "api/built-in-components.html#suspense"

package/index.js

@@ -44,7 +44,11 @@ const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
 const language_core_1 = require("@vue/language-core");
 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 getComponentDirectives_1 = require("@vue/typescript-plugin/lib/requests/getComponentDirectives");
+const getComponentEvents_1 = require("@vue/typescript-plugin/lib/requests/getComponentEvents");
+const getComponentNames_1 = require("@vue/typescript-plugin/lib/requests/getComponentNames");
+const getComponentProps_1 = require("@vue/typescript-plugin/lib/requests/getComponentProps");
+const getElementAttrs_1 = require("@vue/typescript-plugin/lib/requests/getElementAttrs");
 const getImportPathForFile_1 = require("@vue/typescript-plugin/lib/requests/getImportPathForFile");
 const getPropertiesAtLocation_1 = require("@vue/typescript-plugin/lib/requests/getPropertiesAtLocation");
 const vscode_uri_1 = require("vscode-uri");
@@ -106,19 +110,19 @@ function getFullLanguageServicePlugins(ts, { disableAutoImportCache } = {}) {
                 return await getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
             },
             async getComponentEvents(...args) {
-                return await componentInfos_1.getComponentEvents.apply(requestContext, args);
+                return await getComponentEvents_1.getComponentEvents.apply(requestContext, args);
+            },
+            async getComponentDirectives(...args) {
+                return await getComponentDirectives_1.getComponentDirectives.apply(requestContext, args);
             },
             async getComponentNames(...args) {
-                return await componentInfos_1.getComponentNames.apply(requestContext, args);
+                return await getComponentNames_1.getComponentNames.apply(requestContext, args);
             },
             async getComponentProps(...args) {
-                return await componentInfos_1.getComponentProps.apply(requestContext, args);
+                return await getComponentProps_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);
+                return await getElementAttrs_1.getElementAttrs.apply(requestContext, args);
             },
             async getQuickInfoAtPosition(fileName, position) {
                 const languageService = context.getLanguageService();

package/lib/ideFeatures/nameCasing.js

@@ -197,6 +197,6 @@ function getTemplateTagsAndAttrs(sourceFile) {
         });
         map.set(sourceFile, getter);
     }
-    return map.get(sourceFile).get() ?? new Map();
+    return map.get(sourceFile)() ?? new Map();
 }
 //# sourceMappingURL=nameCasing.js.map

package/lib/plugins/utils.d.ts

@@ -0,0 +1,3 @@
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export declare function sleep(ms: number): Promise<unknown>;
+export declare function isTsDocument(document: TextDocument): boolean;

package/lib/plugins/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sleep = sleep;
+exports.isTsDocument = isTsDocument;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+function isTsDocument(document) {
+    return document.languageId === 'javascript' ||
+        document.languageId === 'typescript' ||
+        document.languageId === 'javascriptreact' ||
+        document.languageId === 'typescriptreact';
+}
+//# sourceMappingURL=utils.js.map

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

@@ -1,11 +1,2 @@
 import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-import type * as ts from 'typescript';
-import type { TextDocument } from 'vscode-languageserver-textdocument';
 export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => typeof import('@vue/typescript-plugin/lib/client') | undefined): LanguageServicePlugin;
-export declare function isTsDocument(document: TextDocument): boolean;
-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

@@ -1,20 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
-exports.isTsDocument = isTsDocument;
-exports.isCharacterTyping = isCharacterTyping;
-exports.isBlacklistNode = isBlacklistNode;
 const language_core_1 = require("@vue/language-core");
 const vscode_uri_1 = require("vscode-uri");
-const asts = new WeakMap();
-function getAst(ts, fileName, snapshot, scriptKind) {
-    let ast = asts.get(snapshot);
-    if (!ast) {
-        ast = ts.createSourceFile(fileName, snapshot.getText(0, snapshot.getLength()), ts.ScriptTarget.Latest, undefined, scriptKind);
-        asts.set(snapshot, ast);
-    }
-    return ast;
-}
+const utils_1 = require("./utils");
 function create(ts, getTsPluginClient) {
     return {
         name: 'vue-autoinsert-dotvalue',
@@ -33,7 +22,7 @@ function create(ts, getTsPluginClient) {
                     if (document.offsetAt(selection) !== change.rangeOffset + change.text.length) {
                         return;
                     }
-                    if (!isTsDocument(document)) {
+                    if (!(0, utils_1.isTsDocument)(document)) {
                         return;
                     }
                     if (!isCharacterTyping(document, change)) {
@@ -41,7 +30,7 @@ function create(ts, getTsPluginClient) {
                     }
                     const req = ++currentReq;
                     // Wait for tsserver to sync
-                    await sleep(250);
+                    await (0, utils_1.sleep)(250);
                     if (req !== currentReq) {
                         return;
                     }
@@ -53,41 +42,44 @@ function create(ts, getTsPluginClient) {
                     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) {
+                    if (!sourceScript?.generated || !virtualCode) {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const blocks = [
+                        root._sfc.script,
+                        root._sfc.scriptSetup,
+                    ].filter(block => !!block);
+                    if (!blocks.length) {
                         return;
                     }
-                    let ast;
                     let sourceCodeOffset = document.offsetAt(selection);
-                    const fileName = context.project.typescript?.uriConverter.asFileName(sourceScript.id)
-                        ?? sourceScript.id.fsPath.replace(/\\/g, '/');
-                    if (sourceScript.generated) {
-                        const serviceScript = sourceScript.generated.languagePlugin.typescript?.getServiceScript(sourceScript.generated.root);
-                        if (!serviceScript || serviceScript?.code !== virtualCode) {
-                            return;
-                        }
-                        ast = getAst(ts, fileName, virtualCode.snapshot, serviceScript.scriptKind);
-                        let mapped = false;
-                        for (const [_sourceScript, map] of context.language.maps.forEach(virtualCode)) {
-                            for (const [sourceOffset] of map.toSourceLocation(document.offsetAt(selection))) {
-                                sourceCodeOffset = sourceOffset;
-                                mapped = true;
-                                break;
-                            }
-                            if (mapped) {
-                                break;
-                            }
+                    let mapped = false;
+                    for (const [, map] of context.language.maps.forEach(virtualCode)) {
+                        for (const [sourceOffset] of map.toSourceLocation(sourceCodeOffset)) {
+                            sourceCodeOffset = sourceOffset;
+                            mapped = true;
+                            break;
                         }
-                        if (!mapped) {
-                            return;
+                        if (mapped) {
+                            break;
                         }
                     }
-                    else {
-                        ast = getAst(ts, fileName, sourceScript.snapshot);
-                    }
-                    if (isBlacklistNode(ts, ast, document.offsetAt(selection), false)) {
+                    if (!mapped) {
                         return;
                     }
-                    const props = await tsPluginClient?.getPropertiesAtLocation(fileName, sourceCodeOffset) ?? [];
+                    for (const { ast, startTagEnd, endTagStart } of blocks) {
+                        if (sourceCodeOffset < startTagEnd || sourceCodeOffset > endTagStart) {
+                            continue;
+                        }
+                        if (isBlacklistNode(ts, ast, sourceCodeOffset - startTagEnd, false)) {
+                            return;
+                        }
+                    }
+                    const props = await tsPluginClient?.getPropertiesAtLocation(root.fileName, sourceCodeOffset) ?? [];
                     if (props.some(prop => prop === 'value')) {
                         return '${1:.value}';
                     }
@@ -96,15 +88,6 @@ function create(ts, getTsPluginClient) {
         },
     };
 }
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-function isTsDocument(document) {
-    return document.languageId === 'javascript' ||
-        document.languageId === 'typescript' ||
-        document.languageId === 'javascriptreact' ||
-        document.languageId === 'typescriptreact';
-}
 const charReg = /\w/;
 function isCharacterTyping(document, change) {
     const lastCharacter = change.text[change.text.length - 1];

package/lib/plugins/vue-complete-define-assignment.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
 const vscode_uri_1 = require("vscode-uri");
-const vue_autoinsert_dotvalue_1 = require("./vue-autoinsert-dotvalue");
+const utils_1 = require("./utils");
 function create() {
     return {
         name: 'vue-complete-define-assignment',
@@ -14,7 +14,7 @@ function create() {
             return {
                 isAdditionalCompletion: true,
                 async provideCompletionItems(document) {
-                    if (!(0, vue_autoinsert_dotvalue_1.isTsDocument)(document)) {
+                    if (!(0, utils_1.isTsDocument)(document)) {
                         return;
                     }
                     const enabled = await context.env.getConfiguration?.('vue.complete.defineAssignment') ?? true;
@@ -34,7 +34,7 @@ function create() {
                     }
                     const codegen = language_core_1.tsCodegen.get(root._sfc);
                     const scriptSetup = root._sfc.scriptSetup;
-                    const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+                    const scriptSetupRanges = codegen?.getScriptSetupRanges();
                     if (!scriptSetup || !scriptSetupRanges) {
                         return;
                     }

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

@@ -91,7 +91,7 @@ function create(ts, getTsPluginClient) {
                             + (lastImportNode ? '' : '\n'),
                     });
                     if (sfc.script) {
-                        const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc.script.ast, newName);
+                        const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc, sfc.script.ast, newName);
                         if (edit) {
                             additionalEdit.changes[embeddedDocumentUriStr].push({
                                 range: {

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

@@ -25,7 +25,7 @@ function create() {
                     }
                     const result = [];
                     const codegen = language_core_1.tsCodegen.get(root._sfc);
-                    const scopedClasses = codegen?.generatedTemplate.get()?.scopedClasses ?? [];
+                    const scopedClasses = codegen?.getGeneratedTemplate()?.scopedClasses ?? [];
                     const styleClasses = new Map();
                     const option = root.vueCompilerOptions.experimentalResolveStyleCssClasses;
                     for (let i = 0; i < root._sfc.styles.length; i++) {

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

@@ -1,8 +1,9 @@
 import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
+import { Sfc } from '@vue/language-core';
 import type * as ts from 'typescript';
 export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => 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): {
+export declare function createAddComponentToOptionEdit(ts: typeof import('typescript'), sfc: Sfc, ast: ts.SourceFile, componentName: string): {
     range: import("@vue/language-core").TextRange;
     newText: string;
 } | undefined;

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

@@ -11,13 +11,17 @@ function create(ts, getTsPluginClient) {
         name: 'vue-extract-file',
         capabilities: {
             codeActionProvider: {
+                codeActionKinds: ['refactor'],
                 resolveProvider: true,
             },
         },
         create(context) {
             const tsPluginClient = getTsPluginClient?.(context);
             return {
-                provideCodeActions(document, range, _context) {
+                provideCodeActions(document, range, ctx) {
+                    if (ctx.only && !ctx.only.includes('refactor')) {
+                        return;
+                    }
                     const startOffset = document.offsetAt(range.start);
                     const endOffset = document.offsetAt(range.end);
                     if (startOffset === endOffset) {
@@ -118,7 +122,7 @@ function create(ts, getTsPluginClient) {
                         },
                     ];
                     if (sfc.script) {
-                        const edit = createAddComponentToOptionEdit(ts, sfc.script.ast, newName);
+                        const edit = createAddComponentToOptionEdit(ts, sfc, sfc.script.ast, newName);
                         if (edit) {
                             sfcEdits.push({
                                 range: {
@@ -247,11 +251,12 @@ function getLastImportNode(ts, sourceFile) {
     }
     return lastImportNode;
 }
-function createAddComponentToOptionEdit(ts, ast, componentName) {
-    const exportDefault = language_core_1.scriptRanges.parseScriptRanges(ts, ast, false, true).exportDefault;
-    if (!exportDefault) {
+function createAddComponentToOptionEdit(ts, sfc, ast, componentName) {
+    const scriptRanges = language_core_1.tsCodegen.get(sfc)?.getScriptRanges();
+    if (!scriptRanges?.exportDefault) {
         return;
     }
+    const { exportDefault } = scriptRanges;
     // https://github.com/microsoft/TypeScript/issues/36174
     const printer = ts.createPrinter();
     if (exportDefault.componentsOption && exportDefault.componentsOptionNode) {

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

@@ -4,4 +4,4 @@ export declare function create(ts: typeof import('typescript')): LanguageService
 /**
  * Refactored from https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/definePropsDestructure.ts
  */
-export declare function findDestructuredProps(ts: typeof import('typescript'), ast: ts.SourceFile, props: Set<string>): [ts.Identifier, boolean][];
+export declare function findDestructuredProps(ts: typeof import('typescript'), ast: ts.SourceFile, props: MapIterator<string>): [ts.Identifier, boolean][];

package/lib/plugins/vue-inlayhints.js

@@ -28,15 +28,15 @@ function create(ts) {
                     const result = [];
                     const codegen = language_core_1.tsCodegen.get(virtualCode._sfc);
                     const inlayHints = [
-                        ...codegen?.generatedTemplate.get()?.inlayHints ?? [],
-                        ...codegen?.generatedScript.get()?.inlayHints ?? [],
+                        ...codegen?.getGeneratedTemplate()?.inlayHints ?? [],
+                        ...codegen?.getGeneratedScript()?.inlayHints ?? [],
                     ];
-                    const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+                    const scriptSetupRanges = codegen?.getScriptSetupRanges();
                     if (scriptSetupRanges?.defineProps?.destructured && virtualCode._sfc.scriptSetup?.ast) {
                         const setting = 'vue.inlayHints.destructuredProps';
                         const enabled = await getSettingEnabled(setting);
                         if (enabled) {
-                            for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode._sfc.scriptSetup.ast, scriptSetupRanges.defineProps.destructured)) {
+                            for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode._sfc.scriptSetup.ast, scriptSetupRanges.defineProps.destructured.keys())) {
                                 const name = prop.text;
                                 const end = prop.getEnd();
                                 const pos = isShorthand ? end : end - name.length;
@@ -148,7 +148,7 @@ function findDestructuredProps(ts, ast, props) {
             && initializer
             && ts.isCallExpression(initializer)
             && initializer.expression.getText(ast) === 'defineProps';
-        for (const [id] of (0, index_1.collectIdentifiers)(ts, name)) {
+        for (const { id } of (0, index_1.collectIdentifiers)(ts, name)) {
             if (isDefineProps) {
                 excludedIds.add(id);
             }
@@ -163,7 +163,7 @@ function findDestructuredProps(ts, ast, props) {
             registerLocalBinding(name);
         }
         for (const p of parameters) {
-            for (const [id] of (0, index_1.collectIdentifiers)(ts, p)) {
+            for (const { id } of (0, index_1.collectIdentifiers)(ts, p)) {
                 registerLocalBinding(id);
             }
         }

package/lib/plugins/vue-template.js

@@ -30,7 +30,7 @@ function create(mode, ts, getTsPluginClient) {
     let customData = [];
     let extraCustomData = [];
     let lastCompletionComponentNames = new Set();
-    const tsDocumentations = new Map();
+    const cachedPropInfos = new Map();
     const onDidChangeCustomDataListeners = new Set();
     const onDidChangeCustomData = (listener) => {
         onDidChangeCustomDataListeners.add(listener);
@@ -131,7 +131,6 @@ function create(mode, ts, getTsPluginClient) {
                     if (!context.project.vue) {
                         return;
                     }
-                    const vueCompilerOptions = context.project.vue.compilerOptions;
                     let sync;
                     let currentVersion;
                     const uri = vscode_uri_1.URI.parse(document.uri);
@@ -141,7 +140,7 @@ function create(mode, ts, getTsPluginClient) {
                     if (root instanceof language_core_1.VueVirtualCode) {
                         // #4298: Precompute HTMLDocument before provideHtmlData to avoid parseHTMLDocument requesting component names from tsserver
                         baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
-                        sync = (await provideHtmlData(vueCompilerOptions, sourceScript.id, root)).sync;
+                        sync = (await provideHtmlData(sourceScript.id, root)).sync;
                         currentVersion = await sync();
                     }
                     let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
@@ -378,7 +377,7 @@ function create(mode, ts, getTsPluginClient) {
                     });
                 },
             };
-            async function provideHtmlData(vueCompilerOptions, sourceDocumentUri, vueCode) {
+            async function provideHtmlData(sourceDocumentUri, vueCode) {
                 await (initializing ??= initialize());
                 const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri);
                 if (builtInData.tags) {
@@ -401,8 +400,7 @@ function create(mode, ts, getTsPluginClient) {
                 const tagInfos = new Map();
                 let version = 0;
                 let components;
-                let templateContextProps;
-                tsDocumentations.clear();
+                cachedPropInfos.clear();
                 updateExtraCustomData([
                     html.newHTMLDataProvider('vue-template-built-in', builtInData),
                     {
@@ -422,9 +420,7 @@ function create(mode, ts, getTsPluginClient) {
                                 })());
                                 return [];
                             }
-                            const scriptSetupRanges = vueCode._sfc.scriptSetup
-                                ? (0, language_core_1.parseScriptSetupRanges)(ts, vueCode._sfc.scriptSetup.ast, vueCompilerOptions)
-                                : undefined;
+                            const scriptSetupRanges = language_core_1.tsCodegen.get(vueCode._sfc)?.getScriptSetupRanges();
                             const names = new Set();
                             const tags = [];
                             for (const tag of components) {
@@ -457,44 +453,24 @@ function create(mode, ts, getTsPluginClient) {
                             if (!tagInfo) {
                                 promises.push((async () => {
                                     const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
-                                    const propsInfo = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
+                                    const propInfos = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
                                     const events = await tsPluginClient?.getComponentEvents(vueCode.fileName, tag) ?? [];
+                                    const directives = await tsPluginClient?.getComponentDirectives(vueCode.fileName) ?? [];
                                     tagInfos.set(tag, {
                                         attrs,
-                                        propsInfo: propsInfo.filter(prop => !prop.name.startsWith('ref_')),
+                                        propInfos: propInfos.filter(prop => !prop.name.startsWith('ref_')),
                                         events,
+                                        directives,
                                     });
                                     version++;
                                 })());
                                 return [];
                             }
-                            const { attrs, propsInfo, events } = tagInfo;
-                            const props = propsInfo.map(prop => (0, language_core_1.hyphenateTag)(prop.name).startsWith('on-vnode-')
+                            const { attrs, propInfos, events, directives } = tagInfo;
+                            const props = propInfos.map(prop => (0, language_core_1.hyphenateTag)(prop.name).startsWith('on-vnode-')
                                 ? 'onVue:' + prop.name.slice('onVnode'.length)
                                 : prop.name);
                             const attributes = [];
-                            const _tsCodegen = language_core_1.tsCodegen.get(vueCode._sfc);
-                            if (_tsCodegen) {
-                                if (!templateContextProps) {
-                                    promises.push((async () => {
-                                        templateContextProps = await tsPluginClient?.getTemplateContextProps(vueCode.fileName) ?? [];
-                                        version++;
-                                    })());
-                                    return [];
-                                }
-                                let ctxVars = [
-                                    ..._tsCodegen.scriptRanges.get()?.bindings.map(({ range }) => vueCode._sfc.script.content.slice(range.start, range.end)) ?? [],
-                                    ..._tsCodegen.scriptSetupRanges.get()?.bindings.map(({ range }) => vueCode._sfc.scriptSetup.content.slice(range.start, range.end)) ?? [],
-                                    ...templateContextProps,
-                                ];
-                                ctxVars = [...new Set(ctxVars)];
-                                const dirs = ctxVars.map(language_core_1.hyphenateAttr).filter(v => v.startsWith('v-'));
-                                for (const dir of dirs) {
-                                    attributes.push({
-                                        name: dir,
-                                    });
-                                }
-                            }
                             const propsSet = new Set(props);
                             for (const prop of [...props, ...attrs]) {
                                 const isGlobal = !propsSet.has(prop);
@@ -515,13 +491,13 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                                 else {
                                     const propName = name;
-                                    const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName);
-                                    const propDescription = propsInfo.find(prop => {
+                                    const propInfo = propInfos.find(prop => {
                                         const name = casing.attr === types_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
                                         return name === propName;
-                                    })?.commentMarkdown;
-                                    if (propDescription) {
-                                        tsDocumentations.set(propName, propDescription);
+                                    });
+                                    const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName, propInfo?.deprecated);
+                                    if (propInfo) {
+                                        cachedPropInfos.set(propName, propInfo);
                                     }
                                     attributes.push({
                                         name: propName,
@@ -546,6 +522,12 @@ function create(mode, ts, getTsPluginClient) {
                                     description: propKey,
                                 });
                             }
+                            for (const directive of directives) {
+                                const name = (0, language_core_1.hyphenateAttr)(directive);
+                                attributes.push({
+                                    name
+                                });
+                            }
                             const models = [];
                             for (const prop of [...props, ...attrs]) {
                                 if (prop.startsWith('onUpdate:')) {
@@ -652,7 +634,7 @@ function create(mode, ts, getTsPluginClient) {
                 const htmlDocumentations = new Map();
                 for (const item of completionList.items) {
                     const documentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    if (documentation && !isItemKey(documentation) && item.documentation) {
+                    if (documentation && !isItemKey(documentation)) {
                         htmlDocumentations.set(item.label, documentation);
                     }
                 }
@@ -675,10 +657,12 @@ function create(mode, ts, getTsPluginClient) {
                     }
                     const itemKeyStr = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
                     let parsedItemKey = itemKeyStr ? parseItemKey(itemKeyStr) : undefined;
+                    let propInfo;
                     if (parsedItemKey) {
                         const documentations = [];
-                        if (tsDocumentations.has(parsedItemKey.prop)) {
-                            documentations.push(tsDocumentations.get(parsedItemKey.prop));
+                        propInfo = cachedPropInfos.get(parsedItemKey.prop);
+                        if (propInfo?.commentMarkdown) {
+                            documentations.push(propInfo.commentMarkdown);
                         }
                         let { isEvent, propName } = getPropName(parsedItemKey);
                         if (isEvent) {
@@ -712,20 +696,25 @@ function create(mode, ts, getTsPluginClient) {
                                 type: 'componentProp',
                                 tag: '^',
                                 prop: propName,
+                                deprecated: false,
                                 leadingSlash: false
                             };
                         }
-                        if (tsDocumentations.has(propName)) {
+                        propInfo = cachedPropInfos.get(propName);
+                        if (propInfo?.commentMarkdown) {
                             const originalDocumentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
                             item.documentation = {
                                 kind: 'markdown',
                                 value: [
-                                    tsDocumentations.get(propName),
+                                    propInfo.commentMarkdown,
                                     originalDocumentation,
                                 ].filter(str => !!str).join('\n\n'),
                             };
                         }
                     }
+                    if (propInfo?.deprecated) {
+                        item.tags = [1];
+                    }
                     const tokens = [];
                     if (item.kind === 10
                         && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
@@ -850,8 +839,8 @@ function parseLabel(label) {
         leadingSlash
     };
 }
-function generateItemKey(type, tag, prop) {
-    return '__VLS_data=' + type + ',' + tag + ',' + prop;
+function generateItemKey(type, tag, prop, deprecated) {
+    return `__VLS_data=${type},${tag},${prop},${Number(deprecated)}`;
 }
 function isItemKey(key) {
     return key.startsWith('__VLS_data=');
@@ -864,6 +853,7 @@ function parseItemKey(key) {
             type: strs[0],
             tag: strs[1],
             prop: strs[2],
+            deprecated: strs[3] === '1',
             leadingSlash
         };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "2.2.0",
+	"version": "2.2.2",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -21,10 +21,10 @@
 		"@volar/language-service": "~2.4.11",
 		"@volar/typescript": "~2.4.11",
 		"@vue/compiler-dom": "^3.5.0",
-		"@vue/language-core": "2.2.0",
+		"@vue/language-core": "2.2.2",
 		"@vue/shared": "^3.5.0",
-		"@vue/typescript-plugin": "2.2.0",
-		"alien-signals": "^0.4.9",
+		"@vue/typescript-plugin": "2.2.2",
+		"alien-signals": "^1.0.3",
 		"path-browserify": "^1.0.1",
 		"volar-service-css": "0.0.62",
 		"volar-service-emmet": "0.0.62",
@@ -39,10 +39,10 @@
 		"vscode-uri": "^3.0.8"
 	},
 	"devDependencies": {
-		"@types/node": "latest",
-		"@types/path-browserify": "latest",
+		"@types/node": "^22.10.4",
+		"@types/path-browserify": "^1.0.1",
 		"@volar/kit": "~2.4.11",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "5babca774658d4b9afbe877ac7c8cafdaecf2c3e"
+	"gitHead": "30757908b67f40f779c36795665163634fb81868"
 }