Support for Alpine V3

[arturolguillen]

Alpine devtools don't recognize components when using the latest version of Alpine (V3). Maybe I'm missing something.

[ryangjchandler]

@aguillen-js The DevTools won't work with 3.x components, yet.

[stephenoldham]

@aguillen-js Just out of interest what browser and OS are you using? I'll see if I can declutter the auto scrollbar styles.

[HugoDF]

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 Alpine.effect. Updated example on codepen

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.

[arturolguillen]

@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.