feat(pass old value to watcher callback)

README.md

@@ -123,6 +123,10 @@ Spruce.stores.application.name = 'Amazing Spruce Integration'
 
 This will trigger Alpine to re-evaluate your subscribed components and re-render.
 
+### Externally watching for changes
+
+You can register watchers in a similar fashion to Alpine. All you need is the full dot-notation representation of your piece of state and a callback.
+
 ### Removing the need for `x-subscribe`
 
 Alpine offers a Config API. Using this API, you can enable an experimental global `$store` variable that is declared on the `window` object. This means your components do not need to manually "subscribe" to state changes:

src/bus.js

@@ -34,11 +34,11 @@ export default {
         this.watchers[dotNotation].push(callback)
     },
 
-    runWatchers(stores, target, key) {
+    runWatchers(stores, target, key, oldValue) {
         const self = this
 
         if (self.watchers[key]) {
-            return self.watchers[key].forEach(callback => callback(target[key]))
+            return self.watchers[key].forEach(callback => callback(oldValue, target[key]))
         }
 
         Object.keys(self.watchers)
@@ -50,7 +50,7 @@ export default {
 
                 dotNotationParts.reduce((comparison, part) => {
                     if (comparison[key] === target[key] || Object.is(target, comparison)) {
-                        self.watchers[fullDotNotationKey].forEach(callback => callback(target[key]))
+                        self.watchers[fullDotNotationKey].forEach(callback => callback(oldValue, target[key]))
                     }
 
                     return comparison[part]

src/index.js

@@ -22,8 +22,8 @@ const Spruce = {
         })
 
         this.stores = createObservable(this.stores, {
-            set: (target, key, value) => {
-                this.events.runWatchers(this.stores, target, key)
+            set: (target, key, value, oldValue) => {
+                this.events.runWatchers(this.stores, target, key, oldValue)
 
                 this.updateSubscribers(key, value)
             }

src/observable.js

@@ -16,11 +16,13 @@ export const createObservable = (target, callbacks) => {
             return target[key]
         },
         set(target, key, value) {
+            const old = target[key]
+
             if (! isNullOrUndefined(value) && typeof value === 'object') {
                 value = createObservable(value, callbacks)
             }
 
-            callbacks.set(target, key, target[key] = value)
+            callbacks.set(target, key, target[key] = value, old)
 
             return true
         }

tests/bus.spec.js

@@ -68,12 +68,14 @@ test('.emit() > will dispatch browser event to window with spruce: prefix', asyn
 
 test('.watch() > can listen for changes to property', async () => {
     let fixture = undefined
+    let oldFixture = undefined
     
     Spruce.store('example', {
         cool: 'stuff'
     })
 
-    Spruce.watch('example.cool', (value) => {
+    Spruce.watch('example.cool', (previous, value) => {
+        oldFixture = previous
         fixture = value
     })
 
@@ -84,4 +86,5 @@ test('.watch() > can listen for changes to property', async () => {
     Spruce.stores.example.cool = 'amazing'
 
     expect(fixture).toEqual('amazing')
+    expect(oldFixture).toEqual('stuff')
 })