Feedback livewire breaking some Js plugins!

#1

Hi there, I use livewire since many months. I watched all videos and readed many docs about alpine/ livewire forum. I Changed my way of dev thx to livewire, cause i use less javascript. I did my own select2 without a Js lign !
BUT sometine i need it (Javascript).
And i do not know why, some dependencies or plugins works perfeclty in a form (no wire ignore and alpine declare) like Google autcomplete, datepicker, Lightpick, Datatable, IMask…
Like this

 @props(['id'])

< div
x-data
x-init="
IMask($refs.{{$id}},{
mask: ‘00:00’
});">
< input
x-ref="{{$id}}"
…
But others like fullcalendar, Choices, Multiselect… divs have x-data and x-init correctly seted, inputs with a x-ref and works when loaded but after focusout any input and a livewire feedback, Js is broken for them.

Any idea why ?
Thanks

#2

Hello livewire community
After many tests, my only way to play with some Js plugins like google map/fullcalendar… and livewire is to set wire:ignore on them. I manage them with wire:click="$emit(‘show’)"
script is updated by adding
window.livewire.on(‘show’, function() {
// script
});

#3

Hey @Philippe,

when you use JS plugins which modify the DOM themselves on init, you always have to use wire:ignore. The problem is, that Livewire doesn’t know about these changes, because they were made client side. When a response from Livewire comes in, it will swap out the DOM with whats have been compiled on the server. After the DOM has been swapped out, the x-init of alpine won’t run again, so your plugins won’t be reinitialized. When adding wire:ignore to the element containing the plugin, Livewire won’t swap out the DOM, so that the initialized plugin state stays intact.

Hope this helps you in understanding the “why” :wink: