feat: add code fix for 2657

Author: Jack-Works

src/compiler/diagnosticMessages.json

@@ -5641,7 +5641,15 @@
         "category": "Message",
         "code": 95116
     },
-    
+    "Wrap JSX in JSX Fragment": {
+        "category": "Message",
+        "code": 95117
+    },
+    "Wrap all JSX in JSX Fragment": {
+        "category": "Message",
+        "code": 95118
+    },
+
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",
         "code": 18004

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_JSX_in_JSX_Fragment, fixID, Diagnostics.Wrap_all_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

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

tests/cases/fourslash/codeFixWrapJsxInFragment.ts

@@ -0,0 +1,7 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////[|<a /><a />|]
+
+verify.rangeAfterCodeFix(`<><a /><a /></>`, /*includeWhiteSpace*/false, /*errorCode*/ undefined, /*index*/ 0);

tests/cases/fourslash/codeFixWrapJsxInFragment2.ts

@@ -0,0 +1,7 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////[|<a></a><a />|]
+
+verify.rangeAfterCodeFix(`<><a></a><a /></>`, /*includeWhiteSpace*/false, /*errorCode*/ undefined, /*index*/ 0);