Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clayrisser/react-ast
render abstract syntax trees with react
https://github.com/clayrisser/react-ast
abstract abstract-syntax-tree ast babel react react-renderer renderer syntax tree
Last synced: 5 days ago
JSON representation
render abstract syntax trees with react
- Host: GitHub
- URL: https://github.com/clayrisser/react-ast
- Owner: clayrisser
- License: apache-2.0
- Created: 2019-08-29T02:55:19.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-01-12T10:33:48.000Z (about 1 year ago)
- Last Synced: 2024-11-09T04:04:04.671Z (3 months ago)
- Topics: abstract, abstract-syntax-tree, ast, babel, react, react-renderer, renderer, syntax, tree
- Language: TypeScript
- Homepage: https://clayrisser.com
- Size: 35.6 MB
- Stars: 318
- Watchers: 5
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-ast
README
# react-ast
[](https://www.npmjs.com/package/react-ast)
[](https://github.com/clayrisser/react-ast)
> 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 renderer
that makes interacting with abstract syntax trees and rendering code a breeze.
React AST is the ultimate meta programming tool that uses react to render abstract
syntax trees. It can be used to build powerful unopinionated code generators and babel
plugins that are easy to read and can scale without creating a rats nest of unreadable
code.
You can read a post I wrote about this project at the link below.
[Render Abstract Syntax Trees with React](https://dev.to/codejamninja/render-abstract-syntax-trees-with-react-349j)
## Built by BitSpur
BitSpur offers premium Node and React development and support services. Get in touch at [bitspur.com](https://bitspur.com).
## Features
- works with babel ast
- supports typescript
## Installation
```sh
npm install --save react-ast
```
## Dependencies
- [NodeJS](https://nodejs.org)
## Usage
### Render Code
```ts
import React, { FC } from "react";
import {
Export,
Expression,
Function,
Identifier,
Import,
Interface,
JSX,
ReactNode,
Return,
TypeAnnotation,
TypeReference,
Var,
VarKind,
} from "react-ast";
const code = await render(
<>
}
>
props
,
]}
>
{{}}
Hello
>
);
console.log(code);
```
The rendered code
```ts
import React, { FC } from "react";
export interface HelloProps {}
const Hello: FC = (props: HelloProps) => {
return <>>;
};
Hello.defaultProps = {};
export default Hello;
```
### Render AST
Sometimes you might want to render the ast instead of
rendering the code.
```ts
import React from "react";
import { ClassDeclaration, renderAst } from "react-ast";
const ast = renderAst();
console.log(ast);
```
The rendered AST
```js
{ type: 'File',
program:
{ type: 'Program',
body: [ [Object] ],
directives: [],
sourceType: 'script',
interpreter: null },
comments: [],
tokens: [] }
```
## Support
Submit an [issue](https://gitlab.com/bitspur/community/react-ast/issues/new)
## Development
You can validate the AST at [astexplorer.net](https://astexplorer.net/) with the following settings.
| Language | ParserSettings | Transform |
| ------------ | -------------- | --------- |
| `JavaScript` | `babylon7` | `babelv7` |
Enabled the following **babylon7** plugins
- `jsx`
- `typescript`
- `asyncGenerators`
- `classProperties`
- `decorators`
- `doExpressions`
- `dynamicImport`
- `functionBind`
- `functionSent`
- `numericSeparator`
- `objectRestSpread`
- `optionalCatchBinding`
- `optionalChaining`
## Contributing
Review the [guidelines for contributing](https://github.com/clayrisser/react-ast/blob/master/CONTRIBUTING.md)
## License
[Apache-2.0 License](https://github.com/clayrisser/react-ast/blob/master/LICENSE)
[Clay Risser](https://clayrisser.com) © 2019
## Changelog
Review the [changelog](https://github.com/clayrisser/react-ast/blob/master/CHANGELOG.md)
## Credits
- [Clay Risser](https://clayrisser.com) - Author
## Support on Liberapay
A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.
[Add some fuel](https://liberapay.com/clayrisser/donate) if you'd like to keep me going!
[](https://liberapay.com/clayrisser/donate)
[](https://liberapay.com/clayrisser/donate)