W ubiegłą środę w Larcon Online Caleb Porzio wygłosił prelekcję zatytułowaną „The Future of Livewire”, demonstrując wszystkie nowe funkcje planowane dla Livewire v3. W tym artykule ponownie omówimy te funkcje na wypadek, gdybyś przegapił rozmowę lub chciałbyś jeszcze raz spojrzeć.
Wszystkie nowe rdzenie Alpine
Cały rdzeń Livewire został przepisany. Nowy rdzeń w większym stopniu opiera się na Alpine, używając Morph, History i innych wtyczek pod maską, co oznacza, że Livewire ma lepsze różnice, funkcje można budować szybciej i jest mniej duplikacji między Livewire i Alpine. Restrukturyzacja bazy kodu i większe poleganie na Alpine umożliwiły również dodanie kilku nowych funkcji.
Skrypty Livewire, style i Alpine są wstrzykiwane automatycznie
Po zainstalowaniu przez kompozytora Livewire v2 musisz ręcznie dodać @livewireStyles, @livewireScripts i Alpine do swojego układu. Dzięki Livewire v3 wystarczy zainstalować Livewire, a wszystko, czego potrzebujesz, zostanie automatycznie wstrzyknięte - w tym Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
- <script src="//unpkg.com/alpinejs" defer></script>
- @livewireStyles
- @livewireScripts
</head>
<body>
...
</body>
</html>Ponowne ładowanie na gorąco bez etapu kompilacji
Livewire v3 będzie obejmować ponowne ładowanie na gorąco bez etapu kompilacji. Po prostu zapisz plik w swoim edytorze i natychmiast zobacz te zmiany w przeglądarce bez naruszania stanu komponentów!
wire:transition
Alpine miał przejścia na chwilę, ale Livewire v3 będzie miał otoczkę wokół x-transition o nazwie wire:transition. Dodaj wire:transition do dowolnego elementu, który będzie pokazywany lub ukryty za pomocą Livewire i uzyskaj naprawdę ładne przejścia. Ponieważ wire:transition wykorzystuje x-transition pod maską, wszystkie modyfikatory, takie jak .opacity i .duration, będą również obsługiwane.
Zapisz funkcje JavaScript w swoich klasach PHP
<Livewire v3 będzie wspierać pisanie funkcji JavaScript bezpośrednio w komponentach Livewire. Dodaj funkcję do swojego komponentu, dodaj komentarz /** @js */ nad funkcją, a następnie zwróć kod JavaScript przy użyciu składni PHP HEREDOC i wywołaj go ze swojego interfejsu użytkownika. Kod JavaScript zostanie wykonany bez wysyłania żądań do Twojego zaplecza.
<?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 obsługuje zablokowane właściwości — właściwości, których nie można zaktualizować z poziomu interfejsu użytkownika. Dodaj komentarz /** @locked / nad właściwością Twojego komponentu, a Livewire zgłosi wyjątek, jeśli ktoś spróbuje zaktualizować tę właściwość z interfejsu.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}wire:model jest odroczone domyślnie
Kiedy Livewire został po raz pierwszy wydany, był przeznaczony przede wszystkim do pisania komponentów, takich jak wyszukiwanie, które wymagały naprawdę „żywego” wrażenia, więc automatyczne wysyłanie aktualizacji do serwera za każdym razem, gdy dane wejściowe zostały zaktualizowane, miało sens. Teraz używamy Livewire do tworzenia wszelkiego rodzaju aplikacji. Ponieważ Livewire i jego użycie ewoluowały, zdaliśmy sobie sprawę, że zachowanie „odroczone” ma więcej sensu dla 95% formularzy, więc w wersji 3 funkcjonalność „odroczona” będzie domyślna. Pozwoli to zaoszczędzić na niepotrzebnych żądaniach wysyłanych do serwera i poprawić wydajność.
Kiedy potrzebujesz funkcji „na żywo” na wejściu, możesz użyć wire:model.live, aby włączyć tę funkcję .
Uwaga: jest to jedna z niewielu przełomowych zmian z v2 na v3.
Żądania są grupowane
W Livewire v2, jeśli masz wiele komponentów używając wire:poll lub rozsyłania i nasłuchiwania zdarzeń, każdy z tych komponentów wyśle osobne żądania do serwera przy każdym odpytaniu lub zdarzeniu. W Livewire v3 istnieje inteligentne grupowanie żądań, dzięki czemu wire:polls, zdarzenia, odbiorniki i wywołania metod mogą być grupowane w jedno żądanie, jeśli to możliwe, oszczędzając jeszcze więcej żądań i poprawiając wydajność.
Właściwości reaktywne
W przypadku używania komponentów zagnieżdżonych w Livewire v2, jeśli właściwość komponentu nadrzędnego jest aktualizowana, dane komponentu potomnego nie są automatycznie synchronizowane. Istnieją ręczne obejścia przy użyciu zdarzeń i detektorów, ale nie jest to idealne rozwiązanie. W Livewire v3, gdy przekazujesz fragment danych do komponentu podrzędnego, dodaj /** @reactive */ komentarz nad właściwością w komponencie potomnym, a następnie zaktualizuj go w komponencie nadrzędnym, zostanie zaktualizowany w komponencie potomnym.
Kolejnym problemem w Livewire v2 jest "modelowanie" właściwości od elementu nadrzędnego do elementu podrzędnego. Załóżmy, że potrzebujesz komponentu wire:model podczas używania komponentu wejściowego, a następnie wewnątrz komponentu wejściowego dodaj komentarz /** @modelable */ nad właściwością, w której przechowujesz wartość komponentu, a Livewire zajmij się resztą.
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component
{
/** @prop */
public $todos;
public function render()
{
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}Kolejnym problemem w Livewire v2 jest "modelowanie" właściwości od elementu nadrzędnego do elementu podrzędnego. Załóżmy, że potrzebujesz komponentu wire:model podczas używania komponentu wejściowego, a następnie wewnątrz komponentu wejściowego dodaj komentarz /** @modelable */ nad właściwością, w której przechowujesz wartość komponentu, a Livewire zajmij się resztą.
Dostęp do danych i metod komponentu nadrzędnego za pomocą $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;
}
}W Livewire v3 będzie nowy sposób na dostęp do danych i metod komponentu nadrzędnego. Dostępna jest nowa właściwość $parent, do której można uzyskać dostęp w celu wywoływania metod na obiekcie nadrzędnym.
Livewire v3 będzie również zawierał nową dyrektywę @teleport Blade, która pozwoli ci "teleportować" fragment znacznika i renderować go jako kolejną część DOM. Czasami może to pomóc w uniknięciu problemów z indeksem Z w przypadku modów i slajdów.
<?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;
}
}Livewire v3 będzie również zawierał nową dyrektywę @teleport Blade, która pozwoli ci "teleportować" fragment znacznika i renderować go jako kolejną część DOM. Czasami może to pomóc w uniknięciu problemów z indeksem Z w przypadku modów i slajdów.
Leniwe komponenty
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>Livewire v3 wprowadzi "leniwe" komponenty. Jeśli masz komponent, którego załadowanie zajmuje trochę czasu z powodu kosztownego zapytania lub jest renderowany na wysuwanym wysuwaniu, który nie zawsze jest otwarty, możesz poczekać z jego załadowaniem, aż pojawi się na stronie. W Livewire v3 wystarczy dodać atrybut lazy podczas renderowania komponentu, a nie będzie on renderowany na początku. Kiedy pojawi się w widoku, Livewire wyśle prośbę o jego wyrenderowanie. Będziesz także mógł dodać zawartość zastępczą, implementując metodę placeholder w swoim komponencie.
W Livewire v3 możesz będzie można dodać wire:navigate do dowolnego znacznika kotwicy, a po kliknięciu Livewire pobierze stronę w tle, a następnie bardzo szybko zamieni DOM, dzięki czemu Twoja aplikacja będzie bardziej przypominać SPA. Jeśli dodasz .prefetch modyfikatora, Livewire pobierze wstępnie zawartość linku, gdy tylko najedziesz na link, dzięki czemu będzie on działał jeszcze szybciej!
<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;
}
}
<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;
}
}W Livewire v3 możesz będzie można dodać wire:navigate do dowolnego znacznika kotwicy, a po kliknięciu Livewire pobierze stronę w tle, a następnie bardzo szybko zamieni DOM, dzięki czemu Twoja aplikacja będzie bardziej przypominać SPA. Jeśli dodasz .prefetch modyfikatora, Livewire pobierze wstępnie zawartość linku, gdy tylko najedziesz na link, dzięki czemu będzie on działał jeszcze szybciej!
<a href="/example" wire:navigate.prefetch>Example Page</a>Another Naprawdę fajna dyrektywa Blade, którą Livewire v3 będzie zawierać, to @persist. Użycie @persist w połączeniu z wire:navigate pozwoli Ci mieć części aplikacji, które będą „utrwalać się” po zmianach na stronie. Dobrym przykładem tej funkcji jest odtwarzacz podcastów, który odtwarza się, gdy poruszasz się po aplikacji.Nowy wygląd strony 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>
