Show HN: Render abstract syntax trees using React(github.com)
github.com
Show HN: Render abstract syntax trees using React
https://github.com/codejamninja/react-ast
16 comments
Funnily enough, I did this as a quick example for my generic-JSX blog post a few years ago (http://tolmasky.com/2016/03/24/generalizing-jsx/).
You can see it here, it creates JSX definitions from Babel AST definitions, so you end up with Babel/MDN compatible trees: https://runkit.com/tolmasky/generic-jsx-for-babel-javascript...
You can see it here, it creates JSX definitions from Babel AST definitions, so you end up with Babel/MDN compatible trees: https://runkit.com/tolmasky/generic-jsx-for-babel-javascript...
Great feedback. The points you make are good. Listed below are the reasons I chose to go with react.
1. I'm getting my feet wet with React rendering (I will be building a full react renderer in the future for another project)
2. It may be useful in the future for dynamic code editing (not sure but a possible use case)
3. Though react really shines in the render lifecycle, it does provide a nice pattern for building components. I see this project being used as a way to componentize composable code generators and snippets.
1. I'm getting my feet wet with React rendering (I will be building a full react renderer in the future for another project)
2. It may be useful in the future for dynamic code editing (not sure but a possible use case)
3. Though react really shines in the render lifecycle, it does provide a nice pattern for building components. I see this project being used as a way to componentize composable code generators and snippets.
> I see this project being used as a way to componentize composable code generators and snippets.
You can do this without React though, using only JSX. I've implemented this pattern in a library (not open source yet) that builds in a lot of these composition patterns (pass children as child or prop, etc) so that you can use it in familiar ways while still just being JSX.
You can do this without React though, using only JSX. I've implemented this pattern in a library (not open source yet) that builds in a lot of these composition patterns (pass children as child or prop, etc) so that you can use it in familiar ways while still just being JSX.
The Code component seems like a catch all. If it were to support actual AST, surely
<Code>const a = 3</Code>
Would have looked something like:
<Assign> <Lhs constant><Id>a</Id></Lhs> <Rhs><Literal>3</Literal></Rhs> </Assign>
<Code>const a = 3</Code>
Would have looked something like:
<Assign> <Lhs constant><Id>a</Id></Lhs> <Rhs><Literal>3</Literal></Rhs> </Assign>
The Code component would do a poor job at nesting code in a body. The point of this project is to make it easy to generate code through an AST, hence the <Code /> "catch call".
no demo / screenshot? not buying it
There is an example in the Readme. From what I can tell this isnt "rendering" an AST to the DOM, its using JSX to "render" source code.
Exactly :)
No demo or screenshots of the product, only a link to the developer's own personal page. Not a great showing to be honest.
Can someone explain what's this is about?
> Please (star) this repo if you found it useful (star) (star) (star)
Gotta be very important for something, since it's literally the second line in the readme.
> Please (star) this repo if you found it useful (star) (star) (star)
Gotta be very important for something, since it's literally the second line in the readme.
Recruiters use GitHub profiles as a proxy for engagement and, I would assume, amount-of-stars-in-pet-project to be used as a KPI in this measurement.
I think that's asinine but I don't make the rules.
That's not how I evaluate people when I'm doing the hire.
I think that's asinine but I don't make the rules.
That's not how I evaluate people when I'm doing the hire.
GitHub Trending Repository lists, for one. Some (idiot) third party sites use stars as some weird approximation metric for "quality" or "usefulness", for the other.
I admittedly haven't given this much thought, but...why would I want to do this?
Probably to learn about how ASTs and React rendering work.
I've had thoughts about writing a WebGL backend so I could describe a scene graph with React; this would probably be a good stepping stone to learn how to do that
I've had thoughts about writing a WebGL backend so I could describe a scene graph with React; this would probably be a good stepping stone to learn how to do that
Gotta say, this is falling flat for me.
Some pretty big, wordy claims in your intro paragraphs (basically over the top marketing speak). Then the examples seem to completely miss the point for me. The examples include so much implicit knowledge, it's hard to follow.
What would I ever need to use this for? Looks useful if I were building a testing tool or IDE tool, but I can't see much use outside of that.
Some pretty big, wordy claims in your intro paragraphs (basically over the top marketing speak). Then the examples seem to completely miss the point for me. The examples include so much implicit knowledge, it's hard to follow.
What would I ever need to use this for? Looks useful if I were building a testing tool or IDE tool, but I can't see much use outside of that.
If you just want an interface for building up an AST using composition, you can do this without React. You can even continue to use JSX—it's as simple as having a function definition to create AST primitives and have a JSX pragma that calls into it.
What React is excellent at is taking two trees and finding a set of mutations to transform the nodes from the first tree to the second—with utter disregard to how those trees came to be. That's what the renderer provides—the set of operations that can be performed on nodes.
I don't see how the actual React part can be used here. Even the suggested uses are all single-pass operations where this diffing will never come into play.
That said, to me this project (in its current state and with the goals expressed) would be so much simpler and more efficient written as a JSX pragma, without the React part.
Maybe there's more to the React functionality in this project that I'm missing. I don't want to discourage the author from doing something with React for this project—there's many directions you could take this that could make excellent use of React.