permafrost-dev / alpinejs-ray Goto Github PK

View Code? Open in Web Editor NEW

27.0 3.0 2.0 254 KB

Debug your Alpine.js code with Ray to fix problems faster

Home Page: https://permafrost.dev/open-source

License: MIT License

JavaScript 16.60% TypeScript 83.20% Shell 0.19%

debugging alpinejs npm-package alpinejs-plugin ray-app alpine ray

alpinejs-ray's Issues

Error using alpinejs-ray via CDN

Description

Unable to use alpinejs-ray via CDN shows the following error in the web inspector:

TypeError: Cannot read properties of undefined (reading 'randomUUID')

Steps To Reproduce

Using the following file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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></script>
</head>

<body>
    <div x-data>
        <button @click="$ray('hello from alpine')">Send to Ray</button>
    </div>
</body>

</html>

Open it and click on Send to ray
See the following screenshot of the web inspector

Expected behavior

The web page should not have any errors and should communicate with Ray

Environment

OS: macOS 14.5
Browser: Chrome 126.0.6478.127 (Official Build) (arm64)

Additional context

Setting up a project with alpinejs-ray installed via npm works correctly.

Error when adding alpinejs-ray to Alpine Version 3 project

Describe the bug

When I add alpinejs-ray to an Alpine V3.2.3 project I get the following error in the console

alpine.js?id=a3692cc7446e217f9238:2 Uncaught TypeError: e.Alpine.addMagicProperty is not a function at Object.start (alpine.js?id=a3692cc7446e217f9238:2) at alpine.js?id=a3692cc7446e217f9238:2 at alpine.js?id=a3692cc7446e217f9238:2 at alpine.js?id=a3692cc7446e217f9238:2

Uncaught TypeError: Cannot read property 'parentElement' of undefined at Yn (alpine.js?id=a3692cc7446e217f9238:2) at alpine.js?id=a3692cc7446e217f9238:2

To Reproduce

Steps to reproduce the behavior:

create a new project with latest alpine js (v3.2.3 at this time) and alpinejs-ray
"dependencies": { "alpinejs": "^3.2.3", "alpinejs-ray": "^1.4.0", }
Add alpinejs-ray to your alpine config
import { Ray, ray } from 'node-ray/web';
import Alpine from 'alpinejs';
import AlpineRayPlugin from 'alpinejs-ray';
window.alpineRayConfig = {
logComponentsInit: true,
logCustomEvents: false,
interceptErrors: true,
interceptSpruce: true,
};
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.start()
Start you webserver and load a page including the alpinejs refference
See error
alpine.js?id=a3692cc7446e217f9238:2 Uncaught TypeError: e.Alpine.addMagicProperty is not a function at Object.start (alpine.js?id=a3692cc7446e217f9238:2) at alpine.js?id=a3692cc7446e217f9238:2 at alpine.js?id=a3692cc7446e217f9238:2 at alpine.js?id=a3692cc7446e217f9238:2

Expected behavior

When adding alpinejs-ray to an alpine project the plugin should be loaded successfully

Screenshots

None

Environment (please complete the following information):

OS: Linux
Laravel Version: 8
Language: Vanilla Javascript

Override alpinejs error handler to intercept all errors

Intercept all errors from alpinejs that start with "Alpine Error: " and send them to Ray instead.

Reference: alpinejs/src/utils.js#L68

@HugoDF any help or insight on this would be appreciated.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.