[1.x] Uses json_encode like Jetstream (#338)

* Uses @JSON directive

* Uses `json_encode` instead

stubs/livewire-functional/resources/views/livewire/layout/navigation.blade.php

@@ -35,7 +35,7 @@
  <x-dropdown align="right" width="48">
  <x-slot name="trigger">
  <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
- <div x-data="{ name: '{{ addslashes(auth()->user()->name) }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+ <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
 
  <div class="ms-1">
  <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -83,7 +83,7 @@
  <!-- Responsive Settings Options -->
  <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
  <div class="px-4">
- <div class="font-medium text-base text-gray-800 dark:text-gray-200" x-data="{ name: '{{ addslashes(auth()->user()->name) }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+ <div class="font-medium text-base text-gray-800 dark:text-gray-200" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
  <div class="font-medium text-sm text-gray-500">{{ auth()->user()->email }}</div>
  </div>
 

stubs/livewire/resources/views/livewire/layout/navigation.blade.php

@@ -41,7 +41,7 @@ public function logout(Logout $logout): void
  <x-dropdown align="right" width="48">
  <x-slot name="trigger">
  <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
- <div x-data="{ name: '{{ addslashes(auth()->user()->name) }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+ <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
 
  <div class="ms-1">
  <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -89,7 +89,7 @@ public function logout(Logout $logout): void
  <!-- Responsive Settings Options -->
  <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
  <div class="px-4">
- <div class="font-medium text-base text-gray-800 dark:text-gray-200" x-data="{ name: '{{ addslashes(auth()->user()->name) }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
+ <div class="font-medium text-base text-gray-800 dark:text-gray-200" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
  <div class="font-medium text-sm text-gray-500">{{ auth()->user()->email }}</div>
  </div>