Improve error message for JSXExpressions that are comma expressions

Author: andrewbranch

src/compiler/checker.ts

@@ -19850,6 +19850,7 @@ namespace ts {
         }
 
         function checkJsxExpression(node: JsxExpression, checkMode?: CheckMode) {
+            checkGrammarJsxExpression(node);
             if (node.expression) {
                 const type = checkExpression(node.expression, checkMode);
                 if (node.dotDotDotToken && type !== anyType && !isArrayType(type)) {
@@ -31658,6 +31659,12 @@ namespace ts {
             }
         }
 
+        function checkGrammarJsxExpression(node: JsxExpression) {
+            if (node.expression && isCommaSequence(node.expression)) {
+                return grammarErrorOnNode(node.expression, Diagnostics.JSX_expressions_may_not_use_the_comma_operator_Did_you_mean_to_write_an_array);
+            }
+        }
+
         function checkGrammarForInOrForOfStatement(forInOrOfStatement: ForInOrOfStatement): boolean {
             if (checkGrammarStatementInAmbientContext(forInOrOfStatement)) {
                 return true;

src/compiler/diagnosticMessages.json

@@ -4986,5 +4986,9 @@
     "Classes may not have a field named 'constructor'.": {
         "category": "Error",
         "code": 18006
+    },
+    "JSX expressions may not use the comma operator. Did you mean to write an array?": {
+        "category": "Error",
+        "code": 18007
     }
 }

src/compiler/parser.ts

@@ -4430,7 +4430,10 @@ namespace ts {
 
             if (token() !== SyntaxKind.CloseBraceToken) {
                 node.dotDotDotToken = parseOptionalToken(SyntaxKind.DotDotDotToken);
-                node.expression = parseAssignmentExpressionOrHigher();
+                // Only an AssignmentExpression is valid here per the JSX spec,
+                // but we can unambiguously parse a comma sequence and provide
+                // a better error message in grammar checking.
+                node.expression = parseExpression();
             }
             if (inExpressionContext) {
                 parseExpected(SyntaxKind.CloseBraceToken);

src/harness/fourslash.ts

@@ -582,6 +582,20 @@ namespace FourSlash {
             });
         }
 
+        public verifyErrorExistsAtRange(range: Range, code: number) {
+            const span = ts.createTextSpanFromRange(range);
+            const hasMatchingError = ts.some(
+                this.getDiagnostics(range.fileName),
+                ({ code, start, length }) =>
+                    code === code &&
+                    ts.isNumber(start) && ts.isNumber(length) &&
+                    ts.textSpansEqual(span, { start, length }));
+
+            if (!hasMatchingError) {
+                this.raiseError(`No error with code ${code} found at provided range.`);
+            }
+        }
+
         public verifyNumberOfErrorsInCurrentFile(expected: number) {
             const errors = this.getDiagnostics(this.activeFile.fileName);
             const actual = errors.length;
@@ -3968,6 +3982,10 @@ namespace FourSlashInterface {
             this.state.verifyNoErrors();
         }
 
+        public errorExistsAtRange(range: FourSlash.Range, code: number) {
+            this.state.verifyErrorExistsAtRange(range, code);
+        }
+
         public numberOfErrorsInCurrentFile(expected: number) {
             this.state.verifyNumberOfErrorsInCurrentFile(expected);
         }

tests/cases/fourslash/fourslash.ts

@@ -238,6 +238,7 @@ declare namespace FourSlashInterface {
         signatureHelp(...options: VerifySignatureHelpOptions[], ): void;
         // Checks that there are no compile errors.
         noErrors(): void;
+        errorExistsAtRange(range: Range, code: number): void;
         numberOfErrorsInCurrentFile(expected: number): void;
         baselineCurrentFileBreakpointLocations(): void;
         baselineCurrentFileNameOrDottedNameSpans(): void;

tests/cases/fourslash/jsxExpressionFollowedByIdentifier.ts

@@ -4,6 +4,7 @@
 ////declare var React: any;
 ////declare var x: string;
 ////const a = <div>{<div />[|x|]}</div>
+////const b = <div x={<div />[|x|]} />
 
 const range = test.ranges()[0];
 verify.getSyntacticDiagnostics([{

tests/cases/fourslash/jsxExpressionWithCommaExpression.ts

@@ -0,0 +1,11 @@
+/// <reference path="fourslash.ts" />
+
+//@Filename: jsxExpressionWithCommaExpression.tsx
+//@jsx: react
+////declare var React: any;
+////declare var x: string;
+////const a = <div x={[|x, x|]} />
+////const b = <div>{[|x, x|]}</div>
+
+verify.getSyntacticDiagnostics([]);
+test.ranges().forEach(range => verify.errorExistsAtRange(range, 18006));