Stop converting empty JSX elements to self-closing elements (#6127)
Co-Authored-By: Simon Lydell <simon.lydell@gmail.com>master
parent
df258d6d7e
commit
eca23e111f
|
@ -232,6 +232,30 @@ This changes the method of finding the required count of backticks from using 2
|
||||||
`` 2 ```123``` `1` ``
|
`` 2 ```123``` `1` ``
|
||||||
````
|
````
|
||||||
|
|
||||||
|
### JavaScript: Stop converting empty JSX elements to self-closing elemnts ([#6127] by [@duailibe])
|
||||||
|
|
||||||
|
Prettier has always converted empty JSX elements (`<div></div>`) to self-closing elements (`<div />`) 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.
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
```js
|
||||||
|
// Input
|
||||||
|
function Foo() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Output (Prettier stable)
|
||||||
|
function Foo() {
|
||||||
|
return <div />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Output (Prettier master)
|
||||||
|
function Foo() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
[#5979]: https://github.com/prettier/prettier/pull/5979
|
[#5979]: https://github.com/prettier/prettier/pull/5979
|
||||||
[#6086]: https://github.com/prettier/prettier/pull/6086
|
[#6086]: https://github.com/prettier/prettier/pull/6086
|
||||||
[#6088]: https://github.com/prettier/prettier/pull/6088
|
[#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
|
[#6115]: https://github.com/prettier/prettier/pull/6115
|
||||||
[#6116]: https://github.com/prettier/prettier/pull/6116
|
[#6116]: https://github.com/prettier/prettier/pull/6116
|
||||||
[#6119]: https://github.com/prettier/prettier/pull/6119
|
[#6119]: https://github.com/prettier/prettier/pull/6119
|
||||||
|
[#6127]: https://github.com/prettier/prettier/pull/6127
|
||||||
[#6130]: https://github.com/prettier/prettier/pull/6130
|
[#6130]: https://github.com/prettier/prettier/pull/6130
|
||||||
[@belochub]: https://github.com/belochub
|
[@belochub]: https://github.com/belochub
|
||||||
[@brainkim]: https://github.com/brainkim
|
[@brainkim]: https://github.com/brainkim
|
||||||
|
|
|
@ -5505,10 +5505,11 @@ function printJSXChildren(
|
||||||
function printJSXElement(path, options, print) {
|
function printJSXElement(path, options, print) {
|
||||||
const n = path.getValue();
|
const n = path.getValue();
|
||||||
|
|
||||||
// Turn <div></div> into <div />
|
|
||||||
if (n.type === "JSXElement" && isEmptyJSXElement(n)) {
|
if (n.type === "JSXElement" && isEmptyJSXElement(n)) {
|
||||||
n.openingElement.selfClosing = true;
|
return concat([
|
||||||
return path.call(print, "openingElement");
|
path.call(print, "openingElement"),
|
||||||
|
path.call(print, "closingElement")
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
const openingLines =
|
const openingLines =
|
||||||
|
|
|
@ -1310,7 +1310,7 @@ onClick={() => {}}>
|
||||||
* Handles clicks.
|
* Handles clicks.
|
||||||
*/
|
*/
|
||||||
onClick={() => {}}
|
onClick={() => {}}
|
||||||
/>;
|
></div>;
|
||||||
|
|
||||||
<div
|
<div
|
||||||
// comment
|
// comment
|
||||||
|
|
|
@ -28,7 +28,7 @@ f?.<T>(e);
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
//@flow
|
//@flow
|
||||||
f<T>();
|
f<T>();
|
||||||
f < T > <U />;
|
f < T > <U></U>;
|
||||||
new C<T>();
|
new C<T>();
|
||||||
f<T>(e);
|
f<T>(e);
|
||||||
o[e]<T>();
|
o[e]<T>();
|
||||||
|
|
|
@ -133,10 +133,10 @@ newlines_mixed = (
|
||||||
newlines_elems = (
|
newlines_elems = (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
hi
|
hi
|
||||||
<div />
|
<div></div>
|
||||||
<span />
|
<span />
|
||||||
<Big />
|
<Big />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -175,7 +175,7 @@ var x = (
|
||||||
nest_plz = (
|
nest_plz = (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -109,7 +109,7 @@ long_open_long_children = (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div attr="long" attr2="also long" attr3="gonna break" />
|
<div attr="long" attr2="also long" attr3="gonna break"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -138,7 +138,7 @@ long_open_long_children = (
|
||||||
colour="blue"
|
colour="blue"
|
||||||
size="large"
|
size="large"
|
||||||
submitLabel="Sign in with Google"
|
submitLabel="Sign in with Google"
|
||||||
/>
|
></BaseForm>
|
||||||
d
|
d
|
||||||
</BaseForm>
|
</BaseForm>
|
||||||
<BaseForm
|
<BaseForm
|
||||||
|
@ -154,7 +154,7 @@ long_open_long_children = (
|
||||||
colour="blue"
|
colour="blue"
|
||||||
size="large"
|
size="large"
|
||||||
submitLabel="Sign in with Google"
|
submitLabel="Sign in with Google"
|
||||||
/>
|
></BaseForm>
|
||||||
</BaseForm>
|
</BaseForm>
|
||||||
</BaseForm>
|
</BaseForm>
|
||||||
);
|
);
|
||||||
|
@ -175,14 +175,14 @@ make_self_closing = (
|
||||||
colour="blue"
|
colour="blue"
|
||||||
size="large"
|
size="large"
|
||||||
submitLabel="Sign in with Google"
|
submitLabel="Sign in with Google"
|
||||||
/>
|
></BaseForm>
|
||||||
<BaseForm
|
<BaseForm
|
||||||
url="/auth/google"
|
url="/auth/google"
|
||||||
method="GET"
|
method="GET"
|
||||||
colour="blue"
|
colour="blue"
|
||||||
size="large"
|
size="large"
|
||||||
submitLabel="Sign in with Google"
|
submitLabel="Sign in with Google"
|
||||||
/>
|
></BaseForm>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -3469,9 +3469,9 @@ singleQuote: false
|
||||||
|
|
||||||
<div>{a && "b"}</div>;
|
<div>{a && "b"}</div>;
|
||||||
|
|
||||||
<div>{a || <span />}</div>;
|
<div>{a || <span></span>}</div>;
|
||||||
|
|
||||||
<div>{a && <span />}</div>;
|
<div>{a && <span></span>}</div>;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{a && (
|
{a && (
|
||||||
|
@ -3493,7 +3493,7 @@ singleQuote: false
|
||||||
{a && (
|
{a && (
|
||||||
<span>
|
<span>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -3547,9 +3547,9 @@ singleQuote: false
|
||||||
|
|
||||||
<div>{a && "b"}</div>;
|
<div>{a && "b"}</div>;
|
||||||
|
|
||||||
<div>{a || <span />}</div>;
|
<div>{a || <span></span>}</div>;
|
||||||
|
|
||||||
<div>{a && <span />}</div>;
|
<div>{a && <span></span>}</div>;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{a && (
|
{a && (
|
||||||
|
@ -3571,7 +3571,7 @@ singleQuote: false
|
||||||
{a && (
|
{a && (
|
||||||
<span>
|
<span>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -3625,9 +3625,9 @@ singleQuote: true
|
||||||
|
|
||||||
<div>{a && 'b'}</div>;
|
<div>{a && 'b'}</div>;
|
||||||
|
|
||||||
<div>{a || <span />}</div>;
|
<div>{a || <span></span>}</div>;
|
||||||
|
|
||||||
<div>{a && <span />}</div>;
|
<div>{a && <span></span>}</div>;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{a && (
|
{a && (
|
||||||
|
@ -3649,7 +3649,7 @@ singleQuote: true
|
||||||
{a && (
|
{a && (
|
||||||
<span>
|
<span>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -3703,9 +3703,9 @@ singleQuote: true
|
||||||
|
|
||||||
<div>{a && 'b'}</div>;
|
<div>{a && 'b'}</div>;
|
||||||
|
|
||||||
<div>{a || <span />}</div>;
|
<div>{a || <span></span>}</div>;
|
||||||
|
|
||||||
<div>{a && <span />}</div>;
|
<div>{a && <span></span>}</div>;
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{a && (
|
{a && (
|
||||||
|
@ -3727,7 +3727,7 @@ singleQuote: true
|
||||||
{a && (
|
{a && (
|
||||||
<span>
|
<span>
|
||||||
<div>
|
<div>
|
||||||
<div />
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -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======================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`self-closing.js 2`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
jsxSingleQuote: true
|
||||||
|
parsers: ["flow", "babel", "typescript"]
|
||||||
|
printWidth: 80
|
||||||
|
singleQuote: false
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`self-closing.js 3`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
jsxSingleQuote: false
|
||||||
|
parsers: ["flow", "babel", "typescript"]
|
||||||
|
printWidth: 80
|
||||||
|
singleQuote: true
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`self-closing.js 4`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
jsxSingleQuote: true
|
||||||
|
parsers: ["flow", "babel", "typescript"]
|
||||||
|
printWidth: 80
|
||||||
|
singleQuote: true
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`spacing.js 1`] = `
|
exports[`spacing.js 1`] = `
|
||||||
====================================options=====================================
|
====================================options=====================================
|
||||||
jsxSingleQuote: false
|
jsxSingleQuote: false
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
<Foo></Foo>;
|
||||||
|
<Bar />;
|
Loading…
Reference in New Issue