Update docs for v2.6.0

lifecycle-hooks.blade.php

@@ -7,10 +7,11 @@
 @component('components.table')
 Hooks | Description
 --- | ---
+boot | Runs on every request, immediately after the component is instantiated, but before any other lifecycle methods are called
 mount | Runs once, immediately after the component is instantiated, but before `render()` is called
-hydrate | Runs on every request, after the component is hydrated, but before an action is performed, or `render()` is called
+hydrate | Runs on every subsequent request, after the component is hydrated, but before an action is performed, or `render()` is called
 hydrateFoo | Runs after a property called `$foo` is hydrated
-dehydrate | Runs on every request, before the component is dehydrated, but after `render()` is called
+dehydrate | Runs on every subsequent request, before the component is dehydrated, but after `render()` is called
 dehydrateFoo | Runs before a property called `$foo` is dehydrated
 updating | Runs before any update to the Livewire component's data (Using `wire:model`, not directly inside PHP)
 updated | Runs after any update to the Livewire component's data (Using `wire:model`, not directly inside PHP)
@@ -29,6 +30,11 @@ class HelloWorld extends Component
 {
     public $foo;
 
+    public function boot()
+    {
+        //
+    }
+
     public function mount()
     {
         //

loading-states.blade.php

@@ -17,12 +17,6 @@
 
 When the "Checkout" button is clicked, the "Processing Payment..." message will show. When the action is finished, the message will disappear.
 
-If you want to avoid flickering because loading is very fast, you can add the `.delay` modifier, and it will only show up if loading takes longer than `200ms`.
-
-@component('components.code', ['lang' => 'blade'])
-<div wire:loading.delay>...</div>
-@endcomponent
-
 By default, Livewire set's a loading element's "display" CSS property to "inline-block". If you want Livewire to use "flex" or "grid", you can use the following modifiers.
 
 @component('components.code', ['lang' => 'blade'])
@@ -45,6 +39,26 @@
 </div>
 @endcomponent
 
+## Delaying loading indicator {#delaying-loading}
+
+If you want to avoid flickering because loading is very fast, you can add the `.delay` modifier, and it will only show up if loading takes longer than `200ms`.
+
+@component('components.code', ['lang' => 'blade'])
+<div wire:loading.delay>...</div>
+@endcomponent
+
+If you wish, you can customize the delay duration with the following modifiers:
+
+@component('components.code', ['lang' => 'blade'])
+<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
+<div wire:loading.delay.shorter>...</div>  <!-- 100ms -->
+<div wire:loading.delay.short>...</div>    <!-- 150ms -->
+<div wire:loading.delay>...</div>          <!-- 200ms -->
+<div wire:loading.delay.long>...</div>     <!-- 300ms -->
+<div wire:loading.delay.longer>...</div>   <!-- 500ms -->
+<div wire:loading.delay.longest>...</div>  <!-- 1000ms -->
+@endcomponent
+
 ## Targeting specific actions {#targeting-actions}
 
 The method outlined above works well for simple components. For more complex components, you may want to show loading indicators only for specific actions.
@@ -75,6 +89,19 @@
 </div>
 @endcomponent
 
+If you wish to trigger a loading indicator when ANY of the properties of an array change, you can simply target the entire array:
+
+@component('components.code', ['lang' => 'blade'])
+<div>
+    <input type="text" wire:model="post.title">
+    <input type="text" wire:model="post.author">
+    <input type="text" wire:model="post.content">
+
+    <div wire:loading wire:target="post">
+        Updating Post...
+    </div>
+</div>
+@endcomponent
 
 ## Targeting models {#targeting-models}
 In addition to actions, you can also target whenever a `wire:model` is synchronized.

pagination.blade.php

@@ -76,6 +76,44 @@ public function render()
 @endverbatim
 @endcomponent
 
+## Multiple paginators on the same page {#multiple-paginators}
+
+Because Livewire hardcodes the `$page` property inside the `WithPagination` trait, there is no way to have two different paginators on the same page because each will be competing for the same property name in the query string of the URL bar.
+
+Here’s an example of two different components that might exist on the same page. By giving the second one (the comments one) a name, Livewire will pick it up and handle everything accordingly.
+
+@component('components.code', ['lang' => 'php'])
+class ShowPosts extends Livewire\Component
+{
+    public function render()
+    {
+        return view('livewire.show-posts', [
+            'posts' => Post::paginate(10),
+        ]);
+    }
+}
+@endcomponent
+
+@component('components.code', ['lang' => 'php'])
+class ListPostComments extends Livewire\Component
+{
+	  public Post $post;
+
+    public function render()
+    {
+        return view('livewire.show-posts', [
+            'posts' => $post->comments()->paginate(10, ['*'], 'commentsPage'),
+        ]);
+    }
+}
+@endcomponent
+
+Now in the query string, both paginators will be represented like so:
+
+@component('components.code', ['lang' => 'html'])
+?page=2&commentsPage=3
+@endcomponent
+
 ## Using The Bootstrap Pagination Theme {#custom-pagination-view}
 Like Laravel, Livewire's default pagination view uses Tailwind classes for styling. If you use Bootstrap in your application, you can enable the Bootstrap theme for the pagination view using the `$paginationTheme` property on your component.
 

properties.blade.php

@@ -7,6 +7,7 @@
   * [Lazy Updating](#lazy-updating) { .font-normal.text-sm.text-blue-800 }
   * [Deferred Updating](#deferred-updating) { .font-normal.text-sm.text-blue-800 }
 * [Binding Directly To Model Properties](#binding-models) { .text-blue-800 }
+* [Custom (Wireable) Properties](#wireable-properties) { .text-blue-800 }
 * [Computed Properties](#computed-properties) { .text-blue-800 }
 
 <div>&nbsp;</div>
@@ -282,6 +283,101 @@ public function save()
 @endslot
 @endcomponent
 
+Livewire also supports binding to relationships on Eloquent models like so:
+
+@component('components.code-component')
+@slot('class')
+class EditUsersPosts extends Component
+{
+    public User $user;
+
+    protected $rules = [
+        'user.posts.*.title'
+    ];
+
+    public function save()
+    {
+		$this->validate();
+
+        $this->user->posts->each->save();
+    }
+}
+@endslot
+@slot('view')
+@verbatim
+<div>
+    @foreach ($user->posts as $i => $post)
+        <input type="text" wire:model="user.posts.{{ $i }}.title" />
+
+        <span class="error">
+            @error('user.posts.{{ $i }}.title') {{ $message }} @enderror
+        </span>
+    @endforeach
+
+    <button wire:click="save">Save</button>
+</div>
+@endverbatim
+@endslot
+@endcomponent
+
+## Custom (Wireable) Properties {#wireable-properties}
+
+Sometimes you may want to set a component property to a non-model object that's available inside your app, like a DTO (Data Transfer Object).
+
+For example, let’s say we have a custom object in our app called `Settings`. Rather than just store settings data as a plain array on our Livewire component, we can attach associated behavior to this data with a convenient wrapper object or DTO like `Settings`:
+
+@component('components.code-component')
+@slot('class')
+class Settings implements Livewire\Wireable
+{
+    public $items = [];
+
+    public function __construct($items)
+    {
+        $this->items = $items;
+    }
+
+    ...
+
+    public function toLivewire()
+    {
+        return $this->items;
+    } 
+
+    public static function fromLivewire($value)
+    {
+        return new static($value);
+    } 
+}
+@endslot
+@endcomponent
+
+Now you can freely use this object as a public property of your component as long as that object implements the `Livewire\Wireable` interface AND the property is typhinted like so:
+
+@component('components.code-component')
+@slot('class')
+class SettingsComponent extends Livewire\Component
+{
+    public Settings $settings;
+
+    public function mount() {
+        $this->settings = new Settings([
+            'foo' => 'bar',
+        ]);
+    }
+
+    public function changeSetting()
+    {
+        $this->settings->foo = 'baz';
+    }
+}
+@endslot
+@endcomponent
+
+And as you can see, changes to the component are persisted between requests because, with `Wireable`, Livewire knows how to “dehydrate” and “re-hydrate” this property on your component.
+
+> If words like “hydrate” or “dehydrate” in the context of Livewire are fuzzy for you, [give this post a quick read](https://calebporzio.com/livewire-isnt-actually-live).
+
 ## Computed Properties {#computed-properties}
 
 Livewire offers an API for accessing dynamic properties. This is especially helpful for deriving properties from the database or another persistent store like a cache.