laravel · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Release Notes
 
-## [Unreleased](https://github.com/laravel/jetstream/compare/v3.3.2...3.x)
+## [Unreleased](https://github.com/laravel/jetstream/compare/v3.3.3...3.x)
+
+## [v3.3.3](https://github.com/laravel/jetstream/compare/v3.3.2...v3.3.3) - 2023-08-23
+
+- Fix memory leak and potential caching issue in https://github.com/laravel/jetstream/pull/1366
 
 ## [v3.3.2](https://github.com/laravel/jetstream/compare/v3.3.1...v3.3.2) - 2023-08-21
 

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1,5 +1,47 @@
 # Upgrade Guide
 
+## Upgrading from Jetstream 3.x to Jetstream 4.x
+
+> **Note**
+> This upgrade guide only discusses upgrading to Jetstream 4.x. Upgrading your Laravel, Tailwind, Livewire, or Inertia installations is outside the scope of this documentation and is not strictly required in order to use Jetstream 4.x. Please consult the upgrade guides for those libraries for information on their upgrade process.
+
+- [Changes Common To Both Stacks](#jetstream-4x-changes-common-to-both-stacks)
+- [Livewire Stack Upgrade Guide](#jetstream-4x-livewire-stack)
+
+### Jetstream 4.x Changes Common To Both Stacks
+
+#### Dependency Versions
+
+You should upgrade your `laravel/jetstream` dependency to `^4.0` within your application's `composer.json` file. Then, run the `composer update` command:
+
+    composer update
+
+### Jetstream 4.x Livewire Stack
+
+This upgrade guide assumes you have already upgraded your application to Livewire 3.x and ran the `php artisan livewire:upgrade` command against the views published by Jetstream.
+
+#### Alpine Script
+
+As you may know, Livewire 3 ships with Alpine by default, so you do not need to include it in your application's `resources/js/app.js` file.
+
+You should include `@livewireStyles` and `@livewireScripts` in your application's `resources/views/layouts/guest.blade.php` file since Alpine is used by "guest" components published by Jetstream:
+
+```diff
+        <!-- Scripts -->
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
++
++       <!-- Styles -->
++       @livewireStyles
+    </head>
+    <body>
+        <div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
+            {{ $slot }}
+        </div>
++
++       @livewireScripts
+    </body>
+```
+
 ## Upgrading from Jetstream 2.x to Jetstream 3.x
 
 > **Note**

diff --git a/composer.json b/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",
@@ -44,7 +44,7 @@
     },
     "extra": {
         "branch-alias": {
-            "dev-master": "3.x-dev"
+            "dev-master": "4.x-dev"
         },
         "laravel": {
             "providers": [

diff --git a/src/ConfirmsPasswords.php b/src/ConfirmsPasswords.php
@@ -41,16 +41,16 @@ public function startConfirmingPassword(string $confirmableId)
         $this->resetErrorBag();
 
         if ($this->passwordIsConfirmed()) {
-            return $this->dispatchBrowserEvent('password-confirmed', [
-                'id' => $confirmableId,
-            ]);
+            return $this->dispatch('password-confirmed',
+                id: $confirmableId,
+            );
         }
 
         $this->confirmingPassword = true;
         $this->confirmableId = $confirmableId;
         $this->confirmablePassword = '';
 
-        $this->dispatchBrowserEvent('confirming-password');
+        $this->dispatch('confirming-password');
     }
 
     /**
@@ -80,9 +80,9 @@ public function confirmPassword()
 
         session(['auth.password_confirmed_at' => time()]);
 
-        $this->dispatchBrowserEvent('password-confirmed', [
-            'id' => $this->confirmableId,
-        ]);
+        $this->dispatch('password-confirmed',
+            id: $this->confirmableId,
+        );
 
         $this->stopConfirmingPassword();
     }

diff --git a/src/Console/InstallCommand.php b/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')) {
             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();

diff --git a/src/Http/Livewire/ApiTokenManager.php b/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');
     }
 
     /**

diff --git a/src/Http/Livewire/DeleteTeamForm.php b/src/Http/Livewire/DeleteTeamForm.php
@@ -50,6 +50,8 @@ public function deleteTeam(ValidateTeamDeletion $validator, DeletesTeams $delete
 
         $deleter->delete($this->team);
 
+        $this->team = null;
+
         return $this->redirectPath($deleter);
     }
 

diff --git a/src/Http/Livewire/DeleteUserForm.php b/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;
     }

diff --git a/src/Http/Livewire/LogoutOtherBrowserSessionsForm.php b/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');
     }
 
     /**

diff --git a/src/Http/Livewire/TeamMemberManager.php b/src/Http/Livewire/TeamMemberManager.php
@@ -116,7 +116,7 @@ public function addTeamMember()
 
         $this->team = $this->team->fresh();
 
-        $this->emit('saved');
+        $this->dispatch('saved');
     }
 
     /**

diff --git a/src/Http/Livewire/UpdatePasswordForm.php b/src/Http/Livewire/UpdatePasswordForm.php
@@ -43,7 +43,7 @@ public function updatePassword(UpdatesUserPasswords $updater)
             'password_confirmation' => '',
         ];
 
-        $this->emit('saved');
+        $this->dispatch('saved');
     }
 
     /**

diff --git a/src/Http/Livewire/UpdateProfileInformationForm.php b/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');
     }
 
     /**

diff --git a/src/Http/Livewire/UpdateTeamNameForm.php b/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');
     }
 
     /**

diff --git a/src/InteractsWithBanner.php b/src/InteractsWithBanner.php
@@ -12,10 +12,10 @@ trait InteractsWithBanner
      */
     protected function banner($message)
     {
-        $this->dispatchBrowserEvent('banner-message', [
-            'style' => 'success',
-            'message' => $message,
-        ]);
+        $this->dispatch('banner-message',
+            style: 'success',
+            message: $message,
+        );
     }
 
     /**
@@ -26,9 +26,9 @@ protected function banner($message)
      */
     protected function dangerBanner($message)
     {
-        $this->dispatchBrowserEvent('banner-message', [
-            'style' => 'danger',
-            'message' => $message,
-        ]);
+        $this->dispatch('banner-message',
+            style: 'danger',
+            message: $message,
+        );
     }
 }
diff --git a/stubs/livewire/resources/js/app.js b/stubs/livewire/resources/js/app.js
diff --git a/stubs/livewire/resources/views/api/api-token-manager.blade.php b/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>

diff --git a/stubs/livewire/resources/views/components/action-message.blade.php b/stubs/livewire/resources/views/components/action-message.blade.php
@@ -1,7 +1,7 @@
 @props(['on'])
 
 <div x-data="{ shown: false, timeout: null }"
-    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
+    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;"

diff --git a/stubs/livewire/resources/views/components/banner.blade.php b/stubs/livewire/resources/views/components/banner.blade.php
@@ -4,12 +4,10 @@
             :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
             style="display: none;"
             x-show="show && message"
-            x-init="
-                document.addEventListener('banner-message', event => {
-                    style = event.detail.style;
-                    message = event.detail.message;
-                    show = true;
-                });
+            x-on:banner-message.window="
+                style = event.detail.style;
+                message = event.detail.message;
+                show = true;
             ">
     <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between flex-wrap">

diff --git a/stubs/livewire/resources/views/components/confirms-password.blade.php b/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="confirmablePassword"
                         wire:keydown.enter="confirmPassword" />
 
             <x-input-error for="confirmable_password" class="mt-2" />

diff --git a/stubs/livewire/resources/views/components/form-section.blade.php b/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 }}

diff --git a/stubs/livewire/resources/views/components/modal.blade.php b/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')) }"
     x-on:close.stop="show = false"
     x-on:keydown.escape.window="show = false"
     x-show="show"