Preserve end-of-line comment for if statement without blocks (#12017)

* Print as dangling comments

* Add tests

* Add changelog

* Use symbol instead of string

changelog_unreleased/javascript/12017.md

@@ -0,0 +1,22 @@
+#### Preserve end-of-line comment for if statements without blocks (#12017 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+if (condition1) expression1; // comment A
+else if (condition2) expression2; // comment B
+else expression3; // comment C
+
+// Prettier stable
+if (condition1) expression1;
+// comment A
+else if (condition2) expression2;
+// comment B
+else expression3; // comment C
+
+// Prettier main
+if (condition1) expression1; // comment A
+else if (condition2) expression2; // comment B
+else expression3; // comment C
+
+```

src/language-js/comments.js

@@ -27,6 +27,7 @@ const {
   isObjectProperty,
   getComments,
   CommentCheckFlags,
+  markerForIfWithoutBlockAndSameLineComment,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 
@@ -206,7 +207,24 @@ function handleIfStatementComments({
     if (precedingNode.type === "BlockStatement") {
       addTrailingComment(precedingNode, comment);
     } else {
-      addDanglingComment(enclosingNode, comment);
+      const isSingleLineComment =
+        comment.type === "SingleLine" ||
+        comment.loc.start.line === comment.loc.end.line;
+      const isSameLineComment =
+        comment.loc.start.line === precedingNode.loc.start.line;
+      if (isSingleLineComment && isSameLineComment) {
+        // example:
+        //   if (cond1) expr1; // comment A
+        //   else if (cond2) expr2; // comment A
+        //   else expr3;
+        addDanglingComment(
+          precedingNode,
+          comment,
+          markerForIfWithoutBlockAndSameLineComment
+        );
+      } else {
+        addDanglingComment(enclosingNode, comment);
+      }
     }
     return true;
   }

src/language-js/printer-estree.js

@@ -28,6 +28,7 @@ const {
   hasIgnoreComment,
   isCallExpression,
   isMemberExpression,
+  markerForIfWithoutBlockAndSameLineComment,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 
@@ -180,7 +181,7 @@ function printPathNoParens(path, options, print, args) {
     // Babel extension.
     case "EmptyStatement":
       return "";
-    case "ExpressionStatement":
+    case "ExpressionStatement": {
       // Detect Flow and TypeScript directives
       if (node.directive) {
         return [printDirective(node.expression, options), semi];
@@ -200,11 +201,20 @@ function printPathNoParens(path, options, print, args) {
         }
       }
 
+      const danglingComment = printDanglingComments(
+        path,
+        options,
+        /** sameIndent */ true,
+        ({ marker }) => marker === markerForIfWithoutBlockAndSameLineComment
+      );
+
       // Do not append semicolon after the only JSX element in a program
       return [
         print("expression"),
         isTheOnlyJsxElementInMarkdown(options, path) ? "" : semi,
+        danglingComment ? [" ", danglingComment] : "",
       ];
+    }
     // Babel non-standard node. Used for Closure-style type casts. See postprocess.js.
     case "ParenthesizedExpression": {
       const shouldHug =

src/language-js/utils.js

@@ -1315,6 +1315,13 @@ function isEnabledHackPipeline(options) {
   return Boolean(options.__isUsingHackPipeline);
 }
 
+/**
+ * This is used as a marker for dangling comments.
+ */
+const markerForIfWithoutBlockAndSameLineComment = Symbol(
+  "ifWithoutBlockAndSameLineComment"
+);
+
 module.exports = {
   getFunctionParameters,
   iterateFunctionParametersPath,
@@ -1379,4 +1386,5 @@ module.exports = {
   hasComment,
   getComments,
   CommentCheckFlags,
+  markerForIfWithoutBlockAndSameLineComment,
 };

tests/format/js/if/__snapshots__/jsfmt.spec.js.snap

@@ -87,6 +87,59 @@ function f() {
 ================================================================================
 `;
 
+exports[`expr_and_same_line_comments.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+if (a === 0) doSomething(); // comment A1
+else if (a === 1) doSomethingElse(); // comment B1
+else if (a === 2) doSomethingElse(); // comment C1
+
+if (a === 0) doSomething(); /* comment A2 */
+else if (a === 1) doSomethingElse(); /* comment B2 */
+else if (a === 2) doSomethingElse(); /* comment C2 */
+
+if (a === 0) expr; // comment A3
+else if (a === 1) expr; // comment B3
+else if (a === 2) expr; // comment C3
+
+if (a === 0) expr; /* comment A4 */
+else if (a === 1) expr; /* comment B4 */
+else if (a === 2) expr; /* comment C4 */
+
+if (a === 0) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment A5
+else if (a === 1) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment B5
+else if (a === 2) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment C5
+
+=====================================output=====================================
+if (a === 0) doSomething(); // comment A1
+else if (a === 1) doSomethingElse(); // comment B1
+else if (a === 2) doSomethingElse(); // comment C1
+
+if (a === 0) doSomething(); /* comment A2 */
+else if (a === 1) doSomethingElse(); /* comment B2 */
+else if (a === 2) doSomethingElse(); /* comment C2 */
+
+if (a === 0) expr; // comment A3
+else if (a === 1) expr; // comment B3
+else if (a === 2) expr; // comment C3
+
+if (a === 0) expr; /* comment A4 */
+else if (a === 1) expr; /* comment B4 */
+else if (a === 2) expr; /* comment C4 */
+
+if (a === 0)
+  looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment A5
+else if (a === 1)
+  looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment B5
+else if (a === 2)
+  looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment C5
+
+================================================================================
+`;
+
 exports[`if_comments.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "flow", "typescript"]

tests/format/js/if/expr_and_same_line_comments.js

@@ -0,0 +1,19 @@
+if (a === 0) doSomething(); // comment A1
+else if (a === 1) doSomethingElse(); // comment B1
+else if (a === 2) doSomethingElse(); // comment C1
+
+if (a === 0) doSomething(); /* comment A2 */
+else if (a === 1) doSomethingElse(); /* comment B2 */
+else if (a === 2) doSomethingElse(); /* comment C2 */
+
+if (a === 0) expr; // comment A3
+else if (a === 1) expr; // comment B3
+else if (a === 2) expr; // comment C3
+
+if (a === 0) expr; /* comment A4 */
+else if (a === 1) expr; /* comment B4 */
+else if (a === 2) expr; /* comment C4 */
+
+if (a === 0) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment A5
+else if (a === 1) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment B5
+else if (a === 2) looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong; // comment C5