Upcoming Livewire v3 features and changes

Last Wednesday at Larcon Online, Caleb Porzio gave a talk titled “The Future of Livewire” to present a demo of all the new features planned for Livewire v3. In this article, we’ll go over these features again in case you missed the point or want a second look.

All new core on an alpine basis

The entire Livewire core has been rewritten. The new core relies more on Alpine, using Morph, History, and other plug-ins under the hood, meaning Livewire has a better difference, features can be created faster, and there’s less duplication between Livewire and Alpine. The refurbishment of the code base and the reliance on Alpine Più also allowed for the addition of many of the new features.

Livewire scripts, styles and Alpine are inserted automatically

After the composer has installed Livewire v2, you need to manually add @livewireStyles, @livewireScriptsand Alpine to your layout. With Livewire v3, you will simply install Livewire and everything you need will be automatically injected, including Alpine!

 1DOCTYPE html>

 2<html lang="en">

 3<head>

 4    <script src="//unpkg.com/alpinejs" defer>script> 

 5    @livewireStyles

 6    @livewireScripts

 7head>

 8<body>

 9    ...

10body>

11html>

Hot refill without a build step

Livewire v3 will include hot reload without a build step. Just save a file in your editor and instantly see the changes in your browser without breaking the state of your components!

wire:transition

Alpine has had transitions for a while, but Livewire v3 will have a wrapper x-transition called wire:transition. To add wire:transition to any element that will be shown or hidden using Livewire and you get those really cool transitions. From wire:transition uses x-transition under the hood, all modifiers like them .opacity And .duration it will also be supported.

Write JavaScript functions in your PHP classes

Livewire v3 will support writing JavaScript functions directly to the 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 run without sending any requests to your backend.

 1

 2 

 3namespace AppHttpLivewire;

 4 

 5class Todos extends LivewireComponent

 6{

 7    /** @prop */

 8    public $todos;

 9 

10    /** @js  */

11    public function clear()

12    {

13        return <<<'JS'

14            this.todo = '';

15        JS;

16    }

17}

1<div> 2 <input wire:model="todo" /> 3  4 <button wire:click="clear">Clearbutton> 5div>

/** @locked */ property

Livewire v3 will support locked properties, properties that cannot be updated from the frontend. Add a /** @locked / comment over a property on your component and Livewire will throw an exception if anyone tries to update that property from the frontend.

1

2 

3namespace AppHttpLivewire;

4 

5class Todos extends LivewireComponent

6{

7    /** @locked  */

8    public $todos = [];

9}

wire:model it is deferred by default

When Livewire was first released, it was primarily meant to write components such as search that needed a truly “live” feel, so automatically sending updates to the server whenever an input was updated made sense. We are now using Livewire to build all kinds of apps. As Livewire and its use evolve, we have found that “deferred” behavior makes more sense for 95% of modules, so “deferred” functionality will be the default in v3. This will save unnecessary requests to your server and improve performance.

When you need “live” functionality on an input, you can use wire:model.live to enable this feature.

Note: This is one of the very few notable changes from v2 to v3.

The requests are grouped

In Livewire v2, if using multiple components wire:poll or by sending and listening to events, each of these components will send separate requests to the server on each poll or event. In Livewire v3, there is an intelligent batch of requests so that wire:polls, events, listeners, and method calls can be grouped into a single 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 data of the child component is not automatically kept in sync. There are manual solutions that use events and listeners, but that’s not ideal. In Livewire v3, when passing data to a child component, add a /** @prop */ comment over the property in the child, then update it in the parent component, it will update in the child component.

 1

 2 

 3namespace AppHttpLivewire;

 4 

 5class TodosCount extends LivewireComponent

 6{

 7    /** @prop */

 8    public $todos;

 9 

10    public function render()

11    {

12        return <<<'HTML'

13            <div>

14                Todos: {{ count($todos) }}

15            div>

16        HTML;

17    }

18}

/** @modelable */ property

Another pain point in Livewire v2 is the “modeling” of a property from a parent component to a child component. You say you wanted a component. It is not easy to pass a value, then automatically update it in the parent every time it is updated in the child. In Livewire v3, you can add wire:model when using the input component, inside the input component add to /** @modelable */ comment above the property where you are storing the value for the component and Livewire will handle the rest.

 1

 2 

 3namespace AppHttpLivewire;

 4 

 5class Todos extends LivewireComponent

 6{

 7    public $todo = '';

 8 

 9    public $todos = [];

10 

11 public function add() ...

12 { 13 $this->todos[] = $this->todo; 14 $this->todo = ''; 15 }

16  17 public function render() 18 { 19 return <<<'HTML' 20 <div> 21 <livewire:todo-input wire:model="todo" /> 22 <ul> 23 @foreach ($todo as $todos) 24 <li>{{ $todo }}li> 25 @endforeach 26 ul> 27 div> 28 HTML; 29 } 30}

1 2  3namespace AppHttpLivewire; 4  5class TodoInput extends LivewireComponent 6{ 7 /** @modelable */ 8 public $value = ''; 9  10 public function render() 11 { 12 return <<<'HTML' 13 <div> 14 <input wire:model="value"> 15 div> 16 HTML; 17 } 18}

Access the main component data and methods using $parent

In Livewire v3, there will be a new way to access the data and methods of a core component. There is a new one $parent property that can be accessed to call methods on the parent.

 1

 2 

 3namespace AppHttpLivewire;

 4 

 5class TodoInput extends LivewireComponent

 6{

 7    /** @modelable  */

 8    public $value = '';

 9 

10    public function render()

11    {

12        return <<<'HTML'

13            <div>

14                <input

15                    wire:model="value"

16                    wire:keydown.enter="$parent.add()"

17                >

18            div>

19        HTML;

20    }

21}

@teleport

Livewire v3 will also include a new one @teleport Blade directive which will allow you to “teleport” a piece of markup and make it another part of the DOM. This can sometimes help avoid z-index problems with modals and slideouts.

1<div>

2    <button wire:click="showModal">Show modalbutton>

3 

4    @teleport('#footer')

5        <x-modal wire:model="showModal">

6            

7        x-modal>

8    @endteleport

9div>

Lazy components

Livewire v3 will introduce “lazy” components. If you have a component that takes some time to load due to an expensive query or appears in a slideout that isn’t always open, you may want to wait to load it until it appears on the page. In Livewire v3, simply add a lazy attribute when rendering a component and will not initially run. When it enters the window, Livewire will launch a request to return it. You will also be able to add placeholder content by implementing the placeholder method on your component.

1<div>

2    <button wire:click="showModal">Show modalbutton>

3 

4    @teleport('#footer')

5        <x-modal wire:model="showModal">

6            <livewire:example-component lazy /> 

7        x-modal>

8    @endteleport

9div>

1 2  3namespace AppHttpLivewire; 4  5class ExampleComponent extends LivewireComponent 6{ 7 public static function placeholder() 8 { 9 return <<<'HTML' 10 <x-spinner /> 11 >>> 12 } 13  14 public function render() /** [tl! collapse:7] */ 15 { 16 return <<<'HTML' 17 <div> 18 Todos: {{ count($todos) }} 19 div> 20 HTML; 21 } 22}

wire:navigate

In Livewire v3, you will be able to add wire:navigate to any anchor tag, and when clicked, Livewire will fetch the page in the background, then replace the DOM very quickly giving your app a more SPA-like feel. If you add the .prefetch even modifier, Livewire will fetch the contents of the link as soon as the link is passed, making it even faster!

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

@persist

Another really cool Blade directive that Livewire v3 will include is @persist. Using @persist in combination with wire:navigate, will allow you to have parts of your apps that “persist” during page changes. A good example of this feature is a podcast player that keeps playing as you move around the app.

 1DOCTYPE html>

 2<html lang="en">

 3<body>

 4    <x-podcast-header />

 5 

 6    <x-podcast-body>

 7        {{ $slot }}

 8    x-podcast-body>

 9 

10    @persist('player')

11        <x-podcast-player />

12    @endpersist

13body>

14html>

New design laravel-livewire.com

Last but not least, Livewire’s site and docs are getting a new design!

Conclusion

We look forward to all of these new features in Livewire v3. If your business relies on Livewire and would like to support v3 development or would like assistance to support your Livewire apps, consider joining the official support program.

Leave a Reply

%d bloggers like this: