Skip to content

Commit

Permalink
chore: update livewire to 3.0 (#622)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexbarnsley
alexbarnsley authored Sep 4, 2024
1 parent b41d58a commit f99558d
Show file tree
Hide file tree
Showing 80 changed files with 434 additions and 824 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
37 changes: 20 additions & 17 deletions composer.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

175 changes: 89 additions & 86 deletions config/livewire.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
|
*/

Expand All @@ -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',

];
8 changes: 4 additions & 4 deletions examples/ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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`.
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions resources/assets/js/compress-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
})
);
});
});
Expand Down
Loading

0 comments on commit f99558d

Please sign in to comment.