npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ast

v0.6.17

Published

render abstract syntax trees with react

Downloads

162

Readme

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 BitSpur

BitSpur offers premium Node and React development and support services. Get in touch at bitspur.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 = 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

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

Apache-2.0 License

Clay 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