Предстоящие функции и изменения Livewire v3

В прошлую среду на Larcon Online Калеб Порцио выступил с докладом под названием «Будущее Livewire», в котором демонстрировал все новые функции, запланированные для Livewire v3. В этой статье мы еще раз вернемся к этим функциям на тот случай, если вы пропустили выступление или хотите взглянуть еще раз.

Все новое ядро на базе Alpine

Полностью переписано ядро Livewire. Новое ядро больше полагается на Alpine, используя его Morph, History и другие плагины под капотом, что означает, что Livewire лучше различает, функции можно создавать быстрее, а между Livewire и Alpine меньше дублирования. Реструктуризация кодовой базы и опора на Alpine также позволили добавить несколько новых функций.

Скрипты, стили и Alpine Livewire внедряются автоматически

После того как Composer установил 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, используя синтаксис PHP HEREDOC, и вызовите его из своего внешнего интерфейса. Код 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 */` properties

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, чтобы включить эту функциональность. .

Примечание: это одно из очень немногих критических изменений из версии 2 в версию 3.

Запросы группируются

В Livewire версии 2, если у вас несколько компонентов используя wire:poll или диспетчеризацию и прослушивание событий, каждый из этих компонентов будет отправлять отдельные запросы на сервер при каждом опросе или событии. В Livewire v3 реализовано интеллектуальное группирование запросов, поэтому wire:poll, события, прослушиватели и вызовы методов можно по возможности объединять в один запрос, что еще больше экономит запросы и повышает производительность.

Реактивные свойства

При использовании вложенных компонентов в Livewire v2, если свойство родительского компонента обновляется, данные дочернего компонента не синхронизируются автоматически. Существуют ручные обходные пути с использованием событий и прослушивателей, но они не идеальны. В Livewire v3, когда вы передаете часть данных дочернему компоненту, добавьте /** @reactive */ прокомментируйте свойство в дочернем компоненте, затем обновите его в родительском компоненте, оно будет обновлено в дочернем компоненте.

Еще одна проблема в Livewire v2 — «моделирование» свойства от родительского к дочернему компоненту. Допустим, вам нужен компонент . Нелегко передать значение, а затем автоматически обновлять его в родительском объекте каждый раз, когда оно обновляется в дочернем. В Livewire v3 вы можете добавить wire:model при использовании компонента ввода, а затем внутри компонента ввода добавить комментарий /** @modelable */ над свойством, в котором вы сохраняете значение для компонента, и Livewire будет займись остальным.

<?php
 
namespace App\Http\Livewire;
 
class TodosCount extends \Livewire\Component
{
    /** @prop */
    public $todos;
 
    public function render()
    {
        return <<<'HTML'
            <div>
                Todos: {{ count($todos) }}
            </div>
        HTML;
    }
}

Доступ к данным и методам родительского компонента с помощью `$parent`

<?php
 
namespace App\Http\Livewire;
 
class Todos extends \Livewire\Component
{
    public $todo = '';
 
    public $todos = [];
 
    public function add() ...
    {
        $this->todos[] = $this->todo;
        $this->todo = '';
    }
 
    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;
    }
}

В Livewire v3 появится новый способ доступа к данным и методам родительского компонента. Появилось новое свойство $parent, доступ к которому можно получить для вызова методов родителя.

Livewire v3 также будет включать новую директиву @teleport Blade, которая позволит вам «телепортировать» часть разметки и визуализировать ее в другой части DOM. Иногда это может помочь избежать проблем с z-индексом в модальных окнах и выдвижных окнах.

<?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;
    }
}

Ленивые компоненты

<div>
    <button wire:click="showModal">Show modal</button>
 
    @teleport('#footer')
        <x-modal wire:model="showModal">
            <!-- ... -->
        </x-modal>
    @endteleport
</div>

В Livewire v3 появятся "ленивые" компоненты. Если у вас есть компонент, загрузка которого занимает некоторое время из-за какого-то дорогостоящего запроса или отображается в слайд-ауте, который не всегда открывается, вы можете подождать, чтобы загрузить его, пока он не отобразится на странице. В Livewire v3 просто добавьте атрибут lazy при рендеринге компонента, и он не будет рендериться изначально. Когда он появится в окне просмотра, Livewire отправит запрос на его рендеринг. Вы также сможете добавить замещающий контент, внедрив в компонент метод placeholder.

В Livewire v3 вы можно добавить wire:navigate к любому тегу привязки, и при нажатии Livewire будет получать страницу в фоновом режиме, а затем очень быстро заменять DOM, придавая вашему приложению более похожий на SPA вид. Если добавить .prefetch, Livewire выполнит предварительную загрузку содержимого ссылки, как только она будет наведена, что сделает ее еще быстрее!

<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;
    }
}

Другое действительно крутая директива Blade Livewire v3 будет включать @persist. Использование @persist в сочетании с wire:navigate позволит вам иметь части ваших приложений, которые «сохраняются» при изменении страницы. Хорошим примером этой функциональности является проигрыватель подкастов, который продолжает воспроизводиться, пока вы перемещаетесь в приложении.

<a href="/example" wire:navigate.prefetch>Example Page</a>

Новый дизайн laravel-livewire.com

<!DOCTYPE html>
<html lang="en">
<body>
    <x-podcast-header />
 
    <x-podcast-body>
        {{ $slot }}
    </x-podcast-body>
 
    @persist('player')
        <x-podcast-player />
    @endpersist
</body>
</html>

И последнее, но не менее важное: сайт и документация Livewire получили новый дизайн!

Заключение

Мы очень ждем всех этих новых функций в Livewire v3. Если ваш бизнес зависит от Livewire и вы хотите поддержать разработку версии 3 или вам нужна помощь в поддержке ваших приложений Livewire, подумайте о том, чтобы присоединиться к официальной программе Support.

Все новое ядро на базе Alpine

Скрипты, стили и Alpine Livewire внедряются автоматически

Горячая перезагрузка без этапа сборки

`wire:transition`

Добавьте функции JavaScript в свои классы PHP

`/** @locked */` properties

`wire:model` отложен по умолчанию

Запросы группируются

Реактивные свойства

Доступ к данным и методам родительского компонента с помощью `$parent`

Ленивые компоненты

Новый дизайн laravel-livewire.com

Заключение

Заключение

Comments

Yurij Finiv

Full stack

All-in-one SEO platform for teams and individuals

Предстоящие функции и изменения Livewire v3

Все новое ядро ​​на базе Alpine

Скрипты, стили и Alpine Livewire внедряются автоматически

Горячая перезагрузка без этапа сборки

wire:transition

Добавьте функции JavaScript в свои классы PHP

/** @locked */ properties

wire:model отложен по умолчанию

Запросы группируются

Реактивные свойства

Доступ к данным и методам родительского компонента с помощью $parent

Ленивые компоненты

Новый дизайн laravel-livewire.com

Заключение

Заключение

Comments

Yurij Finiv

Full stack

All-in-one SEO platform for teams and individuals

Все новое ядро на базе Alpine

`wire:transition`

`/** @locked */` properties

`wire:model` отложен по умолчанию

Доступ к данным и методам родительского компонента с помощью `$parent`