Add support for JSX fragments

[duailibe]

This adds support for JSX Fragments (spec: facebook/jsx#93).

• Update babylon
• Update flow (Update flow #3238)
• Update TypeScript (Update TypeScript to 2.6.2 #3331)
• Write more comprehensive tests

I only wrote simple tests for now, will probably update the already existing JSX tests to include fragments as soon as we can test with TypeScript. But regarding the core code this is ready for review.

[ikatyang]

For TypeScript, I think we can use typescript@next directly, which is the daily build from TS master, but I guess we'll have to get updates from typescript-eslint-parser first.

[duailibe]

Looks like there are some tests breaking related to flow upgrade. Maybe that should go in a separate PR?

[suchipi]

For a self-closing JSX tag, we would put the "closing slash" after the comment or attributes. Maybe we should do the same thing for fragments?

Prettier 1.8.2
Playground link

Input:

<div
  /* foo */
/>;

<div
 a={a}
 b={reallyreallyreallyreallyreallyreallyreallyreallyreallyreallylong}
/>;

Output:

<div
/* foo */
/>;

<div
  a={a}
  b={reallyreallyreallyreallyreallyreallyreallyreallyreallyreallylong}
/>;

[duailibe]

I was thinking more of this case:
Prettier 1.8.2
Playground link

Input:

<div>
  Text
</div /* comment */>;

<div>
  Text
</* comment */ /div>;

Output:

<div>Text</div /* comment */>;

<div>Text<//* comment */ div>;

[suchipi]

Since you can't put attributes in a jsx fragment (afaik), I guess it only affects comments, so it's probably fine either way

[existentialism]

Might be worth adding a "complex" nested fragment example (here's the one from Babylon):

<div>
  <>
    <>
      <span>Hello</span>
      <span>world</span>
    </>
    <>
      <span>Goodbye</span>
      <span>world</span>
    </>
  </>
</div>

EDIT: nvm, noticed your comment re: tests in the PR desc

[beheh]

FYI Typescript 2.6.2 has been released with Fragments support (and React 16.2 has landed).

[duailibe]

Thanks @beheh. The typescript upgrade is already in progress, see #3331.

We were on 2.5 and there were some changes so there are a few things we need to work on.

[duailibe]

This is now ready for review!

[azz]

Can we turn on ["babylon", "typescript"], too?

[azz]

Also, failing test:

 FAIL  tests/jsx_fragment/jsfmt.spec.js

  ● /home/travis/build/prettier/prettier/tests/jsx_fragment/fragment.js parse

    expect(received).toBe(expected)
    
    Expected value to be (using ===):

      null

    Received:

      "SyntaxError: Unexpected token < (36:1)

      34 | <//* close fragment */>;
      35 | 
    > 36 | <
         | ^
      37 |   // open fragment
      38 | >
      39 |   <Component />

[duailibe]

Uh, something went wrong with Travis. Gonna check what happened

@azz I thought it ran for all 3 already.. sorry about that, will change it

[azz]

Yeah we should probably change that, it's a bit un-intuitive. #3355

[duailibe]

Okay... looks like </ /* comment */>;

doesn't work correctly with travis... it treats / /* as // so the whole line is a comment. This test passes locally thought, not sure what's up.

I'll remove that test..

Actually it was a bug with the 2nd print.. fixing

[lydell]

Duplicated line?

[duailibe]

Ugh... thanks for catching

[duailibe]

Oh I fixed before merging... lucky :-)