Skip to content

Commit f99558d

Browse files
alexbarnsleyalexbarnsley
authored
chore: update livewire to 3.0 (#622)
1 parent b41d58a commit f99558d

File tree

80 files changed

+434
-824
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+434
-824
lines changed

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"laravel/fortify": "^1.21",
3636
"laravel/telescope": "^5.0",
3737
"league/commonmark": "^2.4",
38-
"livewire/livewire": "^2.12",
38+
"livewire/livewire": "^3.0",
3939
"mockery/mockery": "^1.6",
4040
"nunomaduro/collision": "^7.0",
4141
"nunomaduro/larastan": "^2.6",

‎composer.lock‎

Lines changed: 20 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config/livewire.php‎

Lines changed: 89 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -5,95 +5,63 @@
55
return [
66

77
/*
8-
|--------------------------------------------------------------------------
8+
|---------------------------------------------------------------------------
99
| Class Namespace
10-
|--------------------------------------------------------------------------
10+
|---------------------------------------------------------------------------
1111
|
12-
| This value sets the root namespace for Livewire component classes in
13-
| your application. This value affects component auto-discovery and
14-
| any Livewire file helper commands, like `artisan make:livewire`.
15-
|
16-
| After changing this item, run: `php artisan livewire:discover`.
12+
| This value sets the root class namespace for Livewire component classes in
13+
| your application. This value will change where component auto-discovery
14+
| finds components. It's also referenced by the file creation commands.
1715
|
1816
*/
1917

2018
'class_namespace' => 'App\\Http\\Livewire',
2119

2220
/*
23-
|--------------------------------------------------------------------------
21+
|---------------------------------------------------------------------------
2422
| View Path
25-
|--------------------------------------------------------------------------
23+
|---------------------------------------------------------------------------
2624
|
27-
| This value sets the path for Livewire component views. This affects
28-
| file manipulation helper commands like `artisan make:livewire`.
25+
| This value is used to specify where Livewire component Blade templates are
26+
| stored when running file creation commands like `artisan make:livewire`.
27+
| It is also used if you choose to omit a component's render() method.
2928
|
3029
*/
3130

3231
'view_path' => resource_path('views/livewire'),
3332

3433
/*
35-
|--------------------------------------------------------------------------
34+
|---------------------------------------------------------------------------
3635
| Layout
37-
|--------------------------------------------------------------------------
38-
| The default layout view that will be used when rendering a component via
39-
| Route::get('/some-endpoint', SomeComponent::class);. In this case the
40-
| the view returned by SomeComponent will be wrapped in "layouts.app"
36+
|---------------------------------------------------------------------------
37+
| The view that will be used as the layout when rendering a single component
38+
| as an entire page via `Route::get('/post/create', CreatePost::class);`.
39+
| In this case, the view returned by CreatePost will render into $slot.
4140
|
4241
*/
4342

4443
'layout' => 'layouts.app',
4544

4645
/*
47-
|--------------------------------------------------------------------------
48-
| Livewire Assets URL
49-
|--------------------------------------------------------------------------
50-
|
51-
| This value sets the path to Livewire JavaScript assets, for cases where
52-
| your app's domain root is not the correct path. By default, Livewire
53-
| will load its JavaScript assets from the app's "relative root".
54-
|
55-
| Examples: "/assets", "myurl.com/app".
56-
|
57-
*/
58-
59-
'asset_url' => null,
60-
61-
/*
62-
|--------------------------------------------------------------------------
63-
| Livewire App URL
64-
|--------------------------------------------------------------------------
65-
|
66-
| This value should be used if livewire assets are served from CDN.
67-
| Livewire will communicate with an app through this url.
68-
|
69-
| Examples: "https://my-app.com", "myurl.com/app".
46+
|---------------------------------------------------------------------------
47+
| Lazy Loading Placeholder
48+
|---------------------------------------------------------------------------
49+
| Livewire allows you to lazy load components that would otherwise slow down
50+
| the initial page load. Every component can have a custom placeholder or
51+
| you can define the default placeholder view for all components below.
7052
|
7153
*/
7254

73-
'app_url' => null,
55+
'lazy_placeholder' => null,
7456

7557
/*
76-
|--------------------------------------------------------------------------
77-
| Livewire Endpoint Middleware Group
78-
|--------------------------------------------------------------------------
79-
|
80-
| This value sets the middleware group that will be applied to the main
81-
| Livewire "message" endpoint (the endpoint that gets hit everytime
82-
| a Livewire component updates). It is set to "web" by default.
83-
|
84-
*/
85-
86-
'middleware_group' => 'web',
87-
88-
/*
89-
|--------------------------------------------------------------------------
90-
| Livewire Temporary File Uploads Endpoint Configuration
91-
|--------------------------------------------------------------------------
58+
|---------------------------------------------------------------------------
59+
| Temporary File Uploads
60+
|---------------------------------------------------------------------------
9261
|
9362
| Livewire handles file uploads by storing uploads in a temporary directory
94-
| before the file is validated and stored permanently. All file uploads
95-
| are directed to a global endpoint for temporary storage. The config
96-
| items below are used for customizing the way the endpoint works.
63+
| before the file is stored permanently. All file uploads are directed to
64+
| a global endpoint for temporary storage. You may configure this below:
9765
|
9866
*/
9967

@@ -108,53 +76,88 @@
10876
'jpg', 'jpeg', 'mpga', 'webp', 'wma',
10977
],
11078
'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
79+
'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
11180
],
11281

11382
/*
114-
|--------------------------------------------------------------------------
115-
| Manifest File Path
116-
|--------------------------------------------------------------------------
83+
|---------------------------------------------------------------------------
84+
| Render On Redirect
85+
|---------------------------------------------------------------------------
11786
|
118-
| This value sets the path to the Livewire manifest file.
119-
| The default should work for most cases (which is
120-
| "<app_root>/bootstrap/cache/livewire-components.php"), but for specific
121-
| cases like when hosting on Laravel Vapor, it could be set to a different value.
87+
| This value determines if Livewire will run a component's `render()` method
88+
| after a redirect has been triggered using something like `redirect(...)`
89+
| Setting this to true will render the view once more before redirecting
12290
|
123-
| Example: for Laravel Vapor, it would be "/tmp/storage/bootstrap/cache/livewire-components.php".
91+
*/
92+
93+
'render_on_redirect' => true,
94+
95+
/*
96+
|---------------------------------------------------------------------------
97+
| Eloquent Model Binding
98+
|---------------------------------------------------------------------------
99+
|
100+
| Previous versions of Livewire supported binding directly to eloquent model
101+
| properties using wire:model by default. However, this behavior has been
102+
| deemed too "magical" and has therefore been put under a feature flag.
103+
|
104+
*/
105+
106+
'legacy_model_binding' => false,
107+
108+
/*
109+
|---------------------------------------------------------------------------
110+
| Auto-inject Frontend Assets
111+
|---------------------------------------------------------------------------
112+
|
113+
| By default, Livewire automatically injects its JavaScript and CSS into the
114+
| <head> and <body> of pages containing Livewire components. By disabling
115+
| this behavior, you need to use @livewireStyles and @livewireScripts.
124116
|
125117
*/
126118

127-
'manifest_path' => null,
119+
'inject_assets' => true,
128120

129121
/*
130-
|--------------------------------------------------------------------------
131-
| Back Button Cache
132-
|--------------------------------------------------------------------------
122+
|---------------------------------------------------------------------------
123+
| Navigate (SPA mode)
124+
|---------------------------------------------------------------------------
133125
|
134-
| This value determines whether the back button cache will be used on pages
135-
| that contain Livewire. By disabling back button cache, it ensures that
136-
| the back button shows the correct state of components, instead of
137-
| potentially stale, cached data.
126+
| By adding `wire:navigate` to links in your Livewire application, Livewire
127+
| will prevent the default link handling and instead request those pages
128+
| via AJAX, creating an SPA-like effect. Configure this behavior here.
138129
|
139-
| Setting it to "false" (default) will disable back button cache.
130+
*/
131+
132+
'navigate' => [
133+
'show_progress_bar' => true,
134+
'progress_bar_color' => '#2299dd',
135+
],
136+
137+
/*
138+
|---------------------------------------------------------------------------
139+
| HTML Morph Markers
140+
|---------------------------------------------------------------------------
141+
|
142+
| Livewire intelligently "morphs" existing HTML into the newly rendered HTML
143+
| after each update. To make this process more reliable, Livewire injects
144+
| "markers" into the rendered Blade surrounding @if, @class & @foreach.
140145
|
141146
*/
142147

143-
'back_button_cache' => false,
148+
'inject_morph_markers' => true,
144149

145150
/*
146-
|--------------------------------------------------------------------------
147-
| Render On Redirect
148-
|--------------------------------------------------------------------------
151+
|---------------------------------------------------------------------------
152+
| Pagination Theme
153+
|---------------------------------------------------------------------------
149154
|
150-
| This value determines whether Livewire will render before it's redirected
151-
| or not. Setting it to "false" (default) will mean the render method is
152-
| skipped when redirecting. And "true" will mean the render method is
153-
| run before redirecting. Browsers bfcache can store a potentially
154-
| stale view if render is skipped on redirect.
155+
| When enabling Livewire's pagination feature by using the `WithPagination`
156+
| trait, Livewire will use Tailwind templates to render pagination views
157+
| on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
155158
|
156159
*/
157160

158-
'render_on_redirect' => true,
161+
'pagination_theme' => 'tailwind',
159162

160163
];

‎examples/ui.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ This file contains basic examples and explains the parameters that can be used f
172172
### Upload Single Image
173173
This component renders an input file for a single image upload.
174174
```html
175-
<x-ark-upload-image-single id="profile" :image="$image" wire:model="imageSingle" />
175+
<x-ark-upload-image-single id="profile" :image="$image" wire:model.live="imageSingle" />
176176
```
177177
> It requires the use of a Livewire Component.
178178
> There is a trait that can be used with your Livewire Component `\ARKEcosystem\UserInterface\Components\UploadImageSingle`.
@@ -227,7 +227,7 @@ laravel([
227227
<x-ark-upload-image-single
228228
id="profile"
229229
:image="$image"
230-
wire:model="imageSingle"
230+
wire:model.live="imageSingle"
231231
dimensions="w-64 h-64"
232232
upload-text="Upload Screenshot"
233233
delete-tooltip="Delete Screenshot"
@@ -277,7 +277,7 @@ laravel([
277277
### Upload Multiple Images
278278
This component renders an input file for a multiple image upload.
279279
```html
280-
<x-ark-upload-image-collection id="media" :image="$imageCollection" wire:model="tempCollection" />
280+
<x-ark-upload-image-collection id="media" :image="$imageCollection" wire:model.live="tempCollection" />
281281
```
282282
> It requires the use of a Livewire Component.
283283
> 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
338338
<x-ark-upload-image-collection
339339
id="media"
340340
:image="$imageCollection"
341-
wire:model="tempCollection"
341+
wire:model.live="tempCollection"
342342
dimensions="w-64 h-64"
343343
upload-text="Upload Screenshot"
344344
delete-tooltip="Delete Screenshot"

‎resources/assets/js/compress-image.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ const CompressImage = (
7373

7474
Object.values(errors.getAll()).forEach((bags) => {
7575
[...bags].forEach(({ value }) =>
76-
Livewire.emit("toastMessage", [
77-
`${value} - ${file.name}`,
78-
"danger",
79-
])
76+
Livewire.dispatch("toastMessage", {
77+
message: `${value} - ${file.name}`,
78+
type: "danger",
79+
})
8080
);
8181
});
8282
});

0 commit comments

Comments
 (0)