Put JSX comments inside of the parenthesis (#1712)

This is very unfortunate that we have to change the generic function that prints code but we want the JSXElement node to handle its comments printing itself in order to write them inside of the parenthesis instead of outside.

Fixes #555

src/printer.js

@@ -1515,7 +1515,11 @@ function genericPrintNoParens(path, options, print, args) {
       );
     }
     case "JSXElement": {
-      const elem = printJSXElement(path, options, print);
+      const elem = comments.printComments(
+        path,
+        () => printJSXElement(path, options, print),
+        options
+      );
       return maybeWrapJSXElementInParens(path, elem, options);
     }
     case "JSXOpeningElement": {
@@ -4220,6 +4224,10 @@ function hasTrailingComment(node) {
 }
 
 function hasLeadingOwnLineComment(text, node) {
+  if (node.type === "JSXElement") {
+    return false;
+  }
+
   const res =
     node.comments &&
     node.comments.some(
@@ -4515,6 +4523,12 @@ function printAstToDoc(ast, options, addAlignmentSize) {
   addAlignmentSize = addAlignmentSize || 0;
 
   function printGenerically(path, args) {
+    const node = path.getValue();
+    // We let JSXElement print its comments itself because it adds () around
+    if (node && node.type === "JSXElement") {
+      return genericPrint(path, options, printGenerically, args);
+    }
+
     return comments.printComments(
       path,
       p => genericPrint(p, options, printGenerically, args),

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

@@ -139,6 +139,23 @@ exports[`expression.js 1`] = `
 
 `;
 
+exports[`flow_fix_me.js 1`] = `
+const aDiv = (
+  /* $FlowFixMe */
+  <div className="foo">
+    Foo bar
+  </div>
+);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const aDiv = (
+  /* $FlowFixMe */
+  <div className="foo">
+    Foo bar
+  </div>
+);
+
+`;
+
 exports[`html_escape.js 1`] = `
 export default () => <a href="https://foo.bar?q1=foo&q2=bar" />;
 

tests/jsx/flow_fix_me.js

@@ -0,0 +1,6 @@
+const aDiv = (
+  /* $FlowFixMe */
+  <div className="foo">
+    Foo bar
+  </div>
+);