Caleb Porzio just announced that Laravel Livewire v3 has released on July 20th, at Laracon US!
Alpine-based core
The Livewire core has undergone a complete rewrite, leveraging Alpine more extensively. It now utilizes Alpine's Morph, History, and other plugins under the hood, resulting in improved diffing capabilities and faster feature development. This restructuring also minimizes redundancy between Livewire and Alpine, facilitating the seamless addition of several new features to the framework.
Livewire scripts, styles, and Alpine are injected automatically
In Livewire v2, after installing with Composer, you must manually include @livewireStyles, @livewireScripts, and Alpine in your layout. However, in Livewire v3, upon installation, everything is automatically injected, including Alpine, eliminating the need for manual inclusion.
<!DOCTYPE html>
<html lang="en">
<head>
- <script src="//unpkg.com/alpinejs" defer></script>
- @livewireStyles
- @livewireScripts
</head>
<body>
...
</body>
</html>
Hot reloading without a build step
While Alpine has had transitions for some time, Livewire v3 introduces a new feature called wire:transition, which acts as a wrapper around x-transition. By simply adding wire:transition to any Livewire-controlled element for showing or hiding, you can achieve smooth and elegant transitions. Leveraging x-transition under the hood, wire:transition also supports modifiers like .opacity and .duration, providing a seamless and versatile transition experience.
Write JavaScript functions in your PHP classes
In Livewire v3, you can directly write JavaScript functions within your backend Livewire components. Simply add a function to your component, include a /** @js */ comment above it, and return JavaScript code using PHP's HEREDOC syntax. You can then call this function from your frontend without sending any requests to the backend. Livewire v3 empowers seamless integration of JavaScript logic into your components, enhancing frontend interactivity and reducing server requests.
<?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
In Livewire v3, you can utilize locked properties, which are properties that cannot be updated from the frontend. By adding a /** @locked */ comment above a property on your component, Livewire ensures that any attempts to modify that property from the frontend will result in an exception. This feature provides enhanced security and control over specific properties, safeguarding critical data from unintended modifications.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
wire:model is deferred by default
Upon its initial release, Livewire focused on components like search that required a "live" feel, leading to automatic updates to the server upon every input change. However, Livewire's usage has expanded to include various applications. With this evolution, it has become evident that the "deferred" behavior better suits around 95% of forms. In Livewire v3, "deferred" functionality will be the default, optimizing performance by reducing unnecessary requests to the server.
For instances requiring the "live" functionality on an input, you can utilize wire:model.live to enable this specific feature. This approach ensures a more efficient and responsive experience while maintaining the advantages of deferred updates for most form components.
Requests are batched
In Livewire v2, having multiple components using wire:poll or dispatching and listening for events led to separate requests to the server for each poll or event. However, Livewire v3 introduces intelligent batching of requests, where wire:polls, events, listeners, and method calls can be combined into a single request when feasible. This intelligent batching optimizes performance, saving additional requests to the server and further enhancing the overall application efficiency.
Reactive properties
In Livewire v2, when using nested components, the child component's data doesn't automatically stay in sync with a property update in the parent component. Although there are workarounds involving events and listeners, they are not ideal. However, in Livewire v3, achieving data synchronization in nested components is much simpler. By passing data to a child component, adding a /** @prop */ comment above the property in the child, and subsequently updating it in the parent component, the child component's data will be automatically updated, streamlining the process and ensuring seamless data synchronization between parent and child components.
<?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 */ properties
In Livewire v2, "modelling" a property from a parent to a child component posed challenges, especially when using components like livewire:todo-input/. Automatically updating the parent when the child's value changes required workarounds. However, Livewire v3 offers a seamless solution with wire:model. Inside the input component, you can add a /** @modelable */ comment above the property where the component's value is stored. Livewire takes care of the rest, automatically updating the parent whenever the child's value changes, simplifying the process and improving data synchronization between parent and child components.
<?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;
}
}
Access parent component's data and methods using $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
In Livewire v3, a new @teleport Blade directive will be introduced, enabling you to "teleport" a specific piece of markup and render it in another part of the DOM. This feature proves valuable in resolving z-index issues often encountered with modals and slideouts. By utilizing @teleport, developers can achieve better control over rendering elements, enhancing the overall user experience and eliminating potential layout conflicts.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>
Lazy components
In Livewire v3, "lazy" components will be introduced to handle components that require some time to load due to complex queries or are rendered in slideouts that aren't always visible. To delay rendering until the component is shown on the page, simply add the lazy attribute when rendering the component. Livewire v3 will refrain from rendering it initially and will only send a request to render it when it comes into the viewport. Additionally, developers can add placeholder content by implementing the placeholder method on the component, providing users with a smooth and optimized browsing experience.
<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
Livewire v3 introduces the wire:navigate attribute that you can add to any anchor tag. When clicked, Livewire will fetch the page in the background and swiftly swap out the DOM, creating a more seamless Single Page Application (SPA)-like experience for your app. By including the .prefetch modifier, Livewire takes it a step further and prefetches the link's contents as soon as the link is hovered, enhancing the perceived speed and responsiveness of your application. This feature provides users with a smoother and more efficient browsing experience, making your Livewire-powered app feel faster and more dynamic.
<a href="/example" wire:navigate.prefetch>Example Page</a>
@persist
Livewire v3 introduces the @persist Blade directive, a powerful feature that, when combined with wire:navigate, allows you to create persistent elements across page changes in your app. For instance, you can implement a podcast player that continues to play uninterrupted as you navigate throughout the app. With @persist, essential components can be preserved, enhancing user experience and providing seamless functionality throughout the application. This functionality adds an extra layer of interactivity and convenience, making Livewire v3 even more versatile and attractive for building sophisticated web applications.
<!DOCTYPE html>
<html lang="en">
<body>
<x-podcast-header />
<x-podcast-body>
{{ $slot }}
</x-podcast-body>
@persist('player')
<x-podcast-player />
@endpersist
</body>
</html>
CONCLUSION
In conclusion, Laravel app development is going to experience significant enhancements with the arrival of Laravel Livewire v3. This new version promises to revolutionize software development by introducing various exciting features and improvements.
No comments yet