fix(jsx): Break opening elements with single text attribute if there's a comment (#3154)

* fix(jsx): Break opening elements with single text attribute if there's a comment

* Single text attribute with a comment on the JSXElement name

* Consolidate rules of comments in JSX

src/printer.js

@@ -1770,7 +1770,20 @@ function genericPrintNoParens(path, options, print, args) {
       if (
         n.attributes.length === 1 &&
         n.attributes[0].value &&
-        isStringLiteral(n.attributes[0].value)
+        isStringLiteral(n.attributes[0].value) &&
+        // We should break for the following cases:
+        // <div
+        //   // comment
+        //   attr="value"
+        // >
+        // <div
+        //   attr="value"
+        //   // comment
+        // >
+        !(
+          (n.name && n.name.comments && n.name.comments.length) ||
+          (n.attributes[0].comments && n.attributes[0].comments.length)
+        )
       ) {
         return group(
           concat([
@@ -1785,10 +1798,21 @@ function genericPrintNoParens(path, options, print, args) {
 
       const bracketSameLine =
         options.jsxBracketSameLine &&
+        // We should print the bracket in a new line for the following cases:
+        // <div
+        //   // comment
+        // >
+        // <div
+        //   attr // comment
+        // >
         !(
-          n.name &&
-          ((n.name.trailingComments && n.name.trailingComments.length) ||
-            (n.name.comments && n.name.comments.length))
+          (n.name &&
+            !(n.attributes && n.attributes.length) &&
+            n.name.comments &&
+            n.name.comments.length) ||
+          (n.attributes &&
+            n.attributes.length &&
+            hasTrailingComment(util.getLast(n.attributes)))
         );
 
       return group(

tests/comments/__snapshots__/jsfmt.spec.js.snap

@@ -844,6 +844,24 @@ onClick={() => {}}>
   {foo}
 </div>;
 
+<div
+  className="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  className="foo"
+  // comment
+>
+  {foo}
+</div>;
+
+<div // comment
+  id="foo"
+>
+  {children}
+</div>;
 
 <Wrapper>
   {}
@@ -929,6 +947,25 @@ onClick={() => {}}>
   {foo}
 </div>;
 
+<div
+  className="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  className="foo"
+  // comment
+>
+  {foo}
+</div>;
+
+<div // comment
+  id="foo"
+>
+  {children}
+</div>;
+
 <Wrapper>
   {}
   <Component />

tests/comments/jsx.js

@@ -95,6 +95,24 @@ onClick={() => {}}>
   {foo}
 </div>;
 
+<div
+  className="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  className="foo"
+  // comment
+>
+  {foo}
+</div>;
+
+<div // comment
+  id="foo"
+>
+  {children}
+</div>;
 
 <Wrapper>
   {}

tests/comments_jsx_same_line/__snapshots__/jsfmt.spec.js.snap

@@ -6,6 +6,26 @@ exports[`jsx_same_line.js 1`] = `
 >
   {foo}
 </div>;
+
+<div
+  // comment
+  attr="foo"
+>
+  {foo}
+</div>;
+
+<div
+  attr="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  attr="foo"
+  // comment
+>
+  {foo}
+</div>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
 // comment
@@ -13,4 +33,23 @@ exports[`jsx_same_line.js 1`] = `
   {foo}
 </div>;
 
+<div
+  // comment
+  attr="foo">
+  {foo}
+</div>;
+
+<div
+  attr="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  attr="foo"
+  // comment
+>
+  {foo}
+</div>;
+
 `;

tests/comments_jsx_same_line/jsx_same_line.js

@@ -3,3 +3,23 @@
 >
   {foo}
 </div>;
+
+<div
+  // comment
+  attr="foo"
+>
+  {foo}
+</div>;
+
+<div
+  attr="foo" // comment
+>
+  {foo}
+</div>;
+
+<div
+  attr="foo"
+  // comment
+>
+  {foo}
+</div>;