"stores" tab

[HugoDF]

Devtools can have a "stores" tab

Spruce has a methods (outside of Alpine) for:

• accessing stores: https://docs.ryangjchandler.co.uk/spruce/stores#accessing-a-store-from-javascript
• set data in store: https://docs.ryangjchandler.co.uk/spruce/stores#overwriting-a-store
• watching a store: https://docs.ryangjchandler.co.uk/spruce/watchers
• listing stores with Object.keys(Spruce.stores)

("stores" > "spruce" so that we're forward compatible if stores make it into v3)

Originally posted by @HugoDF in https://github.com/alpine-collective/alpinejs-devtools/discussions/175

[HugoDF]

Update: stores are a v3 concept I'm not 100% sure how we can detect/list them if someone else has any ideas feel free to comment.

[ryangjchandler]

There is a private getStores function, could PR and make it public?

[Niush]

This is my bad solution:

First the extension adds a hidden Alpine initialized field in the body. It will watch changes in $store and sets $store._devtools_stores with the updated $store data.

<input 
  type="hidden"
  x-title="_devtools_stores"
  x-effect="new_store = { ...$store }; delete new_store._devtools_stores; $store._devtools_stores = new_store"
  x-data="{new_store: null}"
/>

The extension can then show all the stores data from Alpine.store('_devtools_stores'). Any new changes will be updated with x-effect.

From devtools Components page, element with name of _devtools_stores set by x-title can be removed. To hide the above field from showing up.

Alpine.js should not start recursively looking for changes in $store due to the x-effect. I added a console.log in x-effect, and it seems to not be an issue.

[Yahav]

@Niush Just tried that, doesn't seem to be working with devtools. Alpine.store('_devtools_stores') does output the stores but the devtools shows it as empty. Its a shame.

EDIT: This seem to work:

<input
    type="hidden"
    x-title="_devtools_stores"
    x-effect="new_store = { ...$store }; delete new_store._devtools_stores; $store._devtools_stores = new_store"
    x-data="{new_store: null}"
/>

[stepanjakl]

@Niush @Yahav Your solution works great! However, it would be nice to see global $store(s) natively inside the extension.