From 7ddcc6f37d3d5fb551a05887add1c94ad9c0cf82 Mon Sep 17 00:00:00 2001
From: Mark Jaquith <mark@jaquith.me>
Date: Fri, 24 Sep 2021 02:29:07 -0400
Subject: [PATCH] Make Alpine app use better Alpine conventions

- fixed broken use of x-for on `<ul>`
- removed unnecessary use of global state
- removed unnecessary function
- move storage syncing to an `x-effect`
- `@submit` instead of `x-on:submit`
- Reset input field after submission
- Formatting cleanup
---
 alpine-app/index.html | 40 +++++++++++-----------------------------
 1 file changed, 11 insertions(+), 29 deletions(-)
diff --git a/alpine-app/index.html b/alpine-app/index.html
index 232afae..8e04bc3 100644
--- a/alpine-app/index.html
+++ b/alpine-app/index.html
@@ -2,43 +2,25 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
+    <title>Todos</title>
     <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
- 
 </head>
 <body>
-
-    <div x-data="{ todoText: '' }">
-        
-        <ul x-for="todo in $store.todos">
-            <li x-text="todo"></li>
+    <div
+      x-data="{todos: JSON.parse(localStorage.getItem('todos')) || [], text: ''}"
+      x-effect="localStorage.setItem('todos', JSON.stringify(todos))"
+    >
+        <ul>
+            <template x-for="todo in todos">
+                <li x-text="todo"></li>
+            </template>
         </ul>
 
-        <form x-on:submit.prevent="addTodo(todoText)">
-            <input type="text" x-model="todoText" placeholder="What needs to be done?">
+        <form @submit.prevent="todos.push(text),text = ''">
+            <input type="text" x-model="text" placeholder="What needs to be done?">
             <button type="submit">Add Todo</button>
         </form>
     </div>
-
-    <script>
-
-        function addTodo(todoText) {
-            Alpine.store('todos').push(todoText);
-            localStorage.setItem('todos', JSON.stringify(todos));
-        }
-
-        document.addEventListener('alpine:init', () => {
-            const existingTodos = localStorage.getItem('todos');
-    	    todos = JSON.parse(existingTodos) || [];
-
-            Alpine.store('todos', todos);
-        })
-
-    </script>
-
-    
 </body>
 </html>
\ No newline at end of file
