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/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"],
+});