[4.x] Migrates to Livewire v3.x

composer.json

@@ -24,7 +24,7 @@
     "require-dev": {
         "inertiajs/inertia-laravel": "^0.6.5",
         "laravel/sanctum": "^3.0",
-        "livewire/livewire": "^2.12",
+        "livewire/livewire": "^3.0",
         "mockery/mockery": "^1.0",
         "orchestra/testbench": "^8.0",
         "phpstan/phpstan": "^1.10",

src/ConfirmsPasswords.php

@@ -41,7 +41,7 @@ public function startConfirmingPassword(string $confirmableId)
         $this->resetErrorBag();
 
         if ($this->passwordIsConfirmed()) {
-            return $this->dispatchBrowserEvent('password-confirmed', [
+            return $this->dispatch('password-confirmed', [
                 'id' => $confirmableId,
             ]);
         }
@@ -50,7 +50,7 @@ public function startConfirmingPassword(string $confirmableId)
         $this->confirmableId = $confirmableId;
         $this->confirmablePassword = '';
 
-        $this->dispatchBrowserEvent('confirming-password');
+        $this->dispatch('confirming-password');
     }
 
     /**
@@ -80,7 +80,7 @@ public function confirmPassword()
 
         session(['auth.password_confirmed_at' => time()]);
 
-        $this->dispatchBrowserEvent('password-confirmed', [
+        $this->dispatch('password-confirmed', [
             'id' => $this->confirmableId,
         ]);
 

src/Console/InstallCommand.php

@@ -155,7 +155,7 @@ protected function configureSession()
     protected function installLivewireStack()
     {
         // Install Livewire...
-        if (! $this->requireComposerPackages('livewire/livewire:^2.11')) {
+        if (! $this->requireComposerPackages('livewire/livewire:^3.0@beta')) {
             return false;
         }
 
@@ -175,8 +175,6 @@ protected function installLivewireStack()
             return [
                 '@tailwindcss/forms' => '^0.5.2',
                 '@tailwindcss/typography' => '^0.5.0',
-                'alpinejs' => '^3.0.6',
-                '@alpinejs/focus' => '^3.10.5',
                 'autoprefixer' => '^10.4.7',
                 'postcss' => '^8.4.14',
                 'tailwindcss' => '^3.1.0',
@@ -251,7 +249,6 @@ protected function installLivewireStack()
 
         // Assets...
         copy(__DIR__.'/../../stubs/resources/css/app.css', resource_path('css/app.css'));
-        copy(__DIR__.'/../../stubs/livewire/resources/js/app.js', resource_path('js/app.js'));
 
         // Tests...
         $stubs = $this->getTestStubsPath();

src/Http/Livewire/ApiTokenManager.php

@@ -103,7 +103,7 @@ public function createApiToken()
         $this->createApiTokenForm['name'] = '';
         $this->createApiTokenForm['permissions'] = Jetstream::$defaultPermissions;
 
-        $this->emit('created');
+        $this->dispatch('created');
     }
 
     /**
@@ -118,7 +118,7 @@ protected function displayTokenValue($token)
 
         $this->plainTextToken = explode('|', $token->plainTextToken, 2)[1];
 
-        $this->dispatchBrowserEvent('showing-token-modal');
+        $this->dispatch('showing-token-modal');
     }
 
     /**

src/Http/Livewire/DeleteUserForm.php

@@ -37,7 +37,7 @@ public function confirmUserDeletion()
 
         $this->password = '';
 
-        $this->dispatchBrowserEvent('confirming-delete-user');
+        $this->dispatch('confirming-delete-user');
 
         $this->confirmingUserDeletion = true;
     }

src/Http/Livewire/LogoutOtherBrowserSessionsForm.php

@@ -36,7 +36,7 @@ public function confirmLogout()
     {
         $this->password = '';
 
-        $this->dispatchBrowserEvent('confirming-logout-other-browser-sessions');
+        $this->dispatch('confirming-logout-other-browser-sessions');
 
         $this->confirmingLogout = true;
     }
@@ -71,7 +71,7 @@ public function logoutOtherBrowserSessions(StatefulGuard $guard)
 
         $this->confirmingLogout = false;
 
-        $this->emit('loggedOut');
+        $this->dispatch('loggedOut');
     }
 
     /**

src/Http/Livewire/TeamMemberManager.php

@@ -116,7 +116,7 @@ public function addTeamMember()
 
         $this->team = $this->team->fresh();
 
-        $this->emit('saved');
+        $this->dispatch('saved');
     }
 
     /**

src/Http/Livewire/UpdatePasswordForm.php

@@ -43,7 +43,7 @@ public function updatePassword(UpdatesUserPasswords $updater)
             'password_confirmation' => '',
         ];
 
-        $this->emit('saved');
+        $this->dispatch('saved');
     }
 
     /**

src/Http/Livewire/UpdateProfileInformationForm.php

@@ -67,9 +67,9 @@ public function updateProfileInformation(UpdatesUserProfileInformation $updater)
             return redirect()->route('profile.show');
         }
 
-        $this->emit('saved');
+        $this->dispatch('saved');
 
-        $this->emit('refresh-navigation-menu');
+        $this->dispatch('refresh-navigation-menu');
     }
 
     /**
@@ -81,7 +81,7 @@ public function deleteProfilePhoto()
     {
         Auth::user()->deleteProfilePhoto();
 
-        $this->emit('refresh-navigation-menu');
+        $this->dispatch('refresh-navigation-menu');
     }
 
     /**

src/Http/Livewire/UpdateTeamNameForm.php

@@ -47,9 +47,9 @@ public function updateTeamName(UpdatesTeamNames $updater)
 
         $updater->update($this->user, $this->team, $this->state);
 
-        $this->emit('saved');
+        $this->dispatch('saved');
 
-        $this->emit('refresh-navigation-menu');
+        $this->dispatch('refresh-navigation-menu');
     }
 
     /**

src/InteractsWithBanner.php

@@ -12,7 +12,7 @@ trait InteractsWithBanner
      */
     protected function banner($message)
     {
-        $this->dispatchBrowserEvent('banner-message', [
+        $this->dispatch('banner-message', [
             'style' => 'success',
             'message' => $message,
         ]);
@@ -26,7 +26,7 @@ protected function banner($message)
      */
     protected function dangerBanner($message)
     {
-        $this->dispatchBrowserEvent('banner-message', [
+        $this->dispatch('banner-message', [
             'style' => 'danger',
             'message' => $message,
         ]);

stubs/inertia/resources/js/Components/FormSection.vue

@@ -19,7 +19,7 @@ const hasActions = computed(() => !! useSlots().actions);
         </SectionTitle>
 
         <div class="mt-5 md:mt-0 md:col-span-2">
-            <form @submit.prevent="$emit('submitted')">
+            <form @submit.prevent="$dispatch('submitted')">
                 <div
                     class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow"
                     :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"

stubs/inertia/resources/js/Components/TextInput.vue

@@ -23,6 +23,6 @@ defineExpose({ focus: () => input.value.focus() });
         ref="input"
         class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
         :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="$dispatch('update:modelValue', $event.target.value)"
     >
 </template>

stubs/livewire/resources/views/api/api-token-manager.blade.php

@@ -13,7 +13,7 @@
             <!-- Token Name -->
             <div class="col-span-6 sm:col-span-4">
                 <x-label for="name" value="{{ __('Token Name') }}" />
-                <x-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="createApiTokenForm.name" autofocus />
+                <x-input id="name" type="text" class="mt-1 block w-full" wire:model="createApiTokenForm.name" autofocus />
                 <x-input-error for="name" class="mt-2" />
             </div>
 
@@ -25,7 +25,7 @@
                     <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                         @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                             <label class="flex items-center">
-                                <x-checkbox wire:model.defer="createApiTokenForm.permissions" :value="$permission"/>
+                                <x-checkbox wire:model="createApiTokenForm.permissions" :value="$permission"/>
                                 <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ $permission }}</span>
                             </label>
                         @endforeach
@@ -94,7 +94,7 @@
     @endif
 
     <!-- Token Value Modal -->
-    <x-dialog-modal wire:model="displayingToken">
+    <x-dialog-modal wire:model.live="displayingToken">
         <x-slot name="title">
             {{ __('API Token') }}
         </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
     </x-dialog-modal>
 
     <!-- API Token Permissions Modal -->
-    <x-dialog-modal wire:model="managingApiTokenPermissions">
+    <x-dialog-modal wire:model.live="managingApiTokenPermissions">
         <x-slot name="title">
             {{ __('API Token Permissions') }}
         </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
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                     <label class="flex items-center">
-                        <x-checkbox wire:model.defer="updateApiTokenForm.permissions" :value="$permission"/>
+                        <x-checkbox wire:model="updateApiTokenForm.permissions" :value="$permission"/>
                         <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ $permission }}</span>
                     </label>
                 @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
     </x-dialog-modal>
 
     <!-- Delete Token Confirmation Modal -->
-    <x-confirmation-modal wire:model="confirmingApiTokenDeletion">
+    <x-confirmation-modal wire:model.live="confirmingApiTokenDeletion">
         <x-slot name="title">
             {{ __('Delete API Token') }}
         </x-slot>

stubs/livewire/resources/views/components/action-message.blade.php

@@ -1,10 +1,14 @@
 @props(['on'])
 
 <div x-data="{ shown: false, timeout: null }"
-    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
-    x-show.transition.out.opacity.duration.1500ms="shown"
-    x-transition:leave.opacity.duration.1500ms
-    style="display: none;"
+     x-on:{{ $on }}.window="
+        clearTimeout(timeout);
+        shown = true;
+        timeout = setTimeout(() => { shown = false }, 2000);
+    "
+     x-show.transition.out.opacity.duration.1500ms="shown"
+     x-transition:leave.opacity.duration.1500ms
+     style="display: none;"
     {{ $attributes->merge(['class' => 'text-sm text-gray-600 dark:text-gray-400']) }}>
     {{ $slot->isEmpty() ? 'Saved.' : $slot }}
 </div>

stubs/livewire/resources/views/components/confirms-password.blade.php

@@ -15,7 +15,7 @@
 </span>
 
 @once
-<x-dialog-modal wire:model="confirmingPassword">
+<x-dialog-modal wire:model.live="confirmingPassword">
     <x-slot name="title">
         {{ $title }}
     </x-slot>
@@ -26,7 +26,7 @@
         <div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
             <x-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}" autocomplete="current-password"
                         x-ref="confirmable_password"
-                        wire:model.defer="confirmablePassword"
+                        wire:model.live="confirmablePassword"
                         wire:keydown.enter="confirmPassword" />
 
             <x-input-error for="confirmable_password" class="mt-2" />

stubs/livewire/resources/views/components/form-section.blade.php

@@ -7,7 +7,7 @@
     </x-section-title>
 
     <div class="mt-5 md:mt-0 md:col-span-2">
-        <form wire:submit.prevent="{{ $submit }}">
+        <form wire:submit="{{ $submit }}">
             <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' }}">
                 <div class="grid grid-cols-6 gap-6">
                     {{ $form }}

stubs/livewire/resources/views/components/modal.blade.php

@@ -13,7 +13,7 @@
 @endphp
 
 <div
-    x-data="{ show: @entangle($attributes->wire('model')).defer }"
+    x-data="{ show: @entangle($attributes->wire('model')).live }"
     x-on:close.stop="show = false"
     x-on:keydown.escape.window="show = false"
     x-show="show"

stubs/livewire/resources/views/profile/delete-user-form.blade.php

@@ -19,7 +19,7 @@
         </div>
 
         <!-- Delete User Confirmation Modal -->
-        <x-dialog-modal wire:model="confirmingUserDeletion">
+        <x-dialog-modal wire:model.live="confirmingUserDeletion">
             <x-slot name="title">
                 {{ __('Delete Account') }}
             </x-slot>
@@ -32,7 +32,7 @@
                                 autocomplete="current-password"
                                 placeholder="{{ __('Password') }}"
                                 x-ref="password"
-                                wire:model.defer="password"
+                                wire:model.live="password"
                                 wire:keydown.enter="deleteUser" />
 
                     <x-input-error for="password" class="mt-2" />

stubs/livewire/resources/views/profile/two-factor-authentication-form.blade.php

@@ -53,8 +53,8 @@
                         <x-label for="code" value="{{ __('Code') }}" />
 
                         <x-input id="code" type="text" name="code" class="block mt-1 w-1/2" inputmode="numeric" autofocus autocomplete="one-time-code"
-                            wire:model.defer="code"
-                            wire:keydown.enter="confirmTwoFactorAuthentication" />
+                                 wire:model.live="code"
+                                 wire:keydown.enter="confirmTwoFactorAuthentication" />
 
                         <x-input-error for="code" class="mt-2" />
                     </div>
@@ -68,7 +68,7 @@
                     </p>
                 </div>
 
-                <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 dark:bg-gray-900 dark:text-gray-100 rounded-lg">
+                <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 rounded-lg">
                     @foreach (json_decode(decrypt($this->user->two_factor_recovery_codes), true) as $code)
                         <div>{{ $code }}</div>
                     @endforeach

stubs/livewire/resources/views/profile/update-password-form.blade.php

@@ -10,19 +10,19 @@
     <x-slot name="form">
         <div class="col-span-6 sm:col-span-4">
             <x-label for="current_password" value="{{ __('Current Password') }}" />
-            <x-input id="current_password" type="password" class="mt-1 block w-full" wire:model.defer="state.current_password" autocomplete="current-password" />
+            <x-input id="current_password" type="password" class="mt-1 block w-full" wire:model.live="state.current_password" autocomplete="current-password" />
             <x-input-error for="current_password" class="mt-2" />
         </div>
 
         <div class="col-span-6 sm:col-span-4">
             <x-label for="password" value="{{ __('New Password') }}" />
-            <x-input id="password" type="password" class="mt-1 block w-full" wire:model.defer="state.password" autocomplete="new-password" />
+            <x-input id="password" type="password" class="mt-1 block w-full" wire:model.live="state.password" autocomplete="new-password" />
             <x-input-error for="password" class="mt-2" />
         </div>
 
         <div class="col-span-6 sm:col-span-4">
             <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
-            <x-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model.defer="state.password_confirmation" autocomplete="new-password" />
+            <x-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model.live="state.password_confirmation" autocomplete="new-password" />
             <x-input-error for="password_confirmation" class="mt-2" />
         </div>
     </x-slot>