fix: avoid unwanted whitespace in glimmer components (#6178)
parent
2e6191fe77
commit
90308ebe76
|
@ -458,6 +458,35 @@ export type Foo = [
|
|||
];
|
||||
```
|
||||
|
||||
### Handlebars: Avoid adding unwanted whitespace after components ([#6178] by [@GavinJoyce])
|
||||
|
||||
Previously, Prettier added a space before `/>` and a line break after, even when at the start of a line. Now, that extra space and line break is no longer present.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```hbs
|
||||
// Input
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
// Output (Prettier stable)
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
// Output (Prettier master)
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
[#5979]: https://github.com/prettier/prettier/pull/5979
|
||||
[#6038]: https://github.com/prettier/prettier/pull/6038
|
||||
[#6086]: https://github.com/prettier/prettier/pull/6086
|
||||
|
@ -481,6 +510,7 @@ export type Foo = [
|
|||
[#6152]: https://github.com/prettier/prettier/pull/6152
|
||||
[#6159]: https://github.com/prettier/prettier/pull/6159
|
||||
[#6172]: https://github.com/prettier/prettier/pull/6172
|
||||
[#6178]: https://github.com/prettier/prettier/pull/6178
|
||||
[@belochub]: https://github.com/belochub
|
||||
[@brainkim]: https://github.com/brainkim
|
||||
[@duailibe]: https://github.com/duailibe
|
||||
|
@ -491,3 +521,4 @@ export type Foo = [
|
|||
[@sosukesuzuki]: https://github.com/sosukesuzuki
|
||||
[@thorn0]: https://github.com/thorn0
|
||||
[@bakkot]: https://github.com/bakkot
|
||||
[@GavinJoyce]: https://github.com/GavinJoyce
|
||||
|
|
|
@ -54,7 +54,8 @@ function print(path, options, print) {
|
|||
const hasChildren = n.children.length > 0;
|
||||
const isVoid =
|
||||
(isGlimmerComponent && !hasChildren) || voidTags.indexOf(n.tag) !== -1;
|
||||
const closeTag = isVoid ? concat([" />", softline]) : ">";
|
||||
const closeTagForNoBreak = isVoid ? concat([" />", softline]) : ">";
|
||||
const closeTagForBreak = isVoid ? "/>" : ">";
|
||||
const getParams = (path, print) =>
|
||||
indent(
|
||||
concat([
|
||||
|
@ -69,18 +70,6 @@ function print(path, options, print) {
|
|||
])
|
||||
);
|
||||
|
||||
// The problem here is that I want to not break at all if the children
|
||||
// would not break but I need to force an indent, so I use a hardline.
|
||||
/**
|
||||
* What happens now:
|
||||
* <div>
|
||||
* Hello
|
||||
* </div>
|
||||
* ==>
|
||||
* <div>Hello</div>
|
||||
* This is due to me using hasChildren to decide to put the hardline in.
|
||||
* I would rather use a {DOES THE WHOLE THING NEED TO BREAK}
|
||||
*/
|
||||
return concat([
|
||||
group(
|
||||
concat([
|
||||
|
@ -89,7 +78,7 @@ function print(path, options, print) {
|
|||
getParams(path, print),
|
||||
n.blockParams.length ? ` as |${n.blockParams.join(" ")}|` : "",
|
||||
ifBreak(softline, ""),
|
||||
closeTag
|
||||
ifBreak(closeTagForBreak, closeTagForNoBreak)
|
||||
])
|
||||
),
|
||||
group(
|
||||
|
|
|
@ -292,6 +292,12 @@ printWidth: 80
|
|||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||
{{@greeting}}, {{@name}}!
|
||||
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Form as |f|>
|
||||
<f.input @title="hello" />
|
||||
<f.input>hello</f.input>
|
||||
|
@ -315,6 +321,11 @@ printWidth: 80
|
|||
,
|
||||
{{@name}}
|
||||
!
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
<Form as |f|>
|
||||
<f.input @title="hello" />
|
||||
<f.input>
|
||||
|
@ -344,6 +355,12 @@ singleQuote: true
|
|||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||
{{@greeting}}, {{@name}}!
|
||||
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Form as |f|>
|
||||
<f.input @title="hello" />
|
||||
<f.input>hello</f.input>
|
||||
|
@ -367,6 +384,11 @@ singleQuote: true
|
|||
,
|
||||
{{@name}}
|
||||
!
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
<Form as |f|>
|
||||
<f.input @title="hello" />
|
||||
<f.input>
|
||||
|
|
|
@ -1,6 +1,12 @@
|
|||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||
{{@greeting}}, {{@name}}!
|
||||
|
||||
<div>
|
||||
<UserGreeting
|
||||
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Form as |f|>
|
||||
<f.input @title="hello" />
|
||||
<f.input>hello</f.input>
|
||||
|
|
Loading…
Reference in New Issue