chore(docs)

README.md

@@ -34,16 +34,8 @@ Then add the following to your script:
 
 ```javascript
 import Spruce from '@ryangjchandler/spruce'
-
-if (! window.Spruce) {
-    window.Spruce = Spruce
-}
-
-Spruce.start()
 ```
 
-Since Alpine will try to use Spruce from the `window` context, you must assign it to a `window.Spruce` variable still.
-
 ## Usage
 
 Spruce exposes less than a handful of possible interaction points. There is an extremely simple "subscriptions" interaction which connects the roots from your Alpine component to the global store, then there is the "stores" interaction which allows you to define scopes of global state for use throughout your components.
@@ -62,6 +54,8 @@ If you are using the CDN build, you can interact with Spruce using the `window.S
 
 If you are importing Spruce into your own bundle, you can interact with it like any other variable:
 
+**store.js**
+
 ```javascript
 import Spruce from '@ryangjchandler/spruce'
 
@@ -69,9 +63,18 @@ Spruce.store('modals', {
     open: 'login'
 })
 
-window.Spruce = Spruce
+export default Spruce
 ```
 
+**app.js**
+
+```javascript
+import Store from './store'
+import 'alpinejs'
+```
+
+> **Note**: You must `import` your store before Alpine.
+
 ### Subscribing your components
 
 To access the global state from your Alpine components, you can simply add the `x-subscribe` directive to your root component.

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)})})}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)}),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;
 //# 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)})})}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)}),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;
 //# 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)})})}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)}),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});
 //# sourceMappingURL=spruce.umd.js.map

examples/index.html

@@ -2,13 +2,12 @@
     <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>
+        <!-- <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>
-            <span x-text="$store.name"></span>
         </div>
         
         <h3>The button below is a completely different component</h3>

examples/test.js

@@ -1,4 +1,2 @@
 import Store from './store.js'
-
-window.Spruce = Store
-window.Spruce.start()
+import '../node_modules/alpinejs/dist/alpine.js'

src/index.js

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