Update to AlpineJS 3.x

package.json

@@ -10,22 +10,21 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.3.2",
+        "@tailwindcss/forms": "^0.3.3",
         "@tailwindcss/typography": "^0.4.1",
-        "alpinejs": "^2.8.2",
+        "alpinejs": "^3.2.1",
-        "autoprefixer": "^10.2.6",
+        "autoprefixer": "^10.3.1",
         "axios": "^0.21.1",
         "cross-env": "^7.0",
-        "laravel-mix": "^6.0.19",
+        "laravel-mix": "^6.0.25",
         "lodash": "^4.17.21",
         "postcss-import": "^14.0.2",
         "quill": "^1.3.7",
         "resolve-url-loader": "^4.0.0",
-        "tailwindcss": "^2.1.2",
+        "tailwindcss": "^2.2.4",
-        "vue-template-compiler": "^2.6.12"
+        "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
-        "@shopify/draggable": "^1.0.0-beta.12",
+        "@shopify/draggable": "^1.0.0-beta.12"
-        "alpine-magic-helpers": "^1.2.2"
     }
 }

resources/js/app.js

@@ -1,4 +1 @@
 require('./bootstrap');
-
-require('alpine-magic-helpers');
-require('alpinejs');

resources/js/bootstrap.js

@@ -1,28 +1,11 @@
+// Load Lodash.
 window._ = require('lodash');
 
-/**
+// Load Axios.
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
 window.axios = require('axios');
-
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-/**
+// Load AlpineJS.
- * Echo exposes an expressive API for subscribing to channels and listening
+import Alpine from 'alpinejs';
- * for events that are broadcast by Laravel. Echo and event broadcasting
+window.Alpine = Alpine;
- * allows your team to easily build robust real-time web applications.
+Alpine.start();
- */
-
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });

resources/views/components/dropdown.blade.php

@@ -21,7 +21,7 @@ switch ($width) {
 }
 @endphp
 
-<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
+<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
     <div @click="open = ! open">
         {{ $trigger }}
     </div>

resources/views/components/ingredient-picker.blade.php

@@ -20,11 +20,11 @@
                             autocapitalize="none"
                             inputmode="search"
                             x-ref="ingredients_name"
-                            x-spread="search" />
+                            x-bind="search" />
         </div>
         <div x-show="searching" x-cloak>
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
-                 x-spread="ingredient">
+                 x-bind="ingredient">
                 <template x-for="result in results" :key="result.id">
                     <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" x-bind:data-id="result.id">
                         <div class="pointer-events-none">

resources/views/components/search-view.blade.php

@@ -1,4 +1,4 @@
-<div x-data="searchView()" x-init="loadMore()">
+<div x-data="searchView">
     <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <nav class="md:w-1/4">
             <x-inputs.input name="search"
@@ -41,7 +41,7 @@
                 class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
                 x-show="morePages"
                 x-cloak
-                @click.prevent="loadMore()">
+                @click.prevent="loadMore">
                 Load more
             </x-inputs.button>
         </section>
@@ -51,8 +51,8 @@
 @once
     @push('scripts')
         <script type="text/javascript">
-            let searchView = () => {
+            document.addEventListener('alpine:init', () => {
-                return {
+                Alpine.data('searchView', () => ({
                     results: [],
                     number: 1,
                     size: 12,
@@ -60,6 +60,9 @@
                     searchTerm: null,
                     searching: false,
                     filterTags: [],
+                    init() {
+                        this.loadMore();
+                    },
                     resetPagination() {
                         this.number = 1;
                         this.morePages = false;
@@ -109,8 +112,8 @@
                         }
                         this.loadMore();
                     }
-                }
+                }))
-            }
+            })
         </script>
     @endpush
 @endonce

resources/views/components/tagger.blade.php

@@ -1,5 +1,5 @@
 <div x-data data-tags="{{ $defaultTags ?? '[]' }}">
-    <div x-data="tagSelect()" x-init="init('parentEl')" @click.away="clearSearch()" @keydown.escape="clearSearch()">
+    <div x-data="tagSelect()" @click.outside="clearSearch()" @keydown.escape="clearSearch()">
         <div class="relative" @keydown.enter.prevent="addTag(searchTerm)">
             <x-inputs.input type="hidden"
                             name="tags"

resources/views/foods/index.blade.php

@@ -10,7 +10,7 @@
     </x-slot>
     <x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
         <x-slot name="results">
-            <template x-for="food in results" :key="food">
+            <template x-for="food in results" :key="food.slug">
                 <article class="p-1 border-2 border-black font-sans">
                     <h1 class="text-2xl lowercase font-extrabold leading-none">
                         <a x-bind:href="food.showUrl"

resources/views/journal-entries/create.blade.php

@@ -10,14 +10,14 @@
     </x-slot>
     <form method="POST" action="{{ route('journal-entries.store') }}">
         @csrf
-        <div x-data x-init="initJournalEntries($el);" class="space-y-4">
+        <div x-data x-ref="root" x-init="initJournalEntries($refs.root)" class="space-y-4">
             @foreach($ingredients as $ingredient)
                 @include('journal-entries.partials.entry-item-input', $ingredient)
             @endforeach
             <div class="journal-entry-template hidden">
                 @include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
             </div>
-            <x-inputs.icon-green type="button" class="add-entry-item" x-on:click="addEntryNode($el);">
+            <x-inputs.icon-green type="button" class="add-entry-item" x-on:click="addEntryNode($refs.root);">
                 <svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
                 </svg>
@@ -27,7 +27,7 @@
                     <x-inputs.input type="checkbox" name="group_entries" class="h-5 w-5" value="1" />
                     <span class="ml-2">Group entries by day and meal</span>
                 </x-inputs.label>
-                <x-inputs.button x-on:click="removeTemplate($el);">Add entries</x-inputs.button>
+                <x-inputs.button x-on:click="removeTemplate($refs.root);">Add entries</x-inputs.button>
             </div>
         </div>
     </form>

resources/views/journal-entries/index.blade.php

@@ -14,12 +14,12 @@
                         </a>
                     </div>
                     <div class="text-base text-gray-500">
-                        <form x-data method="GET" action="{{ route('journal-entries.index') }}">
+                        <form x-data x-ref="root" method="GET" action="{{ route('journal-entries.index') }}">
                             <x-inputs.input name="date"
                                             type="date"
                                             class="border-0 shadow-none p-0 text-center"
                                             :value="$date->toDateString()"
-                                            x-on:change="$el.submit();"
+                                            x-on:change="$refs.root.submit();"
                                             required />
                         </form>
                     </div>

resources/views/layouts/navigation.blade.php

@@ -35,9 +35,9 @@
                                 <x-dropdown-link :href="route('users.index')">Manage Users</x-dropdown-link>
                             @endcan
                             <hr />
-                            <form method="POST" action="{{ route('logout') }}" x-data>
+                            <form method="POST" action="{{ route('logout') }}" x-data x-ref="root">
                                 @csrf
-                                <x-dropdown-link :href="route('logout')" @click.prevent="$el.closest('form').submit();">Logout</x-dropdown-link>
+                                <x-dropdown-link :href="route('logout')" @click.prevent="$refs.root.closest('form').submit();">Logout</x-dropdown-link>
                             </form>
                         </div>
                     </x-slot>

resources/views/recipes/edit.blade.php

@@ -4,7 +4,7 @@
     <x-slot name="header">
         <h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
     </x-slot>
-    <form x-data method="POST" enctype="multipart/form-data" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
+    <form x-data x-ref="root" method="POST" enctype="multipart/form-data" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
         @if ($recipe->exists)@method('put')@endif
         @csrf
         <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
@@ -114,7 +114,7 @@
 
         <!-- Ingredients -->
         <h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
-        <div x-data class="ingredients space-y-4">
+        <div x-data x-ref="ingredients" class="ingredients space-y-4">
             @forelse($ingredients_list->sortBy('weight') as $item)
                 @if($item['type'] === 'ingredient')
                     @include('recipes.partials.ingredient-input', $item)
@@ -134,19 +134,19 @@
             </div>
             <x-inputs.button type="button"
                              class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
-                             x-on:click="addNodeFromTemplate($el, 'ingredient');">
+                             x-on:click="addNodeFromTemplate($refs.ingredients, 'ingredient');">
                 Add Ingredient
             </x-inputs.button>
             <x-inputs.button type="button"
                              class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
-                             x-on:click="addNodeFromTemplate($el, 'separator');">
+                             x-on:click="addNodeFromTemplate($refs.ingredients, 'separator');">
                 Add Separator
             </x-inputs.button>
         </div>
 
         <!-- Steps -->
         <h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
-        <div x-data class="steps">
+        <div x-data x-ref="steps" class="steps">
             @forelse($steps as $step)
                 @include('recipes.partials.step-input', $step)
             @empty
@@ -159,13 +159,13 @@
             </div>
             <x-inputs.button type="button"
                              class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
-                             x-on:click="addNodeFromTemplate($el, 'step');">
+                             x-on:click="addNodeFromTemplate($refs.steps, 'step');">
                 Add Step
             </x-inputs.button>
         </div>
 
         <div class="flex items-center justify-end mt-4">
-            <x-inputs.button x-on:click="prepareForm($el);" class="ml-3">
+            <x-inputs.button x-on:click="prepareForm($refs.root);" class="ml-3">
                 {{ ($recipe->exists ? 'Save' : 'Add') }}
             </x-inputs.button>
         </div>

resources/views/recipes/index.blade.php

@@ -10,7 +10,7 @@
     </x-slot>
     <x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
         <x-slot name="results">
-            <template x-for="recipe in results" :key="recipe">
+            <template x-for="recipe in results" :key="recipe.slug">
                 <article class="p-1 border-2 border-black font-sans">
                     <h1 class="text-2xl font-extrabold">
                         <a x-bind:href="recipe.showUrl"

resources/views/recipes/show.blade.php

@@ -9,7 +9,7 @@
         </h1>
     </x-slot>
     <div class="flex flex-col-reverse justify-between md:flex-row md:space-x-4">
-        <div class="flex-1" x-data="{showNutrientsSummary: false}">
+        <div class="flex-1" x-data="{ showNutrientsSummary: false }">
             @if($recipe->time_total > 0)
                 <section class="flex justify-between mb-2 p-2 bg-gray-100 rounded max-w-3xl">
                     <div>
@@ -31,7 +31,7 @@
                     {!! $recipe->description !!}
                 </section>
             @endif
-            <section x-data="{showNutrientsSummary: false}">
+            <section x-data="{ showNutrientsSummary: false }">
                 <h1 class="mb-2 font-bold text-2xl">
                     Ingredients
                     <span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"