Currently this is perfectly valid JSX code:
<El>text</El> <g> / </g>
0
How is it possible? Adjacent JSX elemets must be wrapped inside another element, or inside a fragment. Well, those are not two JSX elements.
It's a jsx element (<El>text</El>), which is compared by < with the variable g, which is then compared by > with the regex / </g, and which is then compared by > with 0.
If we add some parentheses for readability, it becomes
(((<El>text</El>) < g) > / </g) > 0
Currently JSX parsers don't handle this (valid) code well, because they all assume that the user is trying to use to JSX elements:
I propose to disallow that code since it is highly confusing, similarly to how -1 ** 2 is disallowed by the ECMAScript specification. To do so, we would need to define a new early error which applies to the RelationalExpression production:
It is an early Syntax Error if RelationalExpression matches the JSXElement < ShiftExpression or JSXFragment < ShiftExpression productions
By doing so, the spec would align with the ecosystem and allow parsers to throw errors helpful for the users, like Babel's Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
Currently this is perfectly valid JSX code:
How is it possible? Adjacent JSX elemets must be wrapped inside another element, or inside a fragment. Well, those are not two JSX elements.
It's a jsx element (
<El>text</El>), which is compared by<with the variableg, which is then compared by>with the regex/ </g, and which is then compared by>with0.If we add some parentheses for readability, it becomes
Currently JSX parsers don't handle this (valid) code well, because they all assume that the user is trying to use to JSX elements:
0as a separate statement: https://astexplorer.net/#/gist/66ddd5a43c135ee13b7872e65de033c4/79d737c1cc925d253d937e30a439586a30610c3bMost flow users use Babel to remove their types, but otherwise this would be a breaking change.
I propose to disallow that code since it is highly confusing, similarly to how
-1 ** 2is disallowed by the ECMAScript specification. To do so, we would need to define a new early error which applies to theRelationalExpressionproduction:By doing so, the spec would align with the ecosystem and allow parsers to throw errors helpful for the users, like Babel's
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?