Skip to content

Commit eca23e1

Browse files
duailibelydell
duailibe
and
lydell
authored
Stop converting empty JSX elements to self-closing elements (prettier#6127)
Co-Authored-By: Simon Lydell <[email protected]>
1 parent df258d6 commit eca23e1

File tree

9 files changed

+125
-25
lines changed

9 files changed

+125
-25
lines changed

‎CHANGELOG.unreleased.md

+25
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,30 @@ This changes the method of finding the required count of backticks from using 2
232232
`` 2 ```123``` `1` ``
233233
````
234234
235+
### JavaScript: Stop converting empty JSX elements to self-closing elemnts ([#6127] by [@duailibe])
236+
237+
Prettier has always converted empty JSX elements (`<div></div>`) to self-closing elements (`<div />`) because those are equivalent.
238+
239+
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.
240+
241+
<!-- prettier-ignore -->
242+
```js
243+
// Input
244+
function Foo() {
245+
return <div></div>;
246+
}
247+
248+
// Output (Prettier stable)
249+
function Foo() {
250+
return <div />;
251+
}
252+
253+
// Output (Prettier master)
254+
function Foo() {
255+
return <div></div>;
256+
}
257+
```
258+
235259
[#5979]: https://github.com/prettier/prettier/pull/5979
236260
[#6086]: https://github.com/prettier/prettier/pull/6086
237261
[#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
240264
[#6115]: https://github.com/prettier/prettier/pull/6115
241265
[#6116]: https://github.com/prettier/prettier/pull/6116
242266
[#6119]: https://github.com/prettier/prettier/pull/6119
267+
[#6127]: https://github.com/prettier/prettier/pull/6127
243268
[#6130]: https://github.com/prettier/prettier/pull/6130
244269
[@belochub]: https://github.com/belochub
245270
[@brainkim]: https://github.com/brainkim

‎src/language-js/printer-estree.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -5505,10 +5505,11 @@ function printJSXChildren(
55055505
function printJSXElement(path, options, print) {
55065506
const n = path.getValue();
55075507

5508-
// Turn <div></div> into <div />
55095508
if (n.type === "JSXElement" && isEmptyJSXElement(n)) {
5510-
n.openingElement.selfClosing = true;
5511-
return path.call(print, "openingElement");
5509+
return concat([
5510+
path.call(print, "openingElement"),
5511+
path.call(print, "closingElement")
5512+
]);
55125513
}
55135514

55145515
const openingLines =

‎tests/comments/__snapshots__/jsfmt.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1310,7 +1310,7 @@ onClick={() => {}}>
13101310
* Handles clicks.
13111311
*/
13121312
onClick={() => {}}
1313-
/>;
1313+
></div>;
13141314
13151315
<div
13161316
// comment

‎tests/flow_typeapp_call/__snapshots__/jsfmt.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ f?.<T>(e);
2828
=====================================output=====================================
2929
//@flow
3030
f<T>();
31-
f < T > <U />;
31+
f < T > <U></U>;
3232
new C<T>();
3333
f<T>(e);
3434
o[e]<T>();

‎tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,10 +133,10 @@ newlines_mixed = (
133133
newlines_elems = (
134134
<div>
135135
<div>
136-
<div />
136+
<div></div>
137137
</div>
138138
hi
139-
<div />
139+
<div></div>
140140
<span />
141141
<Big />
142142
</div>

‎tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ var x = (
175175
nest_plz = (
176176
<div>
177177
<div>
178-
<div />
178+
<div></div>
179179
</div>
180180
</div>
181181
);

‎tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ long_open_long_children = (
109109
<div>
110110
<div>
111111
<div>
112-
<div attr="long" attr2="also long" attr3="gonna break" />
112+
<div attr="long" attr2="also long" attr3="gonna break"></div>
113113
</div>
114114
</div>
115115
</div>
@@ -138,7 +138,7 @@ long_open_long_children = (
138138
colour="blue"
139139
size="large"
140140
submitLabel="Sign in with Google"
141-
/>
141+
></BaseForm>
142142
d
143143
</BaseForm>
144144
<BaseForm
@@ -154,7 +154,7 @@ long_open_long_children = (
154154
colour="blue"
155155
size="large"
156156
submitLabel="Sign in with Google"
157-
/>
157+
></BaseForm>
158158
</BaseForm>
159159
</BaseForm>
160160
);
@@ -175,14 +175,14 @@ make_self_closing = (
175175
colour="blue"
176176
size="large"
177177
submitLabel="Sign in with Google"
178-
/>
178+
></BaseForm>
179179
<BaseForm
180180
url="/auth/google"
181181
method="GET"
182182
colour="blue"
183183
size="large"
184184
submitLabel="Sign in with Google"
185-
/>
185+
></BaseForm>
186186
</div>
187187
);
188188

‎tests/jsx/__snapshots__/jsfmt.spec.js.snap

+84-12
Original file line numberDiff line numberDiff line change
@@ -3469,9 +3469,9 @@ singleQuote: false
34693469

34703470
<div>{a && "b"}</div>;
34713471

3472-
<div>{a || <span />}</div>;
3472+
<div>{a || <span></span>}</div>;
34733473

3474-
<div>{a && <span />}</div>;
3474+
<div>{a && <span></span>}</div>;
34753475

34763476
<div>
34773477
{a && (
@@ -3493,7 +3493,7 @@ singleQuote: false
34933493
{a && (
34943494
<span>
34953495
<div>
3496-
<div />
3496+
<div></div>
34973497
</div>
34983498
</span>
34993499
)}
@@ -3547,9 +3547,9 @@ singleQuote: false
35473547

35483548
<div>{a && "b"}</div>;
35493549

3550-
<div>{a || <span />}</div>;
3550+
<div>{a || <span></span>}</div>;
35513551

3552-
<div>{a && <span />}</div>;
3552+
<div>{a && <span></span>}</div>;
35533553

35543554
<div>
35553555
{a && (
@@ -3571,7 +3571,7 @@ singleQuote: false
35713571
{a && (
35723572
<span>
35733573
<div>
3574-
<div />
3574+
<div></div>
35753575
</div>
35763576
</span>
35773577
)}
@@ -3625,9 +3625,9 @@ singleQuote: true
36253625

36263626
<div>{a && 'b'}</div>;
36273627

3628-
<div>{a || <span />}</div>;
3628+
<div>{a || <span></span>}</div>;
36293629

3630-
<div>{a && <span />}</div>;
3630+
<div>{a && <span></span>}</div>;
36313631

36323632
<div>
36333633
{a && (
@@ -3649,7 +3649,7 @@ singleQuote: true
36493649
{a && (
36503650
<span>
36513651
<div>
3652-
<div />
3652+
<div></div>
36533653
</div>
36543654
</span>
36553655
)}
@@ -3703,9 +3703,9 @@ singleQuote: true
37033703

37043704
<div>{a && 'b'}</div>;
37053705

3706-
<div>{a || <span />}</div>;
3706+
<div>{a || <span></span>}</div>;
37073707

3708-
<div>{a && <span />}</div>;
3708+
<div>{a && <span></span>}</div>;
37093709

37103710
<div>
37113711
{a && (
@@ -3727,7 +3727,7 @@ singleQuote: true
37273727
{a && (
37283728
<span>
37293729
<div>
3730-
<div />
3730+
<div></div>
37313731
</div>
37323732
</span>
37333733
)}
@@ -5040,6 +5040,78 @@ class BreakingClass extends React.component {
50405040
================================================================================
50415041
`;
50425042

5043+
exports[`self-closing.js 1`] = `
5044+
====================================options=====================================
5045+
jsxSingleQuote: false
5046+
parsers: ["flow", "babel", "typescript"]
5047+
printWidth: 80
5048+
singleQuote: false
5049+
| printWidth
5050+
=====================================input======================================
5051+
<Foo></Foo>;
5052+
<Bar />;
5053+
5054+
=====================================output=====================================
5055+
<Foo></Foo>;
5056+
<Bar />;
5057+
5058+
================================================================================
5059+
`;
5060+
5061+
exports[`self-closing.js 2`] = `
5062+
====================================options=====================================
5063+
jsxSingleQuote: true
5064+
parsers: ["flow", "babel", "typescript"]
5065+
printWidth: 80
5066+
singleQuote: false
5067+
| printWidth
5068+
=====================================input======================================
5069+
<Foo></Foo>;
5070+
<Bar />;
5071+
5072+
=====================================output=====================================
5073+
<Foo></Foo>;
5074+
<Bar />;
5075+
5076+
================================================================================
5077+
`;
5078+
5079+
exports[`self-closing.js 3`] = `
5080+
====================================options=====================================
5081+
jsxSingleQuote: false
5082+
parsers: ["flow", "babel", "typescript"]
5083+
printWidth: 80
5084+
singleQuote: true
5085+
| printWidth
5086+
=====================================input======================================
5087+
<Foo></Foo>;
5088+
<Bar />;
5089+
5090+
=====================================output=====================================
5091+
<Foo></Foo>;
5092+
<Bar />;
5093+
5094+
================================================================================
5095+
`;
5096+
5097+
exports[`self-closing.js 4`] = `
5098+
====================================options=====================================
5099+
jsxSingleQuote: true
5100+
parsers: ["flow", "babel", "typescript"]
5101+
printWidth: 80
5102+
singleQuote: true
5103+
| printWidth
5104+
=====================================input======================================
5105+
<Foo></Foo>;
5106+
<Bar />;
5107+
5108+
=====================================output=====================================
5109+
<Foo></Foo>;
5110+
<Bar />;
5111+
5112+
================================================================================
5113+
`;
5114+
50435115
exports[`spacing.js 1`] = `
50445116
====================================options=====================================
50455117
jsxSingleQuote: false

‎tests/jsx/self-closing.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<Foo></Foo>;
2+
<Bar />;

0 commit comments

Comments
 (0)