From 2c5a792d9af6b09f8df8b6eba6d93364ffd908cb Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Mon, 6 Nov 2017 19:05:59 -0200
Subject: [PATCH] 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                                | 32 +++++++++++++--
 .../comments/__snapshots__/jsfmt.spec.js.snap | 37 ++++++++++++++++++
 tests/comments/jsx.js                         | 18 +++++++++
 .../__snapshots__/jsfmt.spec.js.snap          | 39 +++++++++++++++++++
 tests/comments_jsx_same_line/jsx_same_line.js | 20 ++++++++++
 5 files changed, 142 insertions(+), 4 deletions(-)

diff --git a/src/printer.js b/src/printer.js
index 49a8f4cbc..f7b063211 100644
--- a/src/printer.js
+++ b/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(
diff --git a/tests/comments/__snapshots__/jsfmt.spec.js.snap b/tests/comments/__snapshots__/jsfmt.spec.js.snap
index 13707fb3e..ba1df1f9c 100644
--- a/tests/comments/__snapshots__/jsfmt.spec.js.snap
+++ b/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 />
diff --git a/tests/comments/jsx.js b/tests/comments/jsx.js
index bff243611..d184e1f10 100644
--- a/tests/comments/jsx.js
+++ b/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>
   {}
diff --git a/tests/comments_jsx_same_line/__snapshots__/jsfmt.spec.js.snap b/tests/comments_jsx_same_line/__snapshots__/jsfmt.spec.js.snap
index a6bd40911..d3bcbb48c 100644
--- a/tests/comments_jsx_same_line/__snapshots__/jsfmt.spec.js.snap
+++ b/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>;
+
 `;
diff --git a/tests/comments_jsx_same_line/jsx_same_line.js b/tests/comments_jsx_same_line/jsx_same_line.js
index ed1fb27e1..40aa8bcd4 100644
--- a/tests/comments_jsx_same_line/jsx_same_line.js
+++ b/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>;