diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index d80c4bdc89..2dbaad4e41 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,24 +1,24 @@ -name: release - -on: - workflow_dispatch: - push: - tags: - - '*' - -jobs: - release: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - uses: actions/setup-node@v3 - with: - node-version: 18 - - - run: npm i -g pnpm ovsx - - run: pnpm install --frozen-lockfile --no-optional - - run: pnpm run build:minify && pnpm ovsx publish - working-directory: packages/vscode-vue - env: - OVSX_PAT: ${{ secrets.OVSX_PAT }} +name: release + +on: + workflow_dispatch: + push: + tags: + - '*' + +jobs: + release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - uses: actions/setup-node@v3 + with: + node-version: 18 + + - run: npm i -g pnpm ovsx + - run: pnpm install --frozen-lockfile --no-optional + - run: pnpm run build:minify && pnpm ovsx publish + working-directory: packages/vscode-vue + env: + OVSX_PAT: ${{ secrets.OVSX_PAT }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index b527984ec3..16c56f62a5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,27 +1,27 @@ -name: testing - -on: [push, pull_request] - -jobs: - build: - runs-on: ${{ matrix.os }} - - strategy: - matrix: - node-version: [16.x] - os: [macos-latest, windows-latest, ubuntu-latest] - - steps: - - uses: actions/checkout@v2 - - # install node - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - # install pnpm - - run: npm i -g pnpm - - run: pnpm install --frozen-lockfile --no-optional - - run: pnpm run build-ci - - run: pnpm run test +name: testing + +on: [push, pull_request] + +jobs: + build: + runs-on: ${{ matrix.os }} + + strategy: + matrix: + node-version: [16.x] + os: [macos-latest, windows-latest, ubuntu-latest] + + steps: + - uses: actions/checkout@v2 + + # install node + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + + # install pnpm + - run: npm i -g pnpm + - run: pnpm install --frozen-lockfile --no-optional + - run: pnpm run build-ci + - run: pnpm run test diff --git a/CHANGELOG.md b/CHANGELOG.md index f381e7d174..023683d449 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,9 @@ # Changelog -## 1.8.2 (2023/6/27) +## 1.8.3 (2023/6/28) -- fix: should not auto closing `` tag ([#3217](https://github.com/vuejs/language-tools/issues/3217)) -- fix: allow passing undefined as events ([#3122](https://github.com/vuejs/language-tools/issues/3122)) ([#3217](https://github.com/vuejs/language-tools/issues/3217)) - thanks @so1ve -- fix: fixes object literal parsing for ([#3324](https://github.com/vuejs/language-tools/issues/3324)) ([#3171](https://github.com/vuejs/language-tools/issues/3171)) - thanks @so1ve -- fix: symbol types are lost ([#3300](https://github.com/vuejs/language-tools/issues/3300)) ([#3295](https://github.com/vuejs/language-tools/issues/3295)) - thanks @so1ve -- fix(ts-plugin): suppress errors when `composite` is enabled `composite` -- fix(language-server): trigger characters missing on web IDE -- perf(language-server): debounce for `isCancellationRequested()` -- perf(typescript): caching `getScriptFileNames()` result - -**Breaking changes** - -- no longer parse vue files outside tsconfig `include` option to avoid TS performance concerns ([#3326](https://github.com/vuejs/language-tools/issues/3326)) +- fix(ts-plugin): tsserver crashes when import > 4MB .vue file ([#3332](https://github.com/vuejs/language-tools/issues/3332)) +- fix(language-server): in specific os `fileExists()` throws ([#3336](https://github.com/vuejs/language-tools/issues/3336)) --- @@ -51,6 +41,21 @@

+## 1.8.2 (2023/6/27) + +- fix: should not auto closing `` tag ([#3217](https://github.com/vuejs/language-tools/issues/3217)) +- fix: allow passing undefined as events ([#3122](https://github.com/vuejs/language-tools/issues/3122)) ([#3217](https://github.com/vuejs/language-tools/issues/3217)) - thanks @so1ve +- fix: fixes object literal parsing for ([#3324](https://github.com/vuejs/language-tools/issues/3324)) ([#3171](https://github.com/vuejs/language-tools/issues/3171)) - thanks @so1ve +- fix: symbol types are lost ([#3300](https://github.com/vuejs/language-tools/issues/3300)) ([#3295](https://github.com/vuejs/language-tools/issues/3295)) - thanks @so1ve +- fix(ts-plugin): suppress errors when `composite` is enabled +- fix(language-server): trigger characters missing on web IDE +- perf(language-server): debounce for `isCancellationRequested()` +- perf(typescript): caching `getScriptFileNames()` result + +**Breaking changes** + +- no longer parse vue files outside tsconfig `include` option to avoid TS performance concerns ([#3326](https://github.com/vuejs/language-tools/issues/3326)) + ## 1.8.1 (2023/6/20) - fix(language-server): 3 consecutive directories with the same name cause infinite recursion ([#3282](https://github.com/vuejs/language-tools/issues/3282)) - thanks @FelipeAzambuja @@ -59,7 +64,7 @@ - types: simplify `__VLS_IsAny` - thanks @so1ve - perf(ts-plugin): work without overriding language service instance to reduce half of memory usage ([#3221](https://github.com/vuejs/language-tools/issues/3221)) -## 1.8.0 (2023/6/17) ([Highlights](https://github.com/vuejs/language-tools/releases/tag/v1.8.0)) +## 1.8.0 (2023/6/17) ([Release notes](https://github.com/vuejs/language-tools/releases/tag/v1.8.0)) ## 1.7.14 (2023/6/16) - pre-release diff --git a/lerna.json b/lerna.json index a0ab65aea2..0728e23c03 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages": [ "packages/*" ], - "version": "1.8.2" + "version": "1.8.3" } diff --git a/package.json b/package.json index 019644048e..ee22bd03c1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@types/node": "latest", - "@volar/language-service": "1.7.9", + "@volar/language-service": "1.8.0", "typescript": "latest", "vite": "latest", "vitest": "latest" diff --git a/packages/typescript-vue-plugin/package.json b/packages/typescript-vue-plugin/package.json index 680a345ec2..7bfc0809b7 100644 --- a/packages/typescript-vue-plugin/package.json +++ b/packages/typescript-vue-plugin/package.json @@ -1,6 +1,6 @@ { "name": "typescript-vue-plugin", - "version": "1.8.2", + "version": "1.8.3", "main": "out/index.js", "license": "MIT", "files": [ @@ -13,8 +13,8 @@ "directory": "packages/typescript-vue-plugin" }, "dependencies": { - "@vue/language-core": "1.8.2", - "@vue/typescript": "1.8.2", + "@vue/language-core": "1.8.3", + "@vue/typescript": "1.8.3", "vscode-uri": "^3.0.7" } } diff --git a/packages/vscode-typescript-vue-plugin/package.json b/packages/vscode-typescript-vue-plugin/package.json index f000a5b782..916b8ca6d8 100644 --- a/packages/vscode-typescript-vue-plugin/package.json +++ b/packages/vscode-typescript-vue-plugin/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "vscode-typescript-vue-plugin", - "version": "1.8.2", + "version": "1.8.3", "repository": { "type": "git", "url": "https://github.com/vuejs/language-tools.git", @@ -21,27 +21,23 @@ "contributes": { "typescriptServerPlugins": [ { - "name": "typescript-vue-plugin-forward", + "name": "typescript-vue-plugin-bundle", "enableForWorkspaceTypeScriptVersions": true } ] }, "scripts": { - "vscode:prepublish": "npm run build && sed -i '' '/\"typescript-vue-plugin-forward\": \"file:typescript-vue-plugin-forward\"/d' package.json", + "vscode:prepublish": "npm run build", "prebuild": "cd ../.. && npm run build", "build": "node scripts/build", "watch": "node scripts/build --watch", - "pack": "vsce package && npm run reset", - "release": "vsce publish && npm run reset", - "release:next": "vsce publish --pre-release && npm run reset", - "reset": "git checkout package.json" - }, - "dependencies": { - "typescript-vue-plugin-forward": "file:typescript-vue-plugin-forward" + "pack": "vsce package", + "release": "vsce publish", + "release:next": "vsce publish --pre-release" }, "devDependencies": { "esbuild": "0.15.18", - "typescript-vue-plugin": "1.8.2", + "typescript-vue-plugin": "1.8.3", "vsce": "latest" } } diff --git a/packages/vscode-typescript-vue-plugin/scripts/build.js b/packages/vscode-typescript-vue-plugin/scripts/build.js index 3c8ff730d8..859ceb2685 100644 --- a/packages/vscode-typescript-vue-plugin/scripts/build.js +++ b/packages/vscode-typescript-vue-plugin/scripts/build.js @@ -1,7 +1,7 @@ require('esbuild').build({ entryPoints: ['./node_modules/typescript-vue-plugin/out/index.js'], bundle: true, - outfile: './dist/index.js', + outfile: './node_modules/typescript-vue-plugin-bundle/index.js', external: [ 'vscode', 'typescript', // vue-component-meta diff --git a/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/index.js b/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/index.js deleted file mode 100644 index 3623dfc563..0000000000 --- a/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/index.js +++ /dev/null @@ -1,3 +0,0 @@ -let modulePath = '../../dist'; -try { modulePath = require.resolve('../typescript-vue-plugin'); } catch { } -module.exports = require(modulePath); diff --git a/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/package.json b/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/package.json deleted file mode 100644 index d2ec51889c..0000000000 --- a/packages/vscode-typescript-vue-plugin/typescript-vue-plugin-forward/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "typescript-vue-plugin-forward", - "version": "0.0.0" -} diff --git a/packages/vscode-vue/package.json b/packages/vscode-vue/package.json index a529aaa0c6..907e85a2d7 100644 --- a/packages/vscode-vue/package.json +++ b/packages/vscode-vue/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "volar", - "version": "1.8.2", + "version": "1.8.3", "repository": { "type": "git", "url": "https://github.com/vuejs/language-tools.git", @@ -733,9 +733,9 @@ "devDependencies": { "@types/semver": "^7.3.13", "@types/vscode": "1.67.0", - "@volar/vscode": "1.7.9", - "@vue/language-core": "1.8.2", - "@vue/language-server": "1.8.2", + "@volar/vscode": "1.8.0", + "@vue/language-core": "1.8.3", + "@vue/language-server": "1.8.3", "esbuild": "0.15.18", "esbuild-plugin-copy": "latest", "esbuild-visualizer": "latest", diff --git a/packages/vue-component-meta/package.json b/packages/vue-component-meta/package.json index 3f8b55510d..0886114b6c 100644 --- a/packages/vue-component-meta/package.json +++ b/packages/vue-component-meta/package.json @@ -1,6 +1,6 @@ { "name": "vue-component-meta", - "version": "1.8.2", + "version": "1.8.3", "main": "out/index.js", "license": "MIT", "files": [ @@ -13,10 +13,10 @@ "directory": "packages/vue-component-meta" }, "dependencies": { - "@volar/typescript": "1.7.9", - "@vue/language-core": "1.8.2", + "@volar/typescript": "1.8.0", + "@vue/language-core": "1.8.3", "typesafe-path": "^0.2.2", - "vue-component-type-helpers": "1.8.2" + "vue-component-type-helpers": "1.8.3" }, "peerDependencies": { "typescript": "*" diff --git a/packages/vue-component-meta/src/index.ts b/packages/vue-component-meta/src/index.ts index 2e68536e4c..c123391d78 100644 --- a/packages/vue-component-meta/src/index.ts +++ b/packages/vue-component-meta/src/index.ts @@ -69,7 +69,7 @@ function createComponentMetaCheckerWorker( const scriptSnapshots = new Map(); const _host: vue.TypeScriptLanguageHost = { getCurrentDirectory: () => rootPath, - getProjectVersion: () => projectVersion, + getProjectVersion: () => projectVersion.toString(), getCompilationSettings: () => parsedCommandLine.options, getScriptFileNames: () => fileNames, getProjectReferences: () => parsedCommandLine.projectReferences, diff --git a/packages/vue-component-type-helpers/package.json b/packages/vue-component-type-helpers/package.json index 0b9b130e37..66524b2d4c 100644 --- a/packages/vue-component-type-helpers/package.json +++ b/packages/vue-component-type-helpers/package.json @@ -1,6 +1,6 @@ { "name": "vue-component-type-helpers", - "version": "1.8.2", + "version": "1.8.3", "license": "MIT", "files": [ "*.js", diff --git a/packages/vue-language-core/package.json b/packages/vue-language-core/package.json index 532aa8d756..f2170875ca 100644 --- a/packages/vue-language-core/package.json +++ b/packages/vue-language-core/package.json @@ -1,6 +1,6 @@ { "name": "@vue/language-core", - "version": "1.8.2", + "version": "1.8.3", "main": "out/index.js", "license": "MIT", "files": [ @@ -13,8 +13,8 @@ "directory": "packages/vue-language-core" }, "dependencies": { - "@volar/language-core": "1.7.9", - "@volar/source-map": "1.7.9", + "@volar/language-core": "1.8.0", + "@volar/source-map": "1.8.0", "@vue/compiler-dom": "^3.3.0", "@vue/reactivity": "^3.3.0", "@vue/shared": "^3.3.0", diff --git a/packages/vue-language-plugin-pug/package.json b/packages/vue-language-plugin-pug/package.json index 4ad77f617c..e8357087bd 100644 --- a/packages/vue-language-plugin-pug/package.json +++ b/packages/vue-language-plugin-pug/package.json @@ -1,6 +1,6 @@ { "name": "@vue/language-plugin-pug", - "version": "1.8.2", + "version": "1.8.3", "main": "out/index.js", "license": "MIT", "files": [ @@ -13,10 +13,10 @@ "directory": "packages/vue-language-plugin-pug" }, "devDependencies": { - "@vue/language-core": "1.8.2" + "@vue/language-core": "1.8.3" }, "dependencies": { - "@volar/source-map": "1.7.9", - "volar-service-pug": "0.0.8" + "@volar/source-map": "1.8.0", + "volar-service-pug": "0.0.9" } } diff --git a/packages/vue-language-server/package.json b/packages/vue-language-server/package.json index 46d07693eb..3cd5d6e0c5 100644 --- a/packages/vue-language-server/package.json +++ b/packages/vue-language-server/package.json @@ -1,6 +1,6 @@ { "name": "@vue/language-server", - "version": "1.8.2", + "version": "1.8.3", "main": "out/index.js", "license": "MIT", "files": [ @@ -16,12 +16,12 @@ "directory": "packages/vue-language-server" }, "dependencies": { - "@volar/language-core": "1.7.9", - "@volar/language-server": "1.7.9", - "@volar/typescript": "1.7.9", - "@vue/language-core": "1.8.2", - "@vue/language-service": "1.8.2", + "@volar/language-core": "1.8.0", + "@volar/language-server": "1.8.0", + "@volar/typescript": "1.8.0", + "@vue/language-core": "1.8.3", + "@vue/language-service": "1.8.3", "vscode-languageserver-protocol": "^3.17.3", - "vue-component-meta": "1.8.2" + "vue-component-meta": "1.8.3" } } diff --git a/packages/vue-language-service/data/template/fr.json b/packages/vue-language-service/data/template/fr.json index fc8700095d..fd5be6b8db 100644 --- a/packages/vue-language-service/data/template/fr.json +++ b/packages/vue-language-service/data/template/fr.json @@ -5,7 +5,7 @@ "name": "Transition", "description": { "kind": "markdown", - "value": "\nFournit des effets de transition animés à **un seul** élément ou composant.\n\n- **Props :**\n\n ```ts\n interface TransitionProps {\n /**\n * Utilisé pour générer automatiquement des noms de classe pour les transitions CSS\n * par exemple `name: 'fade'` s'étendra automatiquement à `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * S'il faut appliquer les classes de transition CSS ou non\n * Default: true\n */\n css?: boolean\n /**\n * Spécifie le type d'événements de transition à attendre pour\n * déterminer le moment de la fin de la transition.\n * Le comportement par défaut consiste à détecter automatiquement le type qui a\n * la plus longue durée.\n */\n type?: 'transition' | 'animation'\n /**\n * Spécifie les durées explicites de la transition.\n * Le comportement par défaut consiste à attendre le premier événement `transitionend`.\n * ou `animationend` sur l'élément de transition racine.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Contrôle la séquence temporelle des transitions de sortie/entrée.\n * Simultané par défaut.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Si la transition doit être appliquée au rendu initial ou non.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props pour la personnaliser les classes de transition.\n * Utilisez kebab-case dans les templates, par exemple 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- **Événements :**\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- **Exemple :**\n\n Élément simple :\n\n ```html\n \n
toggled content
\n \n ```\n\n Transition forcée en modifiant l'attribut `key` :\n \n ```html\n \n
{{ text }}
\n \n ```\n\n Composant dynamique, avec mode de transition + animation à l'apparition :\n\n ```html\n \n \n \n ```\n\n Écoute des événements de transition :\n\n ```html\n \n
toggled content
\n \n ```\n\n- **Voir aussi :** [Guide sur ``](https://fr.vuejs.org/guide/built-ins/transition.html)\n" + "value": "\nFournit des effets de transition animés à **un seul** élément ou composant.\n\n- **Props :**\n\n ```ts\n interface TransitionProps {\n /**\n * Utilisé pour générer automatiquement des noms de classe pour les transitions CSS\n * par exemple `name: 'fade'` s'étendra automatiquement à `.fade-enter`,\n * `.fade-enter-active`, etc.\n */\n name?: string\n /**\n * S'il faut appliquer les classes de transition CSS ou non\n * Default: true\n */\n css?: boolean\n /**\n * Spécifie le type d'événements de transition à attendre pour\n * déterminer le moment de la fin de la transition.\n * Le comportement par défaut consiste à détecter automatiquement le type qui a\n * la plus longue durée.\n */\n type?: 'transition' | 'animation'\n /**\n * Spécifie les durées explicites de la transition.\n * Le comportement par défaut consiste à attendre le premier événement `transitionend`.\n * ou `animationend` sur l'élément de transition racine.\n */\n duration?: number | { enter: number; leave: number }\n /**\n * Contrôle la séquence temporelle des transitions de sortie/entrée.\n * Simultané par défaut.\n */\n mode?: 'in-out' | 'out-in' | 'default'\n /**\n * Si la transition doit être appliquée au rendu initial ou non.\n * Default: false\n */\n appear?: boolean\n\n /**\n * Props pour la personnaliser les classes de transition.\n * Utilisez kebab-case dans les templates, par exemple 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- **Événements :**\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- **Exemple**\n\n Élément simple :\n\n ```html\n \n
toggled content
\n \n ```\n\n Transition forcée en modifiant l'attribut `key` :\n \n ```html\n \n
{{ text }}
\n \n ```\n\n Composant dynamique, avec mode de transition + animation à l'apparition :\n\n ```html\n \n \n \n ```\n\n Écoute des événements de transition :\n\n ```html\n \n
toggled content
\n \n ```\n\n- **Voir aussi** [Guide sur ``](https://fr.vuejs.org/guide/built-ins/transition.html)\n" }, "attributes": [], "references": [ @@ -39,7 +39,7 @@ "name": "TransitionGroup", "description": { "kind": "markdown", - "value": "\nFournit des effets de transition pour de **multiples** éléments ou composants dans une liste.\n\n- **Props :**\n\n `` accepte les mêmes props que `` à l'exception de `mode`, plus deux props additionnelles :\n\n ```ts\n interface TransitionGroupProps extends Omit {\n /**\n * S'il n'est pas défini, le rendu sera un fragment.\n */\n tag?: string\n /**\n * Pour personnaliser la classe CSS appliquée lors des transitions de mouvement.\n * Utilisez kebab-case dans les templates, par exemple move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Événements :**\n\n `` émet les mêmes événements que ``.\n\n- **Détails :**\n\n Par défaut, `` ne rend pas d'élément du DOM en enveloppant d'autres, mais on peut en définir un via la prop `tag`.\n\n Notez que chaque enfant d'un `` doit avoir une [**clé unique**](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) pour que les animations fonctionnent correctement.\n\n `` prend en charge les transitions de mouvement via une transformation CSS. Lorsque la position d'un enfant à l'écran a changé après une mise à jour, il se verra appliquer une classe CSS de mouvement (générée automatiquement à partir de l'attribut `name` ou configurée avec la prop `move-class`). Si la propriété CSS `transform` est \"transition-able\" lorsque la classe de mouvement est appliquée, l'élément sera animé en douceur vers sa destination en utilisant la [technique FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemple :**\n\n ```html\n \n
  • \n {{ item.text }}\n
    • \n     \n ```\n\n- **Voir aussi :** [Guide - TransitionGroup](https://fr.vuejs.org/guide/built-ins/transition-group.html)\n" + "value": "\nFournit des effets de transition pour de **multiples** éléments ou composants dans une liste.\n\n- **Props :**\n\n `` accepte les mêmes props que `` à l'exception de `mode`, plus deux props additionnelles :\n\n ```ts\n interface TransitionGroupProps extends Omit {\n /**\n * S'il n'est pas défini, le rendu sera un fragment.\n */\n tag?: string\n /**\n * Pour personnaliser la classe CSS appliquée lors des transitions de mouvement.\n * Utilisez kebab-case dans les templates, par exemple move-class=\"xxx\"\n */\n moveClass?: string\n }\n ```\n\n- **Événements :**\n\n `` émet les mêmes événements que ``.\n\n- **Détails**\n\n Par défaut, `` ne rend pas d'élément du DOM en enveloppant d'autres, mais on peut en définir un via la prop `tag`.\n\n Notez que chaque enfant d'un `` doit avoir une [**clé unique**](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) pour que les animations fonctionnent correctement.\n\n `` prend en charge les transitions de mouvement via une transformation CSS. Lorsque la position d'un enfant à l'écran a changé après une mise à jour, il se verra appliquer une classe CSS de mouvement (générée automatiquement à partir de l'attribut `name` ou configurée avec la prop `move-class`). Si la propriété CSS `transform` est \"transition-able\" lorsque la classe de mouvement est appliquée, l'élément sera animé en douceur vers sa destination en utilisant la [technique FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemple**\n\n ```html\n \n
  • \n {{ item.text }}\n
    • \n     \n ```\n\n- **Voir aussi** [Guide - TransitionGroup](https://fr.vuejs.org/guide/built-ins/transition-group.html)\n" }, "attributes": [], "references": [ @@ -73,7 +73,7 @@ "name": "KeepAlive", "description": { "kind": "markdown", - "value": "\nMet en cache les composants activés dynamiquement qui y sont imbriqués.\n\n- **Props :**\n\n ```ts\n interface KeepAliveProps {\n /**\n * Si spécifié, seuls les composants dont les noms correspondent à \n * `include` seront mis en cache.\n */\n include?: MatchPattern\n /**\n * Un composant avec un nom ne correspondant pas à `exclude` ne sera\n * pas mis en cache.\n */\n exclude?: MatchPattern\n /**\n * Le nombre maximum d'instances de composant à mettre en cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Détails :**\n\n Lorsqu'il enveloppe un composant dynamique, `` met en cache les instances inactives du composant sans les détruire.\n\n Il ne peut y avoir qu'une seule instance de composant active comme enfant direct de `` à un moment donné.\n\nLorsqu'un composant est activé/désactivé à l'intérieur de ``, ses hooks de cycle de vie `activated` et `deactivated` seront invoqués en conséquence, fournissant une alternative à `mounted` et `unmounted`, qui ne sont pas appelés. Ceci s'applique à l'enfant direct de `` ainsi qu'à tous ses descendants.\n\n- **Exemple :**\n\n Utilisation basique :\n\n ```html\n \n \n \n ```\n\n Lorsqu'il est utilisé avec les branches `v-if` / `v-else`, il ne doit y avoir qu'un seul composant rendu à la fois :\n\n ```html\n \n 1\">\n \n \n ```\n\n Utilisé en combinaison avec `` :\n\n ```html\n \n \n \n \n \n ```\n\n En utilisant `include` / `exclude` :\n\n ```html\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n ```\n\n Utilisation avec `max` :\n\n ```html\n \n \n \n ```\n\n- **Voir aussi :** [Guide - KeepAlive](https://fr.vuejs.org/guide/built-ins/keep-alive.html)\n" + "value": "\nMet en cache les composants activés dynamiquement qui y sont imbriqués.\n\n- **Props :**\n\n ```ts\n interface KeepAliveProps {\n /**\n * Si spécifié, seuls les composants dont les noms correspondent à \n * `include` seront mis en cache.\n */\n include?: MatchPattern\n /**\n * Un composant avec un nom ne correspondant pas à `exclude` ne sera\n * pas mis en cache.\n */\n exclude?: MatchPattern\n /**\n * Le nombre maximum d'instances de composant à mettre en cache.\n */\n max?: number | string\n }\n\n type MatchPattern = string | RegExp | (string | RegExp)[]\n ```\n\n- **Détails**\n\n Lorsqu'il enveloppe un composant dynamique, `` met en cache les instances inactives du composant sans les détruire.\n\n Il ne peut y avoir qu'une seule instance de composant active comme enfant direct de `` à un moment donné.\n\nLorsqu'un composant est activé/désactivé à l'intérieur de ``, ses hooks de cycle de vie `activated` et `deactivated` seront invoqués en conséquence, fournissant une alternative à `mounted` et `unmounted`, qui ne sont pas appelés. Ceci s'applique à l'enfant direct de `` ainsi qu'à tous ses descendants.\n\n- **Exemple**\n\n Utilisation basique :\n\n ```html\n \n \n \n ```\n\n Lorsqu'il est utilisé avec les branches `v-if` / `v-else`, il ne doit y avoir qu'un seul composant rendu à la fois :\n\n ```html\n \n 1\">\n \n \n ```\n\n Utilisé en combinaison avec `` :\n\n ```html\n \n \n \n \n \n ```\n\n En utilisant `include` / `exclude` :\n\n ```html\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n ```\n\n Utilisation avec `max` :\n\n ```html\n \n \n \n ```\n\n- **Voir aussi** [Guide - KeepAlive](https://fr.vuejs.org/guide/built-ins/keep-alive.html)\n" }, "attributes": [], "references": [ @@ -107,7 +107,7 @@ "name": "Teleport", "description": { "kind": "markdown", - "value": "\nRend le contenu de son slot à une autre partie du DOM.\n\n- **Props :**\n\n ```ts\n interface TeleportProps {\n /**\n * Requis. Spécifie le conteneur cible.\n * Peut être un sélecteur ou un élément.\n */\n to: string | HTMLElement\n /**\n * S'il vaut `true`, le contenu restera à son emplacement\n * original au lieu d'être déplacé dans le conteneur cible.\n * Peut être changé de manière dynamique.\n */\n disabled?: boolean\n }\n ```\n\n- **Exemple :**\n\n En spécifiant le conteneur cible :\n\n ```html\n \n \n \n ```\n\n En le désactivant de manière conditionnelle :\n\n ```html\n \n \n ```\n\n- **Voir aussi :** [Guide - Teleport](https://fr.vuejs.org/guide/built-ins/teleport.html)\n" + "value": "\nRend le contenu de son slot à une autre partie du DOM.\n\n- **Props :**\n\n ```ts\n interface TeleportProps {\n /**\n * Requis. Spécifie le conteneur cible.\n * Peut être un sélecteur ou un élément.\n */\n to: string | HTMLElement\n /**\n * S'il vaut `true`, le contenu restera à son emplacement\n * original au lieu d'être déplacé dans le conteneur cible.\n * Peut être changé de manière dynamique.\n */\n disabled?: boolean\n }\n ```\n\n- **Exemple**\n\n En spécifiant le conteneur cible :\n\n ```html\n \n \n \n ```\n\n En le désactivant de manière conditionnelle :\n\n ```html\n \n \n ```\n\n- **Voir aussi** [Guide - Teleport](https://fr.vuejs.org/guide/built-ins/teleport.html)\n" }, "attributes": [], "references": [ @@ -141,7 +141,7 @@ "name": "Suspense", "description": { "kind": "markdown", - "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Événements :**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Détails :**\n\n `` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n- **Voir aussi :** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n" + "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n ```ts\n interface SuspenseProps {\n timeout?: string | number\n }\n ```\n\n- **Événements :**\n\n - `@resolve`\n - `@pending`\n - `@fallback`\n\n- **Détails**\n\n `` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n- **Voir aussi** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n" }, "attributes": [], "references": [ @@ -175,7 +175,7 @@ "name": "component", "description": { "kind": "markdown", - "value": "\nUn \"méta-composant\" pour rendre des composants ou éléments dynamiques.\n\n- **Props :**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Détails :**\n\n Le composant à rendre est déterminé par la propriété \"is\".\n\n - Lorsque `is` est une chaîne de caractères, il peut s'agir du nom d'une balise HTML ou du nom d'un composant enregistré.\n\n - De manière alternative, `is` peut également être directement lié à la définition d'un composant.\n\n- **Exemple :**\n\n Rendu des composants par nom d'enregistrement (Options API) :\n\n ```vue\n \n\n \n ```\n\n Rendu de composants par définition (Composition API avec `\n\n \n ```\n\n Rendu d'éléments HTML :\n\n ```html\n \n ```\n\n Les [composants natifs](./built-in-components) peuvent tous être passés à `is`, mais vous devez les enregistrer si vous voulez les passer par leur nom. Par exemple :\n\n ```vue\n \n\n \n ```\n\n L'enregistrement n'est pas nécessaire si vous passez directement le composant à `is` plutôt que son nom, par exemple dans `\n\n \n ```\n\n En pratique, ce cas de figure n'est pas courant car les champs de formulaire natifs sont généralement enveloppés dans des composants dans les applications réelles. Si vous avez besoin d'utiliser directement un élément natif, vous pouvez diviser manuellement le \"v-model\" en un attribut et un événement.\n\n- **Voir aussi :** [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n" + "value": "\nUn \"méta-composant\" pour rendre des composants ou éléments dynamiques.\n\n- **Props :**\n\n ```ts\n interface DynamicComponentProps {\n is: string | Component\n }\n ```\n\n- **Détails**\n\n Le composant à rendre est déterminé par la propriété \"is\".\n\n - Lorsque `is` est une chaîne de caractères, il peut s'agir du nom d'une balise HTML ou du nom d'un composant enregistré.\n\n - De manière alternative, `is` peut également être directement lié à la définition d'un composant.\n\n- **Exemple**\n\n Rendu des composants par nom d'enregistrement (Options API) :\n\n ```vue\n \n\n \n ```\n\n Rendu de composants par définition (Composition API avec `\n\n \n ```\n\n Rendu d'éléments HTML :\n\n ```html\n \n ```\n\n Les [composants natifs](./built-in-components) peuvent tous être passés à `is`, mais vous devez les enregistrer si vous voulez les passer par leur nom. Par exemple :\n\n ```vue\n \n\n \n ```\n\n L'enregistrement n'est pas nécessaire si vous passez directement le composant à `is` plutôt que son nom, par exemple dans `\n\n \n ```\n\n En pratique, ce cas de figure n'est pas courant car les champs de formulaire natifs sont généralement enveloppés dans des composants dans les applications réelles. Si vous avez besoin d'utiliser directement un élément natif, vous pouvez diviser manuellement le \"v-model\" en un attribut et un événement.\n\n- **Voir aussi** [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n" }, "attributes": [], "references": [ @@ -209,7 +209,7 @@ "name": "slot", "description": { "kind": "markdown", - "value": "\nIndique l'emplacement du contenu d'un slot dans les templates.\n\n- **Props :**\n\n ```ts\n interface SlotProps {\n /**\n * Toutes les props passées à à passer comme arguments\n * aux slots scopés\n */\n [key: string]: any\n /**\n * Réservé pour spécifier le nom du slot.\n */\n name?: string\n }\n ```\n\n- **Détails :**\n\n L'élément `` peut utiliser l'attribut `name` pour spécifier un nom de slot. Si aucun `name` n'est spécifié, l'élément rendra le slot par défaut. Les attributs supplémentaires passés à l'élément slot seront passés comme des props de slot au slot scopé défini dans le parent.\n\n L'élément lui-même sera remplacé par le contenu du slot correspondant.\n\n Les éléments `` dans les templates Vue sont compilés en JavaScript, ils ne doivent donc pas être confondus avec les [éléments `` natifs](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot).\n\n- **Voir aussi :** [Composant - Slots](https://fr.vuejs.org/guide/components/slots.html)\n" + "value": "\nIndique l'emplacement du contenu d'un slot dans les templates.\n\n- **Props :**\n\n ```ts\n interface SlotProps {\n /**\n * Toutes les props passées à à passer comme arguments\n * aux slots scopés\n */\n [key: string]: any\n /**\n * Réservé pour spécifier le nom du slot.\n */\n name?: string\n }\n ```\n\n- **Détails**\n\n L'élément `` peut utiliser l'attribut `name` pour spécifier un nom de slot. Si aucun `name` n'est spécifié, l'élément rendra le slot par défaut. Les attributs supplémentaires passés à l'élément slot seront passés comme des props de slot au slot scopé défini dans le parent.\n\n L'élément lui-même sera remplacé par le contenu du slot correspondant.\n\n Les éléments `` dans les templates Vue sont compilés en JavaScript, ils ne doivent donc pas être confondus avec les [éléments `` natifs](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot).\n\n- **Voir aussi** [Composant - Slots](https://fr.vuejs.org/guide/components/slots.html)\n" }, "attributes": [], "references": [ @@ -243,7 +243,7 @@ "name": "template", "description": { "kind": "markdown", - "value": "\nLa balise `