Add JSX Fragment syntax support (#6552)

* Add JSX Fragments to babel-types

* Support JSX fragments in the transform-react-jsx plugin

* Add tests JSX fragments

* Update helper-builder and transform plugin documentations for jsx fragment

* Add generator for jsx fragments

* Add test for jsx fragment generator

* Split jsx transform example into normal and fragment examples

* Remove unnecessary fields from ElementState in babel-helper-builder-react-jsx

* inline [skip ci]

packages/babel-types/README.md

@@ -1059,7 +1059,7 @@ See also `t.isJSXAttribute(node, opts)` and `t.assertJSXAttribute(node, opts)`.
 Aliases: `JSX`, `Immutable`
 
  - `name`: `JSXIdentifier | JSXNamespacedName` (required)
- - `value`: `JSXElement | StringLiteral | JSXExpressionContainer` (default: `null`)
+ - `value`: `JSXElement | JSXFragment | StringLiteral | JSXExpressionContainer` (default: `null`)
 
 ---
 
@@ -1074,6 +1074,18 @@ Aliases: `JSX`, `Immutable`
 
  - `name`: `JSXIdentifier | JSXMemberExpression` (required)
 
+---
+
+### jSXClosingFragment
+```javascript
+t.jSXClosingFragment()
+```
+
+See also `t.isJSXClosingFragment(node, opts)` and `t.assertJSXClosingFragment(node, opts)`.
+
+Aliases: `JSX`, `Immutable`
+
+
 ---
 
 ### jSXElement
@@ -1087,7 +1099,7 @@ Aliases: `JSX`, `Immutable`, `Expression`
 
  - `openingElement`: `JSXOpeningElement` (required)
  - `closingElement`: `JSXClosingElement` (default: `null`)
- - `children`: `Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement>` (required)
+ - `children`: `Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment>` (required)
  - `selfClosing` (required)
 
 ---
@@ -1117,6 +1129,21 @@ Aliases: `JSX`, `Immutable`
 
 ---
 
+### jSXFragment
+```javascript
+t.jSXFragment(openingFragment, closingFragment, children)
+```
+
+See also `t.isJSXFragment(node, opts)` and `t.assertJSXFragment(node, opts)`.
+
+Aliases: `JSX`, `Immutable`, `Expression`
+
+ - `openingFragment`: `JSXOpeningFragment` (required)
+ - `closingFragment`: `JSXClosingFragment` (required)
+ - `children`: `Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment>` (required)
+
+---
+
 ### jSXIdentifier
 ```javascript
 t.jSXIdentifier(name)
@@ -1171,6 +1198,18 @@ Aliases: `JSX`, `Immutable`
  - `attributes`: `Array<JSXAttribute | JSXSpreadAttribute>` (required)
  - `selfClosing`: `boolean` (default: `false`)
 
+---
+
+### jSXOpeningFragment
+```javascript
+t.jSXOpeningFragment()
+```
+
+See also `t.isJSXOpeningFragment(node, opts)` and `t.assertJSXOpeningFragment(node, opts)`.
+
+Aliases: `JSX`, `Immutable`
+
+
 ---
 
 ### jSXSpreadAttribute

packages/babel-types/src/definitions/jsx.js

@@ -16,6 +16,7 @@ defineType("JSXAttribute", {
       optional: true,
       validate: assertNodeType(
         "JSXElement",
+        "JSXFragment",
         "StringLiteral",
         "JSXExpressionContainer",
       ),
@@ -54,6 +55,7 @@ defineType("JSXElement", {
             "JSXExpressionContainer",
             "JSXSpreadChild",
             "JSXElement",
+            "JSXFragment",
           ),
         ),
       ),
@@ -161,3 +163,39 @@ defineType("JSXText", {
     },
   },
 });
+
+defineType("JSXFragment", {
+  builder: ["openingFragment", "closingFragment", "children"],
+  visitor: ["openingFragment", "children", "closingFragment"],
+  aliases: ["JSX", "Immutable", "Expression"],
+  fields: {
+    openingFragment: {
+      validate: assertNodeType("JSXOpeningFragment"),
+    },
+    closingFragment: {
+      validate: assertNodeType("JSXClosingFragment"),
+    },
+    children: {
+      validate: chain(
+        assertValueType("array"),
+        assertEach(
+          assertNodeType(
+            "JSXText",
+            "JSXExpressionContainer",
+            "JSXSpreadChild",
+            "JSXElement",
+            "JSXFragment",
+          ),
+        ),
+      ),
+    },
+  },
+});
+
+defineType("JSXOpeningFragment", {
+  aliases: ["JSX", "Immutable"],
+});
+
+defineType("JSXClosingFragment", {
+  aliases: ["JSX", "Immutable"],
+});