Merge pull request #1406 from mightymeld/2024/06/fix_double_parentheses

fix: double parentheses when returning JSXElements using Babel parser

Author: eventualbuddha

lib/printer.ts

@@ -661,14 +661,22 @@ function genericPrintNoParens(path: any, options: any, print: any) {
       parts.push("return");
 
       if (n.argument) {
-        const argLines = path.call(print, "argument");
+        const argIsJsxElement =
+          namedTypes.JSXElement?.check(n.argument) ||
+          namedTypes.JSXFragment?.check(n.argument);
+
+        let argLines = path.call(print, "argument");
         if (
           argLines.startsWithComment() ||
-          (argLines.length > 1 &&
-            namedTypes.JSXElement &&
-            namedTypes.JSXElement.check(n.argument))
+          (argLines.length > 1 && argIsJsxElement)
         ) {
-          parts.push(" (\n", argLines.indent(options.tabWidth), "\n)");
+          // Babel: regenerate parenthesized jsxElements so we don't double parentheses
+          if (argIsJsxElement && n.argument.extra?.parenthesized) {
+            n.argument.extra.parenthesized = false;
+            argLines = path.call(print, "argument");
+            n.argument.extra.parenthesized = true;
+          }
+          parts.push(" ", concat(["(\n", argLines]).indentTail(options.tabWidth), "\n)");
         } else {
           parts.push(" ", argLines);
         }

test/jsx.ts

@@ -93,3 +93,35 @@ it("should not remove trailing whitespaces", function () {
       "}",
   );
 });
+
+it("should not double parentheses in Babel", function () {
+  const printer = new Printer({ tabWidth: 2 });
+  const source =
+    "function App() {\n" +
+    '  const name = "world";\n' +
+    "\n" +
+    "  return (\n" +
+    '    <div className="app">\n' +
+    "        hello {name}\n" +
+    "    </div>\n" +
+    "  );\n" +
+    "}";
+
+  const ast = parse(source, { parser: require("../parsers/babel") });
+  ast.program.body[0].body.body[1].argument.openingElement.attributes[0].name.name =
+    "abc";
+
+  const code = printer.printGenerically(ast).code;
+
+  assert.equal(
+    code,
+    "function App() {\n" +
+      '  const name = "world";\n' +
+      "\n" +
+      "  return (\n" +
+      '    <div abc="app">hello {name}\n' +
+      "    </div>\n" +
+      "  );\n" +
+      "}",
+  );
+});