Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing errors not sending to ray. #195

Merged
merged 2 commits into from
Jun 27, 2024
Merged

Fixing errors not sending to ray. #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0145576
Fix for not sending errors to ray.
gldrenthe89 Feb 21, 2024
39d2b8f
v2.0.1 commit
gldrenthe89 Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
97 changes: 55 additions & 42 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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>
Expand Down Expand Up @@ -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>
```

Expand All @@ -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>
```

Expand Down
27 changes: 17 additions & 10 deletions src/AlpineRayMagicMethod.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { ray } from '@/AlpineRay';
import { AlpineRayConfig, getAlpineRayConfig } from '@/AlpineRayConfig';
import { checkForAxios, encodeHtmlEntities, filterObjectKeys, findParentComponent, getWindow, highlightHtmlMarkup } from '@/lib/utils';
import {ray} from '@/AlpineRay';
import {AlpineRayConfig, getAlpineRayConfig} from '@/AlpineRayConfig';
import {
checkForAxios,
encodeHtmlEntities,
filterObjectKeys,
findParentComponent,
getWindow,
highlightHtmlMarkup
} from '@/lib/utils';
import minimatch from 'minimatch';

function getMatches(patterns: string[], values: string[]) {
Expand Down Expand Up @@ -45,7 +52,7 @@ const AlpineRayMagicMethod = {

window.addEventListener(eventName, e => {
if (eventName.includes('-') || (nameParts.length === 2 && lastNamePart === 'window')) {
rayInstance.table(
rayInstance().table(
{
event: name,
payload: e.detail ?? null,
Expand All @@ -71,7 +78,7 @@ const AlpineRayMagicMethod = {
if (errorEvent.error || errorEvent.reason) {
const data = errorEvent.reason || errorEvent.error;

const { el, expression } = data;
const {el, expression} = data;
const parentComponent = findParentComponent(el);

// component and parent components are not alpine components, so do nothing
Expand All @@ -85,9 +92,9 @@ const AlpineRayMagicMethod = {
`<span class="text-red-700 bg-red-300 p-1">${encodeHtmlEntities(expression)}</span>`,
);

const componentData = parentComponent.__x ?? { $data: {} };
const componentData = parentComponent.__x ?? {$data: {}};

rayInstance.table(
rayInstance().table(
{
errorType: `alpine.js error`,
errorReason: data.toString(),
Expand Down Expand Up @@ -125,7 +132,7 @@ const AlpineRayMagicMethod = {

checkForAxios(window);

Alpine.directive('ray', (el, { expression }, { evaluateLater, effect }) => {
Alpine.directive('ray', (el, {expression}, {evaluateLater, effect}) => {
const result = evaluateLater(expression);

effect(() => {
Expand Down Expand Up @@ -182,11 +189,11 @@ const AlpineRayMagicMethod = {

rayInstance = this.trackRays[ident];

this.trackRays[ident] = rayInstance.table(tableData, 'x-ray');
this.trackRays[ident] = rayInstance().table(tableData, 'x-ray');

setTimeout(() => {
tableData['data'] = tableData['data'].replace('bg-red-400', '');
this.trackRays[ident] = rayInstance.table(tableData, 'x-ray');
this.trackRays[ident] = rayInstance().table(tableData, 'x-ray');
}, 3000);
} else {
rayInstance().table(tableData, 'x-ray');
Expand Down