DevTools

@vue-dnd-kit/devtools ajoute un onglet Vue DnD Kit aux Vue DevTools (vite-plugin-vue-devtools) et aux Nuxt DevTools. Il montre chaque liste, arbre et cible de dépôt de la page dans une mini-carte en direct, fait glisser n'importe quel item avec un joystick, modifie les options pendant que l'application tourne, et journalise ce que chaque glissement a fait. Il ne fonctionne qu'en développement : rien n'en arrive dans un build de production.

L'onglet est une page à part entière, servie par votre serveur de développement à côté de votre application : il ne peut donc pas tourner dans cette documentation. Trois étapes suffisent à le mettre en place.

Installation

1. Ajouter les paquets

npm i -D @vue-dnd-kit/devtools @vue-dnd-kit/actions

@vue-dnd-kit/actions est une peer dependency : les déplacements de l'onglet passent par lui. npm 7+ et pnpm l'installent d'eux-mêmes ; avec Yarn 1, ajoutez-le.

2. Ajouter le plugin

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import { vueDnDKitDevtools } from '@vue-dnd-kit/devtools/vite';

export default defineConfig({
  // Next to the Vue DevTools plugin: the tab joins its sidebar.
  plugins: [vueDevTools(), vueDnDKitDevtools(), vue()],
});

export default defineNuxtConfig({
  // With @vue-dnd-kit/devtools installed, the tab appears in development.
  modules: ['@vue-dnd-kit/nuxt'],
});

Avec Vite, le plugin fait trois choses sur le serveur de développement (vite serve) : il sert l'onglet à /__vue-dnd-kit-devtools/ (sous votre base), l'ajoute aux Vue DevTools, et fait en sorte que la page lui rende compte avant le démarrage de votre application. Aucun app.use() n'est nécessaire, et les builds ne sont pas touchés.

Avec Nuxt, le module @vue-dnd-kit/nuxt trouve le paquet, sert l'onglet, l'ajoute aux Nuxt DevTools et installe le côté page avec un plugin client. vueDndKit: { devtools: false } le désactive.

3. Lancer l'application en développement

Démarrez le serveur de développement comme d'habitude (vite, nuxt dev) et ouvrez l'application : l'onglet est prêt. Chaque provider de la page s'y affiche, quelle que soit l'application dans laquelle il est rendu.

Sans les plugins

Pour votre propre serveur de développement, ou une page que Vite ne sert pas à partir d'un index.html (configurations SSR), installez vous-même le côté page :

import { createApp } from 'vue';
import { DnDDevtools } from '@vue-dnd-kit/devtools';
import App from './App.vue';

const app = createApp(App);
app.use(DnDDevtools); // before mount: providers set up earlier aren't seen
app.mount('#app');

Ou importez @vue-dnd-kit/devtools/auto en premier dans le fichier d'entrée. Utilisez vueDnDKitDevtools({ inject: false }) quand le plugin doit servir l'onglet mais que vous installez vous-même le côté page ; serveTab() de @vue-dnd-kit/devtools/vite est le middleware qui sert l'onglet.

L'ouvrir

• Vue DevTools : Alt + Shift + D, ou le bouton Vue en bas de la page, puis l'onglet Vue DnD Kit.
• Nuxt DevTools : Alt + Shift + D, ou le bouton Nuxt, puis Vue DnD Kit (dans la barre latérale ou son menu de débordement).
• Une fenêtre à part : ouvrez http://localhost:5173/__vue-dnd-kit-devtools/ sur votre serveur de développement, ou le bouton ⧉ de l'onglet. Pratique sur un second écran. Avec plusieurs pages ouvertes, un sélecteur en haut choisit celle à observer.

L'onglet en un coup d'œil

Choisissez un nœud dans le registre ou un item sur la carte, et la partie droite le suit.

La mini-carte

Une carte en direct par liste, arbre et cible de dépôt, avec des copies de leurs items là où ils sont — les mêmes clones que montrerait l'overlay, avec le CSS de la page. Pendant un glissement, elle marque :

• les listes et les cibles qui acceptent le glissement (en bleu) ou le refusent (en rouge) ;
• le placeholder, et la cible sous le pointeur ;
• le pointeur, la boîte de l'overlay, et la ligne d'insertion des listes en placeholder: 'indicator'.

Un clic choisit un item et le met en évidence sur la page ; un double clic fait défiler la page jusqu'à lui. Utilisez la carte quand un dépôt ne va pas là où vous l'attendez : elle montre d'un coup d'œil quelles listes acceptent le glissement.

Drive : le joystick

Choisissez un item — sur la carte, dans le registre, ou avec ⌖ Pick, qui prend l'appui suivant sur un élément déplaçable de la page au lieu de le laisser agir — et poussez le bouton du joystick. L'item est saisi et se déplace dans ce sens, d'autant plus vite que le bouton est loin du centre. Relâchez et il s'arrête ; Drop et Cancel terminent le glissement.

C'est un vrai glissement au pointeur d'un capteur nommé devtools, fait avec l'API publique des capteurs : les listes se trient en dessous, les conteneurs défilent automatiquement à leurs bords, et onBeforeDrop et onDrop s'exécutent comme pour n'importe quel glissement. Les items désactivés ne sont pas saisis. Un glissement au clavier démarré par la page peut aussi être dirigé.

Les items des listes triables ont aussi des boutons : vers le haut, vers le bas, au début, à la fin, vers une autre liste du groupe. Chacun est un glissement au clavier de moveItem. Sous le joystick, une grande copie de ce que montre l'overlay.

Options

Chaque option qui n'est pas un callback peut être modifiée pendant que l'application tourne. Choisissez le nœud et ouvrez Options :

Une modification s'applique tout de suite, à cette page uniquement, et n'est jamais écrite dans votre code : la bibliothèque lit la nouvelle valeur là où elle lit l'option. Elle dure jusqu'à ce que vous la réinitialisiez (↺ par option, ou la réinitialisation de la barre du haut), que le provider soit démonté ou que la page soit rechargée. Une option modifiée affiche à côté d'elle la valeur de votre code. Les items montés pendant qu'une modification est active — les lignes d'une liste virtuelle — la reçoivent aussi.

State

Ce que sait chaque provider, pour le nœud que vous avez choisi :

• la session de glissement : le statut, les ids, items et capteur actifs, la cible et si elle accepte, le pointeur, l'overlay, la session du groupe triable et la ligne d'insertion ;
• une liste : son ordre et son brouillon ; un arbre : ses lignes ;
• un item : son type, ses données et sa position ; une cible de dépôt : ses règles.

Les items se montent et se démontent sans événements : le registre se met à jour en moins d'une seconde.

Log

Une bande par glissement, dans l'ordre :

Aussi auto-scroll on et off, les textes des announcement (masqués par défaut) et, en dehors des glissements, animate (les changements des items d'une liste qui ne viennent pas d'un glissement). Cliquez sur une entrée pour voir ses données. Un onglet ouvert plus tard reçoit les glissements déjà faits.

Déboguer un dépôt, pas à pas

Une carte refuse d'aller dans une colonne. Avec l'onglet ouvert :

1. Reproduisez-le à la main, ou avec Drive pour garder les mains libres pour l'onglet.
2. Observez la carte pendant que la carte est au-dessus de la colonne. Du rouge signifie que la liste refuse la carte : regardez son group (put) ou l'accept de la cible. Du bleu signifie qu'elle l'accepte, et que le problème vient plus tard.
3. Lisez le journal de ce glissement. onBeforeDrop dit qui a dit non — un hook, ou l'accept de la cible. Si le dépôt a abouti mais que vos données n'ont pas changé, l'entrée drop indique si preventDefault() a été appelé et ce que contenait e.result : une liste contrôlée doit l'appliquer elle-même.
4. Essayez un correctif en direct dans Options — un acceptMode plus souple, une autre collision, placeholder: 'indicator' — puis écrivez dans votre code celui qui fonctionne.

Comment ça marche

Les providers rendent compte à un hook qu'installe le côté page. Tant qu'aucun onglet n'observe la page, ils sont seulement enregistrés ; ensuite, la page écoute comme n'importe quel moniteur et envoie à l'onglet ce qu'il affiche — toutes les 40 ms pendant un glissement, deux fois par seconde sinon — et s'arrête quand aucun onglet ne l'a observée depuis quelques secondes. L'onglet parle à la page via un BroadcastChannel de l'origine de la page. Il ne change rien d'autre que ce que vous demandez : les glissements, la sélection et les options remplacées.