binaryage/cljs-devtools

Using devtools formatting in the browser window?

den1k opened this issue · 4 comments

den1k commented

I'm working on a clojure project, Zeal, that features an in-browser REPL and I'm wondering: can I could use cljs-devtools to format data-structures in the evaluation result.

In the best (most hands-off) case, I provide devtools with a dom node and a data-structure and let it to what it does so well in the console.

danielcompton commented

@den1k Day8 has done quite a bit of work on this in re-frame-10x. You can see this by starting at:

https://github.com/Day8/re-frame-10x/blob/9a39e87bf5099e30a3cc86cabf301a041ed5cfbd/src/day8/re_frame_10x/view/components.cljs#L149-L155

Fulcro also has something similar in https://github.com/fulcrologic/fulcro-inspect

There are a few issues you'll run into with this:

  • cljs-devtools produces JSONML, not HTML, so you'll need to convert it to HTML (not that difficult)
  • The console environment that JSONML is rendered in already has a bunch of styles applied to it. You'll need to copy them over to your project and make sure that nothing else conflicts with them (we found this much more difficult to get a great result)

Getting something working on it's own was pretty challenging, but @saskali and @daiyi got us over the line on that. Getting a really high fidelity result with all kinds of data being displayed is pretty difficult, and re-frame-10x isn't there yet.

  • 👍2
darwin commented

Just to add to excellent @danielcompton's response. When you get your HTML renderer working (or copy&pasting re-frame-10x code), you can do a bunch of style tweaking via cljs-devtools's defaults.

I wanted cljs-devtools output to be pixel-perfect, so I had to fight some pre-existing css from the Chrome Console which shouldn't be needed in your case. Another possibility would be to render cljs-devtools JsonML output as-is and copy all current Chrome Console styles. You should be able to isolate them from your page by rendering them into ShadowDOM. At least that's what I would try first. I believe it should be just a few extra lines of code and modern browsers handle them well.

danielcompton commented

Two more things:

At the time I looked at CSS unset and revert to manage style override. Browser support wasn’t there at the time, but is probably better now.

I also had a failed attempt at using Shadow DOM to isolate the styles. I seem to remember that I could get it rendering but wasn’t able to get it to handle input events.

den1k commented

thanks @darwin and @danielcompton! Will look into it.

Also, this is coming full circle! I helped @saskali and @daiyi a bit back when they were working on re-frame-10x :)

  • 🎉2
  • ❤️3