@saber2pr/jsx-ast-parser

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

• Profile
  • see parser output ast.json
  • see transformer output jsx.json
  • see compiler output out.jsx

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.