diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 77620d34..e9afa7c4 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -232,6 +232,30 @@ This changes the method of finding the required count of backticks from using 2 `` 2 ```123``` `1` `` ```` +### JavaScript: Stop converting empty JSX elements to self-closing elemnts ([#6127] by [@duailibe]) + +Prettier has always converted empty JSX elements (`
`) to self-closing elements (``) because those are equivalent. + +We have received feedback that during development, one would like to type the opening and closing tags and leave them to add the children later, but Prettier would convert it to a self-closing element, forcing the developer to manually convert them back. This has changed in this release. + + +```js +// Input +function Foo() { + return ; +} + +// Output (Prettier stable) +function Foo() { + return ; +} + +// Output (Prettier master) +function Foo() { + return ; +} +``` + [#5979]: https://github.com/prettier/prettier/pull/5979 [#6086]: https://github.com/prettier/prettier/pull/6086 [#6088]: https://github.com/prettier/prettier/pull/6088 @@ -240,6 +264,7 @@ This changes the method of finding the required count of backticks from using 2 [#6115]: https://github.com/prettier/prettier/pull/6115 [#6116]: https://github.com/prettier/prettier/pull/6116 [#6119]: https://github.com/prettier/prettier/pull/6119 +[#6127]: https://github.com/prettier/prettier/pull/6127 [#6130]: https://github.com/prettier/prettier/pull/6130 [@belochub]: https://github.com/belochub [@brainkim]: https://github.com/brainkim diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 2c635d3e..63ab8a8c 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -5505,10 +5505,11 @@ function printJSXChildren( function printJSXElement(path, options, print) { const n = path.getValue(); - // Turn into if (n.type === "JSXElement" && isEmptyJSXElement(n)) { - n.openingElement.selfClosing = true; - return path.call(print, "openingElement"); + return concat([ + path.call(print, "openingElement"), + path.call(print, "closingElement") + ]); } const openingLines = diff --git a/tests/comments/__snapshots__/jsfmt.spec.js.snap b/tests/comments/__snapshots__/jsfmt.spec.js.snap index f40d5959..8e07e83e 100644 --- a/tests/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/comments/__snapshots__/jsfmt.spec.js.snap @@ -1310,7 +1310,7 @@ onClick={() => {}}> * Handles clicks. */ onClick={() => {}} -/>; +>;