Skip to content

Commit 1ecddaa

Browse files
nunomaduronunomaduro
authored
[4.x] Migrates to Livewire v3.x (#1360)
* Uses Livewire 3 on composer * Uses Livewire upgrade script * Removes alpine * Updates livewire path * Migrates events * Migrates "action-message" * Fixes wrong .live convertions * Fixes wrong `.live` * Fixes style * Fixes 2FA form * Fixes `DeleteTeamTest` test * Fixes events * Fix event name * Fixes banner * Adds missing styles and scripts * Uses non stable version of Livewire * Reverts * Uses dev-main * Pins to 3.x * Improves access to banner details * Fixes dispatch calls * Fixes installation * Revert `emit` change * Revert `emit` change * Reverts changes on events * Reverts `x-init` * Style * Adds missing migrations
1 parent f580f92 commit 1ecddaa

30 files changed

+70
-77
lines changed

Diff for: ‎composer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"require-dev": {
2525
"inertiajs/inertia-laravel": "^0.6.5",
2626
"laravel/sanctum": "^3.0",
27-
"livewire/livewire": "^2.12",
27+
"livewire/livewire": "^3.0",
2828
"mockery/mockery": "^1.0",
2929
"orchestra/testbench": "^8.0",
3030
"phpstan/phpstan": "^1.10",

Diff for: ‎src/ConfirmsPasswords.php

+7-7
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,16 @@ public function startConfirmingPassword(string $confirmableId)
4141
$this->resetErrorBag();
4242

4343
if ($this->passwordIsConfirmed()) {
44-
return $this->dispatchBrowserEvent('password-confirmed', [
45-
'id' => $confirmableId,
46-
]);
44+
return $this->dispatch('password-confirmed',
45+
id: $confirmableId,
46+
);
4747
}
4848

4949
$this->confirmingPassword = true;
5050
$this->confirmableId = $confirmableId;
5151
$this->confirmablePassword = '';
5252

53-
$this->dispatchBrowserEvent('confirming-password');
53+
$this->dispatch('confirming-password');
5454
}
5555

5656
/**
@@ -80,9 +80,9 @@ public function confirmPassword()
8080

8181
session(['auth.password_confirmed_at' => time()]);
8282

83-
$this->dispatchBrowserEvent('password-confirmed', [
84-
'id' => $this->confirmableId,
85-
]);
83+
$this->dispatch('password-confirmed',
84+
id: $this->confirmableId,
85+
);
8686

8787
$this->stopConfirmingPassword();
8888
}

Diff for: ‎src/Console/InstallCommand.php

+1-4
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ protected function configureSession()
155155
protected function installLivewireStack()
156156
{
157157
// Install Livewire...
158-
if (! $this->requireComposerPackages('livewire/livewire:^2.11')) {
158+
if (! $this->requireComposerPackages('livewire/livewire:^3.0@beta')) {
159159
return false;
160160
}
161161

@@ -175,8 +175,6 @@ protected function installLivewireStack()
175175
return [
176176
'@tailwindcss/forms' => '^0.5.2',
177177
'@tailwindcss/typography' => '^0.5.0',
178-
'alpinejs' => '^3.0.6',
179-
'@alpinejs/focus' => '^3.10.5',
180178
'autoprefixer' => '^10.4.7',
181179
'postcss' => '^8.4.14',
182180
'tailwindcss' => '^3.1.0',
@@ -251,7 +249,6 @@ protected function installLivewireStack()
251249

252250
// Assets...
253251
copy(__DIR__.'/../../stubs/resources/css/app.css', resource_path('css/app.css'));
254-
copy(__DIR__.'/../../stubs/livewire/resources/js/app.js', resource_path('js/app.js'));
255252

256253
// Tests...
257254
$stubs = $this->getTestStubsPath();

Diff for: ‎src/Http/Livewire/ApiTokenManager.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ public function createApiToken()
103103
$this->createApiTokenForm['name'] = '';
104104
$this->createApiTokenForm['permissions'] = Jetstream::$defaultPermissions;
105105

106-
$this->emit('created');
106+
$this->dispatch('created');
107107
}
108108

109109
/**
@@ -118,7 +118,7 @@ protected function displayTokenValue($token)
118118

119119
$this->plainTextToken = explode('|', $token->plainTextToken, 2)[1];
120120

121-
$this->dispatchBrowserEvent('showing-token-modal');
121+
$this->dispatch('showing-token-modal');
122122
}
123123

124124
/**

Diff for: ‎src/Http/Livewire/DeleteTeamForm.php

+2
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ public function deleteTeam(ValidateTeamDeletion $validator, DeletesTeams $delete
5050

5151
$deleter->delete($this->team);
5252

53+
$this->team = null;
54+
5355
return $this->redirectPath($deleter);
5456
}
5557

Diff for: ‎src/Http/Livewire/DeleteUserForm.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ public function confirmUserDeletion()
3737

3838
$this->password = '';
3939

40-
$this->dispatchBrowserEvent('confirming-delete-user');
40+
$this->dispatch('confirming-delete-user');
4141

4242
$this->confirmingUserDeletion = true;
4343
}

Diff for: ‎src/Http/Livewire/LogoutOtherBrowserSessionsForm.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ public function confirmLogout()
3636
{
3737
$this->password = '';
3838

39-
$this->dispatchBrowserEvent('confirming-logout-other-browser-sessions');
39+
$this->dispatch('confirming-logout-other-browser-sessions');
4040

4141
$this->confirmingLogout = true;
4242
}
@@ -71,7 +71,7 @@ public function logoutOtherBrowserSessions(StatefulGuard $guard)
7171

7272
$this->confirmingLogout = false;
7373

74-
$this->emit('loggedOut');
74+
$this->dispatch('loggedOut');
7575
}
7676

7777
/**

Diff for: ‎src/Http/Livewire/TeamMemberManager.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ public function addTeamMember()
116116

117117
$this->team = $this->team->fresh();
118118

119-
$this->emit('saved');
119+
$this->dispatch('saved');
120120
}
121121

122122
/**

Diff for: ‎src/Http/Livewire/UpdatePasswordForm.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ public function updatePassword(UpdatesUserPasswords $updater)
4343
'password_confirmation' => '',
4444
];
4545

46-
$this->emit('saved');
46+
$this->dispatch('saved');
4747
}
4848

4949
/**

Diff for: ‎src/Http/Livewire/UpdateProfileInformationForm.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ public function updateProfileInformation(UpdatesUserProfileInformation $updater)
6767
return redirect()->route('profile.show');
6868
}
6969

70-
$this->emit('saved');
70+
$this->dispatch('saved');
7171

72-
$this->emit('refresh-navigation-menu');
72+
$this->dispatch('refresh-navigation-menu');
7373
}
7474

7575
/**
@@ -81,7 +81,7 @@ public function deleteProfilePhoto()
8181
{
8282
Auth::user()->deleteProfilePhoto();
8383

84-
$this->emit('refresh-navigation-menu');
84+
$this->dispatch('refresh-navigation-menu');
8585
}
8686

8787
/**

Diff for: ‎src/Http/Livewire/UpdateTeamNameForm.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ public function updateTeamName(UpdatesTeamNames $updater)
4747

4848
$updater->update($this->user, $this->team, $this->state);
4949

50-
$this->emit('saved');
50+
$this->dispatch('saved');
5151

52-
$this->emit('refresh-navigation-menu');
52+
$this->dispatch('refresh-navigation-menu');
5353
}
5454

5555
/**

Diff for: ‎src/InteractsWithBanner.php

+8-8
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ trait InteractsWithBanner
1212
*/
1313
protected function banner($message)
1414
{
15-
$this->dispatchBrowserEvent('banner-message', [
16-
'style' => 'success',
17-
'message' => $message,
18-
]);
15+
$this->dispatch('banner-message',
16+
style: 'success',
17+
message: $message,
18+
);
1919
}
2020

2121
/**
@@ -26,9 +26,9 @@ protected function banner($message)
2626
*/
2727
protected function dangerBanner($message)
2828
{
29-
$this->dispatchBrowserEvent('banner-message', [
30-
'style' => 'danger',
31-
'message' => $message,
32-
]);
29+
$this->dispatch('banner-message',
30+
style: 'danger',
31+
message: $message,
32+
);
3333
}
3434
}

Diff for: ‎stubs/livewire/resources/js/app.js

-9
This file was deleted.

Diff for: ‎stubs/livewire/resources/views/api/api-token-manager.blade.php

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<!-- Token Name -->
1414
<div class="col-span-6 sm:col-span-4">
1515
<x-label for="name" value="{{ __('Token Name') }}" />
16-
<x-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="createApiTokenForm.name" autofocus />
16+
<x-input id="name" type="text" class="mt-1 block w-full" wire:model="createApiTokenForm.name" autofocus />
1717
<x-input-error for="name" class="mt-2" />
1818
</div>
1919

@@ -25,7 +25,7 @@
2525
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
2626
@foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
2727
<label class="flex items-center">
28-
<x-checkbox wire:model.defer="createApiTokenForm.permissions" :value="$permission"/>
28+
<x-checkbox wire:model="createApiTokenForm.permissions" :value="$permission"/>
2929
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ $permission }}</span>
3030
</label>
3131
@endforeach
@@ -94,7 +94,7 @@
9494
@endif
9595

9696
<!-- Token Value Modal -->
97-
<x-dialog-modal wire:model="displayingToken">
97+
<x-dialog-modal wire:model.live="displayingToken">
9898
<x-slot name="title">
9999
{{ __('API Token') }}
100100
</x-slot>
@@ -119,7 +119,7 @@ class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 w-full
119119
</x-dialog-modal>
120120

121121
<!-- API Token Permissions Modal -->
122-
<x-dialog-modal wire:model="managingApiTokenPermissions">
122+
<x-dialog-modal wire:model.live="managingApiTokenPermissions">
123123
<x-slot name="title">
124124
{{ __('API Token Permissions') }}
125125
</x-slot>
@@ -128,7 +128,7 @@ class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 w-full
128128
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
129129
@foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
130130
<label class="flex items-center">
131-
<x-checkbox wire:model.defer="updateApiTokenForm.permissions" :value="$permission"/>
131+
<x-checkbox wire:model="updateApiTokenForm.permissions" :value="$permission"/>
132132
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ $permission }}</span>
133133
</label>
134134
@endforeach
@@ -147,7 +147,7 @@ class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 w-full
147147
</x-dialog-modal>
148148

149149
<!-- Delete Token Confirmation Modal -->
150-
<x-confirmation-modal wire:model="confirmingApiTokenDeletion">
150+
<x-confirmation-modal wire:model.live="confirmingApiTokenDeletion">
151151
<x-slot name="title">
152152
{{ __('Delete API Token') }}
153153
</x-slot>

Diff for: ‎stubs/livewire/resources/views/components/action-message.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@props(['on'])
22

33
<div x-data="{ shown: false, timeout: null }"
4-
x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
4+
x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
55
x-show.transition.out.opacity.duration.1500ms="shown"
66
x-transition:leave.opacity.duration.1500ms
77
style="display: none;"

Diff for: ‎stubs/livewire/resources/views/components/banner.blade.php

+4-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@
44
:class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
55
style="display: none;"
66
x-show="show && message"
7-
x-init="
8-
document.addEventListener('banner-message', event => {
9-
style = event.detail.style;
10-
message = event.detail.message;
11-
show = true;
12-
});
7+
x-on:banner-message.window="
8+
style = event.detail.style;
9+
message = event.detail.message;
10+
show = true;
1311
">
1412
<div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
1513
<div class="flex items-center justify-between flex-wrap">

Diff for: ‎stubs/livewire/resources/views/components/confirms-password.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</span>
1616

1717
@once
18-
<x-dialog-modal wire:model="confirmingPassword">
18+
<x-dialog-modal wire:model.live="confirmingPassword">
1919
<x-slot name="title">
2020
{{ $title }}
2121
</x-slot>
@@ -26,7 +26,7 @@
2626
<div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
2727
<x-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}" autocomplete="current-password"
2828
x-ref="confirmable_password"
29-
wire:model.defer="confirmablePassword"
29+
wire:model="confirmablePassword"
3030
wire:keydown.enter="confirmPassword" />
3131

3232
<x-input-error for="confirmable_password" class="mt-2" />

Diff for: ‎stubs/livewire/resources/views/components/form-section.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</x-section-title>
88

99
<div class="mt-5 md:mt-0 md:col-span-2">
10-
<form wire:submit.prevent="{{ $submit }}">
10+
<form wire:submit="{{ $submit }}">
1111
<div class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
1212
<div class="grid grid-cols-6 gap-6">
1313
{{ $form }}

Diff for: ‎stubs/livewire/resources/views/components/modal.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@endphp
1414

1515
<div
16-
x-data="{ show: @entangle($attributes->wire('model')).defer }"
16+
x-data="{ show: @entangle($attributes->wire('model')) }"
1717
x-on:close.stop="show = false"
1818
x-on:keydown.escape.window="show = false"
1919
x-show="show"

Diff for: ‎stubs/livewire/resources/views/layouts/guest.blade.php

+5
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,15 @@
1313

1414
<!-- Scripts -->
1515
@vite(['resources/css/app.css', 'resources/js/app.js'])
16+
17+
<!-- Styles -->
18+
@livewireStyles
1619
</head>
1720
<body>
1821
<div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
1922
{{ $slot }}
2023
</div>
24+
25+
@livewireScripts
2126
</body>
2227
</html>

Diff for: ‎stubs/livewire/resources/views/profile/delete-user-form.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</div>
2020

2121
<!-- Delete User Confirmation Modal -->
22-
<x-dialog-modal wire:model="confirmingUserDeletion">
22+
<x-dialog-modal wire:model.live="confirmingUserDeletion">
2323
<x-slot name="title">
2424
{{ __('Delete Account') }}
2525
</x-slot>
@@ -32,7 +32,7 @@
3232
autocomplete="current-password"
3333
placeholder="{{ __('Password') }}"
3434
x-ref="password"
35-
wire:model.defer="password"
35+
wire:model="password"
3636
wire:keydown.enter="deleteUser" />
3737

3838
<x-input-error for="password" class="mt-2" />

Diff for: ‎stubs/livewire/resources/views/profile/logout-other-browser-sessions-form.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</div>
6363

6464
<!-- Log Out Other Devices Confirmation Modal -->
65-
<x-dialog-modal wire:model="confirmingLogout">
65+
<x-dialog-modal wire:model.live="confirmingLogout">
6666
<x-slot name="title">
6767
{{ __('Log Out Other Browser Sessions') }}
6868
</x-slot>
@@ -75,7 +75,7 @@
7575
autocomplete="current-password"
7676
placeholder="{{ __('Password') }}"
7777
x-ref="password"
78-
wire:model.defer="password"
78+
wire:model="password"
7979
wire:keydown.enter="logoutOtherBrowserSessions" />
8080

8181
<x-input-error for="password" class="mt-2" />

Diff for: ‎stubs/livewire/resources/views/profile/two-factor-authentication-form.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
<x-label for="code" value="{{ __('Code') }}" />
5454

5555
<x-input id="code" type="text" name="code" class="block mt-1 w-1/2" inputmode="numeric" autofocus autocomplete="one-time-code"
56-
wire:model.defer="code"
56+
wire:model="code"
5757
wire:keydown.enter="confirmTwoFactorAuthentication" />
5858

5959
<x-input-error for="code" class="mt-2" />

0 commit comments

Comments
 (0)