refactor(add get and set separately to observable)

dist/spruce.js

@@ -1,2 +1,2 @@
-var t=function(t){return null==t},e=function(r,o){return Object.keys(r).forEach(function(n){t(r[n])||Object.getPrototypeOf(r[n])!==Object.prototype||(r[n]=e(r[n],o))}),new Proxy(r,{set:function(r,n,i){return t(i)||"object"!=typeof i||(i=e(i,o)),o(n,r[n]=i),!0}})},r={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,function(e,r){t.updateSubscribers(e,r)}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(r){void 0!==r.__x&&(r.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},o=window.deferLoadingAlpine||function(t){t()};window.deferLoadingAlpine=function(t){window.Spruce=r,window.Spruce.start(),o(t)},module.exports=r;
+var t=function(t){return null==t},e=function(r,n){return Object.keys(r).forEach(function(o){t(r[o])||Object.getPrototypeOf(r[o])!==Object.prototype||(r[o]=e(r[o],n))}),new Proxy(r,{get:function(t,e){return n.get(e),t[e]},set:function(r,o,i){return t(i)||"object"!=typeof i||(i=e(i,n)),n.set(o,r[o]=i),!0}})},r={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,{get:function(t){},set:function(e,r){t.updateSubscribers(e,r)}}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(r){void 0!==r.__x&&(r.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},n=window.deferLoadingAlpine||function(t){t()};window.deferLoadingAlpine=function(t){window.Spruce=r,window.Spruce.start(),n(t)},module.exports=r;
 //# sourceMappingURL=spruce.js.map

dist/spruce.module.js

@@ -1,2 +1,2 @@
-var t=function(t){return null==t},e=function(r,o){return Object.keys(r).forEach(function(n){t(r[n])||Object.getPrototypeOf(r[n])!==Object.prototype||(r[n]=e(r[n],o))}),new Proxy(r,{set:function(r,n,i){return t(i)||"object"!=typeof i||(i=e(i,o)),o(n,r[n]=i),!0}})},r={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,function(e,r){t.updateSubscribers(e,r)}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(r){void 0!==r.__x&&(r.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},o=window.deferLoadingAlpine||function(t){t()};window.deferLoadingAlpine=function(t){window.Spruce=r,window.Spruce.start(),o(t)};export default r;
+var t=function(t){return null==t},e=function(r,n){return Object.keys(r).forEach(function(o){t(r[o])||Object.getPrototypeOf(r[o])!==Object.prototype||(r[o]=e(r[o],n))}),new Proxy(r,{get:function(t,e){return n.get(e),t[e]},set:function(r,o,i){return t(i)||"object"!=typeof i||(i=e(i,n)),n.set(o,r[o]=i),!0}})},r={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,{get:function(t){},set:function(e,r){t.updateSubscribers(e,r)}}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(r){void 0!==r.__x&&(r.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},n=window.deferLoadingAlpine||function(t){t()};window.deferLoadingAlpine=function(t){window.Spruce=r,window.Spruce.start(),n(t)};export default r;
 //# sourceMappingURL=spruce.module.js.map

dist/spruce.umd.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.spruce=e()}(this,function(){var t=function(t){return null==t},e=function(n,o){return Object.keys(n).forEach(function(r){t(n[r])||Object.getPrototypeOf(n[r])!==Object.prototype||(n[r]=e(n[r],o))}),new Proxy(n,{set:function(n,r,i){return t(i)||"object"!=typeof i||(i=e(i,o)),o(r,n[r]=i),!0}})},n={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,function(e,n){t.updateSubscribers(e,n)}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(n){void 0!==n.__x&&(n.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},o=window.deferLoadingAlpine||function(t){t()};return window.deferLoadingAlpine=function(t){window.Spruce=n,window.Spruce.start(),o(t)},n});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.spruce=e()}(this,function(){var t=function(t){return null==t},e=function(n,o){return Object.keys(n).forEach(function(r){t(n[r])||Object.getPrototypeOf(n[r])!==Object.prototype||(n[r]=e(n[r],o))}),new Proxy(n,{get:function(t,e){return o.get(e),t[e]},set:function(n,r,i){return t(i)||"object"!=typeof i||(i=e(i,o)),o.set(r,n[r]=i),!0}})},n={options:{globalStoreVariable:!1},stores:{},subscribers:[],start:function(){try{var t=this;return Promise.resolve(new Promise(function(t){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()})).then(function(){document.querySelectorAll("[x-subscribe]").forEach(function(t){t.setAttribute("x-init",function(t){var e="$store = Spruce.subscribe($el)";return t.hasAttribute("x-init")&&(e=e+"; "+t.getAttribute("x-init")),e}(t)),t.removeAttribute("x-subscribe")}),t.stores=e(t.stores,{get:function(t){},set:function(e,n){t.updateSubscribers(e,n)}}),t.options.globalStoreVariable&&(window.$store=t.stores)})}catch(t){return Promise.reject(t)}},store:function(t,e){void 0===e&&(e={}),this.stores[t]||(this.stores[t]=e)},subscribe:function(t){return this.subscribers.push(t),this.stores},updateSubscribers:function(t,e){this.subscribers.forEach(function(n){void 0!==n.__x&&(n.__x.$data.spruce=[t,e])})},config:function(t){void 0===t&&(t={}),this.options=Object.assign(this.options,t)}},o=window.deferLoadingAlpine||function(t){t()};return window.deferLoadingAlpine=function(t){window.Spruce=n,window.Spruce.start(),o(t)},n});
 //# sourceMappingURL=spruce.umd.js.map

src/index.js

@@ -18,8 +18,13 @@ const Spruce = {
             el.removeAttribute('x-subscribe')
         })
 
-        this.stores = createObservable(this.stores, (key, value) => {
-            this.updateSubscribers(key, value)
+        this.stores = createObservable(this.stores, {
+            get: (key) => {
+                
+            },
+            set: (key, value) => {
+                this.updateSubscribers(key, value)
+            }
         })
 
         if (this.options.globalStoreVariable) {

src/observable.js

@@ -1,19 +1,24 @@
 import { isNullOrUndefined } from './utils'
 
-export const createObservable = (target, callback) => {
+export const createObservable = (target, callbacks) => {
     Object.keys(target).forEach(key => {
         if (! isNullOrUndefined(target[key]) && Object.getPrototypeOf(target[key]) === Object.prototype) {
-            target[key] = createObservable(target[key], callback)
+            target[key] = createObservable(target[key], callbacks)
         }
     })
 
     return new Proxy(target, {
+        get(target, key) {
+            callbacks.get(key)
+
+            return target[key]
+        },
         set(target, key, value) {
             if (! isNullOrUndefined(value) && typeof value === 'object') {
-                value = createObservable(value, callback)
+                value = createObservable(value, callbacks)
             }
 
-            callback(key, target[key] = value)
+            callbacks.set(key, target[key] = value)
 
             return true
         }

tests/global-store.spec.js

@@ -35,4 +35,26 @@ test('$store > can be used inside of component without subscribing', async () =>
     await waitFor(() => {
         expect(document.querySelector('span').innerText).toEqual('car')
     })
+})
+
+test('$store > modifying store value will trigger component re-render', async () => {
+    document.body.innerHTML = `
+        <div x-data>
+            <span x-text="$store.foo.bar"></span>
+            <button @click="$store.foo.bar = 'boo'"></button>
+        </div>
+    `
+
+    Spruce.store('foo', { bar: 'car' })
+
+    await Spruce.start()
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('car')
+
+    document.querySelector('button').click()
+
+    await waitFor(() => {
+        expect(document.querySelector('span').innerText).toEqual('boo')
+    })
 })

tests/observable.spec.js

@@ -5,7 +5,7 @@ test('createObservable > successfully wraps object', () => {
         foo: 'bar'
     }
 
-    let observable = createObservable(target, () => {})
+    let observable = createObservable(target, { get: () => {} })
 
     expect(observable.foo).toEqual('bar')
 })
@@ -19,7 +19,7 @@ test('createObservable > can access deeply nested props', () => {
         }
     }
 
-    let observable = createObservable(target, () => {})
+    let observable = createObservable(target, { get: () => {} })
 
     expect(observable.foo.bar.baz).toEqual('bob')
 })
@@ -31,8 +31,10 @@ test('createObservable > will run callback on set trap', () => {
 
     let fixture = 0
 
-    let observable = createObservable(target, () => {
-        fixture = 100
+    let observable = createObservable(target, {
+        set: () => {
+            fixture = 100
+        }
     })
 
     observable.foo = 'bob'