Jasponyx
It's an opinionated JSX pretty printer for the command line.
Usage:
Context:
import React Component from 'react'import ReactDOM from 'react-dom/server'import pp from 'jasponyx' { return ReactChildren } { return <div> this And got spices! <CompTwo ="aren't" ="convenient" ="think about" = /> thispropschildren </div> } { return <div> props: very andANumber </div> } const tree = <div ="quarks probably"> <CompOne = > Naked words should work too <span>Hymns and mantras and stuff</span> </CompOne> <div/> </div>
For some orientation, this is how React renders it.
console
Gross, right?
console
console
console
console
console
console
Note the similarities to the output of ReactDOM.renderToStaticMarkup
console
FAQ that no one has never asked
Q. Why "jasponyx"?
A: curl -L https://github.com/dwyl/english-words/blob/master/words.txt?raw=true | rg j.*s.*x
Q: But what if I want some other kind of styling or opinion?
A: First of all, wow! Thanks for using our library! Second of all, make an issue. Or better yet, make a PR. =) We built this for internal debugging use, and were pretty surprised it didn't already exist in some form or another. There's jsx-to-string and a couple others, but those only go one layer deep. We basically wanted the React Devtools output in the console.
Q: What about lifecycle hooks?
A: Not necessary for our usecase, and we don't even know how you'd render that kind of thing. So this only does the initial load. with the composite
option set to false
, the output should basically be a colorized version of react-dom/server
's .renderToStaticMarkup
's output.