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-plugin-transform-react-jsx/test/fixtures/react/should-allow-nested-fragments/actual.js

@@ -0,0 +1,12 @@
+<div>
+  <  >
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-nested-fragments/expected.js

@@ -0,0 +1 @@
+React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement(React.Fragment, null, React.createElement("span", null, "Hello"), React.createElement("span", null, "world")), React.createElement(React.Fragment, null, React.createElement("span", null, "Goodbye"), React.createElement("span", null, "world"))));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-no-pragmafrag-if-frag-unused/actual.js

@@ -0,0 +1,3 @@
+/** @jsx dom */
+
+<div>no fragment is used</div>

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-no-pragmafrag-if-frag-unused/expected.js

@@ -0,0 +1,2 @@
+/** @jsx dom */
+dom("div", null, "no fragment is used");

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-pragmafrag-and-frag/actual.js

@@ -0,0 +1,4 @@
+/** @jsx dom */
+/** @jsxFrag DomFrag */
+
+<></>

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-pragmafrag-and-frag/expected.js

@@ -0,0 +1,4 @@
+/** @jsx dom */
+
+/** @jsxFrag DomFrag */
+dom(DomFrag, null);

packages/babel-plugin-transform-react-jsx/test/fixtures/react/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/actual.js

@@ -0,0 +1,3 @@
+/** @jsx dom */
+
+<></>

packages/babel-plugin-transform-react-jsx/test/fixtures/react/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/expected.js

@@ -0,0 +1,2 @@
+/** @jsx dom */
+dom(React.Fragment, null);

packages/babel-plugin-transform-react-jsx/test/fixtures/react/throw-if-pragma-set-but-not-pragmafrag-and-frag-used/options.json

@@ -0,0 +1,3 @@
+{
+  "throws": "transform-react-jsx: pragma has been set but pragmafrag has not been set"
+}