diff --git a/changelog_unreleased/javascript/14082.md b/changelog_unreleased/javascript/14082.md new file mode 100644 index 000000000000..e56693154c5a --- /dev/null +++ b/changelog_unreleased/javascript/14082.md @@ -0,0 +1,17 @@ +#### Fix formatting for comments inside JSX attribute (#14082 with by @fisker) + + +```jsx +// Input +function MyFunctionComponent() { + +} + +// Prettier stable +Error: Comment "old" was not printed. Please report this error! + +// Prettier main +function MyFunctionComponent() { + ; +} +``` diff --git a/src/language-js/print/jsx.js b/src/language-js/print/jsx.js index fe18414a95cf..db4a6849705b 100644 --- a/src/language-js/print/jsx.js +++ b/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)}.`); diff --git a/tests/config/format-test.js b/tests/config/format-test.js index 3511e3166037..87fdcdf4a1ad 100644 --- a/tests/config/format-test.js +++ b/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 diff --git a/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap index 498158e46ded..6a7ba0281317 100644 --- a/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap +++ b/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====================================== +
; + +
; + +
; + +
; + +
; + +
; + +=====================================output===================================== +
; + +
; + +
; + +
; + +
; + +
; // comment + +================================================================================ +`; + exports[`in-end-tag.js - {"bracketSameLine":true} [typescript] format 1`] = ` "Identifier expected. (2:6) 1 | /* =========== before slash =========== */ diff --git a/tests/format/jsx/comments/in-attributes.js b/tests/format/jsx/comments/in-attributes.js new file mode 100644 index 000000000000..4b3565c387e8 --- /dev/null +++ b/tests/format/jsx/comments/in-attributes.js @@ -0,0 +1,30 @@ +
; + +
; + +
; + +
; + +
; + +
;