app-state tab with cljs-devtools formatting

[daiyi]

Currently: proof of concept for showing app Collapse/expand inspection of app state using custom formatters provided by cljs-devtools library. It's not interactive yet (:

(In other news, I figured a really wind-about workflow for making screen gif demos!)

Closes #52

[daiyi]

@saskali, the branch I'm using is called "daiyi/cljs-formatters"! We should figure out how to merge our work, with your jsonML->hiccup style parser!

[daiyi]

@saskali that looks so good! :D I updated the screenshot:

[daiyi]

Exciting progress! :D

[daiyi]

Toggling expand/contract of data structures \o/

[daiyi]

This branch is in a good place to be reviewed!

(reminder that when testing out branches locally, you may need to touch/save the styles.cljs file to see css changes)

[daiyi]

Inspecting paths into app-state!

Still trying to figure out the design but it's serviceable for now (:

You can also delete them by clicking the paths, but my gif-maker won't allow the luxury of mouse capture so you have to imagine it for now (or try the branch out!)

[daiyi]

Note to self: we should allow for the entire data structure to be collapsed under one arrow, for readability when there's a tree that fans out really wide on the first layer. cc @saskali

[danielcompton]

I tested this out on a larger app, and when its showing, each change takes around 1.5s to render. I think it could be good to only expand the top level keys on render, rather than all of them? However this is still really useful, so we can merge it once you're at a good point.

[daiyi]

collapsing data trees and subtrees!

[danielcompton]

This has been merged into master via #86. Thanks heaps for your work on this, it's been a huge help.