Новые возможности и изменения Livewire v3

Новые возможности и изменения Livewire v3

LiveWire

В на последнем Laracon Online Caleb Porzio выступил с докладом под названием "Будущее Livewire" в котором продемонстрировал все новые возможности, запланированные для Livewire v3. В этой статье мы расскажем об этих возможностях еще раз на случай, если вы пропустили выступление или хотите взглянуть на доклад еще раз.

Дата выхода Laravel Livewire v3

Caleb Porzio только что объявил, что Laravel Livewire v3 официально выйдет 20 июля, в Ларакон, США!

Совершенно новое ядро на базе Alpine

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

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

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

Примечание: это одно из очень немногих изменений в версии v 2 по сравнению с версией 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 */ свойства

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

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

}

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

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

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

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

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

<div>
   <button wire:click="showModal">Show modalbutton>
   @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

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

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

@persist

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

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

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

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

Заключение

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

Джейсон Беггс

Консультант по стеку TALL (Tailwind CSS, Alpine.js, Laravel и Livewire) и владелец roasted.dev.

Оригинал статьи - https://laravel-news.com/livewire-v3-features