Add JSX spread children

[calebmer]

This PR comes from a conversation in facebook/jsx#57 where I recommended adding the ability to spread children. For the full rationale see that issue, here’s an abridged version:

---

JSX with React allows us to do this:

const TodoList = ({ todos }) => (
  <div>
    {todos.map(todo => <Todo key={todo.id} todo={todo}/>)}
  </div>
)

Which translates to this:

const TodoList = ({ todos }) => ({
  type: 'div',
  children: [
    todos.map(todo => …)
  ],
})

That doesn’t make sense and it has disadvantages for simpler JSX consumers as well as type systems. Instead JSX should allow us to do this:

const TodoList = ({ todos }) => (
  <div>
    {...todos.map(todo => <Todo key={todo.id} todo={todo}/>)}
  </div>
)

Which would translate to this:

const TodoList = ({ todos }) => ({
  type: 'div',
  children: [
    ...todos.map(todo => …)
  ],
})

This PR aims to extend JSX by allowing the spreading of children like so:

<div>{...children}</div>

---

As another note, it seems like React itself will consider this an anti-pattern. However as JSX is an open standard used by more than just React we should consider the entire ecosystem when considering the merits of this extension. Let’s keep discussion of whether or not the extension should be added to JSX in facebook/jsx#57 and let’s talk about technical implementations here.

In facebook/jsx#57 the language extension got a +1 from @syranide (facebook/jsx#57 (comment)) and @sebmarkbage (facebook/jsx#57 (comment)).

[calebmer]

I’m not sure why jsx/basic/10 is failing. It looks like the comment blocks array at leadingComments/closingElement/expression/0/body/program has two identical copies the following comment block instead of the one tested for:

{
  "type": "CommentBlock",
  "value": " this is a comment ",
  "start": 4,
  "end": 27,
  "loc": {
    "start": {
      "line": 1,
      "column": 4
    },
    "end": {
      "line": 1,
      "column": 27
    }
  }
}

I’m pretty sure it has to do with the lookahead, but I couldn’t find any documentation on the matter.

Any ideas?

[sebmck]

We'll have to hold off on this until it's been specced and added to the facebook/jsx#57 repo. TypeScript and Flow also support JSX so there's value in having this specced there so they can come into compliance as we add support.

[sebmarkbage]

I don't think either TypeScript or Flow support non-React variants of JSX atm so it probably doesn't matter but we can add it. We also don't support namespaces which is speced.

[calebmer]

@kittens: The language extension this PR implements was just added to the JSX specification (facebook/jsx#59). What’s remaining to get this PR merged, and can you comment on the failing test?

See my comment above for more details on from the reasons I found that might make it fail.

[calebmer]

Just curious @kittens, what’s the status on this?

[danez]

JSXSpreadChild would need to be added to babel-types as well and also to babel-generator

[calebmer]

@danez 👍 babel/babel#3575

[sebmck]

Thanks! We can follow up in the Babel PR.