Stop converting empty JSX elements to self-closing elements (#6127)
Co-Authored-By: Simon Lydell <simon.lydell@gmail.com>master
Lucas Duailibe
GitHub
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` ``
|
||||
````
|
||||
|
||||
### 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
|
||||
[#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
|
||||
|
|
|
|||
|
|
@ -5505,10 +5505,11 @@ function printJSXChildren(
|
|||
function printJSXElement(path, options, print) {
|
||||
const n = path.getValue();
|
||||
|
||||
// Turn <div></div> into <div />
|
||||
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 =
|
||||
|
|
|
|||
|
|
@ -1310,7 +1310,7 @@ onClick={() => {}}>
|
|||
* Handles clicks.
|
||||
*/
|
||||
onClick={() => {}}
|
||||
/>;
|
||||
></div>;
|
||||
|
||||
<div
|
||||
// comment
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ f?.<T>(e);
|
|||
=====================================output=====================================
|
||||
//@flow
|
||||
f<T>();
|
||||
f < T > <U />;
|
||||
f < T > <U></U>;
|
||||
new C<T>();
|
||||
f<T>(e);
|
||||
o[e]<T>();
|
||||
|
|
|
|||
|
|
@ -133,10 +133,10 @@ newlines_mixed = (
|
|||
newlines_elems = (
|
||||
<div>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
hi
|
||||
<div />
|
||||
<div></div>
|
||||
<span />
|
||||
<Big />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ var x = (
|
|||
nest_plz = (
|
||||
<div>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ long_open_long_children = (
|
|||
<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>
|
||||
|
|
@ -138,7 +138,7 @@ long_open_long_children = (
|
|||
colour="blue"
|
||||
size="large"
|
||||
submitLabel="Sign in with Google"
|
||||
/>
|
||||
></BaseForm>
|
||||
d
|
||||
</BaseForm>
|
||||
<BaseForm
|
||||
|
|
@ -154,7 +154,7 @@ long_open_long_children = (
|
|||
colour="blue"
|
||||
size="large"
|
||||
submitLabel="Sign in with Google"
|
||||
/>
|
||||
></BaseForm>
|
||||
</BaseForm>
|
||||
</BaseForm>
|
||||
);
|
||||
|
|
@ -175,14 +175,14 @@ make_self_closing = (
|
|||
colour="blue"
|
||||
size="large"
|
||||
submitLabel="Sign in with Google"
|
||||
/>
|
||||
></BaseForm>
|
||||
<BaseForm
|
||||
url="/auth/google"
|
||||
method="GET"
|
||||
colour="blue"
|
||||
size="large"
|
||||
submitLabel="Sign in with Google"
|
||||
/>
|
||||
></BaseForm>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -3469,9 +3469,9 @@ singleQuote: false
|
|||
|
||||
<div>{a && "b"}</div>;
|
||||
|
||||
<div>{a || <span />}</div>;
|
||||
<div>{a || <span></span>}</div>;
|
||||
|
||||
<div>{a && <span />}</div>;
|
||||
<div>{a && <span></span>}</div>;
|
||||
|
||||
<div>
|
||||
{a && (
|
||||
|
|
@ -3493,7 +3493,7 @@ singleQuote: false
|
|||
{a && (
|
||||
<span>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -3547,9 +3547,9 @@ singleQuote: false
|
|||
|
||||
<div>{a && "b"}</div>;
|
||||
|
||||
<div>{a || <span />}</div>;
|
||||
<div>{a || <span></span>}</div>;
|
||||
|
||||
<div>{a && <span />}</div>;
|
||||
<div>{a && <span></span>}</div>;
|
||||
|
||||
<div>
|
||||
{a && (
|
||||
|
|
@ -3571,7 +3571,7 @@ singleQuote: false
|
|||
{a && (
|
||||
<span>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -3625,9 +3625,9 @@ singleQuote: true
|
|||
|
||||
<div>{a && 'b'}</div>;
|
||||
|
||||
<div>{a || <span />}</div>;
|
||||
<div>{a || <span></span>}</div>;
|
||||
|
||||
<div>{a && <span />}</div>;
|
||||
<div>{a && <span></span>}</div>;
|
||||
|
||||
<div>
|
||||
{a && (
|
||||
|
|
@ -3649,7 +3649,7 @@ singleQuote: true
|
|||
{a && (
|
||||
<span>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -3703,9 +3703,9 @@ singleQuote: true
|
|||
|
||||
<div>{a && 'b'}</div>;
|
||||
|
||||
<div>{a || <span />}</div>;
|
||||
<div>{a || <span></span>}</div>;
|
||||
|
||||
<div>{a && <span />}</div>;
|
||||
<div>{a && <span></span>}</div>;
|
||||
|
||||
<div>
|
||||
{a && (
|
||||
|
|
@ -3727,7 +3727,7 @@ singleQuote: true
|
|||
{a && (
|
||||
<span>
|
||||
<div>
|
||||
<div />
|
||||
<div></div>
|
||||
</div>
|
||||
</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`] = `
|
||||
====================================options=====================================
|
||||
jsxSingleQuote: false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
<Foo></Foo>;
|
||||
<Bar />;
|
||||
Loading…
Reference in New Issue