Майбутні функції та зміни Livewire v3

Минулої середи на Larcon Online Калеб Порціо виступив із доповіддю під назвою «Майбутнє Livewire», демонструючи всі нові функції, заплановані для Livewire v3. У цій статті ми ще раз розглянемо ці функції на випадок, якщо ви пропустили розмову або хочете переглянути.

Нове ядро на базі 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

< br

Livewire v3 підтримуватиме написання функцій JavaScript безпосередньо у ваших внутрішніх компонентах Livewire. Додайте функцію до свого компонента, додайте коментар /** @js */ над функцією, потім поверніть деякий код JavaScript за допомогою синтаксису PHP HEREDOC і викличте його з інтерфейсу. Код JavaScript виконуватиметься без надсилання будь-яких запитів до серверної частини.

`/** @locked */` властивості

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

Livewire v3 підтримуватиме заблоковані властивості – властивості, які неможливо оновити з інтерфейсу. Додайте коментар /** @locked / над властивістю вашого компонента, і Livewire викличе виняток, якщо хтось спробує оновити цю властивість із інтерфейсу.

`wire:model` за замовчуванням відкладено

<?php
 
namespace App\Http\Livewire;
 
class Todos extends \Livewire\Component
{
    /** @locked  */
    public $todos = [];
}

Коли Livewire було випущено вперше, він передусім призначався для написання таких компонентів, як пошук, які потребували дійсно «живого» відчуття, тому автоматичне надсилання оновлень на сервер кожного разу, коли оновлювалося введення, мало сенс. Зараз ми використовуємо Livewire для створення різноманітних програм. Оскільки Livewire та його використання розвивалися, ми зрозуміли, що «відкладена» поведінка має більше сенсу для 95% форм, тому у v3 «відкладена» функція буде типовою. Це заощадить на непотрібних запитах, що надходять до вашого сервера, і покращить продуктивність.

Якщо вам потрібна «жива» функція на вході, ви можете використовувати wire:model.live, щоб увімкнути цю функцію .

Примітка: це одна з небагатьох критичних змін із v2 на v3.

Запити групуються

У Livewire v2, якщо у вас є кілька компонентів використовуючи wire:poll або диспетчеризацію та прослуховування подій, кожен із цих компонентів надсилатиме окремі запити на сервер для кожного опитування чи події. У Livewire v3 існує інтелектуальне групування запитів, щоб wire:polls, події, слухачі та виклики методів можна було групувати в один запит, коли це можливо, зберігаючи ще більше запитів і покращуючи продуктивність.

Реактивні властивості

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

`/** @modelable */` властивості

Ще одна проблема в Livewire v2 — це "моделювання" властивості з батьківського на дочірній компонент. Скажімо, вам потрібен компонент . Нелегко передати значення, а потім автоматично оновити його в батьківській системі щоразу, коли воно оновлюється в дочірній. У Livewire v3 ви можете додати wire:model під час використання вхідного компонента, а потім усередині вхідного компонента додати /** @modelable */ коментар над властивістю, де ви зберігаєте значення для компонента, і Livewire зробить це впоратися з рештою.

Доступ до даних і методів батьківського компонента за допомогою `$parent`

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

У Livewire v3 буде новий спосіб доступу до даних і методів батьківського компонента. Існує нова властивість $parent, до якої можна отримати доступ для виклику методів на батьківському пристрої.

Livewire v3 представить «ліниві» компоненти. Якщо у вас є компонент, який завантажується деякий час через якийсь дорогий запит або відображається у висувному вікні, яке не завжди відкривається, ви можете зачекати, щоб завантажити його, поки він не відобразиться на сторінці. У Livewire v3 просто додайте атрибут lazy під час відтворення компонента, і він не буде відображено спочатку. Коли він потрапляє у вікно перегляду, Livewire надсилає запит на його рендеринг. Ви також зможете додати вміст заповнювача, реалізувавши метод placeholder у своєму компоненті.

<?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 також включатиме нову директиву @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;
    }
}

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

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

У Livewire v3 ви Можна додати wire:navigate до будь-якого тегу прив’язки, і після натискання Livewire отримає сторінку у фоновому режимі, а потім дуже швидко замінить DOM, надаючи вашій програмі відчуття SPA. Якщо додати .також модифікатор prefetch, Livewire попередньо завантажить вміст посилання, щойно посилання буде наведено, що робить його ще швидшим!

І останнє, але не менш важливе: сайт і документи 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;
    }
}

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

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

І останнє, але не менш важливе: сайт і документи Livewire отримали новий дизайн!

<!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 v3. Якщо ваш бізнес покладається на Livewire і ви хочете підтримати розробку версії 3 або вам потрібна допомога в підтримці ваших програм Livewire, приєднайтеся до офіційної Програми підтримки.

Нове ядро на базі Alpine

Сценарії, стилі та Alpine від Livewire вводяться автоматично

Гаряче перезавантаження без етапу збірки

`wire:transition`

Напишіть функції JavaScript у своїх класах PHP

`/** @locked */` властивості

`wire:model` за замовчуванням відкладено

Запити групуються

Реактивні властивості

`/** @modelable */` властивості

Доступ до даних і методів батьківського компонента за допомогою `$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 */ властивості

wire:model за замовчуванням відкладено

Запити групуються

Реактивні властивості

/** @modelable */ властивості

Доступ до даних і методів батьківського компонента за допомогою $parent

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

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

Висновок

Comments

Yurij Finiv

Full stack

All-in-one SEO platform for teams and individuals

Нове ядро на базі Alpine

`wire:transition`

`/** @locked */` властивості

`wire:model` за замовчуванням відкладено

`/** @modelable */` властивості

Доступ до даних і методів батьківського компонента за допомогою `$parent`