x-cloak

Parfois, lorsque vous utilisez AlpineJS pour une partie de votre gabarit, un « clignotement » peut se produire : vous apercevez votre gabarit non initialisé après le chargement de la page, mais avant le chargement d'Alpine.

x-cloak répond à ce problème en masquant l'élément auquel il est attaché jusqu'à ce qu'Alpine soit entièrement chargé sur la page.

Pour que x-cloak fonctionne, vous devez toutefois ajouter le CSS suivant à la page.

[x-cloak] { display: none !important; }

L'exemple suivant masque la balise <span> jusqu'à ce que son x-show soit explicitement évalué à vrai, évitant ainsi tout « clignotement » de l'élément masqué à l'écran pendant le chargement d'Alpine.

<span x-cloak x-show="false">Ceci ne « clignotera » jamais à l'écran</span>

x-cloak ne fonctionne pas uniquement sur les éléments masqués par x-show ou x-if : il garantit aussi que les éléments contenant des données restent masqués tant que ces données ne sont pas correctement définies. L'exemple suivant masque la balise <span> jusqu'à ce qu'Alpine ait défini son contenu textuel avec la propriété message.

<span x-cloak x-text="message"></span>

Lorsque Alpine se charge sur la page, il retire l'attribut x-cloak de l'élément, ce qui supprime aussi le display: none; appliqué par le CSS et rend donc l'élément visible.

Alternative à la syntaxe globale

Si vous souhaitez obtenir le même comportement tout en évitant d'inclure une feuille de style globale, vous pouvez utiliser l'astuce suivante, ingénieuse mais avouons-le un peu étrange :

<template x-if="true">
    <span x-text="message"></span>
</template>

Cela atteint le même objectif que x-cloak, simplement en tirant parti du fonctionnement de x-if.

Comme les éléments <template> sont « masqués » par défaut dans les navigateurs, vous ne verrez pas le <span> tant qu'Alpine n'aura pas eu le temps d'évaluer le x-if="true" et de l'afficher.

Là encore, cette solution ne convient pas à tout le monde, mais elle mérite d'être mentionnée pour des cas particuliers.

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev