Alpine JS vino para quedarse y en esta entrada te voy a mostrar algunos plugins interesantes que puedes emplear para extender el framework en caso de que se te quede un poco corto con las funciones que trae de manera por defecto en tus proyectos.

Intersect

El plugin o complemento de Intersect proporciona un envoltorio para el "Intersection Observer" que en pocas palabras permite especificar cuando un elemento es visible para hacer algo...

El complemento hace que sea mucho más fácil e intuitivo implementar patrones de interfaz de usuario como el desplazamiento infinito y las imágenes de carga diferida. Otro gran caso de uso es animar elementos en la pantalla cuando un usuario se desplaza hacia esa sección.

Para usar el complemento, siga las instrucciones de instalación que puedes encontrar el la web oficial, ya sea mediante NPM o la CDN, luego agregue el atributo x-intersect a un elemento con una devolución de llamada que debe ejecutarse siempre que ese elemento "se cruce" con la ventana gráfica del usuario.

<div x-data = "{se muestra: falso}" x-intersect = "se muestra = verdadero">
   <div x-show = "mostrada" x-transición>
       ¡Estoy en la ventana!
   </div>
</div>

También puede usar x-intersect: enter = "callback" o x-intersect: leave = "callback" si desea que la devolución de llamada solo se ejecute cuando el elemento ingrese o salga respectivamente de la ventana del usuario.

Además, el complemento admite un modificador .once que se puede usar para indicar que la devolución de llamada solo debe ejecutarse la primera vez (una ÚNICA vez) que el elemento se cruza con la ventana gráfica del usuario.

<div x-intersect.once = "shown = true"> ... </div>

Persist

El plugin de Persist proporciona un método mágico para integrar datos con Alpine en el localStorage.

Para usar el complemento, siga las instrucciones de instalación, luego envuelva sus valores de datos iniciales en $persist(). Entonces, Alpine sabrá "conservar" esos valores, y cualquier actualización de esos valores, en localStorage. En las cargas de página posteriores, Alpine extraerá esos valores de localStorage en lugar de inicializarlos con los valores predeterminados.

<div x-data="{ count: $persist(0) }">
   <button x-on:click="count++">Increment</button>

   <span x-text="count"></span>
</div>