Vérification du vide dans les emplacements Vue 3

Avez-vous eu du mal à vérifier si un emplacement est vide ou non dans Vue 3 ? Ce changement radical incite de nombreuses personnes à rechercher la meilleure solution, alors explorons-en une ensemble.

J’ai le privilège de travailler dans une entreprise qui me permet d’être un des premiers à adopter des technologies, parmi lesquelles Vue 3. Alors que Vue 3 sortait à peine de la version bêta, j’ai rapidement commencé à travailler sur la migration de l’ensemble de notre base de code depuis Vue. 2 à la nouvelle version brillante.

À ce stade, la version compat (la version de migration) était tout simplement un désastre, j’ai donc choisi d’arracher le bandage et de tout migrer d’un seul coup. Comme vous pouvez l’imaginer, cela s’est accompagné de quelques ratés.

L’une des solutions de contournement les plus complexes consistait à trouver un moyen de déterminer si le contenu d’un emplacement reçu dans un composant était vide. Dans Vue 2, si vous vous en souvenez, c’était un jeu d’enfant :

<div v-if="this.$slots.mySlot">
   <p>Some unrelated content to the slot or extra markup</p>
   <slot name="mySlot" />
</div>

Une simple vérification if entraînerait une valeur fausse si le contenu de mySlot était vide, et nous pourrions tous passer à de meilleures choses. Dans Vue 3, ce n’est pas aussi simple. Je me suis donc donné pour tâche de trouver le coupable et, hélas, j’ai finalement compris où se trouvait le changement dans la façon dont Vue vérifie cela en interne.

Je n’ai pas été surpris que d’autres personnes aient déjà rencontré un problème similaire, j’ai donc trouvé un moyen d’articuler le problème et créé un ticket pour ce problème. Le problème ne s’est malheureusement pas arrêté là, car – comme Posva me l’a rapidement fait savoir – il était presque impossible de parvenir à un consensus sur ce que signifierait « vide » si l’équipe principale envisageait à un moment donné la possibilité de créer une vérification officielle de isEmptySlot. fonction.

Grâce à de nombreux essais et erreurs et à l’aide d’esprits extraordinaires de la communauté, nous avons trouvé une solution suffisamment élégante que nous avons transformée en composable. Mais j’ai été intrigué de voir que je recevais encore beaucoup de notifications pour un problème qui était résolu depuis des mois, j’ai donc décidé de partager les miennes et celles de mon équipe ainsi que le code avec une brève explication.

Au codemobile !

import { computed, Comment, Fragment, Text } from 'vue'





function vNodeIsEmpty (vnodes) {
  return vnodes.every(node => {
    if (node.type === Comment) return true
    if (node.type === Text && !node.children.trim()) return true
    if (
      node.type === Fragment &&
      vNodeIsEmpty(node.children)
    ) {
      return true
    }

    return false
  })
}


export const isEmpty = slot => {
  if (!slot) return true

  
  if (typeof slot !== 'function') return false

  return vNodeIsEmpty(slot())
}

export default function ({
  slot
}) {
  const slotIsEmpty = computed(() => isEmpty(slot))

  return {
    slotIsEmpty
  }
}

Le composable prend un paramètre d’objet avec une seule propriété, slot que vous pouvez acquérir avec la fonction useSlots comme ceci.

import { useSlots } from 'vue'

const slots = useSlots()
const { slotIsEmpty } = SetupEmptySlotCheck({ slot: slots.mySlot })


<div v-if="slotIsEmpty"> No slot content! </div>

En retour, vous obtenez un slotIsEmpty calculé qui sera soit vrai/faux selon que le contenu du slot est vide ou non.

Afin de déterminer ce que constitue un emplacement vide, nous avons fait les hypothèses suivantes.

Un emplacement est vide si :

• Il inclut uniquement les commentaires HTML
• Il ne comprend que des chaînes vides
• Il comprend plusieurs enfants, et tous sont eux-mêmes vides

Si vous souhaitez également consulter nos tests unitaires, j’ai mis en place un aperçu public avec le code.

J’espère que cela dissipera toutes les questions et aidera les autres équipes aux prises avec ce changement radical.