question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JSX AST no longer uses Literal nodes inside of JSXElement children

See original GitHub issue

There was an issues that came in to typescript-eslint-parser which suggested we were using the wrong node type for JSX text. (https://github.com/eslint/typescript-eslint-parser/issues/266) This lead to some discussion and eventually Facebook updated the JSX AST spec to use the JSXText node type instead of the Literal node type inside of JSXElement children.

This is a breaking change that will cause eslint rules in eslint-plugin-react and eslint-plugin-jsx-a11y to not work if/when the change is made to espree. It does allow the produced AST to be more consistent with babel and flow-parser.

Is this something that we should change in ESLint v4? I think it might effect the JSX indent modification we have planned for this release. I have submitted a PR to acorn-jsx just in case we choose to make the change in espree.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
soda0289commented, May 14, 2017

It might be possible to support both node types fairly easily. I will look into it and create issues in those plugin’s repositories.

1reaction
soda0289commented, May 14, 2017

It is very short notice and does not provide any enhancement other than conforming to spec. Waiting for v5 makes sense. We can make the change in typescript-eslint-parser and hide it behind a flag.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - JSX - TypeScript
JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are ...
Read more >
JSX In Depth - React
Children in JSX​​ Children passed to a custom component can be anything, as long as that component transforms them into something React can...
Read more >
Learn to visualize React components by parsing JSX with Babel
Create an abstract syntax tree (AST) of a React component ... a root node with multiple children nodes which can also have children...
Read more >
How do I convert a string to jsx? - Stack Overflow
You can consider using the React attribute dangerouslySetInnerHTML : class YourComponent{ render() { someHtml ...
Read more >
typescript-cheatsheet - GitHub Pages
A set of TypeScript related notes used for quick reference. ... createRef() or useRef API); React Children; CSS Properties and Classes Prop Types ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found