Update documentation for Alpine.js integration

docs/configuration/alpinejs.md

@@ -3,24 +3,26 @@ title: Alpine.js
 weight: 9
 ---
 
-### Configuration options
+### Configuration Options
 
 To configure `alpinejs-ray`, you must create an `alpineRayConfig` property on the `window` object before loading `alpinejs-ray`:
 
 ```html
 <script>
     window.alpineRayConfig = {
         logComponentsInit: true,
-        logCustomEvents: false,
+        logErrors: true,
+        logEvents: ['abc'],
     };
 </script>
 
-<!-- load axios and alpinejs-ray scripts here -->
+<!-- load axios and alpinejs-ray -->
 ```
 
-| Name | Type | Default | Description |
+### Configuration Reference
+
+| Name | Type(s) | Default | Description |
 | --- | --- | --- | --- |
 | `logComponentsInit` | `boolean` | `false` | Send info on component initializations to Ray |
-| `logCustomEvents` | `boolean` | `false` | Send info on custom events to Ray _(events with hyphenated names)_ |
-
-
+| `logErrors` | `boolean` | `false` | Send javascript errors to Ray instead of the console |
+| `logEvents` | `boolean, array` | `false` | Send specified custom events to Ray, or `false` to disable |

docs/installation-in-your-project/alpinejs.md

@@ -15,7 +15,9 @@ For Alpine version 2 use:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@latest/dist/standalone.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>
+
+<!-- load alpine.js here -->
 ```
 
 For Alpine version 3 use:
@@ -47,28 +49,25 @@ Install with npm:
 npm install alpinejs-ray
 ```
 
-or yarn:
+#### Importing the plugin
 
-```bash
-yarn add alpinejs-ray
-```
+Although not the recommended way, you can import package normally if installed with a package manager _(along with `alpinejs` and `axios`)_:
 
-#### Importing the plugin
+First, install `alpinejs-ray` with npm _(or your preferred package manager)_:
 
-Although not the recommended way, you can import package normally if installed with a package manager _(along with `node-ray`, `alpinejs` and `axios`)_:
+```bash
+npm install alpinejs-ray
+```
 
 ```js 
-import { Ray, ray } from 'node-ray/web';
 import Alpine from 'alpinejs';
 import AlpineRayPlugin from 'alpinejs-ray';
 
-window.ray = ray;
-window.Ray = Ray;
 window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 window.Alpine = Alpine;
-window.AlpineRayPlugin = AlpineRayPlugin;
-window.AlpineRayPlugin.init();
-window.AlpineRayPlugin.start();
+
+Alpine.plugin(AlpineRayPlugin);
+Alpine.start();
 ```

docs/usage/alpinejs.md

@@ -11,7 +11,7 @@ Once the plugin is installed, you may access the helper function as `$ray()` fro
 ## Example Component
 
 ```html
-<div x-data="onClickData()" x-init="init()">
+<div x-data="onClickData()">
     <div x-show="show">Hi There Ray!</div>
     <button x-on:click="toggle()">Show/Hide (Ray)</button>
     <button @click="$ray('hello from alpine')">Send to Ray</button>
@@ -33,20 +33,42 @@ function onClickData() {
 </script>
 ```
 
-## Tracking Spruce Data Stores
+## Tracking Data Stores
 
-Spruce data store are automatically tracked if [Spruce](https://github.com/ryangjchandler/spruce) is installed.  Consider the following:
+You may automatically send Alpine stores to Ray whenever the store data is updated.  Consider the following:
 
 ```js
-window.Spruce.store('mydata', {
+window.Alpine.store('mydata', {
     showing: false,
-    toggle() {
-        this.showing = !this.showing;
-        ray().html('<strong>[spruce]</strong> showing = ' + this.showing);
-    }
 });
 
 setInterval( () => {
-    window.Spruce.stores.mydata.showing = !window.Spruce.stores.mydata.showing;
+    window.Alpine.store('mydata').showing = !window.Alpine.store('mydata').showing;
 }, 3000);
 ```
+
+To watch the store and display changes in Ray, use the `$ray().watchStore('name')` method:
+
+```html
+<div x-data="componentData()">
+    <div x-show="$store.mydata.showing">Hi There Ray!</div>
+    <button x-on:click="toggle()">Show/Hide (Ray)</button>
+</div>
+
+<script>      
+window.Alpine.store('mydata', {
+    showing: false,
+});
+
+function componentData() {
+    return {
+        init() {
+            this.$ray().watchStore('mydata');
+        },
+        toggle() {
+            this.$store.mydata.showing = !this.$store.mydata.showing;
+        },
+    };
+}
+</script>
+```

docs/usage/reference.md

@@ -14,15 +14,19 @@ We assume you have completed the [installation](/docs/ray/v1/installation-in-you
 To display something in Ray use the `ray()` function. It accepts everything: strings, arrays, objects, ... you name it.
 
 - [Framework agnostic PHP](#framework-agnostic-php)
+  - [Updating a Ray instance](#updating-a-ray-instance)
 - [Laravel](#laravel)
-- [WordPress](#wordpress)
+  - [Macros & Blade](#macros--blade)
+- [Wordpress](#wordpress)
 - [Yii](#yii)
 - [Craft](#craft)
-- [Javascript](#javascript)
+  - [Twig](#twig)
+- [JavaScript](#javascript)
 - [NodeJS](#nodejs)
 - [Vue](#vue)
 - [Go](#go)
-- [Alpine.js](#alpinejs)
+- [AlpineJS](#alpinejs)
+  - [Updating a Ray instance](#updating-a-ray-instance-1)
 - [Bash](#bash)
 
 ## Framework agnostic PHP
@@ -294,6 +298,11 @@ Read more on [Craft](/docs/ray/v1/usage/craft)
 
 All methods available to [NodeJS](#nodejs) are available to the Alpine.js integration.
 
+| Call | Description |
+| --- | --- |
+| `$ray.watchStore(name)` | Watch an Alpine data store and send all changes to Ray |
+| `$ray.unwatchStore(name)` | Stop watching an Alpine data store for changes |
+
 ### Updating a Ray instance
 
 | Call | Description |