JSXText nodes are mislabeled as Literal nodes

[azz]

What version of TypeScript are you using?

2.3.2

What version of typescript-eslint-parser are you using?

a294afa

What code were you trying to parse?

<a> </a>

What did you expect to happen?

Program.body[0].expression.children[0] should be a JSXText node.

What happened?

Program.body[0].expression.children[0] is a Literal node.

{ type: 'Literal',
  range: [ 3, 4 ],
  loc: { start: { line: 1, column: 3 }, end: { line: 1, column: 4 } },
  value: ' ',
  raw: ' ' }

prettier/prettier#1558

[soda0289]

I could be wrong. But doesn't the JSX AST Spec say that it must be a literal:
https://github.com/facebook/jsx/blob/master/AST.md

Does babel do something different? I think JsxText is just used as a token type and not a node type

[bakkot]

Yeah, babylon puts a JSXText node, looks like.

I'm guessing the spec is outdated or wrong. Unless people are using something other than babel to compile their JSX?

[soda0289]

Using ASTExplorer I noticed that parsers such as babel-eslint and espree both use Literal as the node type. Both of these parser are used by ESLint and linting rules are expecting this AST tree. If we were to change it then it would be best to change these parsers as well and update any ESLint rules. Babylon v5 used Literal but newer versions use JSXText so its possible there was a change in spec.

I will try to dig into this more. @JamesHenry any idea why newer versions of babel have started using JSXText instead of Literal.

[soda0289]

facebook/jsx#50
jquery/esprima#1467

Seems like there has been discussions about changing the AST psec

[Jessidhia]

That's probably a mislabeling, I'm not sure what a Literal is; the spec as it is could allow for a NumericLiteral but the contents are definitely not numeric; could allow for a TemplateLiteral but that definitely does not work without wrapping in an expression container.

The use of JSXText instead of StringLiteral (the only literal subtype close to approximating the right behavior) is probably because it is not possible to escape text inside JSXText. A StringLiteral also has a quote style, but the text inside JSX does not have (delimiter) quotes.

[bakkot]

@Kovensky ESTree has a Literal type; that's what it is.

[Jessidhia]

So it would allow for literally anything (including a regexp) inside the tags, even though that's not the actual or intended behavior.

[vjeux]

cc @sebmarkbage

[vjeux]

We just changed the JSX spec to use JSXText instead of Literal as this is what all the popular parsers are doing. I think we should follow suite in typescript-eslint-parser. facebook/jsx#50

[soda0289]

@vjeux Nice. This is a better choice and makes us align with other parsers. Will make the change this weekend. Thanks for taking the time to make it happen