Новые возможности и изменения в Laravel Livewire v3
В прошлую среду на Laracon Online Калеб Порцио выступил с докладом The Future of Livewire
, в котором продемонстрировал все новые возможности, запланированные для Livewire v3. В этой статье мы расскажем об этих возможностях ещё раз, если вы пропустили доклад или хотите взглянуть на них ещё раз.
Дата выхода Laravel Livewire v3
Калеб Порцио только что объявил, что Laravel Livewire v3 будет официально выпущен 20 июля на Laracon US!
Совершенно новое ядро на базе Alpine
Все ядро Laravel Livewire было переписано. Новое ядро в большей степени опирается на Alpine, используя его Morph, History и другие плагины под капотом, что означает, что Livewire имеет лучшую диффузию, функции могут быть созданы быстрее, и меньше дублирования между Livewire и Alpine. Реструктуризация кодовой базы и использование Alpine позволили также добавить несколько новых функций.
Скрипты Livewire, стили и Alpine внедряются автоматически
После установки Livewire v2 приходилось вручную добавлять @livewireStyles, @livewireScripts и Alpine в макет. С Livewire v3 достаточно установить Livewire, и все необходимое будет добавлено автоматически — включая Alpine!
<!doctype html>
<html lang="en">
<head>
- <script src="//unpkg.com/alpinejs" defer></script>
- @livewireStyles
- @livewireScripts
</head>
<body>
...
</body>
</html>
Горячая перезагрузка без этапа сборки
В Livewire v3 будет реализована горячая перезагрузка без этапа сборки. Просто сохраните файл в редакторе и мгновенно увидите изменения в браузере, не нарушая состояния компонентов!
wire:transition
В Alpine уже давно существуют переходы, но в Livewire v3 появится обёртка вокруг x-transition, называемая wire:transition. Добавьте wire:transition к любому элементу, который будет отображаться или скрываться с помощью Livewire, и получите действительно красивые переходы. Так как wire:transition использует x-transition, все модификаторы, такие как .opacity и .duration, также будут поддерживаться.
Пишите JavaScript функции в PHP классах
В Livewire v3 появится поддержка написания функций JavaScript непосредственно в компонентах бэкенда Livewire. Добавьте функцию в ваш компонент, добавьте комментарий /** @js */ над функцией, затем верните JavaScript-код, используя синтаксис HEREDOC PHP, и вызовите его из вашего фронтенда. JavaScript-код будет выполнен без отправки каких-либо запросов к бэкенду.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @prop */
public $todos;
/** @js */
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>/** @locked */ свойства
В Livewire v3 появится поддержка заблокированных свойств — свойств, которые нельзя обновить из фронтенда. Добавьте комментарий /** @locked / над свойством вашего компонента, и Livewire будет выбрасывать исключение, если кто-то попытается обновить это свойство из фронтенда.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
wire:model по умолчанию отложена
Когда Livewire только появился, он предназначался в первую очередь для написания компонентов типа поиска, которым требовалась действительно живая
работа, поэтому автоматическая отправка обновлений на сервер при каждом обновлении входных данных имела смысл. Сейчас мы используем Livewire для создания самых разных приложений. По мере развития Livewire и его использования мы поняли, что "отложенное" поведение имеет больше смысла для 95% форм, поэтому в версии 3 отложенная
функциональность будет использоваться по умолчанию. Это позволит сэкономить на ненужных запросах к серверу и повысить производительность.
Если вам нужна живая
функциональность для ввода, вы можете использовать wire:model.live для включения этой функциональности.
Примечание: это одно из немногих изменений ломающих совместимость при переходе от v2 к v3.
Пакетирование запросов
В Livewire v2 при наличии нескольких компонентов, использующих wire:poll или диспетчеризацию и прослушивание событий, каждый из этих компонентов будет отправлять отдельные запросы на сервер при каждом опросе или событии. В Livewire v3 реализовано интеллектуальное пакетирование запросов, так что опросы wire:poll, события, слушатели и вызовы методов могут быть по возможности объединены в один запрос, что позволяет сэкономить ещё больше запросов и повысить производительность.
Реактивные свойства
При использовании вложенных компонентов в Livewire v2 при обновлении свойства родительского компонента данные дочернего компонента автоматически не синхронизируются. Существует ручное обходное решение с использованием событий и слушателей, но оно не является идеальным. В Livewire v3 при передаче части данных в дочерний компонент, добавлении комментария /** @prop */ над свойством в дочернем компоненте, а затем обновлении его в родительском компоненте, оно будет обновлено в дочернем компоненте.
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component
{
/** @prop */
public $todos;
public function render()
{
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
/** @modelable */ свойства
Ещё одной больной точкой в Laravel Livewire v2 является моделирование
свойства из родительского компонента в дочерний. Допустим, вам нужен компонент <livewire:todo-input />. Не так-то просто передать значение, чтобы оно автоматически обновлялось в родительском компоненте при каждом обновлении в дочернем. В Livewire v3 вы можете добавить wire:model при использовании компонента input, затем внутри компонента input добавить комментарий /** @modelable */ над свойством, в котором вы храните значение для компонента, и Livewire сделает все остальное.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
public $todo = '';
public $todos = [];
public function add() ...
public function render()
{
return <<<'HTML'
<div>
<livewire:todo-input wire:model="todo" />
<ul>
@foreach ($todo as $todos)
<li>{{ $todo }}</li>
@endforeach
</ul>
</div>
HTML;
}
}
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component
{
/** @modelable */
public $value = '';
public function render()
{
return <<<'HTML'
<div>
<input wire:model="value">
</div>
HTML;
}
}
Доступ к данным и методам родительского компонента с помощью $parent
В Livewire v3 появится новый способ доступа к данным и методам родительского компонента. Появится новое свойство $parent, к которому можно обращаться для вызова методов родительского компонента.
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component
{
/** @modelable */
public $value = '';
public function render()
{
return <<<'HTML'
<div>
<input
wire:model="value"
wire:keydown.enter="$parent.add()"
>
</div>
HTML;
}
}
@teleport
В Laravel Livewire v3 также появится новая директива Blade @teleport, которая позволит телепортировать
фрагмент разметки и отобразить его в другой части DOM. Иногда это позволяет избежать проблем с z-индексом при работе с модальными окнами и слайдами.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>Ленивые компоненты
В Laravel Livewire v3 появятся ленивые
> компоненты. Если у вас есть компонент, который долго загружается из-за дорогостоящего запроса или отображается в слайде, который не всегда открывается, вы можете подождать с его загрузкой до тех пор, пока он не будет показан на странице. В Livewire v3 достаточно добавить атрибут lazy при отрисовке компонента, и он не будет отрисовываться изначально. Когда он появится в области просмотра, Livewire выполнит запрос на его рендеринг. Вы также сможете добавлять содержимое с заполнителями, реализовав метод placeholder в своём компоненте.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<livewire:example-component lazy />
</x-modal>
@endteleport
</div><?php
namespace App\Http\Livewire;
class ExampleComponent extends \Livewire\Component
{
public static function placeholder()
{
return <<<'HTML'
<x-spinner />
>>>
}
public function render() /** [tl! collapse:7] */
{
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
wire:navigate
В Laravel Livewire v3 вы сможете добавлять wire:navigate к любому тегу ссылки, и при нажатии на него Livewire будет получать страницу в фоновом режиме, а затем очень быстро менять DOM, придавая вашему приложению более SPA-подобное ощущение. Если вы добавите модификатор .prefetch, Livewire будет предварительно получать содержимое ссылки, как только она будет наведена, что сделает её ещё быстрее!
<a href="/example" wire:navigate.prefetch>Example Page</a>@persist
Ещё одна очень интересная директива Blade в Livewire v3 — @persist. Использование @persist в сочетании с wire:navigate позволит вам иметь части приложения, которые сохраняются
при изменении страницы. Хорошим примером такой функциональности является плеер подкастов, который продолжает воспроизводиться при перемещении по приложению.
<!DOCTYPE html>
<html lang="en">
<body>
<x-podcast-header />
<x-podcast-body>
</x-podcast-body>
@persist('player')
<x-podcast-player />
@endpersist
</body>
</html>Новый дизайн laravel-livewire.com
И последнее, но не менее важное: сайт и документация Livewire получили новый дизайн!
Заключение
Мы с нетерпением ждём появления всех этих новых возможностей в Livewire v3. Если ваш бизнес зависит от Livewire и вы хотите поддержать разработку v3 или хотите получить помощь в поддержке ваших приложений Livewire, присоединяйтесь к официальной программе поддержки.