wip

dist/spruce.js

@@ -1,2 +1,2 @@
-var t=function(e,r){return Object.keys(e).forEach(function(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)}),window.Spruce||(window.Spruce=e)})}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(e,r){return Object.keys(e).forEach(function(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;
 //# sourceMappingURL=spruce.js.map

dist/spruce.module.js

@@ -1,2 +1,2 @@
-var t=function(e,r){return Object.keys(e).forEach(function(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)}),window.Spruce||(window.Spruce=e)})}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(e,r){return Object.keys(e).forEach(function(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;
 //# 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,r){return Object.keys(t).forEach(function(n){Object.getPrototypeOf(t[n])===Object.prototype&&(t[n]=e(t[n],r))}),new Proxy(t,{set:function(t,n,o){return"object"==typeof o&&(o=e(o,r)),r(n,t[n]=o),!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,r){t.updateSubscribers(e,r)}),window.Spruce||(window.Spruce=t)})}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(r){void 0!==r.__x&&(r.__x.$data.spruce=[e,t])})}},r=window.deferLoadingAlpine||function(e){e()};return window.deferLoadingAlpine=function(e){window.Spruce=t,window.Spruce.start(),r(e)},t});
+!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,r){return Object.keys(t).forEach(function(n){Object.getPrototypeOf(t[n])===Object.prototype&&(t[n]=e(t[n],r))}),new Proxy(t,{set:function(t,n,o){return"object"==typeof o&&(o=e(o,r)),r(n,t[n]=o),!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,r){t.updateSubscribers(e,r)})})}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(r){void 0!==r.__x&&(r.__x.$data.spruce=[e,t])})}},r=window.deferLoadingAlpine||function(e){e()};return window.deferLoadingAlpine=function(e){window.Spruce=t,window.Spruce.start(),r(e)},t});
 //# sourceMappingURL=spruce.umd.js.map

examples/cdn.html

@@ -0,0 +1,18 @@
+<html>
+    <head>
+        <script type="module" src="../dist/spruce.umd.js"></script>
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
+    </head>
+    <body>
+        <div x-data x-subscribe>
+            <input type="text" x-model="$store.dropdown.hello">
+            <span x-text="$store.dropdown.hello"></span>
+        </div>
+        
+        <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>
+        </div>
+    </body>
+</html>

examples/index.html

@@ -1,8 +1,6 @@
 <html>
     <head>
-        <!-- <script src="../dist/spruce.umd.js"></script> -->
         <script type="module" src="./test.js"></script>
-        <!-- <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script> -->
     </head>
     <body>
         <div x-data x-subscribe>

src/index.js

@@ -17,10 +17,6 @@ const Spruce = {
         this.stores = createObservable(this.stores, (key, value) => {
             this.updateSubscribers(key, value)
         })
-
-        if (! window.Spruce) {
-            window.Spruce = this
-        }
     },
 
     store: function (name, state = {}) {