Skip to content

Saber2pr/jsx-ast-parser

Repository files navigation

@saber2pr/jsx-ast-parser

npm codecov

jsx parser by parser combinators.

yarn add @saber2pr/jsx-ast-parser

Usage

import {
  parser,
  transformer,
  compiler,
  traverser,
} from '@saber2pr/jsx-ast-parser'

const code = `<div className="hello">world</div>`

const ast = parser.parse(code) // parse ast from code string
const jsx = transformer.transform(ast) // transform ast to jsx

// compile jsx to source code
compiler.compile(jsx) === code // true

// find jsx node
traverser.findNode(jsx, node => transformer.isTextElement(node)) // [ { tagName: 'text', nodeValue: 'world' } ]

Help

  1. Api Docs
  2. Jsx Ast Viewer

Feature

Overview Grammar BNF

jsx.bnf

Syntax currently supported

  • parser
    • jsx
      • jsx opened
      • jsx self closing
      • jsx props
        • jsx props string-value
        • jsx props number-value, bool-value
        • jsx props object
        • jsx props object-array
        • jsx props string-array, number-array
        • jsx props arrow function
          • jsx props arrow function scope statements
        • jsx props function
          • jsx props function scope statements
    • statement
      • call chain
      • arrow function
      • comment
      • arithmetic
      • function
      • define
      • assign
      • if else
      • for
      • while
      • try catch
      • return
      • deconstruct
      • as
  • transformer
    • transform jsx
  • traverser
    • traverse ast
    • traverse jsx
  • compiler
    • compile ast
    • compile jsx

Why

It started as a project for me to learn the principles of compilation, but now I'm confident I can make it better! I will continue to provide analysis tools for JSX code.