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-generator/src/generators/jsx.js

@@ -92,3 +92,25 @@ export function JSXClosingElement(node: Object) {
 }
 
 export function JSXEmptyExpression() {}
+
+export function JSXFragment(node: Object) {
+  this.print(node.openingFragment, node);
+
+  this.indent();
+  for (const child of (node.children: Array<Object>)) {
+    this.print(child, node);
+  }
+  this.dedent();
+
+  this.print(node.closingFragment, node);
+}
+
+export function JSXOpeningFragment() {
+  this.token("<");
+  this.token(">");
+}
+
+export function JSXClosingFragment() {
+  this.token("</");
+  this.token(">");
+}

packages/babel-generator/test/fixtures/types/XJSFragment-XJSOpeningFragment-XJSClosingFragment/actual.js

@@ -0,0 +1,6 @@
+<></>;
+
+<
+>
+  text
+</>;

packages/babel-generator/test/fixtures/types/XJSFragment-XJSOpeningFragment-XJSClosingFragment/expected.js

@@ -0,0 +1,4 @@
+<></>;
+<>
+  text
+</>;

packages/babel-generator/test/fixtures/types/XJSFragment-XJSOpeningFragment-XJSClosingFragment/options.json

@@ -0,0 +1 @@
+{ "plugins": ["jsx" ] }