- Notifications
You must be signed in to change notification settings - Fork10
render abstract syntax trees with react
License
clayrisser/react-ast
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
render abstract syntax trees using react
Please ★ this repo if you found it useful ★ ★ ★
Abstract syntax trees are difficult to work with by nature. This is a react rendererthat makes interacting with abstract syntax trees and rendering code a breeze.
React AST is the ultimate meta programming tool that uses react to render abstractsyntax trees. It can be used to build powerful unopinionated code generators and babelplugins that are easy to read and can scale without creating a rats nest of unreadablecode.
You can read a post I wrote about this project at the link below.
Render Abstract Syntax Trees with React
BitSpur offers premium Node and React development and support services. Get in touch atbitspur.com.
- works with babel ast
- supports typescript
npm install --save react-ast
importReact,{FC}from"react";import{Export,Expression,Function,Identifier,Import,Interface,JSX,ReactNode,Return,TypeAnnotation,TypeReference,Var,VarKind,}from"react-ast";constcode=awaitrender(<><Importdefault="React"imports={["FC"]}from="react"/><Export><Interfacename="HelloProps"/></Export><Varkind={VarKind.Const}typeAnnotation="FC<HelloProps>"name="Hello"><Functionarrowparams={[<IdentifiertypeAnnotation={<TypeAnnotation><TypeReferencename="HelloProps"/></TypeAnnotation>}>props</Identifier>,]}><Return><JSX/></Return></Function></Var><Expressionproperties="Hello.defaultProps">{{}}</Expression><Exportdefault><Identifier>Hello</Identifier></Export></>);console.log(code);
The rendered code
importReact,{FC}from"react";exportinterfaceHelloProps{}constHello:FC<HelloProps>=(props:HelloProps)=>{return<></>;};Hello.defaultProps={};exportdefaultHello;
Sometimes you might want to render the ast instead ofrendering the code.
importReactfrom"react";import{ClassDeclaration,renderAst}from"react-ast";constast=renderAst(<Classname="Hello"/>);console.log(ast);
The rendered AST
{type:'File',program:{type:'Program',body:[[Object]],directives:[],sourceType:'script',interpreter:null},comments:[],tokens:[]}
Submit anissue
You can validate the AST atastexplorer.net with the following settings.
| Language | ParserSettings | Transform |
|---|---|---|
JavaScript | babylon7 | babelv7 |
Enabled the followingbabylon7 plugins
jsxtypescriptasyncGeneratorsclassPropertiesdecoratorsdoExpressionsdynamicImportfunctionBindfunctionSentnumericSeparatorobjectRestSpreadoptionalCatchBindingoptionalChaining
Review theguidelines for contributing
Clay Risser © 2019
Review thechangelog
- Clay Risser - Author
A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.
Add some fuel if you'd like to keep me going!
About
render abstract syntax trees with react