Laravel Livewire - Introducción al JavaScript

Una de las grandes características que tiene Laravel Livewire, es la integración del cliente con el servidor; específicamente en este contexto, PHP con Laravel con JavaScript; en este capítulo vamos a explorar más estas características.

Para emplear cualquier JS de Livewire como el objeto $wire o los hooks, debemos de emplear la siguiente directiva:

@script
<script>
   // JS Livewire
</script>
@endscript

El JavaScript de Livewire, es el generado por la directiva de:

@livewireScripts

Introducción a los Hooks en JavaScript

Los hooks, no son más que métodos que forman parte del ciclo de vida de los componentes, como presentamos anteriormente, en JavaScript, también tenemos referencias similares:

Para poder usar cualquiera de estas, tenemos que usar la siguiente función en JavaScript:

Livewire.hook(hookName, (...) => {})

Como mostramos en el listado anterior, con el objeto de JavaScript de Livewire, tenemos acceso a varios métodos tipo listeners, que se van a ejecutar como parte del ciclo de vida; veamos algunos:

@script
       <script>
           Livewire.hook('morph.updating', ({
               el,
               component,
               toEl,
               skip,
               childrenOnly
           }) => {
                console.log('morph.updating')
                console.log(component)
           })

           Livewire.hook('morph.updated', ({
               el,
               component
           }) => {
               console.log('morph.updated')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removing', ({
               el,
               component,
               skip
           }) => {
               console.log('morph.removing')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removed', ({
               el,
               component
           }) => {
               console.log('morph.removed')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.adding', ({
               el,
               component
           }) => {
               console.log('morph.adding')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.added', ({
               el
           }) => {
               console.log('morph.added')
               console.log(el)
           })
       </script>
   @endscript

Como recomendación para el script anterior, comenta todos los console.log() salvo al del hook que quieras probar.

Transcripción del vídeo

Vamos a comenzar una sección que es bastante interesante que es la parte del javascript realmente aquí tenemos muchas cosas es un poco abstracta porque por el tipo de aplicación que estamos creando que es un sencillo crot con muy pocas funciones va a costar bastante poder emplear algo de esto así que más que todo vamos a hacer presentaciones explicaciones y poco más ya que tampoco es algo tan necesario esto yo lo veo un poco como lo que es cuando no crea un proyecto en laravel básico lo que es note que lo tenemos incluido que funciona para muchísimas cosas claro que sí Pero al menos para las partes fundamentales no es absolutamente necesario entonces aquí viene siendo un poco lo mismo recordemos que todo esto más que todo es tecnologías en el lado del servidor pero como un buen framework moderno que es también tenemos ciertos ganchos con lo que es el cliente entonces en este caso sería con javascript cosas que pueden hacer en el cliente bueno como te digo Esto va a ser un poco abstracto así que posiblemente tengas que ver esto varias veces o revisar un poco la documentación oficial aquí lo que quiero hacer es una pequeña presentación para ver las partes que yo considero más importantes para que entiendas un poco A qué le puedes sacar el jugo a esto y cuando lo puedes utilizar.

Entonces lo principal si nosotros queremos utilizar cualquier javascript de liveware como lo que nosotros vamos a ver un poco más adelante de momento lo que hemos visto es el objeto $wire,  este objeto en este caso lo utilizamos aquí directamente en un bloque de Script de Livewire:

wire:click

Entonces no no hay mucho que preocuparse Pero esto también lo podemos utilizar en un bloque normalito de Script que es lo que quiero llegar entonces para utilizar ese tipo de javascript en parte este porque tenemos más tenemos que colocar estas directivas que tenemos acá Entonces tal cual te indica por acá esto se va a ejecutar cuando ya todo esté cargado es decir ya esté cargado en nuestro caso el javascript de Livewire:

@livewireScripts

Ya que ya no funciona antes funcionaba lo que era el document onload antes podíamos ampliar eso pero ya no me está funcionando para la versión actual de igual manera es sencillo simplemente coloca como quien dice otra etiqueta encima de la etiqueta de script y eso sería todo de igual manera ya en la siguiente clase hacemos una prueba con esto y a partir de aquí podemos hacer lo que nos venga gana con el objeto o con la parte de javascript de que no hemos visto nada.

Este JS de Livewire para escuchar mediante cambios en los componentes es útil para mostrar alguna confirmación notificación o algo por el estilo con toltip o notificaciones emergentes etc.

Es decir, sucede alguna actualización en el servidor, paginastes o eliminaras un registro y muestras un mensaje emergentes para indicar la operación realizada.

En definitiva, lo que vayas a hacer ahí depende de ti realmente no tengo ninguna implementación para la aplicación actual que tenemos para hacer algo interesante ahí simplemente aquí pudieras escuchar el evento:

// Dispatch an event to any Livewire components listening...
Livewire.dispatch('post-created', { postId: 2 })

// Dispatch an event to a given Livewire component by name...
Livewire.dispatchTo('dashboard', 'post-created', { postId: 2 })

// Listen for events dispatched from Livewire components...
Livewire.on('post-created', ({ postId }) => {
   // ...
})

Transcripción del vídeo - Hooks en JavaScript

Vamos a probar aquí una especie de ciclo de vida como te comentaba que tenemos aquí del lado del cliente Recuerda que antes lo veíamos por acá todo lo que eran los métodos hidrate y de demás y ahorita es algo similar a eso pero en este caso del lado del cliente ya que ya va escrita entonces aquí te voy a pedir que vayas al repositorio y te copies este código o al menos que lo quieras escribir yo no lo voy a escribir no voy a perder 10 minutos en esto para alargar el video necesariamente pero básicamente:

@script
       <script>
           Livewire.hook('morph.updating', ({
               el,
               component,
               toEl,
               skip,
               childrenOnly
           }) => {
                console.log('morph.updating')
                console.log(component)
           })

           Livewire.hook('morph.updated', ({
               el,
               component
           }) => {
               console.log('morph.updated')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removing', ({
               el,
               component,
               skip
           }) => {
               console.log('morph.removing')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removed', ({
               el,
               component
           }) => {
               console.log('morph.removed')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.adding', ({
               el,
               component
           }) => {
               console.log('morph.adding')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.added', ({
               el
           }) => {
               console.log('morph.added')
               console.log(el)
           })
       </script>
   @endscript

Te comentaba antes tenemos métodos para cuando se están actualizando para cuando se están removiendo ya vamos a ver exactamente qué es lo que imprime por acá y cuando se están agregando lo que quieras hacer ahí depende de ti realmente algún script alguna función algún evento algo visual que quieras realizar lanzar un cohete a la luna no sé lo que tú quieras.
Lo primero es que si vengo acá que es la página recomendada para hacer este experimento que tenemos mucha movilidad Fíjate que no tenemos errores así que todo perfecto esto recuerda este esta directiva es para indicar cuando ya cargue el javascript de Livewire y ya podamos emplear características del Livewire.

Ya que obviamente esto no forma parte de la pi básico de javascript Entonces nos daría un bonito error si el javascript de Livewire no ha sido cargado tal cual estás viendo en pantalla entonces ahí lo tienes que colocar y a partir de aquí si quieres emplear el objeto $wire por ejemplo, lo puedes hacer.

Colócalas el siguiente script:

@script
       <script>
         $wire
       </script>
@endscript

Ahora muévete en la paginación, actualice algo aquí aparecerían algunos mensajes en base a la acción realizada, si empleando el filtro se elimina el componente de paginación, entonces veras que se ejecuta el evento tipo remove y así para el resto.