# react-ast

> render abstract syntax trees with react

Latest version **0.6.17** (published 2024-01-12) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-ast
pnpm add react-ast
yarn add react-ast
bun add react-ast
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.17 |
| Published | 2024-01-12 |
| First published | 2019-08-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 14 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Clay Risser |
| Maintainers | codejamninja, dharmendraboddeda |
| Keywords | abstract, ast, babel, generate, jsx, react, react, reconcile, reconciler, render, renderer, syntax, template, tree, ts, typescript |

## Links

- npm: https://www.npmjs.com/package/react-ast
- Repository: https://gitlab.com/bitspur/community/react-ast
- Issues: https://gitlab.com/bitspur/community/react-ast/issues
- npm.io page: https://npm.io/package/react-ast

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^18.2.0
- [core-js](https://npm.io/package/core-js.md) ^3.33.3
- [prettier](https://npm.io/package/prettier.md) ^3.1.0
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.23.5
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.23.5
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.23.5
- [@babel/template](https://npm.io/package/@babel/template.md) ^7.22.15
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.23.5
- [react-reconciler](https://npm.io/package/react-reconciler.md) ^0.29.0
- [@react-hook/merged-ref](https://npm.io/package/@react-hook/merged-ref.md) ^1.3.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.6.17 (latest) — 2024-01-12
- 0.6.16 — 2024-01-12
- 0.6.15 — 2023-12-30
- 0.6.14 — 2023-12-29
- 0.6.13 — 2023-12-29
- 0.6.12 — 2023-12-24
- 0.6.11 — 2023-12-24
- 0.6.10 — 2023-12-24
- 0.6.9 — 2023-12-19
- 0.6.8 — 2023-12-19
- 0.6.7 — 2023-12-15
- 0.6.6 — 2023-12-14
- 0.6.5 — 2023-12-13
- 0.6.4 — 2023-12-13
- 0.6.3 — 2023-12-12
- … 57 more at https://npm.io/package/react-ast/versions

## README

# react-ast

[![npm](https://img.shields.io/npm/v/react-ast.svg?style=flat-square)](https://www.npmjs.com/package/react-ast)
[![GitHub stars](https://img.shields.io/github/stars/clayrisser/react-ast.svg?style=social&label=Stars)](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).

![](assets/react-ast.png)

## 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(
  <>
    <Import default="React" imports={["FC"]} from="react" />
    <Export>
      <Interface name="HelloProps" />
    </Export>
    <Var kind={VarKind.Const} typeAnnotation="FC<HelloProps>" name="Hello">
      <Function
        arrow
        params={[
          <Identifier
            typeAnnotation={
              <TypeAnnotation>
                <TypeReference name="HelloProps" />
              </TypeAnnotation>
            }
          >
            props
          </Identifier>,
        ]}
      >
        <Return>
          <JSX />
        </Return>
      </Function>
    </Var>
    <Expression properties="Hello.defaultProps">{{}}</Expression>
    <Export default>
      <Identifier>Hello</Identifier>
    </Export>
  </>
);

console.log(code);
```

The rendered code

```ts
import React, { FC } from "react";
export interface HelloProps {}

const Hello: FC<HelloProps> = (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(<Class name="Hello" />);

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!

[![Liberapay receiving](https://img.shields.io/liberapay/receives/clayrisser.svg?style=flat-square)](https://liberapay.com/clayrisser/donate)
[![Liberapay patrons](https://img.shields.io/liberapay/patrons/clayrisser.svg?style=flat-square)](https://liberapay.com/clayrisser/donate)

---
_Source: https://npm.io/package/react-ast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._