suggestion: add global variable for current selected component

[MordiSacks]

Similar to the $0 of chrome and $vm of vue, it would be very productive to have this for alpine
maybe $a

Thank you all for the great work.

[HugoDF]

$x0 ($x1 and so on) is probably the name we want to go for.

Getting a proof of concept to work is probably not to complicated:

• from devtools, send a message to backend.js "add an Alpine.js component instance as a global (for use in the console)" with a reference to the component (devtools id we generate)
• in backend.js, find the component by devtools id, set window['$x0'] to the component instance (rootEl.__x)

[MordiSacks]

That is what I initially thought but $x is used in chrome for xpath selector https://developers.google.com/web/tools/chrome-devtools/console/utilities#xpath

[HugoDF]

That is what I initially thought but $x is used in chrome for xpath selector https://developers.google.com/web/tools/chrome-devtools/console/utilities#xpath

$x0, $x1 though?

Actually, it might be simpler to expose all the component "instance"-es in the console under $x{componentId} (componentId is an incrementing integer) without a UI to trigger it, then we can just have a "access using $x1 in the console" on hover of the component in the devtools panel.

Do you think we should be exposing the whole component instance or just the data? On the Alpine Discord people always seem a bit confused about Proxies etc

[ryangjchandler]

@HugoDF I think it might make sense to expose both separately, otherwise you need knowledge of the __x.$data stuff.

Alternatively, you could actually wrap it into a custom object in the console. For example:

{
    el: $el, // the component el,
    data: $el.__x.$data, // the data / `Proxy`
}
``

[HugoDF]

Interesting, for reference this is Vue.js

UI in the panel, we could use = $x0 + tooltip or "title" attr or even just Available as $x0 in console

Contents of $vm:

I think the most in line with that would be to expose rootEl.__x which contains unobservedData, el and so on

Maybe we could spread the unobservedData or $data in the top-level scope (depending on whether spread $data values will update the component or not)? Edit: when spreading $data, the component state doesn't update (due to how proxies), but I guess people trying to edit the data should probably be using the devtools panel...

[HugoDF]

Ok just done a release today but this will be in the next one

[MordiSacks]

Looks awesome,
Thank you.

[HugoDF]

Keep your eyes peeled for 0.1.0 (this is the milestone https://github.com/alpine-collective/alpinejs-devtools/milestone/11)

When it goes out will depend on how busy the repo is over the next couple of days