Improve error range for ts2657 (jsx expr must have parent element), add code fix for it (#37917)

* fix: range of ts2657 (jsx expr must have parent) and remove 2695 (LHS expr of comma has no side effects)

* feat: add code fix for 2657

* fix: resolve review

* chore: hoist a var

* chore: add test for skipTrivia

* fix: rebase error

* Update src/compiler/diagnosticMessages.json

Co-authored-by: Andrew Branch <andrewbranch@users.noreply.github.com>

* Update src/services/codefixes/wrapJsxInFragment.ts

Co-authored-by: Andrew Branch <andrewbranch@users.noreply.github.com>

Co-authored-by: Andrew Branch <andrew@wheream.io>
Co-authored-by: Andrew Branch <andrewbranch@users.noreply.github.com>

src/compiler/checker.ts

@@ -28769,7 +28769,14 @@ namespace ts {
                     }
                 case SyntaxKind.CommaToken:
                     if (!compilerOptions.allowUnreachableCode && isSideEffectFree(left) && !isEvalNode(right)) {
-                        error(left, Diagnostics.Left_side_of_comma_operator_is_unused_and_has_no_side_effects);
+                        const sf = getSourceFileOfNode(left);
+                        const sourceText = sf.text;
+                        const start = skipTrivia(sourceText, left.pos);
+                        const isInDiag2657 = sf.parseDiagnostics.some(diag => {
+                            if (diag.code !== Diagnostics.JSX_expressions_must_have_one_parent_element.code) return false;
+                            return textSpanContainsPosition(diag, start);
+                        });
+                        if (!isInDiag2657) error(left, Diagnostics.Left_side_of_comma_operator_is_unused_and_has_no_side_effects);
                     }
                     return rightType;
 

src/compiler/diagnosticMessages.json

@@ -5709,6 +5709,14 @@
         "category": "Message",
         "code": 95119
     },
+    "Wrap in JSX fragment": {
+        "category": "Message",
+        "code": 95120
+    },
+    "Wrap all unparented JSX in JSX fragment": {
+        "category": "Message",
+        "code": 95121
+    },
 
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",

src/compiler/parser.ts

@@ -4503,7 +4503,7 @@ namespace ts {
             return finishNode(node);
         }
 
-        function parseJsxElementOrSelfClosingElementOrFragment(inExpressionContext: boolean): JsxElement | JsxSelfClosingElement | JsxFragment {
+        function parseJsxElementOrSelfClosingElementOrFragment(inExpressionContext: boolean, topInvalidNodePosition?: number): JsxElement | JsxSelfClosingElement | JsxFragment {
             const opening = parseJsxOpeningOrSelfClosingElementOrOpeningFragment(inExpressionContext);
             let result: JsxElement | JsxSelfClosingElement | JsxFragment;
             if (opening.kind === SyntaxKind.JsxOpeningElement) {
@@ -4541,15 +4541,16 @@ namespace ts {
             // Since JSX elements are invalid < operands anyway, this lookahead parse will only occur in error scenarios
             // of one sort or another.
             if (inExpressionContext && token() === SyntaxKind.LessThanToken) {
-                const invalidElement = tryParse(() => parseJsxElementOrSelfClosingElementOrFragment(/*inExpressionContext*/ true));
+                const topBadPos = typeof topInvalidNodePosition === "undefined" ? result.pos : topInvalidNodePosition;
+                const invalidElement = tryParse(() => parseJsxElementOrSelfClosingElementOrFragment(/*inExpressionContext*/ true, topBadPos));
                 if (invalidElement) {
-                    parseErrorAtCurrentToken(Diagnostics.JSX_expressions_must_have_one_parent_element);
                     const badNode = <BinaryExpression>createNode(SyntaxKind.BinaryExpression, result.pos);
                     badNode.end = invalidElement.end;
                     badNode.left = result;
                     badNode.right = invalidElement;
                     badNode.operatorToken = createMissingNode(SyntaxKind.CommaToken, /*reportAtCurrentPosition*/ false);
                     badNode.operatorToken.pos = badNode.operatorToken.end = badNode.right.pos;
+                    parseErrorAt(skipTrivia(sourceText, topBadPos), invalidElement.end, Diagnostics.JSX_expressions_must_have_one_parent_element);
                     return <JsxElement><Node>badNode;
                 }
             }

src/services/codefixes/wrapJsxInFragment.ts

@@ -0,0 +1,71 @@
+/* @internal */
+namespace ts.codefix {
+    const fixID = "wrapJsxInFragment";
+    const errorCodes = [Diagnostics.JSX_expressions_must_have_one_parent_element.code];
+    registerCodeFix({
+        errorCodes,
+        getCodeActions: context => {
+            const { jsx } = context.program.getCompilerOptions();
+            if (jsx !== JsxEmit.React && jsx !== JsxEmit.ReactNative) {
+                return undefined;
+            }
+            const { sourceFile, span } = context;
+            const node = findNodeToFix(sourceFile, span.start);
+            if (!node) return undefined;
+            const changes = textChanges.ChangeTracker.with(context, t => doChange(t, sourceFile, node));
+            return [createCodeFixAction(fixID, changes, Diagnostics.Wrap_in_JSX_fragment, fixID, Diagnostics.Wrap_all_unparented_JSX_in_JSX_fragment)];
+        },
+        fixIds: [fixID],
+        getAllCodeActions: context => codeFixAll(context, errorCodes, (changes, diag) => {
+            const node = findNodeToFix(context.sourceFile, diag.start);
+            if (!node) return undefined;
+            doChange(changes, context.sourceFile, node);
+        }),
+    });
+
+    function findNodeToFix(sourceFile: SourceFile, pos: number): BinaryExpression | undefined {
+        // The error always at 1st token that is "<" in "<a /><a />"
+        const lessThanToken = getTokenAtPosition(sourceFile, pos);
+        const firstJsxElementOrOpenElement = lessThanToken.parent;
+        let binaryExpr = firstJsxElementOrOpenElement.parent;
+        if (!isBinaryExpression(binaryExpr)) {
+            // In case the start element is a JsxSelfClosingElement, it the end.
+            // For JsxOpenElement, find one more parent
+            binaryExpr = binaryExpr.parent;
+            if (!isBinaryExpression(binaryExpr)) return undefined;
+        }
+        if (!nodeIsMissing(binaryExpr.operatorToken)) return undefined;
+        return binaryExpr;
+    }
+
+    function doChange(changeTracker: textChanges.ChangeTracker, sf: SourceFile, node: Node) {
+        const jsx = flattenInvalidBinaryExpr(node);
+        if (jsx) changeTracker.replaceNode(sf, node, createJsxFragment(createJsxOpeningFragment(), jsx, createJsxJsxClosingFragment()));
+    }
+    // The invalid syntax is constructed as
+    // InvalidJsxTree :: One of
+    //     JsxElement CommaToken InvalidJsxTree
+    //     JsxElement CommaToken JsxElement
+    function flattenInvalidBinaryExpr(node: Node): JsxChild[] | undefined {
+        const children: JsxChild[] = [];
+        let current = node;
+        while (true) {
+            if (isBinaryExpression(current) && nodeIsMissing(current.operatorToken) && current.operatorToken.kind === SyntaxKind.CommaToken) {
+                children.push(<JsxChild>current.left);
+                if (isJsxChild(current.right)) {
+                    children.push(current.right);
+                    // Indicates the tree has go to the bottom
+                    return children;
+                }
+                else if (isBinaryExpression(current.right)) {
+                    current = current.right;
+                    continue;
+                }
+                // Unreachable case
+                else return undefined;
+            }
+            // Unreachable case
+            else return undefined;
+        }
+    }
+}

src/services/tsconfig.json

@@ -97,6 +97,7 @@
         "codefixes/useDefaultImport.ts",
         "codefixes/useBigintLiteral.ts",
         "codefixes/fixAddModuleReferTypeMissingTypeof.ts",
+        "codefixes/wrapJsxInFragment.ts",
         "codefixes/convertToMappedObjectType.ts",
         "codefixes/removeUnnecessaryAwait.ts",
         "codefixes/splitTypeOnlyImport.ts",