Support for Alpine V3
arturolguillen opened this issue · 4 comments
@aguillen-js The DevTools won't work with 3.x components, yet.
@aguillen-js Just out of interest what browser and OS are you using? I'll see if I can declutter the auto scrollbar styles.
So I had a quick look at how we might support V3, bulk of the work would be in the backend.js I think.
Might be nice to display something when Alpine V3 is detected (eg. It's a work in progress and link to this issue)
Would be interested if people are willing to PR.
The "watch data changes" proposed solution is not super clean at the moment. There might be cleaner way to register the watcher using Updated example on codepenAlpine.effect
.
Core functionality (current):
- get initial data
- watch for data changes
- edit data
- catch eval errors
Future functionality:
- Stores/global data support
-
$dispatch
support
Get initial data
const xData = document.querySelector('[x-data]')._x_dataStack[0]
const dataKeys = Object.keys(xData).filter(name => !name.startsWith('$'))
Watch for data changes
const xData = document.querySelector('[x-data]')._x_dataStack[0]
const dataKeys = Object.keys(xData).filter(name => !name.startsWith('$'))
// super hack way: document.querySelector('[x-data]').setAttribute('x-effect', `console.log({${dataKeys.join(',')}})`)
Alpine.effect(() => {
dataKeys.forEach((key) => {
const dataValue = xData[key];
console.log({
field,
value: dataValue
});
});
});
See working codepen: https://codepen.io/hugodf/pen/XWMQWJZ
Edit data
const xData = document.querySelector('[x-data]')._x_dataStack[0]
xData.count = 120
Catch eval errors
Changes required to Alpine core (so that errors are emitted with the right information).
Currently alpine-next
doesn't even log a warning.
@aguillen-js Just out of interest what browser and OS are you using? I'll see if I can declutter the auto scrollbar styles.
@stephenoldham Hello, I am using Windows 10. Regarding the browser, when I do web development I have Chrome, Firefox Developer Edition and Edge running, I like to check everything in the most recent version of each browser. The screenshot in question was taken from Chrome.