wip

index.html

@@ -17,6 +17,23 @@
         </template>
     </div>
 
+    <div>
+        <button wire:click="increment">inc</button>
+    </div>
+
+    <div x-data="{ open: @entangle('open') }">
+
+        <input wire:model.defer="count">
+
+        <div wire:dirty wire:target="count">dirty...</div>
+
+        <div x-show="$wire.dirty('count')">dirty...</div>
+        <div x-show="$wire.loading('count')">dirty...</div>
+        <div wire:loading="">dirty...</div>
+        <div wire:loading="">dirty...</div>
+
+    </div>
+
     <main x-data x-ignore style="display: none">
         <div x-data>
             <h1>there!</h1>

packages/alpinejs/src/alpine.js

@@ -12,6 +12,7 @@ import { debounce } from './utils/debounce'
 import { throttle } from './utils/throttle'
 import { setStyles } from './utils/styles'
 import { nextTick } from './nextTick'
+import { walk } from './utils/walk'
 import { plugin } from './plugin'
 import { magic } from './magics'
 import { store } from './store'
@@ -62,6 +63,7 @@ let Alpine = {
     clone,
     bound,
     $data,
+    walk,
     data,
     bind,
 }

packages/alpinejs/src/directives/x-model.js

@@ -78,8 +78,9 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
         },
     }
 
-    el._x_forceModelUpdate = () => {
-        let value = getValue()
+    el._x_forceModelUpdate = (value) => {
+        value = value === undefined ? getValue() : value
+
         // If nested model key is undefined, set the default value to empty string.
         if (value === undefined && typeof expression === 'string' && expression.match(/\./)) value = ''
 
@@ -90,10 +91,15 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     }
 
     effect(() => {
+        // We need to make sure we're always "getting" the value up front,
+        // so that we don't run into a situation where because of the early
+        // the reactive value isn't gotten and therefore disables future reactions.
+        let value = getValue()
+
         // Don't modify the value of the input if it's focused.
         if (modifiers.includes('unintrusive') && document.activeElement.isSameNode(el)) return
 
-        el._x_forceModelUpdate()
+        el._x_forceModelUpdate(value)
     })
 })
 

packages/alpinejs/src/scheduler.js

@@ -6,9 +6,10 @@ let queue = []
 export function scheduler (callback) { queueJob(callback) }
 
 function queueJob(job) {
-    if (! queue.includes(job)) queue.push(job)
+    // if (! queue.includes(job)) queue.push(job)
+    job()
 
-    queueFlush()
+    // queueFlush()
 }
 export function dequeueJob(job) {
     let index = queue.indexOf(job)

packages/alpinejs/src/utils/error.js

@@ -1,9 +1,9 @@
 export function tryCatch(el, expression, callback, ...args) {
-    try {
+    // try {
         return callback(...args)
-    } catch (e) {
-        handleError( e, el, expression )
-    }
+    // } catch (e) {
+    //     handleError( e, el, expression )
+    // }
 }
 
 export function handleError(error, el, expression = undefined) {

packages/persist/src/index.js

@@ -29,6 +29,21 @@ export default function (Alpine) {
 
     Object.defineProperty(Alpine, '$persist', { get: () => persist() })
     Alpine.magic('persist', persist)
+    Alpine.persist = (key, { get, set }, storage = localStorage) => {
+        let initial = storageHas(key, storage)
+            ? storageGet(key, storage)
+            : get()
+
+        set(initial)
+
+        Alpine.effect(() => {
+            let value = get()
+
+            storageSet(key, value, storage)
+
+            set(value)
+        })
+    }
 }
 
 function storageHas(key, storage) {