Next Perpendicular Moonlanding

    react-ast
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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, { FC } from 'react';
    import {
      Export,
      Expression,
      Function,
      Identifier,
      Import,
      Interface,
      JSX,
      ReactNode,
      Return,
      TypeAnnotation,
      TypeReference,
      Var,
      VarKind
    } from 'react-ast';
    
    const code = 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

    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.

    import React from 'react';
    import { ClassDeclaration, renderAst } from 'react-ast';
    
    const ast = renderAst(<Class name="Hello" />);
    
    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

    Install

    npm i react-ast

    DownloadsWeekly Downloads

    87

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    837 kB

    Total Files

    402

    Last publish

    Collaborators

    • codejamninja