v2.0.1 commit

permafrost-dev · Feb 21, 2024 · 39d2b8f · 39d2b8f
1 parent 0145576
commit 39d2b8f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to `permafrost-dev/alpinejs-ray` will be documented in this
 
 ---
 
+## 2.0.1 - 2024-02-21
+
+- fixing errors to ray
+- updated readme for handling errors
+- updated changelog for this update.
+
 ## 2.0.0 - 2022-03-09
 
 - drop support for Alpine v2

diff --git a/README.md b/README.md
@@ -17,7 +17,8 @@
 
 ## Debug Alpine.js code with Ray to fix problems faster
 
-Install this package into any project using [Alpine.js](https://github.com/alpinejs/alpine) to send messages to the [Ray app](https://myray.app).
+Install this package into any project using [Alpine.js](https://github.com/alpinejs/alpine) to send messages to
+the [Ray app](https://myray.app).
 
 > Note: use version `^1.4` of this package for Alpine v2 and `^2.0` for Alpine v3.
 
@@ -27,11 +28,12 @@ Install this package into any project using [Alpine.js](https://github.com/alpin
 
 ### Installation via CDN (recommended)
 
-The preferred way to use this package is to load it via CDN, which must be done _before_ loading Alpine.  
+The preferred way to use this package is to load it via CDN, which must be done _before_ loading Alpine.
 
 The `axios` library must be loaded prior to loading `alpinejs-ray` and `Alpine`:
 
 ```html
+
 <script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer>
@@ -62,77 +64,87 @@ Alpine.start();
 
 ## Configuration
 
-To configure `alpinejs-ray`, you must create an `alpineRayConfig` property on the `window` object before loading `alpinejs-ray`:
+To configure `alpinejs-ray`, you must create an `alpineRayConfig` property on the `window` object before
+loading `alpinejs-ray`:
 
 ```html
+
 <script>
     window.alpineRayConfig = {
+        interceptErrors: true,
         logComponentsInit: true,
-        logErrors: true,
+        logCustomEvents: true,
         logEvents: ['abc'],
     };
 </script>
 
 <!-- load axios and alpinejs-ray -->
 ```
 
-| Name | Type(s) | Default | Description |
-| --- | --- | --- | --- |
-| `logComponentsInit` | `boolean` | `false` | Send info on component initializations to Ray |
-| `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 |
+| Name                | Type(s)          | Default | Description                                                |
+|---------------------|------------------|---------|------------------------------------------------------------|
+| `logComponentsInit` | `boolean`        | `false` | Send info on component initializations to Ray              |
+| `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 |
 
 ## Usage
 
 After installing the plugin, access the `$ray()` magic method within your components:
 
 ```html
+
 <button @click="$ray().text('hello world')">Say Hello</button>
 ```
 
-See the [node-ray reference](https://github.com/permafrost-dev/node-ray#reference) for a complete list of available methods.
+See the [node-ray reference](https://github.com/permafrost-dev/node-ray#reference) for a complete list of available
+methods.
 
 ### Directives
 
-Use the `x-ray` directive within your HTML markup to easily send data to Ray. The value of the directive must be a valid javascript expression.
+Use the `x-ray` directive within your HTML markup to easily send data to Ray. The value of the directive must be a valid
+javascript expression.
 
 ```html
+
 <div x-data>
     <!-- sends 'hello world' and the value of the 'mystore.somevalue' Alpine store to Ray -->
     <div x-ray="'hello world'"></div>
     <div x-ray="$store.mystore.somevalue"></div>
 </div>
 ```
 
-The `x-ray` directive values are reactive; if the value changes, the new data will be sent to and displayed in Ray in-place. 
+The `x-ray` directive values are reactive; if the value changes, the new data will be sent to and displayed in Ray
+in-place.
 The changed value will be momentarily highlighted in Ray to indicate that it was updated.
 
 ## Example Components
 
 ```html
+
 <button @click="$ray('hello from alpine')">Send to Ray</button>
 ```
 
 ```html
+
 <div x-data="onClickData()">
     <div x-show="show">Hi There Ray!</div>
 
     <button x-on:click="toggle()">Show/Hide (Ray)</button>
 </div>
 
-<script>        
-function onClickData() {
-    return {
-        init() {
-            this.$ray().html('<strong>init on-click-ray data</strong>');
-        },
-        toggle() {
-            this.show = !this.show;
-            this.$ray('toggled show value to ' + (this.show ? 'true' : 'false'));
-        },
-        show: false,
-    };
-}
+<script>
+    function onClickData() {
+        return {
+            init() {
+                this.$ray().html('<strong>init on-click-ray data</strong>');
+            },
+            toggle() {
+                this.show = !this.show;
+                this.$ray('toggled show value to ' + (this.show ? 'true' : 'false'));
+            },
+            show: false,
+        };
+    }
 </script>
 ```
 
@@ -150,35 +162,36 @@ Alpine stores can be automatically sent to Ray whenever the store data is mutate
 window.Alpine.store('mydata', {
     showing: false,
 });
- 
-setInterval( () => {
+
+setInterval(() => {
     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>
+    window.Alpine.store('mydata', {
+        showing: false,
+    });
+
+    function componentData() {
+        return {
+            init() {
+                this.$ray().watchStore('mydata');
+            },
+            toggle() {
+                this.$store.mydata.showing = !this.$store.mydata.showing;
+            },
+        };
+    }
 </script>
 ```