Fix comments inside JSX attributes

changelog_unreleased/javascript/14082.md

@@ -0,0 +1,17 @@
+#### Fix formatting for comments inside JSX attribute (#14082 with by @fisker)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+function MyFunctionComponent() {
+  <button label=/*old*/"new">button</button>
+}
+
+// Prettier stable
+Error: Comment "old" was not printed. Please report this error!
+
+// Prettier main
+function MyFunctionComponent() {
+  <button label=/*old*/ "new">button</button>;
+}
+```

src/language-js/print/jsx.js

@@ -3,6 +3,7 @@
 const {
   printComments,
   printDanglingComments,
+  printCommentsSeparately,
 } = require("../../main/comments.js");
 const {
   builders: {
@@ -490,7 +491,11 @@ function printJsxAttribute(path, options, print) {
         options.jsxSingleQuote ? "'" : '"'
       );
       final = final.replace(regex, escaped);
-      res = [quote, final, quote];
+      const { leading, trailing } = path.call(
+        () => printCommentsSeparately(path, options),
+        "value"
+      );
+      res = [leading, quote, final, quote, trailing];
     } else {
       res = print("value");
     }
@@ -766,7 +771,7 @@ function printJsx(path, options, print) {
       return printJsxEmptyExpression(path, options /*, print*/);
     case "JSXText":
       /* istanbul ignore next */
-      throw new Error("JSXTest should be handled by JSXElement");
+      throw new Error("JSXText should be handled by JSXElement");
     default:
       /* istanbul ignore next */
       throw new Error(`Unknown JSX node type: ${JSON.stringify(node.type)}.`);

tests/config/format-test.js

@@ -42,6 +42,7 @@ const unstableTests = new Map(
     "js/for/continue-and-break-comment-without-blocks.js",
     "typescript/satisfies-operators/comments-unstable.ts",
     ["js/identifier/parentheses/let.js", (options) => options.semi === false],
+    "jsx/comments/in-attributes.js",
   ].map((fixture) => {
     const [file, isUnstable = () => true] = Array.isArray(fixture)
       ? fixture

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

@@ -27,6 +27,62 @@ const render = (items) => (
 ================================================================================
 `;
 
+exports[`in-attributes.js - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["flow", "babel", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div
+  attr=/* comment */"foo"
+></div>;
+
+<div
+  attr=
+  /* comment */
+  "foo"
+></div>;
+
+<div
+  attr= /* comment */
+  "foo"
+></div>;
+
+<div
+  attr=
+  /* comment */ "foo"
+></div>;
+
+<div
+  attr=
+  // comment
+  "foo"
+></div>;
+
+<div
+  attr= // comment
+  "foo"
+></div>;
+
+=====================================output=====================================
+<div attr=/* comment */ "foo"></div>;
+
+<div attr=/* comment */
+"foo"></div>;
+
+<div attr /* comment */="foo"></div>;
+
+<div attr=/* comment */ "foo"></div>;
+
+<div attr=// comment
+"foo"></div>;
+
+<div attr="foo"></div>; // comment
+
+================================================================================
+`;
+
 exports[`in-end-tag.js - {"bracketSameLine":true} [typescript] format 1`] = `
 "Identifier expected. (2:6)
   1 | /* =========== before slash =========== */

tests/format/jsx/comments/in-attributes.js

@@ -0,0 +1,30 @@
+<div
+  attr=/* comment */"foo"
+></div>;
+
+<div
+  attr=
+  /* comment */
+  "foo"
+></div>;
+
+<div
+  attr= /* comment */
+  "foo"
+></div>;
+
+<div
+  attr=
+  /* comment */ "foo"
+></div>;
+
+<div
+  attr=
+  // comment
+  "foo"
+></div>;
+
+<div
+  attr= // comment
+  "foo"
+></div>;