Support JSX fragment (#2046)

Author: eryue0220

src/jsx-nodes.ts

@@ -16,12 +16,23 @@ export class JSXClosingElement {
     }
 }
 
+export class JSXClosingFragment {
+    readonly type: string;
+    constructor() {
+        this.type = JSXSyntax.JSXClosingFragment;
+    }
+}
+
 export class JSXElement {
     readonly type: string;
-    readonly openingElement: JSXOpeningElement;
+    readonly openingElement: JSXOpeningElement | JSXOpeningFragment;
     readonly children: JSXChild[];
-    readonly closingElement: JSXClosingElement | null;
-    constructor(openingElement: JSXOpeningElement, children: JSXChild[], closingElement: JSXClosingElement | null) {
+    readonly closingElement: JSXClosingElement | JSXClosingFragment | null;
+    constructor(
+        openingElement: JSXOpeningElement | JSXOpeningFragment,
+        children: JSXChild[],
+        closingElement: JSXClosingElement | JSXClosingFragment | null
+    ) {
         this.type = JSXSyntax.JSXElement;
         this.openingElement = openingElement;
         this.children = children;
@@ -100,6 +111,15 @@ export class JSXOpeningElement {
     }
 }
 
+export class JSXOpeningFragment {
+    readonly type: string;
+    readonly selfClosing: boolean;
+    constructor(selfClosing: boolean) {
+        this.type = JSXSyntax.JSXOpeningFragment;
+        this.selfClosing = selfClosing;
+    }
+}
+
 export class JSXSpreadAttribute {
     readonly type: string;
     readonly argument: Node.Expression;

src/jsx-parser.ts

@@ -8,8 +8,8 @@ import { XHTMLEntities } from './xhtml-entities';
 
 interface MetaJSXElement {
     node: Marker;
-    opening: JSXNode.JSXOpeningElement;
-    closing: JSXNode.JSXClosingElement | null;
+    opening: JSXNode.JSXOpeningElement | JSXNode.JSXOpeningFragment;
+    closing: JSXNode.JSXClosingElement | JSXNode.JSXClosingFragment | null;
     children: JSXNode.JSXChild[];
 }
 
@@ -463,10 +463,15 @@ export class JSXParser extends Parser {
         return attributes;
     }
 
-    parseJSXOpeningElement(): JSXNode.JSXOpeningElement {
+    parseJSXOpeningElement(): JSXNode.JSXOpeningElement | JSXNode.JSXOpeningFragment {
         const node = this.createJSXNode();
 
         this.expectJSX('<');
+        if (this.matchJSX('>')) {
+            this.expectJSX('>');
+            return this.finalize(node, new JSXNode.JSXOpeningFragment(false));
+        }
+
         const name = this.parseJSXElementName();
         const attributes = this.parseJSXAttributes();
         const selfClosing = this.matchJSX('/');
@@ -478,12 +483,16 @@ export class JSXParser extends Parser {
         return this.finalize(node, new JSXNode.JSXOpeningElement(name, selfClosing, attributes));
     }
 
-    parseJSXBoundaryElement(): JSXNode.JSXOpeningElement | JSXNode.JSXClosingElement {
+    parseJSXBoundaryElement(): JSXNode.JSXOpeningElement | JSXNode.JSXClosingElement | JSXNode.JSXOpeningFragment | JSXNode.JSXClosingFragment {
         const node = this.createJSXNode();
 
         this.expectJSX('<');
         if (this.matchJSX('/')) {
             this.expectJSX('/');
+            if (this.matchJSX('>')) {
+                this.expectJSX('>');
+                return this.finalize(node, new JSXNode.JSXClosingFragment());
+            }
             const elementName = this.parseJSXElementName();
             this.expectJSX('>');
             return this.finalize(node, new JSXNode.JSXClosingElement(elementName));
@@ -567,8 +576,8 @@ export class JSXParser extends Parser {
             }
             if (element.type === JSXSyntax.JSXClosingElement) {
                 el.closing = element as JSXNode.JSXClosingElement;
-                const open = getQualifiedElementName(el.opening.name);
-                const close = getQualifiedElementName(el.closing.name);
+                const open = getQualifiedElementName((el.opening as JSXNode.JSXOpeningElement).name);
+                const close = getQualifiedElementName((el.closing as JSXNode.JSXClosingElement).name);
                 if (open !== close) {
                     this.tolerateError('Expected corresponding JSX closing tag for %0', open);
                 }
@@ -581,6 +590,14 @@ export class JSXParser extends Parser {
                     break;
                 }
             }
+            if (element.type === JSXSyntax.JSXClosingFragment) {
+                el.closing = element as JSXNode.JSXClosingFragment;
+                if (el.opening.type !== JSXSyntax.JSXOpeningFragment) {
+                    this.tolerateError('Expected corresponding JSX closing tag for jsx fragment');
+                } else {
+                    break;
+                }
+            }
         }
 
         return el;
@@ -591,7 +608,7 @@ export class JSXParser extends Parser {
 
         const opening = this.parseJSXOpeningElement();
         let children: JSXNode.JSXChild[] = [];
-        let closing: JSXNode.JSXClosingElement | null = null;
+        let closing: JSXNode.JSXClosingElement | JSXNode.JSXClosingFragment | null = null;
 
         if (!opening.selfClosing) {
             const el = this.parseComplexJSXElement({ node, opening, closing, children });

src/jsx-syntax.ts

@@ -1,13 +1,15 @@
 export const JSXSyntax = {
     JSXAttribute: 'JSXAttribute',
     JSXClosingElement: 'JSXClosingElement',
+    JSXClosingFragment: 'JSXClosingFragment',
     JSXElement: 'JSXElement',
     JSXEmptyExpression: 'JSXEmptyExpression',
     JSXExpressionContainer: 'JSXExpressionContainer',
     JSXIdentifier: 'JSXIdentifier',
     JSXMemberExpression: 'JSXMemberExpression',
     JSXNamespacedName: 'JSXNamespacedName',
     JSXOpeningElement: 'JSXOpeningElement',
+    JSXOpeningFragment: 'JSXOpeningFragment',
     JSXSpreadAttribute: 'JSXSpreadAttribute',
     JSXText: 'JSXText'
 };

test/api-tests.js

@@ -262,6 +262,32 @@ describe('esprima.parse', function () {
         assert.deepEqual(expression.closingElement, null);
     });
 
+    it('should understand JSX fragment', function () {
+        assert.doesNotThrow(function () {
+            esprima.parse('<></>', { jsx: true });
+        });
+    });
+
+    it('should understand JSX fragment syntax', function () {
+        var ast = esprima.parse('<></>', { jsx: true });
+        var statement = ast.body[0];
+        var expression = statement.expression;
+
+        assert.deepEqual(expression.type, 'JSXElement');
+        assert.deepEqual(expression.openingElement.type, 'JSXOpeningFragment');
+        assert.deepEqual(expression.closingElement.type, 'JSXClosingFragment');
+    });
+
+    it('should understand JSX fragment syntax', function () {
+        var ast = esprima.parse('<></>', { jsx: true });
+        var statement = ast.body[0];
+        var expression = statement.expression;
+
+        assert.deepEqual(expression.type, 'JSXElement');
+        assert.deepEqual(expression.openingElement.type, 'JSXOpeningFragment');
+        assert.deepEqual(expression.closingElement.type, 'JSXClosingFragment');
+    });
+
     it('should never produce shallow copied nodes', function () {
         var ast, pattern, expr;
         ast = esprima.parse('let {a, b} = {x, y, z}');

test/fixtures/JSX/fragment-with-child.js

@@ -0,0 +1 @@
+<><div /></>