@vue/language-service 2.2.0 → 2.2.4

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

@@ -17,7 +17,7 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
     if (!(root instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const { template } = root._sfc;
+    const { template } = root.sfc;
     if (!template) {
         return;
     }
@@ -52,7 +52,7 @@ async function convertAttrName(context, uri, casing, tsPluginClient) {
     if (!(root instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const { template } = root._sfc;
+    const { template } = root.sfc;
     if (!template) {
         return;
     }
@@ -132,8 +132,8 @@ async function detect(context, uri) {
     }
     function getTagNameCase(file) {
         const result = new Set();
-        if (file._sfc.template?.ast) {
-            for (const element of vue.forEachElementNode(file._sfc.template.ast)) {
+        if (file.sfc.template?.ast) {
+            for (const element of vue.forEachElementNode(file.sfc.template.ast)) {
                 if (element.tagType === 1) {
                     if (element.tag !== (0, language_core_1.hyphenateTag)(element.tag)) {
                         // TagName
@@ -157,7 +157,7 @@ function getTemplateTagsAndAttrs(sourceFile) {
             if (!(sourceFile instanceof vue.VueVirtualCode)) {
                 return;
             }
-            const ast = sourceFile._sfc.template?.ast;
+            const ast = sourceFile.sfc.template?.ast;
             const tags = new Map();
             if (ast) {
                 for (const node of vue.forEachElementNode(ast)) {
@@ -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/css.js

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
+const language_core_1 = require("@vue/language-core");
 const volar_service_css_1 = require("volar-service-css");
+const vscode_uri_1 = require("vscode-uri");
 function create() {
     const base = (0, volar_service_css_1.create)({ scssDocumentSelector: ['scss', 'postcss'] });
     return {
         ...base,
         create(context) {
             const baseInstance = base.create(context);
+            const { 'css/languageService': getCssLs, 'css/stylesheet': getStylesheet, } = baseInstance.provide;
             return {
                 ...baseInstance,
                 async provideDiagnostics(document, token) {
@@ -19,7 +22,63 @@ function create() {
                     }
                     return diagnostics;
                 },
+                /**
+                 * If the editing position is within the virtual code and navigation is enabled,
+                 * skip the CSS renaming feature.
+                 */
+                provideRenameRange(document, position) {
+                    do {
+                        const uri = vscode_uri_1.URI.parse(document.uri);
+                        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 || !virtualCode?.id.startsWith('style_')) {
+                            break;
+                        }
+                        const root = sourceScript.generated.root;
+                        if (!(root instanceof language_core_1.VueVirtualCode)) {
+                            break;
+                        }
+                        const block = root.sfc.styles.find(style => style.name === decoded[1]);
+                        if (!block) {
+                            break;
+                        }
+                        let script;
+                        for (const [key, value] of sourceScript.generated.embeddedCodes) {
+                            if (key.startsWith('script_')) {
+                                script = value;
+                                break;
+                            }
+                        }
+                        if (!script) {
+                            break;
+                        }
+                        const offset = document.offsetAt(position) + block.startTagEnd;
+                        for (const { sourceOffsets, lengths, data } of script.mappings) {
+                            if (!sourceOffsets.length
+                                || !data.navigation
+                                || typeof data.navigation === 'object' && !data.navigation.shouldRename) {
+                                continue;
+                            }
+                            const start = sourceOffsets[0];
+                            const end = sourceOffsets.at(-1) + lengths.at(-1);
+                            if (offset >= start && offset <= end) {
+                                return;
+                            }
+                        }
+                    } while (0);
+                    return worker(document, (stylesheet, cssLs) => {
+                        return cssLs.prepareRename(document, position, stylesheet);
+                    });
+                }
             };
+            function worker(document, callback) {
+                const cssLs = getCssLs(document);
+                if (!cssLs) {
+                    return;
+                }
+                return callback(getStylesheet(document, cssLs), cssLs);
+            }
         },
     };
 }

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,42 @@ 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 { sfc } = root;
+                    const blocks = [sfc.script, 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 +86,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-autoinsert-self-closing.d.ts

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

package/lib/plugins/vue-autoinsert-self-closing.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+function create() {
+    return {
+        name: 'vue-autoinsert-selfClosing',
+        capabilities: {
+            autoInsertionProvider: {
+                triggerCharacters: ['/'],
+                configurationSections: ['vue.autoInsert.selfClosing'],
+            },
+        },
+        create(context) {
+            return {
+                async provideAutoInsertSnippet(document, selection, change) {
+                    if (document.languageId !== 'html') {
+                        return;
+                    }
+                    const enabled = await context.env.getConfiguration?.('vue.autoInsert.selfClosing') ?? true;
+                    if (!enabled) {
+                        return;
+                    }
+                    if (change.text === '{}'
+                        && document.getText().slice(change.rangeOffset - 1, change.rangeOffset + 3) === '{{}}'
+                        && document.offsetAt(selection) === change.rangeOffset + 1) {
+                        return ` $0 `;
+                    }
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=vue-autoinsert-self-closing.js.map

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;
@@ -32,9 +32,10 @@ function create() {
                     if (!(root instanceof language_core_1.VueVirtualCode)) {
                         return;
                     }
-                    const codegen = language_core_1.tsCodegen.get(root._sfc);
-                    const scriptSetup = root._sfc.scriptSetup;
-                    const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+                    const { sfc } = root;
+                    const codegen = language_core_1.tsCodegen.get(sfc);
+                    const scriptSetup = sfc.scriptSetup;
+                    const scriptSetupRanges = codegen?.getScriptSetupRanges();
                     if (!scriptSetup || !scriptSetupRanges) {
                         return;
                     }

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

@@ -1,2 +1,6 @@
 import type { LanguageServicePlugin } from '@volar/language-service';
+/**
+ * A language service plugin that provides completion for Vue directive comments,
+ * e.g. if user is writing `<!-- |` in they'll be provided completions for `@vue-expect-error`, `@vue-generic`, etc.
+ */
 export declare function create(): LanguageServicePlugin;

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

@@ -8,6 +8,10 @@ const cmds = [
     ['vue-generic', 'vue-generic {$1}'],
 ];
 const directiveCommentReg = /<!--\s*@/;
+/**
+ * A language service plugin that provides completion for Vue directive comments,
+ * e.g. if user is writing `<!-- |` in they'll be provided completions for `@vue-expect-error`, `@vue-generic`, etc.
+ */
 function create() {
     return {
         name: 'vue-directive-comments',