wip

README.md

@@ -91,7 +91,7 @@ Spruce exposes less than a handful of possible interaction points. There is an e
 
 If you are using the CDN build, you can interact with Spruce using the `window.Spruce` variable:
 
-``` html
+```html
 <script>
     Spruce.store('modals', {
         open: 'login',
@@ -103,7 +103,7 @@ If you are importing Spruce into your own bundle, you can interact with it like
 
 **store.js**
 
-``` javascript
+```js
 import Spruce from '@ryangjchandler/spruce'
 
 Spruce.store('modals', {
@@ -115,7 +115,7 @@ export default Spruce
 
 **app.js**
 
-``` javascript
+```js
 import './store'
 import 'alpinejs'
 ```
@@ -126,7 +126,7 @@ import 'alpinejs'
 
 Spruce hooks into Alpine using the "magic properties" API, meaning there are no extra steps needed. Start using the `$store` variable in your components right away.
 
-``` html
+```html
 <div x-data="{}">
     <span x-text="$store.application.name"></span>
 </div>
@@ -136,7 +136,7 @@ Spruce hooks into Alpine using the "magic properties" API, meaning there are no
 
 To define a piece of global state, you can use the `Spruce.store()` method:
 
-``` javascript
+```js
 Spruce.store('application', {
     name: 'Amazing Alpine Application'
 })
@@ -146,8 +146,8 @@ The first argument defines the top level property of the scope. The second argum
 
 To access the `name` property, you can do the following inside of your component:
 
-``` html
-<div x-data="{}" x-subscribe>
+```html
+<div x-data="{}">
     <span x-text="$store.application.name"></span>
 </div>
 ```
@@ -158,7 +158,7 @@ The `<span>` will now have "Amazing Alpine Application" set as its `innerText` .
 
 You can modify your global state from external scripts using the `Spruce.store()` method too:
 
-``` javascript
+```js
 Spruce.store('application', {
     name: 'Amazing Alpine Application'
 })
@@ -172,7 +172,7 @@ This will trigger Alpine to re-evaluate your subscribed components and re-render
 
 A `Spruce.reset()` method is provided so that you can completely overwrite a global store:
 
-``` javascript
+```js
 Spruce.store('application', {
     name: 'Amazing Alpine Application'
 })
@@ -188,17 +188,15 @@ Calling the `reset` method will make the new state reactive and cause subscribed
 
 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.
 
-``` html
-<script>
-    Spruce.store('form', {
-        name: 'Ryan',
-        email: 'support@ryangjchandler.co.uk'
-    })
+```js
+Spruce.store('form', {
+    name: 'Ryan',
+    email: 'support@ryangjchandler.co.uk'
+})
 
-    Spruce.watch('form.email', (old, next) => {
-            // do something with the values here
-        }) <
-        script >
+Spruce.watch('form.email', (old, next) => {
+    // do something with the values here
+})
 ```
 
 In the above snippet, when we change the value of `form.email` either from a component or externally in a separate JavaScript file, our callback will be invoked and will receive the old value, as well as the new value. This can be useful for running automatic inline validation when a property changes, or triggering an action elsewhere in another component without the need for dispatching events.
@@ -209,12 +207,10 @@ In the above snippet, when we change the value of `form.email` either from a com
 
 Spruce ships with a basic event bus. It exposes two methods:
 
-* `Spruce.on(eventName, callback)` - this can be used to register an event listener. This will react to any internal events, such as `init` . Your callback will receive a single `detail` property which can any information from the event, as well as the global store.
+* `Spruce.on(eventName, callback)` - this can be used to register an event listener. This will react to any internal events, such as `init` . Your callback will receive a single `detail` property which contains any data sent from the event, as well as the global store.
 
-``` js
-Spruce.on('init', ({
-    store
-}) => {
+```js
+Spruce.on('init', ({ store }) => {
     // do something with the store here...
 })
 ```
@@ -235,8 +231,6 @@ var callback = () => {}
 Spruce.off('init', callback)
 ```
 
-> **Note**: When calling `Spruce.off()` directly, you **must** pass a named callback.
-
 You can also unhook a listener using the function returned by `Spruce.on()` . This is especially useful for anonymous function callbacks.
 
 ``` js
@@ -260,24 +254,6 @@ In the example above, a `spruce:event-name` event will be fired on the `window`
 </div>
 ```
 
-### 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:
-
-``` html
-<script>
-    Spruce.config({
-        globalStoreVariable: true
-    })
-</script>
-
-<div x-data>
-    <span x-text="$store.foo.bar"></span>
-</div>
-```
-
-> **Important**: This feature is **highly unoptimized** at the moment and will actually cause all of your Alpine components on the page to re-render. This is due to the limited API that Alpine exposes to third party libraries and the `$store` variable has no simple way of knowing which element is currently retrieving data from the global store.
-
 ## Versioning
 
 This projects follow the [Semantic Versioning](https://semver.org/) guidelines. This means that there *could* be breaking changes on minor version changes, up until v1.x is reached.