day8 / re-frame-10x

A debugging dashboard for re-frame. X-ray vision as tooling.
MIT License
634 stars 68 forks source link

app-state tab with cljs-devtools formatting #76

Closed daiyi closed 7 years ago

daiyi commented 7 years ago

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!)

re-frame-trace

Closes #52

daiyi commented 7 years ago

@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 commented 7 years ago

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

screenshot from 2017-09-18 20-57-52

daiyi commented 7 years ago

Exciting progress! :D

clj-devtools formatting in the dom

daiyi commented 7 years ago

Toggling expand/contract of data structures \o/

toggle

daiyi commented 7 years ago

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 commented 7 years ago

Inspecting paths into app-state!

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

collapsing data trees and subtrees!

collapsing data trees and subtrees into singular points by default gif

danielcompton commented 7 years ago

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