Repository files navigation

jsx parser by parser combinators.

yarn add @saber2pr/jsx-ast-parser

import{parser,transformer,compiler,traverser,}from'@saber2pr/jsx-ast-parser'constcode=`<div className="hello">world</div>`constast=parser.parse(code)// parse ast from code stringconstjsx=transformer.transform(ast)// transform ast to jsx// compile jsx to source codecompiler.compile(jsx)===code// true// find jsx nodetraverser.findNode(jsx,node=>transformer.isTextElement(node))// [ { tagName: 'text', nodeValue: 'world' } ]

1. Api Docs
2. Jsx Ast Viewer

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

jsx.bnf

• 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

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.