Skip to content
render abstract syntax trees with react
TypeScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Finished property support Dec 5, 2019
src
tests Started setting up tests Sep 6, 2019
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmrc
.prettierrc
CHANGELOG.md Added linting Aug 30, 2019
CONTRIBUTING.md
LICENSE Initial commit Aug 29, 2019
README.md
package.json
tsconfig.json

README.md

react-ast

npm GitHub stars

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

Built by Silicon Hills LLC

index

Silicon Hills offers premium Node and React develpoment and support services. Get in touch at nuevesolutions.com.

Features

  • works with babel ast
  • supports typescript

Installation

npm install --save react-ast

Dependencies

Usage

Render Code

import React from 'react';
import {
  ClassDeclaration,
  Code,
  FunctionDeclaration,
  Param,
  ReturnStatement,
  render
} from 'react-ast';

const code = render(
  <>
    <ClassDeclaration name="Hello" superClassName="Array">
      <Code>hello = 'world'</Code>
    </ClassDeclaration>
    <FunctionDeclaration
      name="add"
      params={[<Param key="a">a</Param>, <Param key="b">b</Param>]}
      returnStatement={<ReturnStatement>result</ReturnStatement>}
    >
      <Code>const result=a+b</Code>
    </FunctionDeclaration>
  </>
);

console.log(code);

The rendered code

class Hello extends Array {
  hello = 'world';
}

function add(a, b) {
  const result = a + b;
  return result;
}

Render AST

Sometimes you might want to render the ast instead of rendering the code.

import React from 'react';
import {
  renderAst,
  Code,
  ClassDeclaration,
  FunctionDeclaration
} from 'react-ast';

const ast = renderAst(
  <ClassDeclaration name="Hello" superClassName="Array">
    <Code>const hello = 'world'</Code>
    <FunctionDeclaration name="foo">
      <Code>return 'bar'</Code>
    </FunctionDeclaration>
  </ClassDeclaration>
);

console.log(ast);

The rendered AST

{ type: 'File',
  program:
   { type: 'Program',
     body: [ [Object] ],
     directives: [],
     sourceType: 'script',
     interpreter: null },
  comments: [],
  tokens: [] }

Support

Submit an issue

Development

You can validate the AST at 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

License

MIT License

Jam Risser © 2019

Changelog

Review the changelog

Credits

Support on Liberapay

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!

Liberapay receiving Liberapay patrons

You can’t perform that action at this time.