fix(setting null or undefined values)

dist/spruce.js

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

examples/index.html

@@ -11,7 +11,7 @@
         <h3>The button below is a completely different component</h3>
 
         <div x-data x-subscribe>
-            <button @click="$store.dropdown.hello = 'amazing'">Update world to amazing</button>
+            <button @click="$store.dropdown.hello = null">Update world to amazing</button>
         </div>
     </body>
 </html>

examples/store.js

@@ -1,7 +1,8 @@
 import Spruce from '../dist/spruce.module.js'
 
 Spruce.store('dropdown', {
-    hello: 'world'
+    hello: 'world',
+    testing: null,
 })
 
 Spruce.store('name', 'Application')

src/observable.js

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

src/utils.js

@@ -16,4 +16,8 @@ export const buildInitExpression = el => {
     }
 
     return expression
+}
+
+export const isNullOrUndefined = value => {
+    return value === null || value === undefined
 }