diff --git a/docs/configuration/alpinejs.md b/docs/configuration/alpinejs.md index 9b3e7b5f..f1514dce 100644 --- a/docs/configuration/alpinejs.md +++ b/docs/configuration/alpinejs.md @@ -3,7 +3,7 @@ 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`: @@ -11,16 +11,18 @@ To configure `alpinejs-ray`, you must create an `alpineRayConfig` property on th - + ``` -| 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 | diff --git a/docs/installation-in-your-project/alpinejs.md b/docs/installation-in-your-project/alpinejs.md index c5cb587e..1da20872 100644 --- a/docs/installation-in-your-project/alpinejs.md +++ b/docs/installation-in-your-project/alpinejs.md @@ -15,7 +15,9 @@ For Alpine version 2 use: ```html - + + + ``` 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(); ``` diff --git a/docs/usage/alpinejs.md b/docs/usage/alpinejs.md index 27287664..e88f5497 100644 --- a/docs/usage/alpinejs.md +++ b/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 -
+
Hi There Ray!
@@ -33,20 +33,42 @@ function onClickData() { ``` -## 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('[spruce] 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 +
+
Hi There Ray!
+ +
+ + +``` diff --git a/docs/usage/reference.md b/docs/usage/reference.md index 01af136d..7241bf7c 100644 --- a/docs/usage/reference.md +++ b/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 |