testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop converting empty JSX elements to self-closing elements (#6127)

Browse Source 
Co-Authored-By: Simon Lydell <simon.lydell@gmail.com>
This commit is contained in:
Lucas DuailibeandSimon Lydell authored and GitHub committed 2019-05-16 15:14:35 -03:00
1 parent df258d6d7e
commit eca23e111f
9 files changed
+125 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CHANGELOG.unreleased.md
+25
View File
@@ -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
src/language-js/printer-estree.js
+4 -3
View File
@@ -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 =
tests/comments/__snapshots__/jsfmt.spec.js.snap
+1 -1
View File
@@ -1310,7 +1310,7 @@ onClick={() => {}}>
* Handles clicks.
*/
onClick={() => {}}
/>;
></div>;
<div
// comment
tests/flow_typeapp_call/__snapshots__/jsfmt.spec.js.snap
+1 -1
View File
@@ -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>();
tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap
+2 -2
View File
@@ -133,10 +133,10 @@ newlines_mixed = (
newlines_elems = (
<div>
<div>
<div />
<div></div>
</div>
hi
<div />
<div></div>
<span />
<Big />
</div>
tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap
+1 -1
View File
@@ -175,7 +175,7 @@ var x = (
nest_plz = (
<div>
<div>
<div />
<div></div>
</div>
</div>
);
tests/jsx-split-attrs/__snapshots__/jsfmt.spec.js.snap
+5 -5
View File
@@ -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>
);
tests/jsx/__snapshots__/jsfmt.spec.js.snap
+84 -12
View File
@@ -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
tests/jsx/self-closing.js
+2
View File
@@ -0,0 +1,2 @@
<Foo></Foo>;
<Bar />;