Support JSX Element as JSX Attribute Value

[JamesHenry]

TypeScript Version:

1.8.2

Background:

I have been working on trying to get https://github.com/eslint/typescript-eslint-parser, a TypeScript parser plugin for ESLint, off the ground, and the job this weekend has been to begin adding JSX support.

ESLint uses espree and so the aim of the project is to convert the output of the tsc to an AST which espree expects. We already have a solid suite of JSX tests to develop against (taken from the espree project itself), but I have come up against a tsc error in one of them so far.

My issue is that it seems currently the tsc does not accept this "embedded-tags" JSX syntax:

Code

<LeftRight left=<a /> right=<b>monkeys /> gorillas</b> />;

Expected behavior:
Please note the AST produced by espree (see in particular the tokens array): http://astexplorer.net/#/9WAjizSvbC

Actual behavior:
...compared to the one produced by the tsc (note the issues found in parseDiagnostics):
http://astexplorer.net/#/YehKzLJYMW

[DanielRosenwasser]

That doesn't look like valid JSX to begin with. Can you point out where on this page it's specified otherwise?

[JamesHenry]

As far as I can tell from that spec the supported values for a tag attribute are:

JSXAttributeValue:

• " JSXDoubleStringCharactersopt "
• ' JSXSingleStringCharactersopt '
• { AssignmentExpression }
• JSXElement

Both <a /> and <b>monkeys /> gorillas</b> should be valid JSXElements:

E.g. via babel:

<a />: https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=%3Ca%20%2F%3E

<b>monkeys /> gorillas</b>: https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=%3Cb%3Emonkeys%20%2F%3E%20gorillas%3C%2Fb%3E

Therefore, based on that spec, those two should also be valid JSXAttributeValues.

Interestingly, babel also does not seem to like the full LeftRight element:
https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=%3CLeftRight%20left%3D%3Ca%20%2F%3E%20right%3D%3Cb%3Emonkeys%20%2F%3E%20gorillas%3C%2Fb%3E%20%2F%3E%3B

But, hey, it may well be a bug in babel :)

[RyanCavanaugh]

Wow, I've literally never seen this.

Should be easy enough to parse with a one-token lookahead. Without real-world use this is going to be lower-priority but we'd take a PR at any time.

[JamesHenry]

I have not contributed to the project before, but I might be able to find some time in the coming weeks. Do you have any documentation other than https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md for getting set up with developing fixes/features?

The main thing I want to know is how the tests are put together and how I would run particular tests, rather than all 80,000+ cases?

[RyanCavanaugh]

jake runtests tests=someFilenameMatch

For adding tests, it's probably easiest to look at past PRs for examples.

One trick to know is jake baseline-accept[soft] which will copy over only baselines for the subset of tests you ran, rather than nuking the entire reference folder.

[JamesHenry]

Great, thanks!

[RyanCavanaugh]

FWIW this was added to the JSX spec between March 4th and March 15th of 2015. So don't rely on the "(c) 2014" footer as a "last-changed" date 😄

Mar 4: https://web.archive.org/web/20150304180404/http://facebook.github.io/jsx
Mar 15: https://web.archive.org/web/20150315055942/http://facebook.github.io/jsx/

[RyanCavanaugh]

Logged facebook/jsx#53