From eca23e111f1082b29bf1a1e4376f21b186bdc87d Mon Sep 17 00:00:00 2001 From: Lucas Duailibe Date: Thu, 16 May 2019 15:14:35 -0300 Subject: [PATCH] Stop converting empty JSX elements to self-closing elements (#6127) Co-Authored-By: Simon Lydell --- CHANGELOG.unreleased.md | 25 +++++ src/language-js/printer-estree.js | 7 +- .../comments/__snapshots__/jsfmt.spec.js.snap | 2 +- .../__snapshots__/jsfmt.spec.js.snap | 2 +- .../__snapshots__/jsfmt.spec.js.snap | 4 +- .../__snapshots__/jsfmt.spec.js.snap | 2 +- .../__snapshots__/jsfmt.spec.js.snap | 10 +- tests/jsx/__snapshots__/jsfmt.spec.js.snap | 96 ++++++++++++++++--- tests/jsx/self-closing.js | 2 + 9 files changed, 125 insertions(+), 25 deletions(-) create mode 100644 tests/jsx/self-closing.js 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={() => {}} -/>; +>
;
(e); =====================================output===================================== //@flow f(); -f < T > ; +f < T > ; new C(); f(e); o[e](); diff --git a/tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap b/tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap index 0ceb219f..84552a2c 100644 --- a/tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap +++ b/tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap @@ -133,10 +133,10 @@ newlines_mixed = ( newlines_elems = (
-
+
hi -
+
diff --git a/tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap b/tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap index e957868b..010c74d7 100644 --- a/tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap +++ b/tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap @@ -175,7 +175,7 @@ var x = ( nest_plz = (
-
+
); diff --git a/tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap b/tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap index d0596afc..73abdf66 100644 --- a/tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap +++ b/tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap @@ -109,7 +109,7 @@ long_open_long_children = (
-
+
@@ -138,7 +138,7 @@ long_open_long_children = ( colour="blue" size="large" submitLabel="Sign in with Google" - /> + > d + > ); @@ -175,14 +175,14 @@ make_self_closing = ( colour="blue" size="large" submitLabel="Sign in with Google" - /> + > + >
); diff --git a/tests/jsx/__snapshots__/jsfmt.spec.js.snap b/tests/jsx/__snapshots__/jsfmt.spec.js.snap index bfd21026..c07256ba 100644 --- a/tests/jsx/__snapshots__/jsfmt.spec.js.snap +++ b/tests/jsx/__snapshots__/jsfmt.spec.js.snap @@ -3469,9 +3469,9 @@ singleQuote: false
{a && "b"}
; -
{a || }
; +
{a || }
; -
{a && }
; +
{a && }
;
{a && ( @@ -3493,7 +3493,7 @@ singleQuote: false {a && (
-
+
)} @@ -3547,9 +3547,9 @@ singleQuote: false
{a && "b"}
; -
{a || }
; +
{a || }
; -
{a && }
; +
{a && }
;
{a && ( @@ -3571,7 +3571,7 @@ singleQuote: false {a && (
-
+
)} @@ -3625,9 +3625,9 @@ singleQuote: true
{a && 'b'}
; -
{a || }
; +
{a || }
; -
{a && }
; +
{a && }
;
{a && ( @@ -3649,7 +3649,7 @@ singleQuote: true {a && (
-
+
)} @@ -3703,9 +3703,9 @@ singleQuote: true
{a && 'b'}
; -
{a || }
; +
{a || }
; -
{a && }
; +
{a && }
;
{a && ( @@ -3727,7 +3727,7 @@ singleQuote: true {a && (
-
+
)} @@ -5040,6 +5040,78 @@ class BreakingClass extends React.component { ================================================================================ `; +exports[`self-closing.js 1`] = ` +====================================options===================================== +jsxSingleQuote: false +parsers: ["flow", "babel", "typescript"] +printWidth: 80 +singleQuote: false + | printWidth +=====================================input====================================== +; +; + +=====================================output===================================== +; +; + +================================================================================ +`; + +exports[`self-closing.js 2`] = ` +====================================options===================================== +jsxSingleQuote: true +parsers: ["flow", "babel", "typescript"] +printWidth: 80 +singleQuote: false + | printWidth +=====================================input====================================== +; +; + +=====================================output===================================== +; +; + +================================================================================ +`; + +exports[`self-closing.js 3`] = ` +====================================options===================================== +jsxSingleQuote: false +parsers: ["flow", "babel", "typescript"] +printWidth: 80 +singleQuote: true + | printWidth +=====================================input====================================== +; +; + +=====================================output===================================== +; +; + +================================================================================ +`; + +exports[`self-closing.js 4`] = ` +====================================options===================================== +jsxSingleQuote: true +parsers: ["flow", "babel", "typescript"] +printWidth: 80 +singleQuote: true + | printWidth +=====================================input====================================== +; +; + +=====================================output===================================== +; +; + +================================================================================ +`; + exports[`spacing.js 1`] = ` ====================================options===================================== jsxSingleQuote: false diff --git a/tests/jsx/self-closing.js b/tests/jsx/self-closing.js new file mode 100644 index 00000000..26e68c61 --- /dev/null +++ b/tests/jsx/self-closing.js @@ -0,0 +1,2 @@ +; +;