@vue/language-service 2.1.5 → 2.1.8

package/data/template/cs.json

@@ -992,7 +992,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\nDynamicky váže jeden nebo více atributů nebo vlastností (props) komponenty na výraz.\n\n- **Zkratka:** \n  - `:` nebo `.` (pokud se používá modifikátor `.prop`)\n  - Vynechání hodnoty (pokud mají atribut a vázaná hodnota stejný název) <sup class=\"vt-badge\">3.4+</sup>\n\n- **Očekává:** `libovolný (s parametrem) | Objekt (bez parametru)`\n\n- **Parametr:** `attrOrProp (volitelné)`\n\n- **Modifikátory**\n\n  - `.camel` - převede název atributu z kebab-case na camelCase.\n  - `.prop` - vynutí binding jako vlastnost (prop) DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - vynutí binding jako atribut DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Použití**\n\n  Pokud se používá pro binding atributu `class` nebo `style`, `v-bind` podporuje další typy hodnot, jako jsou pole nebo objekty. Podrobnosti naleznete v příslušné části průvodce níže.\n\n  Při nastavování bindingu na element Vue ve výchozím nastavení kontroluje, zda má element klíč definovaný jako vlastnost pomocí operátoru `in`. Pokud je vlastnost definována, Vue nastaví hodnotu jako vlastnost DOM místo atributu. To by mělo fungovat ve většině případů, ale toto chování můžete přepsat explicitním použitím modifikátorů `.prop` nebo `.attr`. To je někdy nutné, zejména při [práci s custom elementy](https://cs.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  Při použití pro binding vlastností (props) komponenty musí být vlastnost v&nbsp;komponentě potomka správně deklarována.\n\n  Pokud se používá bez parametru, může být použito pro binding objektu obsahujícího páry název-hodnota atributu.\n\n- **Příklad**\n\n  ```html\n  <!-- binding atributu -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- dynamický název atributu -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- zkratka -->\n  <img :src=\"imageSrc\" />\n\n  <!-- zkratka stejného názvu (3.4+), bude rozšířeno na :src=\"src\" -->\n  <img :src />\n\n  <!-- zkratka s dynamickým názvem atributu -->\n  <button :[key]=\"value\"></button>\n\n  <!-- se spojením řetězců -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- binding třídy -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- binding stylů -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- binding objektu attributů -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- binding vlastnosti, `prop` musí být deklarována v komponentě potomka -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- předání props z rodiče, které jsou společné s komponentnou potomka -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\nModifikátor `.prop` má také zkrácenou formu, `.`:\n\n```html\n<div :someProperty.prop=\"someObject\"></div>\n\n<!-- ekvivalentní zápis -->\n<div .someProperty=\"someObject\"></div>\n```\n\nModifikátor `.camel` umožňuje převést jméno atributu `v-bind` na camelCase, například atribut `viewBox` ve SVG:\n\n```html\n<svg :view-box.camel=\"viewBox\"></svg>\n```\n\n`.camel` není potřeba, pokud používáte řetězcové šablony nebo předkompilujete šablonu pomocí build fáze.\n\n- **Viz také:**\n  - [Binding tříd a stylů](https://cs.vuejs.org/guide/essentials/class-and-style.html)\n  - [Vlastnosti (Props) - Detaily předávání vlastností](https://cs.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\nDynamicky váže jeden nebo více atributů nebo vlastností (props) komponenty na výraz.\n\n- **Zkratka:** \n  - `:` nebo `.` (pokud se používá modifikátor `.prop`)\n  - Vynechání hodnoty (pokud mají atribut a vázaná hodnota stejný název), podporováno až od verze 3.4+\n\n- **Očekává:** `libovolný (s parametrem) | Objekt (bez parametru)`\n\n- **Parametr:** `attrOrProp (volitelné)`\n\n- **Modifikátory**\n\n  - `.camel` - převede název atributu z kebab-case na camelCase.\n  - `.prop` - vynutí binding jako vlastnost (prop) DOM (3.2+).\n  - `.attr` - vynutí binding jako atribut DOM (3.2+).\n\n- **Použití**\n\n  Pokud se používá pro binding atributu `class` nebo `style`, `v-bind` podporuje další typy hodnot, jako jsou pole nebo objekty. Podrobnosti naleznete v příslušné části průvodce níže.\n\n  Při nastavování bindingu na element Vue ve výchozím nastavení kontroluje, zda má element klíč definovaný jako vlastnost pomocí operátoru `in`. Pokud je vlastnost definována, Vue nastaví hodnotu jako vlastnost DOM místo atributu. To by mělo fungovat ve většině případů, ale toto chování můžete přepsat explicitním použitím modifikátorů `.prop` nebo `.attr`. To je někdy nutné, zejména při [práci s custom elementy](https://cs.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  Při použití pro binding vlastností (props) komponenty musí být vlastnost v&nbsp;komponentě potomka správně deklarována.\n\n  Pokud se používá bez parametru, může být použito pro binding objektu obsahujícího páry název-hodnota atributu.\n\n- **Příklad**\n\n  ```html\n  <!-- binding atributu -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- dynamický název atributu -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- zkratka -->\n  <img :src=\"imageSrc\" />\n\n  <!-- zkratka stejného názvu (3.4+), bude rozšířeno na :src=\"src\" -->\n  <img :src />\n\n  <!-- zkratka s dynamickým názvem atributu -->\n  <button :[key]=\"value\"></button>\n\n  <!-- se spojením řetězců -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- binding třídy -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- binding stylů -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- binding objektu attributů -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- binding vlastnosti, `prop` musí být deklarována v komponentě potomka -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- předání props z rodiče, které jsou společné s komponentnou potomka -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\nModifikátor `.prop` má také zkrácenou formu, `.`:\n\n```html\n<div :someProperty.prop=\"someObject\"></div>\n\n<!-- ekvivalentní zápis -->\n<div .someProperty=\"someObject\"></div>\n```\n\nModifikátor `.camel` umožňuje převést jméno atributu `v-bind` na camelCase, například atribut `viewBox` ve SVG:\n\n```html\n<svg :view-box.camel=\"viewBox\"></svg>\n```\n\n`.camel` není potřeba, pokud používáte řetězcové šablony nebo předkompilujete šablonu pomocí build fáze.\n\n- **Viz také:**\n  - [Binding tříd a stylů](https://cs.vuejs.org/guide/essentials/class-and-style.html)\n  - [Vlastnosti (Props) - Detaily předávání vlastností](https://cs.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {
@@ -1299,7 +1299,7 @@
       "name": "v-memo",
       "description": {
         "kind": "markdown",
-        "value": "\n- **Očekává:** `any[]`\n\n- **Podrobnosti**\n\n  Uloží si (memoize) podstrom šablony. Může být použito jak na elementech, tak na komponentách. Direktiva očekává pole hodnot závislostí pevné délky, které se porovnávají pro zapamatování. Pokud každá hodnota v poli byla stejná jako při posledním vykreslení, aktualizace pro celý podstrom bude přeskočena. Například:\n\n  ```html\n  <div v-memo=\"[hodnotaA, hodnotaB]\">\n    ...\n  </div>\n  ```\n\n  Pokud při opětovném vykreslení komponenty zůstanou jak `hodnotaA`, tak `hodnotaB` stejné, všechny aktualizace pro tento `<div>` a jeho potomky budou přeskočeny. Ve skutečnosti bude přeskočeno i vytváření Virtual DOM VNode, protože memoizovaná kopie podstromu může být znovu použita.\n\n  Je důležité správně specifikovat pole pro zapamatování, jinak můžeme přeskočit aktualizace, které by aplikovány být měly. `v-memo` s prázdným polem závislostí (`v-memo=\"[]\"`) by bylo funkčně ekvivalentní `v-once`.\n\n  **Použití s `v-for`**\n\n  `v-memo` je poskytováno výhradně pro mikrooptimalizace výkonu a je potřeba jen zřídka. Nejběžnější případ, kdy se to může hodit, je při vykreslování velkých seznamů `v-for` (kde `length > 1000`):\n\n  ```html\n  <div v-for=\"prvek in seznam\" :key=\"prvek.id\" v-memo=\"[prvek.id === vybrano]\">\n    <p>ID: {{ prvek.id }} - vybráno: {{ prvek.id === vybrano }}</p>\n    <p>...další potomci</p>\n  </div>\n  ```\n\n  Při změně stavu `vybrano` komponenty bude vytvořeno velké množství VNodes, i když většina položek zůstala přesně stejná. Použití `v-memo` zde znamená _„aktualizujte tuto položku pouze tehdy, pokud se změnila z nevybrané na vybranou nebo naopak“_. To&nbsp;umožňuje každé neovlivněné položce znovu použít její předchozí VNode a úplně přeskočit porovnávání rozdílů. Poznamenejme, že zde do pole závislostí pro zapamatování nemusíme zahrnout `prvek.id`, protože Vue ji automaticky odvodí z&nbsp;`:key` položky.\n\n  :::warning Varování\n  Při použití `v-memo` s `v-for` se ujistěte, že jsou použity na stejném elementu. **`v-memo` nefunguje uvnitř `v-for`.**\n  :::\n\n  `v-memo` lze také použít na komponentách k manuálnímu zabránění nechtěným aktualizacím v určitých okrajových případech, kdy byla kontrola aktualizace potomka de-optimalizována. Ale opět je zodpovědností vývojáře specifikovat správné pole závislostí, aby se zabránilo vynechání nutných aktualizací.\n\n- **Viz také:**\n  - [v-once](#v-once)\n"
+        "value": "\n- Podporováno až od verze 3.2+\n\n- **Očekává:** `any[]`\n\n- **Podrobnosti**\n\n  Uloží si (memoize) podstrom šablony. Může být použito jak na elementech, tak na komponentách. Direktiva očekává pole hodnot závislostí pevné délky, které se porovnávají pro zapamatování. Pokud každá hodnota v poli byla stejná jako při posledním vykreslení, aktualizace pro celý podstrom bude přeskočena. Například:\n\n  ```html\n  <div v-memo=\"[hodnotaA, hodnotaB]\">\n    ...\n  </div>\n  ```\n\n  Pokud při opětovném vykreslení komponenty zůstanou jak `hodnotaA`, tak `hodnotaB` stejné, všechny aktualizace pro tento `<div>` a jeho potomky budou přeskočeny. Ve skutečnosti bude přeskočeno i vytváření Virtual DOM VNode, protože memoizovaná kopie podstromu může být znovu použita.\n\n  Je důležité správně specifikovat pole pro zapamatování, jinak můžeme přeskočit aktualizace, které by aplikovány být měly. `v-memo` s prázdným polem závislostí (`v-memo=\"[]\"`) by bylo funkčně ekvivalentní `v-once`.\n\n  **Použití s `v-for`**\n\n  `v-memo` je poskytováno výhradně pro mikrooptimalizace výkonu a je potřeba jen zřídka. Nejběžnější případ, kdy se to může hodit, je při vykreslování velkých seznamů `v-for` (kde `length > 1000`):\n\n  ```html\n  <div v-for=\"prvek in seznam\" :key=\"prvek.id\" v-memo=\"[prvek.id === vybrano]\">\n    <p>ID: {{ prvek.id }} - vybráno: {{ prvek.id === vybrano }}</p>\n    <p>...další potomci</p>\n  </div>\n  ```\n\n  Při změně stavu `vybrano` komponenty bude vytvořeno velké množství VNodes, i když většina položek zůstala přesně stejná. Použití `v-memo` zde znamená _„aktualizujte tuto položku pouze tehdy, pokud se změnila z nevybrané na vybranou nebo naopak“_. To&nbsp;umožňuje každé neovlivněné položce znovu použít její předchozí VNode a úplně přeskočit porovnávání rozdílů. Poznamenejme, že zde do pole závislostí pro zapamatování nemusíme zahrnout `prvek.id`, protože Vue ji automaticky odvodí z&nbsp;`:key` položky.\n\n  :::warning Varování\n  Při použití `v-memo` s `v-for` se ujistěte, že jsou použity na stejném elementu. **`v-memo` nefunguje uvnitř `v-for`.**\n  :::\n\n  `v-memo` lze také použít na komponentách k manuálnímu zabránění nechtěným aktualizacím v určitých okrajových případech, kdy byla kontrola aktualizace potomka de-optimalizována. Ale opět je zodpovědností vývojáře specifikovat správné pole závislostí, aby se zabránilo vynechání nutných aktualizací.\n\n- **Viz také:**\n  - [v-once](#v-once)\n"
       },
       "references": [
         {
@@ -1544,7 +1544,7 @@
       "name": "is",
       "description": {
         "kind": "markdown",
-        "value": "\nPoužívá se pro binding [dynamických komponent](https://cs.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Očekává:** `string | Komponenta`\n\n- **Použití na nativních elementech** <sup class=\"vt-badge\">3.1+</sup>\n\n  Když je atribut `is` použit na nativním HTML elementu, bude interpretován jako [custom vestavěný element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), což je nativní funkce webové platformy.\n\n  Existuje však případ použití, kdy můžete potřebovat, aby Vue nahradilo nativní element  Vue komponentou, jak je vysvětleno v [upozornění na omezení při parsování in-DOM šablon](https://cs.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats). Můžete atributu `is` přidat předponu `vue:`, aby Vue vykreslilo element jako Vue komponentu:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **Viz také:**\n\n  - [Vestavěné speciální elementy - `<component>`](https://cs.vuejs.org/api/built-in-special-elements.html#component)\n  - [Dynamické komponenty](https://cs.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
+        "value": "\nPoužívá se pro binding [dynamických komponent](https://cs.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Očekává:** `string | Komponenta`\n\n- **Použití na nativních elementech**\n\n  - Podporováno až od verze 3.1+\n\n  Když je atribut `is` použit na nativním HTML elementu, bude interpretován jako [custom vestavěný element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), což je nativní funkce webové platformy.\n\n  Existuje však případ použití, kdy můžete potřebovat, aby Vue nahradilo nativní element  Vue komponentou, jak je vysvětleno v [upozornění na omezení při parsování in-DOM šablon](https://cs.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats). Můžete atributu `is` přidat předponu `vue:`, aby Vue vykreslilo element jako Vue komponentu:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **Viz také:**\n\n  - [Vestavěné speciální elementy - `<component>`](https://cs.vuejs.org/api/built-in-special-elements.html#component)\n  - [Dynamické komponenty](https://cs.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
       "references": [
         {

package/data/template/en.json

@@ -191,7 +191,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://vuejs.org/guide/built-ins/teleport.html)\n"
+        "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     * When `true`, the Teleport will defer until other\n     * parts of the application have been mounted before\n     * resolving its target. (3.5+)\n     */\n    defer?: 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  Defer target resolution <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- somewhere later in the template -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **See also** [Guide - Teleport](https://vuejs.org/guide/built-ins/teleport.html)\n"
       },
       "attributes": [],
       "references": [
@@ -992,7 +992,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\nDynamically bind one or more attributes, or a component prop to an expression.\n\n- **Shorthand:**\n  - `:` or `.` (when using `.prop` modifier)\n  - Omitting value (when attribute and bound value has the same name) <sup class=\"vt-badge\">3.4+</sup>\n\n- **Expects:** `any (with argument) | Object (without argument)`\n\n- **Argument:** `attrOrProp (optional)`\n\n- **Modifiers**\n\n  - `.camel` - transform the kebab-case attribute name into camelCase.\n  - `.prop` - force a binding to be set as a DOM property. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - force a binding to be set as a DOM attribute. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Usage**\n\n  When used to bind the `class` or `style` attribute, `v-bind` supports additional value types such as Array or Objects. See linked guide section below for more details.\n\n  When setting a binding on an element, Vue by default checks whether the element has the key defined as a property using an `in` operator check. If the property is defined, Vue will set the value as a DOM property instead of an attribute. This should work in most cases, but you can override this behavior by explicitly using `.prop` or `.attr` modifiers. This is sometimes necessary, especially when [working with custom elements](https://vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  When used for component prop binding, the prop must be properly declared in the child component.\n\n  When used without an argument, can be used to bind an object containing attribute name-value pairs.\n\n- **Example**\n\n  ```html\n  <!-- bind an attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- dynamic attribute name -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- shorthand -->\n  <img :src=\"imageSrc\" />\n\n  <!-- same-name shorthand (3.4+), expands to :src=\"src\" -->\n  <img :src />\n\n  <!-- shorthand dynamic attribute name -->\n  <button :[key]=\"value\"></button>\n\n  <!-- with inline string concatenation -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class binding -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style binding -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- binding an object of attributes -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop binding. \"prop\" must be declared in the child component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- pass down parent props in common with a child component -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  The `.prop` modifier also has a dedicated shorthand, `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- equivalent to -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel` is not needed if you are using string templates, or pre-compiling the template with a build step.\n\n- **See also**\n  - [Class and Style Bindings](https://vuejs.org/guide/essentials/class-and-style.html)\n  - [Components - Prop Passing Details](https://vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\nDynamically bind one or more attributes, or a component prop to an expression.\n\n- **Shorthand:**\n  - `:` or `.` (when using `.prop` modifier)\n  - Omitting value (when attribute and bound value has the same name, requires 3.4+)\n\n- **Expects:** `any (with argument) | Object (without argument)`\n\n- **Argument:** `attrOrProp (optional)`\n\n- **Modifiers**\n\n  - `.camel` - transform the kebab-case attribute name into camelCase.\n  - `.prop` - force a binding to be set as a DOM property (3.2+).\n  - `.attr` - force a binding to be set as a DOM attribute (3.2+).\n\n- **Usage**\n\n  When used to bind the `class` or `style` attribute, `v-bind` supports additional value types such as Array or Objects. See linked guide section below for more details.\n\n  When setting a binding on an element, Vue by default checks whether the element has the key defined as a property using an `in` operator check. If the property is defined, Vue will set the value as a DOM property instead of an attribute. This should work in most cases, but you can override this behavior by explicitly using `.prop` or `.attr` modifiers. This is sometimes necessary, especially when [working with custom elements](https://vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  When used for component prop binding, the prop must be properly declared in the child component.\n\n  When used without an argument, can be used to bind an object containing attribute name-value pairs.\n\n- **Example**\n\n  ```html\n  <!-- bind an attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- dynamic attribute name -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- shorthand -->\n  <img :src=\"imageSrc\" />\n\n  <!-- same-name shorthand (3.4+), expands to :src=\"src\" -->\n  <img :src />\n\n  <!-- shorthand dynamic attribute name -->\n  <button :[key]=\"value\"></button>\n\n  <!-- with inline string concatenation -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class binding -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style binding -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- binding an object of attributes -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop binding. \"prop\" must be declared in the child component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- pass down parent props in common with a child component -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  The `.prop` modifier also has a dedicated shorthand, `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- equivalent to -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel` is not needed if you are using string templates, or pre-compiling the template with a build step.\n\n- **See also**\n  - [Class and Style Bindings](https://vuejs.org/guide/essentials/class-and-style.html)\n  - [Components - Prop Passing Details](https://vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {
@@ -1299,7 +1299,7 @@
       "name": "v-memo",
       "description": {
         "kind": "markdown",
-        "value": "\n- **Expects:** `any[]`\n\n- **Details**\n\n  Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `<div>` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.\n\n  It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo=\"[]\"`) would be functionally equivalent to `v-once`.\n\n  **Usage with `v-for`**\n\n  `v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `length > 1000`):\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying \"only update this item if it went from non-selected to selected, or the other way around\". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.\n\n  :::warning\n  When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.**\n  :::\n\n  `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.\n\n- **See also**\n  - [v-once](#v-once)\n"
+        "value": "\n- Only supported in 3.2+\n\n- **Expects:** `any[]`\n\n- **Details**\n\n  Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `<div>` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused.\n\n  It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo=\"[]\"`) would be functionally equivalent to `v-once`.\n\n  **Usage with `v-for`**\n\n  `v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `length > 1000`):\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying \"only update this item if it went from non-selected to selected, or the other way around\". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`.\n\n  :::warning\n  When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.**\n  :::\n\n  `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates.\n\n- **See also**\n  - [v-once](#v-once)\n"
       },
       "references": [
         {
@@ -1544,7 +1544,7 @@
       "name": "is",
       "description": {
         "kind": "markdown",
-        "value": "\nUsed for binding [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Expects:** `string | Component`\n\n- **Usage on native elements** <sup class=\"vt-badge\">3.1+</sup>\n\n  When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.\n\n  There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **See also**\n\n  - [Built-in Special Element - `<component>`](https://vuejs.org/api/built-in-special-elements.html#component)\n  - [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
+        "value": "\nUsed for binding [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Expects:** `string | Component`\n\n- **Usage on native elements**\n \n  - Only supported in 3.1+\n\n  When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.\n\n  There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **See also**\n\n  - [Built-in Special Element - `<component>`](https://vuejs.org/api/built-in-special-elements.html#component)\n  - [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
       "references": [
         {

package/data/template/ru.json

@@ -191,7 +191,7 @@
       "name": "Teleport",
       "description": {
         "kind": "markdown",
-        "value": "\nПеремещает содержимое своего слота в другую часть DOM.\n\n- **Входные параметры**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Обязательный. Задаёт целевой контейнер.\n     * Может быть селектором или непосредственно элементом.\n     */\n    to: string | HTMLElement\n    /**\n     * Если `true`, содержимое останется на своем первоначальном\n     * месте, вместо перемещения в целевой контейнер.\n     * Может изменяться динамически.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Пример**\n\n  Указание целевого контейнера:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  Перемещение по условию:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n- **См. также** [Руководство — Teleport](https://ru.vuejs.org/guide/built-ins/teleport.html)\n"
+        "value": "\nПеремещает содержимое своего слота в другую часть DOM.\n\n- **Входные параметры**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Обязательный. Задаёт целевой контейнер.\n     * Может быть селектором или непосредственно элементом.\n     */\n    to: string | HTMLElement\n    /**\n     * Если `true`, содержимое останется на своем первоначальном\n     * месте, вместо перемещения в целевой контейнер.\n     * Может изменяться динамически.\n     */\n    disabled?: boolean\n    /**\n     * When `true`, the Teleport will defer until other\n     * parts of the application have been mounted before\n     * resolving its target. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **Пример**\n\n  Указание целевого контейнера:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  Перемещение по условию:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  Defer target resolution <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- somewhere later in the template -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **См. также** [Руководство — Teleport](https://ru.vuejs.org/guide/built-ins/teleport.html)\n"
       },
       "attributes": [],
       "references": [
@@ -992,7 +992,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\nДинамически привязывает один или несколько атрибутов или входных параметров компонента к выражению.\n\n- **Сокращённая запись**\n  - `:` или `.` (при использовании модификатора `.prop`)\n  - Пропуск значения (когда атрибут и связанное значение имеют одинаковое имя) <sup class=\"vt-badge\">3.4+</sup>\n\n- **Ожидает:** `any (если указан аргумент) | Object (без аргумента)`\n\n- **Аргумент:** `attrOrProp (опционально)`\n\n- **Модификаторы**\n\n  - `.camel` - преобразование имён атрибутов из kebab-case в camelCase.\n  - `.prop` - принудительная установить привязку в качестве свойства DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - принудительно установить привязку в качестве атрибута DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Применение**\n\n  При использовании для привязки атрибутов `class` или `style`, `v-bind` поддерживает дополнительные типы значений, такие как Array или Objects. Более подробная информация приведена в разделе руководства по ссылкам ниже.\n\n  Устанавливая привязку к элементу, Vue по умолчанию проверяет, имеет ли элемент ключ, определенный как свойство, используя проверку оператора `in`. Если свойство определено, то Vue установит значение как свойство DOM, а не как атрибут. В большинстве случаев это должно работать, но вы можете переопределить это поведение, явно используя модификаторы `.prop` или `.attr`. Иногда это необходимо, особенно при [работе с пользовательскими элементами](https://ru.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  При привязке входных параметров к дочернему компоненту необходимо также объявлять их внутри него.\n\n  При использовании без аргумента можно привязать объект из пар имя-значение.\n\n- **Пример**\n\n  ```html\n  <!-- привязка атрибута -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- динамическое название атрибута -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- сокращённая запись -->\n  <img :src=\"imageSrc\" />\n\n  <!-- сокращение при одинаковом названии (3.4+), расширяется до :src=\"src\" -->\n  <img :src />\n\n  <!-- сокращённая запись при динамическом названии атрибута -->\n  <button :[key]=\"value\"></button>\n\n  <!-- инлайн-выражение с конкатенацией строк -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- привязка классов -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- привязка стилей -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- привязка объекта с атрибутами -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- привязка входного параметра. \"prop\" должен быть объявлен в my-component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- передача всех входных параметров родительского компонента в дочерний -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Модификатор `.prop` также имеет сокращённую запись `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- эквивалент -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Модификатор `.camel` позволяет приводить имя атрибута `v-bind` в camelCase при использовании DOM-шаблонов, например для атрибута SVG `viewBox`:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  Модификатор `.camel` не нужен, если вы используете строковые шаблоны или предварительно компилируете шаблон на этапе сборки.\n\n- **См. также**\n  - [Работа с классами и стилями](https://ru.vuejs.org/guide/essentials/class-and-style.html)\n  - [Компоненты - Детали передачи входных параметров](https://ru.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\nДинамически привязывает один или несколько атрибутов или входных параметров компонента к выражению.\n\n- **Сокращённая запись**\n  - `:` или `.` (при использовании модификатора `.prop`)\n  - Пропуск значения (когда атрибут и связанное значение имеют одинаковое имя) requires 3.4+\n\n- **Ожидает:** `any (если указан аргумент) | Object (без аргумента)`\n\n- **Аргумент:** `attrOrProp (опционально)`\n\n- **Модификаторы**\n\n  - `.camel` - преобразование имён атрибутов из kebab-case в camelCase.\n  - `.prop` - принудительная установить привязку в качестве свойства DOM (3.2+).\n  - `.attr` - принудительно установить привязку в качестве атрибута DOM (3.2+).\n\n- **Применение**\n\n  При использовании для привязки атрибутов `class` или `style`, `v-bind` поддерживает дополнительные типы значений, такие как Array или Objects. Более подробная информация приведена в разделе руководства по ссылкам ниже.\n\n  Устанавливая привязку к элементу, Vue по умолчанию проверяет, имеет ли элемент ключ, определенный как свойство, используя проверку оператора `in`. Если свойство определено, то Vue установит значение как свойство DOM, а не как атрибут. В большинстве случаев это должно работать, но вы можете переопределить это поведение, явно используя модификаторы `.prop` или `.attr`. Иногда это необходимо, особенно при [работе с пользовательскими элементами](https://ru.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  При привязке входных параметров к дочернему компоненту необходимо также объявлять их внутри него.\n\n  При использовании без аргумента можно привязать объект из пар имя-значение.\n\n- **Пример**\n\n  ```html\n  <!-- привязка атрибута -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- динамическое название атрибута -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- сокращённая запись -->\n  <img :src=\"imageSrc\" />\n\n  <!-- сокращение при одинаковом названии (3.4+), расширяется до :src=\"src\" -->\n  <img :src />\n\n  <!-- сокращённая запись при динамическом названии атрибута -->\n  <button :[key]=\"value\"></button>\n\n  <!-- инлайн-выражение с конкатенацией строк -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- привязка классов -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- привязка стилей -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- привязка объекта с атрибутами -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- привязка входного параметра. \"prop\" должен быть объявлен в my-component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- передача всех входных параметров родительского компонента в дочерний -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Модификатор `.prop` также имеет сокращённую запись `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- эквивалент -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Модификатор `.camel` позволяет приводить имя атрибута `v-bind` в camelCase при использовании DOM-шаблонов, например для атрибута SVG `viewBox`:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  Модификатор `.camel` не нужен, если вы используете строковые шаблоны или предварительно компилируете шаблон на этапе сборки.\n\n- **См. также**\n  - [Работа с классами и стилями](https://ru.vuejs.org/guide/essentials/class-and-style.html)\n  - [Компоненты - Детали передачи входных параметров](https://ru.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {
@@ -1299,7 +1299,7 @@
       "name": "v-memo",
       "description": {
         "kind": "markdown",
-        "value": "\n- **Ожидает:** `any[]`\n\n- **Подробности**\n\n  Мемоизация части поддерева шаблона. Может использоваться как для элементов, так и для компонентов. Директива ожидает массив фиксированной длины зависимых значений, которые станут использоваться для сравнения при мемоизации. Если каждое значение массива осталось таким же, как при последней отрисовке, то обновление всего поддерева будет пропущено. Например:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  При повторном рендеринге компонента, если `valueA` и `valueB` остались прежними, все обновления для этого `<div>` и его дочерних элементов будут пропущены. Фактически, будет пропущено даже создание VNode виртуального DOM, поскольку мемоизированная копия поддерева может быть использована повторно.\n\n  Важно правильно указать массив мемоизации, иначе мы можем пропустить обновления, которые действительно должны быть применены. `v-memo` с пустым массивом зависимостей (`v-memo=\"[]\"`) будет функционально эквивалентен `v-once`.\n\n  **Использование вместе с `v-for`**\n\n  `v-memo` предоставляется исключительно для микрооптимизации в критичных к производительности сценариях и может понадобиться крайне редко. Наиболее распространённым случаем, когда это может оказаться полезным, является отрисовка больших списков `v-for` (когда `length > 1000`):\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - выбран: {{ item.id === selected }}</p>\n    <p>...больше дочерних элементов</p>\n  </div>\n  ```\n\n  При изменении состояния компонента `selected` будет создано большое количество VNodes, даже если большинство элементов остались прежними. Использование `v-memo` здесь, по сути, говорит: \"обновляйте этот элемент только в том случае, если он перешел из состояния `не выбран` в состояние `выбран`, или наоборот\". Это позволяет каждому незатронутому элементу повторно использовать свой предыдущий VNode и полностью пропустить операцию сравнения. Обратите внимание, что нам не нужно включать `item.id` в массив зависимостей memo, поскольку Vue автоматически определяет его из `:key` элемента.\n\n  :::warning Предупреждение\n  При использовании `v-memo` с `v-for` убедитесь, что они используются на одном и том же элементе. **`v-memo` не работает внутри `v-for`.**.\n  :::\n\n  `v-memo` также может быть использовано для компонентов, чтобы вручную предотвратить нежелательные обновления в некоторых крайних случаях, когда проверка обновлений дочерних компонентов была де-оптимизирована. Но, повторимся, ответственность за корректное указание массивов зависимостей во избежание пропуска необходимых обновлений лежит на разработчике.\n\n- **См. также**\n  - [v-once](#v-once)\n"
+        "value": "\n- Only supported in 3.2+\n\n- **Ожидает:** `any[]`\n\n- **Подробности**\n\n  Мемоизация части поддерева шаблона. Может использоваться как для элементов, так и для компонентов. Директива ожидает массив фиксированной длины зависимых значений, которые станут использоваться для сравнения при мемоизации. Если каждое значение массива осталось таким же, как при последней отрисовке, то обновление всего поддерева будет пропущено. Например:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  При повторном рендеринге компонента, если `valueA` и `valueB` остались прежними, все обновления для этого `<div>` и его дочерних элементов будут пропущены. Фактически, будет пропущено даже создание VNode виртуального DOM, поскольку мемоизированная копия поддерева может быть использована повторно.\n\n  Важно правильно указать массив мемоизации, иначе мы можем пропустить обновления, которые действительно должны быть применены. `v-memo` с пустым массивом зависимостей (`v-memo=\"[]\"`) будет функционально эквивалентен `v-once`.\n\n  **Использование вместе с `v-for`**\n\n  `v-memo` предоставляется исключительно для микрооптимизации в критичных к производительности сценариях и может понадобиться крайне редко. Наиболее распространённым случаем, когда это может оказаться полезным, является отрисовка больших списков `v-for` (когда `length > 1000`):\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - выбран: {{ item.id === selected }}</p>\n    <p>...больше дочерних элементов</p>\n  </div>\n  ```\n\n  При изменении состояния компонента `selected` будет создано большое количество VNodes, даже если большинство элементов остались прежними. Использование `v-memo` здесь, по сути, говорит: \"обновляйте этот элемент только в том случае, если он перешел из состояния `не выбран` в состояние `выбран`, или наоборот\". Это позволяет каждому незатронутому элементу повторно использовать свой предыдущий VNode и полностью пропустить операцию сравнения. Обратите внимание, что нам не нужно включать `item.id` в массив зависимостей memo, поскольку Vue автоматически определяет его из `:key` элемента.\n\n  :::warning Предупреждение\n  При использовании `v-memo` с `v-for` убедитесь, что они используются на одном и том же элементе. **`v-memo` не работает внутри `v-for`.**.\n  :::\n\n  `v-memo` также может быть использовано для компонентов, чтобы вручную предотвратить нежелательные обновления в некоторых крайних случаях, когда проверка обновлений дочерних компонентов была де-оптимизирована. Но, повторимся, ответственность за корректное указание массивов зависимостей во избежание пропуска необходимых обновлений лежит на разработчике.\n\n- **См. также**\n  - [v-once](#v-once)\n"
       },
       "references": [
         {
@@ -1544,7 +1544,7 @@
       "name": "is",
       "description": {
         "kind": "markdown",
-        "value": "\nИспользуется для [динамических компонентов](https://ru.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Ожидает** `string | Component`\n\n- **Использование на нативных элементах** <sup class=\"vt-badge\">3.1+</sup>\n\n  Когда атрибут `is` используется на нативном HTML-элементе, то он интерпретируется как [пользовательский встроенный элемент](https://html.spec.whatwg.org/multipage/custom-elements#custom-elements-customized-builtin-example). Это нативная возможность веб-платформы.\n\n  Однако есть случай использования, когда может понадобиться, чтобы Vue заменил нативный элемент на компонент Vue, как это разъясняется в [Особенности парсинга DOM-шаблона](https://ru.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). В таком случае можно добавить значению атрибута `is` префикс `vue:`, чтобы Vue вместо элемента отрисовал компонент Vue:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **См. также**\n\n  - [Специальные встроенные элементы - `<component>`](https://ru.vuejs.org/api/built-in-special-elements.html#component)\n  - [Динамические компоненты](https://ru.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
+        "value": "\nИспользуется для [динамических компонентов](https://ru.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Ожидает** `string | Component`\n\n- **Использование на нативных элементах**\n \n  - Поддерживается только в 3.1+\n\n  Когда атрибут `is` используется на нативном HTML-элементе, то он интерпретируется как [пользовательский встроенный элемент](https://html.spec.whatwg.org/multipage/custom-elements#custom-elements-customized-builtin-example). Это нативная возможность веб-платформы.\n\n  Однако есть случай использования, когда может понадобиться, чтобы Vue заменил нативный элемент на компонент Vue, как это разъясняется в [Особенности парсинга DOM-шаблона](https://ru.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). В таком случае можно добавить значению атрибута `is` префикс `vue:`, чтобы Vue вместо элемента отрисовал компонент Vue:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **См. также**\n\n  - [Специальные встроенные элементы - `<component>`](https://ru.vuejs.org/api/built-in-special-elements.html#component)\n  - [Динамические компоненты](https://ru.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
       "references": [
         {

package/lib/ideFeatures/nameCasing.js

@@ -6,7 +6,7 @@ exports.getNameCasing = getNameCasing;
 exports.detect = detect;
 const vue = require("@vue/language-core");
 const language_core_1 = require("@vue/language-core");
-const computeds_1 = require("computeds");
+const alien_signals_1 = require("alien-signals");
 const types_1 = require("../types");
 async function convertTagName(context, uri, casing, tsPluginClient) {
     const sourceFile = context.language.scripts.get(uri);
@@ -17,7 +17,7 @@ async function convertTagName(context, uri, casing, tsPluginClient) {
     if (!(rootCode instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const desc = rootCode.sfc;
+    const desc = rootCode._sfc;
     if (!desc.template) {
         return;
     }
@@ -53,7 +53,7 @@ async function convertAttrName(context, uri, casing, tsPluginClient) {
     if (!(rootCode instanceof language_core_1.VueVirtualCode)) {
         return;
     }
-    const desc = rootCode.sfc;
+    const desc = rootCode._sfc;
     if (!desc.template) {
         return;
     }
@@ -65,7 +65,7 @@ async function convertAttrName(context, uri, casing, tsPluginClient) {
     for (const [tagName, { attrs }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
-            const props = await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? [];
+            const props = (await tsPluginClient?.getComponentProps(rootCode.fileName, componentName) ?? []).map(prop => prop.name);
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
                 if (propName) {
@@ -134,8 +134,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
@@ -155,11 +155,11 @@ async function detect(context, uri) {
 const map = new WeakMap();
 function getTemplateTagsAndAttrs(sourceFile) {
     if (!map.has(sourceFile)) {
-        const getter = (0, computeds_1.computed)(() => {
+        const getter = (0, alien_signals_1.computed)(() => {
             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)) {
@@ -199,6 +199,6 @@ function getTemplateTagsAndAttrs(sourceFile) {
         });
         map.set(sourceFile, getter);
     }
-    return map.get(sourceFile)() ?? new Map();
+    return map.get(sourceFile).get() ?? new Map();
 }
 //# sourceMappingURL=nameCasing.js.map

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
 const shared_1 = require("@vue/shared");
-const path = require("path-browserify");
+const path_browserify_1 = require("path-browserify");
 const getUserPreferences_1 = require("volar-service-typescript/lib/configs/getUserPreferences");
 const vscode_uri_1 = require("vscode-uri");
 const vue_extract_file_1 = require("../plugins/vue-extract-file");
@@ -45,7 +45,7 @@ function create(ts, getTsPluginClient) {
                     let baseName = importUri.substring(importUri.lastIndexOf('/') + 1);
                     baseName = baseName.substring(0, baseName.lastIndexOf('.'));
                     const newName = (0, shared_1.capitalize)((0, shared_1.camelize)(baseName));
-                    const { sfc } = vueVirtualCode;
+                    const { _sfc: sfc } = vueVirtualCode;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!script) {
                         return;
@@ -67,7 +67,7 @@ function create(ts, getTsPluginClient) {
                         }
                     }
                     if (!importPath) {
-                        importPath = path.relative(path.dirname(vueVirtualCode.fileName), incomingFileName)
+                        importPath = path_browserify_1.posix.relative(path_browserify_1.posix.dirname(vueVirtualCode.fileName), incomingFileName)
                             || importUri.substring(importUri.lastIndexOf('/') + 1);
                         if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
                             importPath = './' + importPath;

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

@@ -17,12 +17,12 @@ function create() {
                     const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
                     if (sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode && virtualCode?.id === 'template') {
                         const result = [];
-                        const codegen = language_core_1.tsCodegen.get(sourceScript.generated.root.sfc);
-                        const scopedClasses = codegen?.generatedTemplate()?.scopedClasses ?? [];
+                        const codegen = language_core_1.tsCodegen.get(sourceScript.generated.root._sfc);
+                        const scopedClasses = codegen?.generatedTemplate.get()?.scopedClasses ?? [];
                         const styleClasses = new Map();
                         const option = sourceScript.generated.root.vueCompilerOptions.experimentalResolveStyleCssClasses;
-                        for (let i = 0; i < sourceScript.generated.root.sfc.styles.length; i++) {
-                            const style = sourceScript.generated.root.sfc.styles[i];
+                        for (let i = 0; i < sourceScript.generated.root._sfc.styles.length; i++) {
+                            const style = sourceScript.generated.root._sfc.styles[i];
                             if (option === 'always' || (option === 'scoped' && style.scoped)) {
                                 for (const className of style.classNames) {
                                     if (!styleClasses.has(className.text.substring(1))) {

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

@@ -29,7 +29,7 @@ function create(ts, getTsPluginClient) {
                     if (!(sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) || virtualCode?.id !== 'template') {
                         return;
                     }
-                    const { sfc } = sourceScript.generated.root;
+                    const { _sfc: sfc } = sourceScript.generated.root;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return;
@@ -62,7 +62,7 @@ function create(ts, getTsPluginClient) {
                     }
                     const document = context.documents.get(parsedUri, virtualCode.languageId, virtualCode.snapshot);
                     const sfcDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
-                    const { sfc } = sourceScript.generated.root;
+                    const { _sfc: sfc } = sourceScript.generated.root;
                     const script = sfc.scriptSetup ?? sfc.script;
                     if (!sfc.template || !script) {
                         return codeAction;

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: string[]): [ts.Identifier, boolean][];
+export declare function findDestructuredProps(ts: typeof import('typescript'), ast: ts.SourceFile, props: Set<string>): [ts.Identifier, boolean][];

package/lib/plugins/vue-inlayhints.js

@@ -20,30 +20,34 @@ function create(ts) {
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
                     const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
                     if (virtualCode instanceof language_core_1.VueVirtualCode) {
-                        const codegen = language_core_1.tsCodegen.get(virtualCode.sfc);
+                        const codegen = language_core_1.tsCodegen.get(virtualCode._sfc);
                         const inlayHints = [
-                            ...codegen?.generatedTemplate()?.inlayHints ?? [],
-                            ...codegen?.generatedScript()?.inlayHints ?? [],
+                            ...codegen?.generatedTemplate.get()?.inlayHints ?? [],
+                            ...codegen?.generatedScript.get()?.inlayHints ?? [],
                         ];
-                        const scriptSetupRanges = codegen?.scriptSetupRanges();
-                        if (scriptSetupRanges?.props.destructured && virtualCode.sfc.scriptSetup?.ast) {
-                            for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode.sfc.scriptSetup.ast, scriptSetupRanges.props.destructured)) {
-                                const name = prop.text;
-                                const end = prop.getEnd();
-                                const pos = isShorthand ? end : end - name.length;
-                                const label = isShorthand ? `: props.${name}` : 'props.';
-                                inlayHints.push({
-                                    blockName: 'scriptSetup',
-                                    offset: pos,
-                                    setting: 'vue.inlayHints.destructuredProps',
-                                    label,
-                                });
+                        const scriptSetupRanges = codegen?.scriptSetupRanges.get();
+                        if (scriptSetupRanges?.props.destructured && virtualCode._sfc.scriptSetup?.ast) {
+                            const setting = 'vue.inlayHints.destructuredProps';
+                            settings[setting] ??= await context.env.getConfiguration?.(setting) ?? false;
+                            if (settings[setting]) {
+                                for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode._sfc.scriptSetup.ast, scriptSetupRanges.props.destructured)) {
+                                    const name = prop.text;
+                                    const end = prop.getEnd();
+                                    const pos = isShorthand ? end : end - name.length;
+                                    const label = isShorthand ? `: props.${name}` : 'props.';
+                                    inlayHints.push({
+                                        blockName: 'scriptSetup',
+                                        offset: pos,
+                                        setting,
+                                        label,
+                                    });
+                                }
                             }
                         }
                         const blocks = [
-                            virtualCode.sfc.template,
-                            virtualCode.sfc.script,
-                            virtualCode.sfc.scriptSetup,
+                            virtualCode._sfc.template,
+                            virtualCode._sfc.script,
+                            virtualCode._sfc.scriptSetup,
                         ];
                         const start = document.offsetAt(range.start);
                         const end = document.offsetAt(range.end);
@@ -79,7 +83,7 @@ function create(ts) {
  * Refactored from https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/definePropsDestructure.ts
  */
 function findDestructuredProps(ts, ast, props) {
-    const rootScope = {};
+    const rootScope = Object.create(null);
     const scopeStack = [rootScope];
     let currentScope = rootScope;
     const excludedIds = new WeakSet();
@@ -135,7 +139,7 @@ function findDestructuredProps(ts, ast, props) {
             && initializer
             && ts.isCallExpression(initializer)
             && initializer.expression.getText(ast) === 'defineProps';
-        for (const id of (0, common_1.collectIdentifiers)(ts, name)) {
+        for (const [id] of (0, common_1.collectIdentifiers)(ts, name)) {
             if (isDefineProps) {
                 excludedIds.add(id);
             }
@@ -150,7 +154,7 @@ function findDestructuredProps(ts, ast, props) {
             registerLocalBinding(name);
         }
         for (const p of parameters) {
-            for (const id of (0, common_1.collectIdentifiers)(ts, p)) {
+            for (const [id] of (0, common_1.collectIdentifiers)(ts, p)) {
                 registerLocalBinding(id);
             }
         }

package/lib/plugins/vue-sfc.js

@@ -19,7 +19,7 @@ function create() {
             return await worker(document, context, async (vueCode) => {
                 const formatSettings = await context.env.getConfiguration?.('html.format') ?? {};
                 const blockTypes = ['template', 'script', 'style'];
-                for (const customBlock of vueCode.sfc.customBlocks) {
+                for (const customBlock of vueCode._sfc.customBlocks) {
                     blockTypes.push(customBlock.type);
                 }
                 return {
@@ -66,7 +66,7 @@ function create() {
                 provideDocumentSymbols(document) {
                     return worker(document, context, vueSourceFile => {
                         const result = [];
-                        const descriptor = vueSourceFile.sfc;
+                        const descriptor = vueSourceFile._sfc;
                         if (descriptor.template) {
                             result.push({
                                 name: 'template',

package/lib/plugins/vue-template.js

@@ -19,6 +19,7 @@ function create(mode, ts, getTsPluginClient) {
     let customData = [];
     let extraCustomData = [];
     let lastCompletionComponentNames = new Set();
+    const tsDocumentations = new Map();
     const onDidChangeCustomDataListeners = new Set();
     const onDidChangeCustomData = (listener) => {
         onDidChangeCustomDataListeners.add(listener);
@@ -182,7 +183,7 @@ function create(mode, ts, getTsPluginClient) {
                                     ? tagName
                                     : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
                                 if (checkTag) {
-                                    componentProps[checkTag] ??= await tsPluginClient?.getComponentProps(code.fileName, checkTag, true) ?? [];
+                                    componentProps[checkTag] ??= (await tsPluginClient?.getComponentProps(code.fileName, checkTag, true) ?? []).map(prop => prop.name);
                                     current = {
                                         unburnedRequiredProps: [...componentProps[checkTag]],
                                         labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
@@ -279,7 +280,7 @@ function create(mode, ts, getTsPluginClient) {
                         return;
                     }
                     const templateErrors = [];
-                    const { template } = code.sfc;
+                    const { template } = code._sfc;
                     if (template) {
                         for (const error of template.errors) {
                             onCompilerError(error, 1);
@@ -326,10 +327,10 @@ function create(mode, ts, getTsPluginClient) {
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
                     if (!sourceScript
                         || !(sourceScript.generated?.root instanceof language_core_1.VueVirtualCode)
-                        || !sourceScript.generated.root.sfc.template) {
+                        || !sourceScript.generated.root._sfc.template) {
                         return [];
                     }
-                    const { template } = sourceScript.generated.root.sfc;
+                    const { template } = sourceScript.generated.root._sfc;
                     const spans = common_1.getComponentSpans.call({
                         files: context.language.scripts,
                         languageService,
@@ -357,11 +358,11 @@ function create(mode, ts, getTsPluginClient) {
                 const casing = await (0, nameCasing_1.getNameCasing)(context, sourceDocumentUri);
                 if (builtInData.tags) {
                     for (const tag of builtInData.tags) {
-                        if (isInternalItemId(tag.name)) {
+                        if (isItemKey(tag.name)) {
                             continue;
                         }
                         if (specialTags.has(tag.name)) {
-                            tag.name = createInternalItemId('specialTag', [tag.name]);
+                            tag.name = parseItemKey('specialTag', tag.name, '');
                         }
                         else if (casing.tag === types_1.TagNameCasing.Kebab) {
                             tag.name = (0, language_core_1.hyphenateTag)(tag.name);
@@ -376,6 +377,7 @@ function create(mode, ts, getTsPluginClient) {
                 let version = 0;
                 let components;
                 let templateContextProps;
+                tsDocumentations.clear();
                 updateExtraCustomData([
                     html.newHTMLDataProvider('vue-template-built-in', builtInData),
                     {
@@ -395,8 +397,8 @@ function create(mode, ts, getTsPluginClient) {
                                 })());
                                 return [];
                             }
-                            const scriptSetupRanges = vueCode.sfc.scriptSetup
-                                ? (0, language_core_1.parseScriptSetupRanges)(ts, vueCode.sfc.scriptSetup.ast, vueCompilerOptions)
+                            const scriptSetupRanges = vueCode._sfc.scriptSetup
+                                ? (0, language_core_1.parseScriptSetupRanges)(ts, vueCode._sfc.scriptSetup.ast, vueCompilerOptions)
                                 : undefined;
                             const names = new Set();
                             const tags = [];
@@ -409,7 +411,7 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                             }
                             for (const binding of scriptSetupRanges?.bindings ?? []) {
-                                const name = vueCode.sfc.scriptSetup.content.substring(binding.start, binding.end);
+                                const name = vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end);
                                 if (casing.tag === types_1.TagNameCasing.Kebab) {
                                     names.add((0, language_core_1.hyphenateTag)(name));
                                 }
@@ -430,20 +432,21 @@ function create(mode, ts, getTsPluginClient) {
                             if (!tagInfo) {
                                 promises.push((async () => {
                                     const attrs = await tsPluginClient?.getElementAttrs(vueCode.fileName, tag) ?? [];
-                                    const props = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
+                                    const propsInfo = await tsPluginClient?.getComponentProps(vueCode.fileName, tag) ?? [];
                                     const events = await tsPluginClient?.getComponentEvents(vueCode.fileName, tag) ?? [];
                                     tagInfos.set(tag, {
                                         attrs,
-                                        props: props.filter(prop => !prop.startsWith('ref_')),
+                                        propsInfo: propsInfo.filter(prop => !prop.name.startsWith('ref_')),
                                         events,
                                     });
                                     version++;
                                 })());
                                 return [];
                             }
-                            const { attrs, props, events } = tagInfo;
+                            const { attrs, propsInfo, events } = tagInfo;
+                            const props = propsInfo.map(prop => prop.name);
                             const attributes = [];
-                            const _tsCodegen = language_core_1.tsCodegen.get(vueCode.sfc);
+                            const _tsCodegen = language_core_1.tsCodegen.get(vueCode._sfc);
                             if (_tsCodegen) {
                                 if (!templateContextProps) {
                                     promises.push((async () => {
@@ -453,8 +456,8 @@ function create(mode, ts, getTsPluginClient) {
                                     return [];
                                 }
                                 let ctxVars = [
-                                    ..._tsCodegen.scriptRanges()?.bindings.map(binding => vueCode.sfc.script.content.substring(binding.start, binding.end)) ?? [],
-                                    ..._tsCodegen.scriptSetupRanges()?.bindings.map(binding => vueCode.sfc.scriptSetup.content.substring(binding.start, binding.end)) ?? [],
+                                    ..._tsCodegen.scriptRanges.get()?.bindings.map(binding => vueCode._sfc.script.content.substring(binding.start, binding.end)) ?? [],
+                                    ..._tsCodegen.scriptSetupRanges.get()?.bindings.map(binding => vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end)) ?? [],
                                     ...templateContextProps,
                                 ];
                                 ctxVars = [...new Set(ctxVars)];
@@ -474,7 +477,7 @@ function create(mode, ts, getTsPluginClient) {
                                     const propNameBase = name.startsWith('on-')
                                         ? name.slice('on-'.length)
                                         : (name['on'.length].toLowerCase() + name.slice('onX'.length));
-                                    const propKey = createInternalItemId('componentEvent', [isGlobal ? '*' : tag, propNameBase]);
+                                    const propKey = parseItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
                                     attributes.push({
                                         name: 'v-on:' + propNameBase,
                                         description: propKey,
@@ -485,7 +488,14 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                                 else {
                                     const propName = name;
-                                    const propKey = createInternalItemId('componentProp', [isGlobal ? '*' : tag, propName]);
+                                    const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, propName);
+                                    const propDescription = propsInfo.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);
+                                    }
                                     attributes.push({
                                         name: propName,
                                         description: propKey,
@@ -500,7 +510,7 @@ function create(mode, ts, getTsPluginClient) {
                             }
                             for (const event of events) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? event : (0, language_core_1.hyphenateAttr)(event);
-                                const propKey = createInternalItemId('componentEvent', [tag, name]);
+                                const propKey = parseItemKey('componentEvent', tag, name);
                                 attributes.push({
                                     name: 'v-on:' + name,
                                     description: propKey,
@@ -523,7 +533,7 @@ function create(mode, ts, getTsPluginClient) {
                             }
                             for (const [isGlobal, model] of models) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? model : (0, language_core_1.hyphenateAttr)(model);
-                                const propKey = createInternalItemId('componentProp', [isGlobal ? '*' : tag, name]);
+                                const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, name);
                                 attributes.push({
                                     name: 'v-model:' + name,
                                     description: propKey,
@@ -606,15 +616,19 @@ function create(mode, ts, getTsPluginClient) {
                         }
                     }
                 }
-                const originals = new Map();
+                completionList.items = completionList.items.filter(item => !specialTags.has(parseLabel(item.label).name));
+                const htmlDocumentations = new Map();
                 for (const item of completionList.items) {
-                    if (specialTags.has(item.label)) {
-                        completionList.items = completionList.items.filter(i => i !== item);
+                    const documentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
+                    if (documentation && !isItemKey(documentation) && item.documentation) {
+                        htmlDocumentations.set(item.label, documentation);
                     }
-                    const nameId = readInternalItemId(item.label);
-                    if (nameId) {
-                        const name = nameId.args[0];
-                        item.label = name;
+                }
+                for (const item of completionList.items) {
+                    const resolvedLabelKey = resolveItemKey(item.label);
+                    if (resolvedLabelKey) {
+                        const name = resolvedLabelKey.tag;
+                        item.label = resolvedLabelKey.leadingSlash ? '/' + name : name;
                         if (item.textEdit) {
                             item.textEdit.newText = name;
                         }
@@ -626,32 +640,56 @@ function create(mode, ts, getTsPluginClient) {
                             item.sortText = name;
                         }
                     }
-                    const itemIdKey = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    let itemId = itemIdKey ? readInternalItemId(itemIdKey) : undefined;
-                    if (itemId) {
-                        let [isEvent, name] = tryGetEventName(itemId);
+                    const itemKeyStr = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
+                    let resolvedKey = itemKeyStr ? resolveItemKey(itemKeyStr) : undefined;
+                    if (resolvedKey) {
+                        const documentations = [];
+                        if (tsDocumentations.has(resolvedKey.prop)) {
+                            documentations.push(tsDocumentations.get(resolvedKey.prop));
+                        }
+                        let { isEvent, propName } = getPropName(resolvedKey);
                         if (isEvent) {
-                            name = 'on' + name;
+                            // click -> onclick
+                            propName = 'on' + propName;
+                        }
+                        if (htmlDocumentations.has(propName)) {
+                            documentations.push(htmlDocumentations.get(propName));
+                        }
+                        if (documentations.length) {
+                            item.documentation = {
+                                kind: 'markdown',
+                                value: documentations.join('\n\n'),
+                            };
+                        }
+                        else {
+                            item.documentation = undefined;
                         }
-                        const original = originals.get(name);
-                        item.documentation = original?.documentation;
                     }
                     else {
-                        let name = item.label;
-                        const isVBind = name.startsWith('v-bind:') ? (name = name.slice('v-bind:'.length), true) : false;
-                        const isVBindAbbr = name.startsWith(':') && name !== ':' ? (name = name.slice(':'.length), true) : false;
+                        let propName = item.label;
+                        const isVBind = propName.startsWith('v-bind:') ? (propName = propName.slice('v-bind:'.length), true) : false;
+                        const isVBindAbbr = propName.startsWith(':') && propName !== ':' ? (propName = propName.slice(':'.length), true) : false;
                         /**
                          * for `is`, `key` and `ref` starting with `v-bind:` or `:`
                          * that without `internalItemId`.
                          */
                         if (isVBind || isVBindAbbr) {
-                            itemId = {
+                            resolvedKey = {
                                 type: 'componentProp',
-                                args: ['^', name]
+                                tag: '^',
+                                prop: propName,
+                                leadingSlash: false
                             };
                         }
-                        else if (!originals.has(item.label)) {
-                            originals.set(item.label, item);
+                        if (tsDocumentations.has(propName)) {
+                            const originalDocumentation = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
+                            item.documentation = {
+                                kind: 'markdown',
+                                value: [
+                                    tsDocumentations.get(propName),
+                                    originalDocumentation,
+                                ].filter(str => !!str).join('\n\n'),
+                            };
                         }
                     }
                     const tokens = [];
@@ -659,23 +697,23 @@ function create(mode, ts, getTsPluginClient) {
                         item.kind = 6;
                         tokens.push('\u0000');
                     }
-                    else if (itemId) {
-                        const isComponent = itemId.args[0] !== '*';
-                        const [isEvent, name] = tryGetEventName(itemId);
-                        if (itemId.type === 'componentProp') {
-                            if (isComponent || specialProps.has(name)) {
+                    else if (resolvedKey) {
+                        const isComponent = resolvedKey.tag !== '*';
+                        const { isEvent, propName } = getPropName(resolvedKey);
+                        if (resolvedKey.type === 'componentProp') {
+                            if (isComponent || specialProps.has(propName)) {
                                 item.kind = 5;
                             }
                         }
                         else if (isEvent) {
                             item.kind = 23;
-                            if (name.startsWith('vnode-')) {
+                            if (propName.startsWith('vnode-')) {
                                 tokens.push('\u0004');
                             }
                         }
                         if (isComponent
                             || (isComponent && isEvent)
-                            || specialProps.has(name)) {
+                            || specialProps.has(propName)) {
                             tokens.push('\u0000');
                             if (item.label.startsWith(':')) {
                                 tokens.push('\u0001');
@@ -692,7 +730,7 @@ function create(mode, ts, getTsPluginClient) {
                             else {
                                 tokens.push('\u0000');
                             }
-                            if (specialProps.has(name)) {
+                            if (specialProps.has(propName)) {
                                 tokens.push('\u0001');
                             }
                             else {
@@ -772,18 +810,29 @@ function create(mode, ts, getTsPluginClient) {
     }
 }
 ;
-function createInternalItemId(type, args) {
-    return '__VLS_::' + type + '::' + args.join(',');
+function parseLabel(label) {
+    const leadingSlash = label.startsWith('/');
+    const name = label.slice(leadingSlash ? 1 : 0);
+    return {
+        name,
+        leadingSlash
+    };
+}
+function parseItemKey(type, tag, prop) {
+    return '__VLS_data=' + type + ',' + tag + ',' + prop;
 }
-function isInternalItemId(key) {
-    return key.startsWith('__VLS_::');
+function isItemKey(key) {
+    return key.startsWith('__VLS_data=');
 }
-function readInternalItemId(key) {
-    if (isInternalItemId(key)) {
-        const strs = key.split('::');
+function resolveItemKey(key) {
+    const { leadingSlash, name } = parseLabel(key);
+    if (isItemKey(name)) {
+        const strs = name.slice('__VLS_data='.length).split(',');
         return {
-            type: strs[1],
-            args: strs[2].split(','),
+            type: strs[0],
+            tag: strs[1],
+            prop: strs[2],
+            leadingSlash
         };
     }
 }
@@ -798,14 +847,14 @@ function getReplacement(list, doc) {
         }
     }
 }
-function tryGetEventName(itemId) {
-    const name = (0, language_core_1.hyphenateAttr)(itemId.args[1]);
+function getPropName(itemKey) {
+    const name = (0, language_core_1.hyphenateAttr)(itemKey.prop);
     if (name.startsWith('on-')) {
-        return [true, name.slice('on-'.length)];
+        return { isEvent: true, propName: name.slice('on-'.length) };
     }
-    else if (itemId.type === 'componentEvent') {
-        return [true, name];
+    else if (itemKey.type === 'componentEvent') {
+        return { isEvent: true, propName: name };
     }
-    return [false, name];
+    return { isEvent: false, propName: name };
 }
 //# sourceMappingURL=vue-template.js.map

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@vue/language-service",
-	"version": "2.1.5",
+	"version": "2.1.8",
 	"license": "MIT",
 	"files": [
 		"data",
 		"**/*.js",
 		"**/*.d.ts"
 	],
+	"sideEffects": false,
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/vuejs/language-tools.git",
@@ -16,14 +17,14 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-core": "~2.4.1",
-		"@volar/language-service": "~2.4.1",
-		"@volar/typescript": "~2.4.1",
-		"@vue/compiler-dom": "^3.4.0",
-		"@vue/language-core": "2.1.5",
-		"@vue/shared": "^3.4.0",
-		"@vue/typescript-plugin": "2.1.5",
-		"computeds": "^0.0.1",
+		"@volar/language-core": "~2.4.8",
+		"@volar/language-service": "~2.4.8",
+		"@volar/typescript": "~2.4.8",
+		"@vue/compiler-dom": "^3.5.0",
+		"@vue/language-core": "2.1.8",
+		"@vue/shared": "^3.5.0",
+		"@vue/typescript-plugin": "2.1.8",
+		"alien-signals": "^0.2.0",
 		"path-browserify": "^1.0.1",
 		"volar-service-css": "0.0.62",
 		"volar-service-emmet": "0.0.62",
@@ -40,8 +41,8 @@
 	"devDependencies": {
 		"@types/node": "latest",
 		"@types/path-browserify": "latest",
-		"@volar/kit": "~2.4.1",
+		"@volar/kit": "~2.4.8",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "a95b51ac0b0db8825f77fbba37e29932b5be61e4"
+	"gitHead": "25cccedc53e7361ed4e34296d6ecd43d7de2a095"
 }