Implement support for JSX Fragments

package.json

@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "acorn": "^5.1.2",
-    "acorn-jsx": "^3.0.1",
+    "acorn-jsx": "^4.1.1",
     "acorn5-object-spread": "^4.0.0",
     "chalk": "^2.1.0",
     "magic-string": "^0.22.4",

src/program/types/JSXClosingElement.js

@@ -2,7 +2,7 @@ import Node from '../Node.js';
 
 function containsNewLine(node) {
 	return (
-		node.type === 'Literal' && !/\S/.test(node.value) && /\n/.test(node.value)
+		node.type === 'JSXText' && !/\S/.test(node.value) && /\n/.test(node.value)
 	);
 }
 

src/program/types/JSXClosingFragment.js

@@ -0,0 +1,22 @@
+import Node from '../Node.js';
+
+function containsNewLine(node) {
+	return (
+		node.type === 'JSXText' && !/\S/.test(node.value) && /\n/.test(node.value)
+	);
+}
+
+export default class JSXClosingFragment extends Node {
+	transpile(code) {
+		let spaceBeforeParen = true;
+
+		const lastChild = this.parent.children[this.parent.children.length - 1];
+
+		// omit space before closing paren if this is on a separate line
+		if (lastChild && containsNewLine(lastChild)) {
+			spaceBeforeParen = false;
+		}
+
+		code.overwrite(this.start, this.end, spaceBeforeParen ? ' )' : ')');
+	}
+}

src/program/types/JSXElement.js

@@ -18,7 +18,7 @@ export default class JSXElement extends Node {
 		super.transpile(code, transforms);
 
 		const children = this.children.filter(child => {
-			if (child.type !== 'Literal') return true;
+			if (child.type !== 'JSXText') return true;
 
 			// remove whitespace-only literals, unless on a single line
 			return /\S/.test(child.raw) || !/\n/.test(child.raw);
@@ -38,11 +38,11 @@ export default class JSXElement extends Node {
 					// empty block is a no op
 				} else {
 					const tail =
-						code.original[c] === '\n' && child.type !== 'Literal' ? '' : ' ';
+						code.original[c] === '\n' && child.type !== 'JSXText' ? '' : ' ';
 					code.appendLeft(c, `,${tail}`);
 				}
 
-				if (child.type === 'Literal') {
+				if (child.type === 'JSXText') {
 					const str = normalise(child.raw, i === children.length - 1);
 					code.overwrite(child.start, child.end, str);
 				}

src/program/types/JSXFragment.js

@@ -0,0 +1,4 @@
+import JSXElement from './JSXElement.js';
+
+export default class JSXFragment extends JSXElement {
+}

src/program/types/JSXOpeningFragment.js

@@ -0,0 +1,7 @@
+import Node from '../Node.js';
+
+export default class JSXOpeningFragment extends Node {
+	transpile(code, transforms) {
+		code.overwrite(this.start, this.end, `${this.program.jsx}( React.Fragment, null`);
+	}
+}

src/program/types/index.js

@@ -22,9 +22,12 @@ import ImportDefaultSpecifier from './ImportDefaultSpecifier.js';
 import ImportSpecifier from './ImportSpecifier.js';
 import JSXAttribute from './JSXAttribute.js';
 import JSXClosingElement from './JSXClosingElement.js';
+import JSXClosingFragment from './JSXClosingFragment.js';
 import JSXElement from './JSXElement.js';
 import JSXExpressionContainer from './JSXExpressionContainer.js';
+import JSXFragment from './JSXFragment.js';
 import JSXOpeningElement from './JSXOpeningElement.js';
+import JSXOpeningFragment from './JSXOpeningFragment.js';
 import JSXSpreadAttribute from './JSXSpreadAttribute.js';
 import Literal from './Literal.js';
 import LoopStatement from './shared/LoopStatement.js';
@@ -69,9 +72,12 @@ export default {
 	ImportSpecifier,
 	JSXAttribute,
 	JSXClosingElement,
+	JSXClosingFragment,
 	JSXElement,
 	JSXExpressionContainer,
+	JSXFragment,
 	JSXOpeningElement,
+	JSXOpeningFragment,
 	JSXSpreadAttribute,
 	Literal,
 	MemberExpression,

test/samples/jsx.js

@@ -155,6 +155,12 @@ module.exports = [
 		output: `var div = React.createElement( 'div', { contentEditable: true });`
 	},
 
+	{
+		description: 'transpiles JSX fragments',
+		input: `var divs = <><div contentEditable /><div /></>;`,
+		output: `var divs = React.createElement( React.Fragment, null, React.createElement( 'div', { contentEditable: true }), React.createElement( 'div', null ) );`
+	},
+
 	{
 		description: 'transpiles one JSX spread attributes',
 		input: `var element = <div {...props} />;`,