chore: update livewire to 3.0

composer.json

@@ -35,7 +35,7 @@
         "laravel/fortify": "^1.21",
         "laravel/telescope": "^5.0",
         "league/commonmark": "^2.4",
-        "livewire/livewire": "^2.12",
+        "livewire/livewire": "^3.0",
         "mockery/mockery": "^1.6",
         "nunomaduro/collision": "^7.0",
         "nunomaduro/larastan": "^2.6",

config/livewire.php

@@ -5,95 +5,63 @@
 return [
 
     /*
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
     | Class Namespace
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
     |
-    | This value sets the root namespace for Livewire component classes in
-    | your application. This value affects component auto-discovery and
-    | any Livewire file helper commands, like `artisan make:livewire`.
-    |
-    | After changing this item, run: `php artisan livewire:discover`.
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
     |
     */
 
     'class_namespace'       => 'App\\Http\\Livewire',
 
     /*
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
     | View Path
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
     |
-    | This value sets the path for Livewire component views. This affects
-    | file manipulation helper commands like `artisan make:livewire`.
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
     |
     */
 
     'view_path'             => resource_path('views/livewire'),
 
     /*
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
     | Layout
-    |--------------------------------------------------------------------------
-    | The default layout view that will be used when rendering a component via
-    | Route::get('/some-endpoint', SomeComponent::class);. In this case the
-    | the view returned by SomeComponent will be wrapped in "layouts.app"
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
     |
     */
 
     'layout'                => 'layouts.app',
 
     /*
-    |--------------------------------------------------------------------------
-    | Livewire Assets URL
-    |--------------------------------------------------------------------------
-    |
-    | This value sets the path to Livewire JavaScript assets, for cases where
-    | your app's domain root is not the correct path. By default, Livewire
-    | will load its JavaScript assets from the app's "relative root".
-    |
-    | Examples: "/assets", "myurl.com/app".
-    |
-    */
-
-    'asset_url'             => null,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Livewire App URL
-    |--------------------------------------------------------------------------
-    |
-    | This value should be used if livewire assets are served from CDN.
-    | Livewire will communicate with an app through this url.
-    |
-    | Examples: "https://my-app.com", "myurl.com/app".
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
     |
     */
 
-    'app_url'               => null,
+    'lazy_placeholder' => null,
 
     /*
-    |--------------------------------------------------------------------------
-    | Livewire Endpoint Middleware Group
-    |--------------------------------------------------------------------------
-    |
-    | This value sets the middleware group that will be applied to the main
-    | Livewire "message" endpoint (the endpoint that gets hit everytime
-    | a Livewire component updates). It is set to "web" by default.
-    |
-    */
-
-    'middleware_group'      => 'web',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Livewire Temporary File Uploads Endpoint Configuration
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
     |
     | Livewire handles file uploads by storing uploads in a temporary directory
-    | before the file is validated and stored permanently. All file uploads
-    | are directed to a global endpoint for temporary storage. The config
-    | items below are used for customizing the way the endpoint works.
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
     |
     */
 
@@ -108,53 +76,88 @@
             'jpg', 'jpeg', 'mpga', 'webp', 'wma',
         ],
         'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
+        'cleanup'         => true, // Should cleanup temporary uploads older than 24 hrs...
     ],
 
     /*
-    |--------------------------------------------------------------------------
-    | Manifest File Path
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
     |
-    | This value sets the path to the Livewire manifest file.
-    | The default should work for most cases (which is
-    | "<app_root>/bootstrap/cache/livewire-components.php"), but for specific
-    | cases like when hosting on Laravel Vapor, it could be set to a different value.
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
     |
-    | Example: for Laravel Vapor, it would be "/tmp/storage/bootstrap/cache/livewire-components.php".
+    */
+
+    'render_on_redirect'    => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
     |
     */
 
-    'manifest_path'         => null,
+    'inject_assets' => true,
 
     /*
-    |--------------------------------------------------------------------------
-    | Back Button Cache
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
     |
-    | This value determines whether the back button cache will be used on pages
-    | that contain Livewire. By disabling back button cache, it ensures that
-    | the back button shows the correct state of components, instead of
-    | potentially stale, cached data.
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
     |
-    | Setting it to "false" (default) will disable back button cache.
+    */
+
+    'navigate' => [
+        'show_progress_bar'  => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
     |
     */
 
-    'back_button_cache'     => false,
+    'inject_morph_markers' => true,
 
     /*
-    |--------------------------------------------------------------------------
-    | Render On Redirect
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
     |
-    | This value determines whether Livewire will render before it's redirected
-    | or not. Setting it to "false" (default) will mean the render method is
-    | skipped when redirecting. And "true" will mean the render method is
-    | run before redirecting. Browsers bfcache can store a potentially
-    | stale view if render is skipped on redirect.
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
     |
     */
 
-    'render_on_redirect'    => true,
+    'pagination_theme' => 'tailwind',
 
 ];

examples/ui.md

@@ -172,7 +172,7 @@ This file contains basic examples and explains the parameters that can be used f
 ### Upload Single Image
 This component renders an input file for a single image upload.
 ```html
-<x-ark-upload-image-single id="profile" :image="$image" wire:model="imageSingle" />
+<x-ark-upload-image-single id="profile" :image="$image" wire:model.live="imageSingle" />
 ```
 > It requires the use of a Livewire Component.
 > There is a trait that can be used with your Livewire Component `\ARKEcosystem\UserInterface\Components\UploadImageSingle`.
@@ -227,7 +227,7 @@ laravel([
 <x-ark-upload-image-single
     id="profile"
     :image="$image"
-    wire:model="imageSingle"
+    wire:model.live="imageSingle"
     dimensions="w-64 h-64"
     upload-text="Upload Screenshot"
     delete-tooltip="Delete Screenshot"
@@ -277,7 +277,7 @@ laravel([
 ### Upload Multiple Images
 This component renders an input file for a multiple image upload.
 ```html
-<x-ark-upload-image-collection id="media" :image="$imageCollection" wire:model="tempCollection" />
+<x-ark-upload-image-collection id="media" :image="$imageCollection" wire:model.live="tempCollection" />
 ```
 > It requires the use of a Livewire Component.
 > There is a trait that can be used with your Livewire Component `\ARKEcosystem\UserInterface\Components\UploadImageCollection`.
@@ -338,7 +338,7 @@ public function imagesReordered(array $ids): void
 <x-ark-upload-image-collection
     id="media"
     :image="$imageCollection"
-    wire:model="tempCollection"
+    wire:model.live="tempCollection"
     dimensions="w-64 h-64"
     upload-text="Upload Screenshot"
     delete-tooltip="Delete Screenshot"

resources/assets/js/compress-image.js

@@ -73,10 +73,10 @@ const CompressImage = (
 
                     Object.values(errors.getAll()).forEach((bags) => {
                         [...bags].forEach(({ value }) =>
-                            Livewire.emit("toastMessage", [
-                                `${value} - ${file.name}`,
-                                "danger",
-                            ])
+                            Livewire.dispatch("toastMessage", {
+                                message: `${value} - ${file.name}`,
+                                type: "danger",
+                            })
                         );
                     });
                 });