Fix $watch oldValue for objects

packages/alpinejs/src/reactivity.js

@@ -60,20 +60,27 @@ export function watch(getter, callback) {
     let firstTime = true
 
     let oldValue
+    let oldValueJSON
 
     let effectReference = effect(() => {
         let value = getter()
 
         // JSON.stringify touches every single property at any level enabling deep watching
-        JSON.stringify(value)
+        let newJSON = JSON.stringify(value)
 
         if (! firstTime) {
             // For objects, always fire (deep watching may have detected nested changes).
             // For primitives, only fire if value actually changed.
             if (typeof value === 'object' || value !== oldValue) {
                 // We have to queue this watcher as a microtask so that
                 // the watcher doesn't pick up its own dependencies.
-                let previousValue = oldValue
+
+                // For objects, parse the stored JSON snapshot to get a plain clone
+                // of the previous state. Without this, oldValue and value are the
+                // same reference and oldValue would reflect the already-mutated state.
+                let previousValue = typeof oldValue === 'object'
+                    ? JSON.parse(oldValueJSON)
+                    : oldValue
 
                 queueMicrotask(() => {
                     callback(value, previousValue)
@@ -82,6 +89,7 @@ export function watch(getter, callback) {
         }
 
         oldValue = value
+        oldValueJSON = newJSON
 
         firstTime = false
     })

tests/cypress/integration/magics/$watch.spec.js

@@ -198,3 +198,57 @@ test('deep $watch',
     }
 )
 
+test('deep $watch receives old value',
+    html`
+        <div x-data="{ foo: { bar: 'baz' }, fresh: '', old: '' }" x-init="
+            $watch('foo', (value, oldValue) => { fresh = value.bar; old = oldValue.bar })
+        ">
+            <h1 x-text="fresh"></h1>
+            <h2 x-text="old"></h2>
+
+            <button x-on:click="foo.bar = 'bob'"></button>
+        </div>
+    `,
+    ({ get }) => {
+        get('button').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('baz'))
+    }
+)
+
+test('deep $watch receives old value for arrays',
+    html`
+        <div x-data="{ list: ['one'], newVal: '', oldVal: '' }" x-init="
+            $watch('list', (value, oldValue) => { newVal = value.join(','); oldVal = oldValue.join(',') })
+        ">
+            <h1 x-text="newVal"></h1>
+            <h2 x-text="oldVal"></h2>
+
+            <button x-on:click="list.push('two')"></button>
+        </div>
+    `,
+    ({ get }) => {
+        get('button').click()
+        get('h1').should(haveText('one,two'))
+        get('h2').should(haveText('one'))
+    }
+)
+
+test('deep $watch receives old value with null',
+    html`
+        <div x-data="{ foo: null, fresh: '', old: '' }" x-init="
+            $watch('foo', (value, oldValue) => { fresh = JSON.stringify(value); old = JSON.stringify(oldValue) })
+        ">
+            <h1 x-text="fresh"></h1>
+            <h2 x-text="old"></h2>
+
+            <button x-on:click="foo = { bar: 'baz' }"></button>
+        </div>
+    `,
+    ({ get }) => {
+        get('button').click()
+        get('h1').should(haveText('{"bar":"baz"}'))
+        get('h2').should(haveText('null'))
+    }
+)
+