Comments (4)
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 :)
from cljs-devtools.
@den1k Day8 has done quite a bit of work on this in re-frame-10x. You can see this by starting at:
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.
from cljs-devtools.
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.
from cljs-devtools.
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.
from cljs-devtools.
Related Issues (20)
- Is devtools appending a line to js source? HOT 1
- Rendering issue in devtools scope tree HOT 7
- TypeError: target.addEventListener is not a function HOT 1
- Symbolic values (##NaN, ##Inf) rendered as null when formatted HOT 3
- Custom formatters are being removed from Chrome? HOT 22
- Annotating display elements with path information HOT 8
- Feature: String with metadata mode HOT 4
- Should (prn my-map) be doing a pretty print in console? mine doesn't... HOT 1
- Print maps sorted
- Can this be used to transformation EDN to be printed inside document.body?
- "Store as Global Variable" option vanishes
- Compile Warning when building with ClojureScript 1.10.896 HOT 1
- Path generation taking long in extremely large maps
- Render in repl HOT 1
- Path indexes are not correct after max-number-body-items limit
- lein demo throws HOT 3
- Generalize code and documentation to include Firefox HOT 1
- Regression: Firefox no longer prints structures in 1.0.7 HOT 5
- Add steps for shadow-cljs build HOT 1
- Color scheme is hard to read in dark mode HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cljs-devtools.