facebook / jsx

The JSX specification is a XML-like syntax extension to ECMAScript.

Home Page:http://facebook.github.io/jsx/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JSX version 1.1 - non-breaking changes

kunukn opened this issue · comments

Some features has been proposed before, but nothing seems to be happening even though they get upvoted.

Would it be easier if we think in terms of non-breaking changes to update the JSX specification?

E.g. I believe this is a non-breaking addition to the JSX specification.

<Foo bar=2 />
#64

In JSX 1.1 you would then have the options

<Foo bar=2 />
<Foo bar={2} />

JSX 1.0 (current version) you have the option

<Foo bar={2} />


Option 1: <Foo bar=2 /> this could be evaluated to an AssignmentExpression without the { }

The generated AST should be identical for

<Foo bar=2 /> and <Foo bar={2} />


Option 2: We could extend allowed values for JSXAttributeValue
https://facebook.github.io/jsx/

JSXAttributeValue :

  • JSXNumber
  • JSXDoubleStringCharacters "
  • JSXSingleStringCharacters '
  • AssignmentExpression {}
  • JSXElement <
  • JSXFragment <

The definition of JSXNumber could be typeof number

e.g.

2, 0x10, NaN


Could this be generalised?
Allow non-breaking changes where we omit the brackets for JSXAttributeValue?

e.g.

<Button 
  onClick = { onCreate } 
  id = { 123 } 
  zIndex = { 1 } 
  onMouseOver = { onMouseOverCreateButton }>
    Create
</Button>

Could also be

<Button 
  onClick = onCreate  
  id = 123  
  zIndex = 1 
  onMouseOver = onMouseOverCreateButton>
    Create
</Button>

Languages evolves and gets updated.

I see JSX as an essential part of React that makes it popular and loved.
I hope the JSX specification evolves over time. Even if is small minor syntax sugar improvements.

When adding sugar for raw number isn't hard from parser perspective, support for omitting {} around AssignmentExpression adds ambiguity for parser.

Consider this <div onClick={ foo } />
The onClick attribute could be parsed as both ObjectLiteral with foo property shorthand and as AssignmentExpression of foo identifier.

The only way for omitting curly braces is to restrict possible expressions eliminating ambiguity.