$data as JSON

[k1mbl3]

Is there any way to access $data as a serializable object? right now i'm doing this but due its hackish nature it could break if some of those private props change in the future and $data itself looks like a proxy returning an empty object

serialize() {return $el._x_dataStack.reverse().reduce((a, b) => Object.assign(a, b), {})}

[SimoTod]

If you are only interested in the component scope (no parents), you can do
JSON.stringify(Alpine.raw(Alpine.closestDataStack($el)[0]))

• Alpine.closestDataStack returns $root._x_dataStack
• the first element ([0]) of _x_dataStack is the current scope
• Alpine.raw returns the original object (only for component scopes, it won't work with $data)

If you also need parent data, you can slightly modify the above to
JSON.stringify(Alpine.closestDataStack($el).reverse().reduce((a, b) => Object.assign(a, b), {}))

It only protects you from _x_dataStack being renamed and, despite being on the public interface, is not documented.

$data is a proxy around an empty object whose getter and setter read/write from/to the closest data stack.

I'm not sure if there is an appetite for making all Alpine proxies serializable but it's probably possible by overriding toJson(), values() or both

[k1mbl3]

Thanks!