Make components CSP safe

[ganyicz]

The scenario

Some Flux components are not compatible with Livewire's new CSP mode.

The problem

In some places we're using unsupported syntax such as assignments, complex conditionals, etc..

x-on:click="let input = $el.closest('[data-flux-input]').querySelector('input');"

x-on:modal-show.document="if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal()"

The solution

Refactoring complex code into Alpine.data included in compiled js files.

I've prefixed all datas with flux to avoid conflicts, eg.: fluxInputClearable, fluxInputViewable

Fixes #2155

[calebporzio]

make changes from pro repo first

[maikezan]

Hi guys, i was succesfully using the modal (in flyout mode) for a "first-access-tutorial" for users. Since this guide needs to spreads across different sections i was including it in a layout file.

I've updated to this version today and now i get this error:

ErrorException
vendor/livewire/flux/stubs/resources/views/flux/modal/index.blade.php:93
Undefined variable $__livewire

I see there has been some changes around that code block (line 93) in this commit that removed an isset check for $__livewire variable.
I've also noticed that moving my flux:modal code block out of the layout files fixes the error, but still unsure if the issue is mine or if it may be related to the above said change.
If it can help, i'm also using Livewire 4.0.2 at the moment.

[ganyicz]

Hi @maikezan,

There is a bug in the latest Flux release with using modals outside Livewire components.

This will be fixed in the next release in couple of hours.

Until then, you can either downgrade to v2.10.0 or put your modal inside a Livewire component.