Випущено Livewire 3.6

Цього тижня вийшло оновлення Laravel Livewire до версії 3.6, яке включає нові HTML директиви для показу та приховування елементів DOM, а також JavaScript дії

# JavaScript Дії

Кейлеб Позріо додав можливість визначати JavaScript дії, які є функціями, що можуть викликатися з wire:click або $wire, щоб виконувати код на стороні клієнта або застосовувати оптимістичні оновлення перед відправкою запиту на сервер

Ось приклад з Pull Request #9202:

<?php
use Livewire\Volt\Component;
 
new class extends Component {
    public function save()
    {
        // ...
    }
};
?>
 
<div>
    <button wire:click="doSomething">Зробити щось</button>
</div>
 
@script
<script>
    $js('doSomething', () => {
        console.log('doSomething');
 
        $wire.save()
    });
</script>
@endscript

Також можна викликати JavaScript дії з PHP за допомогою методу ->js():

$this->js('onPostSaved');

Детальніше про JavaScript дії можна дізнатися в документації з дій

# Нові HTML Директиви

Джош Ханлі додав директиви wire:show та wire:text, а Кейлеб Позріо — wire:cloak та wire:transition

Директиви wire:show та wire:text є аналогами x-show та x-text в Alpine. Наприклад, директива wire:show дозволяє перемикати видимість елемента за допомогою CSS:

<div>
    <button x-on:click="$wire.showModal = true">Новий пост</button>
 
    <div wire:show="showModal">
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>
 
            <button type="submit">Зберегти пост</button>
        </form>
    </div>
</div>

Директива wire:text динамічно оновлює вміст елемента і є корисною для створення оптимістичних інтерфейсів:

<div>
    <button x-on:click="$wire.likes++; $wire.like()">❤️ Подобається</button>
 
    Лайків: <span wire:text="likes"></span>
</div>

Докладніше про нові директиви можна дізнатися з документації Livewire:

• wire:cloak (документація)
• wire:show (документація)
• wire:text (документація)
• wire:transition (документація)

# Примітки до випуску

Повний список нових можливостей доступний у порівнянні між версіями 3.5.20 та 3.6.0 на GitHub. Більше інформації про ці функції та інші можна знайти в документації Livewire