fix(formatter): correct printing comments for JSXAttributeValue (#14719)

Author: Dunqing

crates/oxc_formatter/src/write/jsx/mod.rs

@@ -17,8 +17,9 @@ use crate::{
     formatter::{
         Comments, Formatter,
         prelude::*,
-        trivia::{DanglingIndentMode, FormatDanglingComments},
+        trivia::{DanglingIndentMode, FormatDanglingComments, FormatTrailingComments},
     },
+    utils::format_node_without_trailing_comments::FormatNodeWithoutTrailingComments,
     write,
 };
 
@@ -202,16 +203,23 @@ impl<'a> FormatWrite<'a> for AstNode<'a, JSXExpressionContainer<'a>> {
                 }
             }
         } else {
+            // JSXAttributeValue
             let should_inline = !has_comment(f) && should_inline_jsx_expression(self, f.comments());
 
+            let format_expression = format_once(|f| {
+                write!(f, FormatNodeWithoutTrailingComments(&self.expression()));
+                let comments = f.context().comments().comments_before(self.span.end);
+                write!(f, FormatTrailingComments::Comments(comments))
+            });
+
             if should_inline {
-                write!(f, ["{", self.expression(), line_suffix_boundary(), "}"])
+                write!(f, ["{", format_expression, line_suffix_boundary(), "}"])
             } else {
                 write!(
                     f,
                     [group(&format_args!(
                         "{",
-                        soft_block_indent(&self.expression()),
+                        soft_block_indent(&format_expression),
                         line_suffix_boundary(),
                         "}"
                     ))]

crates/oxc_formatter/tests/fixtures/js/comments/jsx.jsx

@@ -0,0 +1,8 @@
+<div
+  key={formMessageId} // Use a unique key to help with animations
+  initial={{ opacity: 0, y: -5, height: 0 }} // Start slightly hidden
+  animate={{ opacity: 1, y: 0, height: "auto" }} // Fade in and slide up
+  exit={{ opacity: 0, y: -5, height: 0 }} // Fade out and slide back up
+  transition={{ duration: 0.15, ease: "easeInOut" }} // Smooth transition
+  style={{ /* comment */ overflow: "hidden" /* comment */  }}
+></div>;

crates/oxc_formatter/tests/fixtures/js/comments/jsx.jsx.snap

@@ -0,0 +1,23 @@
+---
+source: crates/oxc_formatter/tests/fixtures/mod.rs
+---
+==================== Input ====================
+<div
+  key={formMessageId} // Use a unique key to help with animations
+  initial={{ opacity: 0, y: -5, height: 0 }} // Start slightly hidden
+  animate={{ opacity: 1, y: 0, height: "auto" }} // Fade in and slide up
+  exit={{ opacity: 0, y: -5, height: 0 }} // Fade out and slide back up
+  transition={{ duration: 0.15, ease: "easeInOut" }} // Smooth transition
+  style={{ /* comment */ overflow: "hidden" /* comment */  }}
+></div>;
+==================== Output ====================
+<div
+  key={formMessageId} // Use a unique key to help with animations
+  initial={{ opacity: 0, y: -5, height: 0 }} // Start slightly hidden
+  animate={{ opacity: 1, y: 0, height: "auto" }} // Fade in and slide up
+  exit={{ opacity: 0, y: -5, height: 0 }} // Fade out and slide back up
+  transition={{ duration: 0.15, ease: "easeInOut" }} // Smooth transition
+  style={{ /* comment */ overflow: "hidden" /* comment */ }}
+></div>;
+
+===================== End =====================