Support JSX Syntax

[ariya]

Optionally, Esprima should be able to consume JSX syntax: https://facebook.github.io/jsx/. See also https://github.com/facebook/jsx/blob/master/AST.md.

The grammar extension is summarized below (adopted from the specification linked above).

Lexical Grammar

JSXIdentifier :: JSXIdentifierStart | JSXIdentifier JSXIdentifierPart

JSXIdentifierStart :: IdentifierStart (but not \)

JSXIdentifierPart :: IdentifierPart (but_not \) | -

JSXText :: JSXTextCharacter JSXText_opt

JSXTextCharacter :: SourceCharacter but not one of {, <, > or }

JSXStringLiteral :: ' JSXText ' | " JSXText "

Primary expression

JSX extends the PrimaryExpression in the ECMAScript 6th Edition (ECMA-262) grammar:

PrimaryExpression :: JSXElement

Elements

Note: names of JSXOpeningElement and JSXClosingElement should match.

JSXElement :: JSXSelfClosingElement | JSXOpeningElement JSXChildren_opt JSXClosingElement

JSXSelfClosingElement :: < JSXElementName JSXAttributes_opt / >

JSXOpeningElement :: < JSXElementName JSXAttributes_opt >

JSXClosingElement :: < / JSXElementName >

JSXElementName :: JSXIdentifier | JSXNamedspacedName | JSXMemberExpression

JSXNamespacedName :: JSXIdentifier : JSXIdentifier

JSXMemberExpression :: JSXIdentifier . JSXIdentifier | JSXMemberExpression . JSXIdentifier

Attributes

JSXAttributes :: JSXSpreadAttribute JSXAttributes_opt | JSXAttribute JSXAttributes_opt

JSXSpreadAttribute :: { ... AssignmentExpression }

JSXAttribute :: JSXAttributeName | JSXAttributeName = JSXAttributeValue

JSXAttributeName :: JSXIdentifier | JSXNamespacedName

JSXAttributeValue :: StringLiteral | { AssignmentExpression } | JSXElement

Children

JSXChildren : JSXChild JSXChildren_opt

JSXChild :: JSXText | JSXElement | { AssignmentExpression_opt }

[michaelficarra]

Why? This isn't even standards track.

[ariya]

Given the current modular state of the code base, I believe it is time for Esprima to participate in the React.js world without a significant additional maintenance burden!

[michaelficarra]

If it was user extensible, esprima wouldn't have to participate, and more importantly wouldn't have to take on that maintenance burden.

[ariya]

After considering a few different strategies, I've decided that I can take the risk of implementing it in Esprima, with the future possibilities of subsequent refactoring, a detached plug-in, or other types of improvements.

[ariya]

A notable difference between Flow and the old esprima-fb is the use of JSXText node instead of plain Literal node in the list of child nodes JSXChildren. Consider the example snippet <strong> <em>Hello</em> </strong> and the children of the element:

Flow:

[ { type: 'JSXText', value: ' ', raw: ' ' },
  { type: 'JSXElement',
    openingElement: 
     { type: 'JSXOpeningElement',
       name: [Object],
       selfClosing: false,
       attributes: [] },
    closingElement: { type: 'JSXClosingElement', name: [Object] },
    children: [ [Object] ] },
  { type: 'JSXText', value: ' ', raw: ' ' } ]

old esprima-fb:

[ { type: 'Literal', value: ' ', raw: ' ' },
  { type: 'JSXElement',
    openingElement: 
     { type: 'JSXOpeningElement',
       name: [Object],
       selfClosing: false,
       attributes: [] },
    closingElement: { type: 'JSXClosingElement', name: [Object] },
    children: [ [Object] ] },
  { type: 'Literal', value: ' ', raw: ' ' } ]

Which one shall I follow @sebmarkbage @jeffmo?

[sebmarkbage]

The ESTree compatible extension spec for JSX says Literal:

https://github.com/facebook/jsx/blob/master/AST.md#jsx-element

I believe it is what Babylon/Acorn does.

@jeffmo Should we update Flow to be consistent with this ESTree extension?

[michaelficarra]

@sebmarkbage Overloading Literal even more than it already is sounds like a bad idea. Also, I believe the babel AST split apart the Literal node long ago.

[ariya]

Babel has switched from Literal to JSXText since version 6. Even non-ESTree tools such as TypeScript and Traceur do not stick with Literal and use a similar name, JsxText.

I am also leaning towards JSXText node. After all, I assume Flow should be the reference here.

I can open an ESTree issue if we prefer the discussion to happen over there.

[bartosz-k]

Asking here because couldn't find answer anywhere on the Internet: how to parse today using esprima with JSX support enabled?

[ariya]

@Bartq This is not part of any release yet. To watch for a release, subscribe yourself to a service like https://libraries.io/npm/esprima.