Upcoming Livewire v3 Features
Last Wednesday at Larcon Online, Caleb Porzio gave a talk called "The Future of Livewire" demoing all the new features planned for Livewire v3. In this article, we'll go over those features again in case you missed the talk or want a second look.
All new Alpine-based core
The entire Livewire core has been rewritten. The new core relies on Alpine more, using its Morph, History, and other plugins under the hood, which means Livewire has better diffing, features can be built faster, and there's less duplication between Livewire and Alpine. Restructuring the codebase and relying on Alpine more also enabled several of the new features to be added.
Livewire scripts, styles, and Alpine are injected automatically
After composer installing Livewire v2, you have to manually add @livewireStyles, @livewireScripts, and Alpine to your layout. With Livewire v3, you'll just install Livewire and everything you need is automatically injected - including Alpine!
<!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
Livewire v3 will include hot reloading without a build step. Just save a file in your editor and instantly see those changes in your browser without breaking your components' state!
wire:transition
Alpine has had transitions for a while, but Livewire v3 will have a wrapper around x-transition called wire:transition. Add wire:transition to any element that will be shown or hidden using Livewire and get those really nice transitions. Since wire:transition utilizes x-transition under the hood, all the modifiers like .opacity and .duration will be supported as well.
Write JavaScript functions in your PHP classes
Livewire v3 will support writing JavaScript functions directly in your backend Livewire components. Add a function to your component, add a /** @js */ comment above the function, then return some JavaScript code using PHP's HEREDOC syntax and call it from your frontend. The JavaScript code will be executed without sending any requests to your backend.
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 will support locked properties - properties that cannot be updated from the frontend. Add a /** @locked / comment above a property on your component, and Livewire will throw an exception if someone attempts to update that property from the frontend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
wire:model is deferred by default
When Livewire was first released, it was primarily meant for writing components like search that needed a really "live" feel, so automatically sending updates to the server every time an input was updated made sense. Now, we're using Livewire to build all kinds of apps. As Livewire and its usage have evolved, we've realized that the "deferred" behavior makes more sense for 95% of forms, so in v3 "deferred" functionality will be the default. This will save on unnecessary requests going to your server and improve performance.
When you need the "live" functionality on an input, you may use wire:model.live to enable that functionality.
Note: this is one of the very few breaking changes from v2 to v3.
Requests are batched
In Livewire v2, if you have multiple components using wire:poll or dispatching and listening for events, each one of those components will send separate requests to the server on each poll or event. In Livewire v3, there is intelligent batching of requests so that wire:polls, events, listeners, and method calls can be batched into one request when possible, saving even more requests and improving performance.
Reactive properties
When using nested components in Livewire v2, if a property on the parent component is updated, the child component's data is not automatically kept in sync. There are manual workarounds using events and listeners, but it's not ideal. In Livewire v3, when you pass a piece of data to a child component, add a /** @prop */ comment above the property in the child, then update it in the parent component, it will be updated in the child component
<?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
Another pain point in Livewire v2 is "modelling" a property from a parent to a child component. Say you wanted a <livewire:todo-input /> component. It's not easy to pass in a value then have it automatically updated in the parent anytime it's updated in the child. In Livewire v3, you can add wire:model when using the input component, then inside the input component add a /** @modelable */ comment above the property where you're storing the value for the component and Livewire will handle the rest.
<?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
In Livewire v3, there will be a new way to access a parent component's data and methods. There's a new $parent property that can be accessed to call methods on the 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 will also include a new @teleport Blade directive that will allow you to "teleport" a piece of markup and render it another part of the DOM. This can sometimes help avoid z-index issues with modals and slideouts.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>
Lazy components
Livewire v3 will introduce "lazy" components. If you have a component that takes a while to load due to some expensive query or is rendered in a slideout that isn't always opened, you might want to wait to load it until it's shown on the page. In Livewire v3, just add a lazy attribute when rendering a component and it won't be rendered initially. When it comes into the viewport, Livewire will fire off a request to render it. You'll also be able to add placeholder content by implementing the placeholder method on your component.
<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
In Livewire v3, you'll be abe to add wire:navigate to any anchor tag, and when clicked, Livewire will fetch the page in the background, then swap the DOM out really quickly giving your app a more SPA-like feel. If you add the .prefetch modifier as well, Livewire will prefetch the link's contents as soon as the link is hovered, making it feel even faster!
<a href="/example" wire:navigate.prefetch>Example Page</a>
@persist
Another really cool Blade directive Livewire v3 will include is @persist. Using @persist in combination with wire:navigate, will enable you to have parts of your apps that "persist" across page changes. A good example of this functionality is a podcast player that continues to play while you move around in the app.
<!DOCTYPE html>
<html lang="en">
<body>
<x-podcast-header />
<x-podcast-body>
{{ $slot }}
</x-podcast-body>
@persist('player')
<x-podcast-player />
@endpersist
</body>
</html>
New laravel-livewire.com design
Last but not least, the Livewire site and docs are getting a fresh new design!
Conclusion
We're really looking forward to all these new features in Livewire v3. If your business relies on Livewire and you want to support the development of v3 or want help supporting your Livewire apps, consider joining the official Support Program.