packagist livewire/livewire v0.5.0

latest releases: dev-main, v3.4.11, dev-add-without-lazy-loading-test-helper...
4 years ago

Upgrade Guide

  • Change all public property references in Blade views to use the new $this->[property] syntax:
<div>
    <button wire:click="increment">+</button>

    <!-- Before -->
    {{ $count }}

    <!-- After -->
    {{ $this->count }}
</div>
  • Remove all instances of storing data (ex. Eloquent Models) inside protected properties. (If you're wondering why this change was made, reference this post)
    Before
// Class
class ShowPost extends Component
{
    protected $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }

    public function render()
    {
        return view('livewire.show-post', [
            'post' => $this->post,
        ]);
    }
}
// View
<div>
    <h1>{{ $post->title }}</h1>
</div>

After

// Class
class ShowPost extends Component
{
    public $postId;

    public function mount(Post $post)
    {
        $this->postId = $post->id;
    }

    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

    public function render()
    {
        return view('livewire.show-post');
    }
}
// View
<div>
    <h1>{{ $this->post->title }}</h1>
</div>
  • Change wire:target and wire:ref properties, to use the new "action-based" loading system:
<div>
    <!-- Before -->
    <button wire:click="someAction" wire:ref="foo">
        Do Something
        <span wire:loading wire:target="foo">...</span>
    </button>

    <!-- After -->
    <button wire:click="someAction">
        Do Something
        <span wire:loading wire:target="someAction">...</span>
    </button>
</div>

Added

  • Access to $this from Livewire views (public properties are no longer automatically passed)
  • Computed properties (getFooProperty makes the $this->foo property accessible to the component and Blade view)
  • Data casting: protected $casts = ['foo' => 'data']; (supports "dates", "collections", and "custom casters" (classes that implement a "hydrate" and "dehydrate" method))
  • "Stub Management System": artisan livewire:stub will publish a "default" stub that you can modify and will be used to drive artisan make:livewire command. You can also public custom stubs: artisan livewire:stub foo, and use them to drive a make command: artisan make:livewire --stub=foo
  • wire:loading is automatically scoped to the element it's defined on IF the element fires some action like wire:click="someAction".
  • The wire:target directive now references a Livewire action, instead of an element reference (wire:ref). Example: <button wire:click="foo">Click Me <span wire:loading wire:target="foo">loading...</span></button>
  • wire:ref has been removed
  • Protected properties are no longer cached between Livewire requests. The idiomatic way to store eloquent models now, is to store their ids as public properties, and query the database for them in a computed property.
  • Added assertNotSet
  • Added assertHasErrors
  • The base component class (Livewire\Component) is now macroable.

Fixed

  • Multiple loading directives on the same element (wire:loading.attr & wire:loading.class) didn't work (only the first one defined did) - this is fixed
  • (loading state blip when successful form submission): Loading state will "not" change while component is redirecting
  • artisan livewire:touch was broken (didn't have the right command signature of it's parent)
  • Redirecting from a mount method was broken - fixed now
  • Removed $this->cache() helper. Livewire no longer manages anything relating to caching.
  • nulls passed as parameters to components were acting weird. The binding was off.

Don't miss a new livewire release

NewReleases is sending notifications on new releases.