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
|
[#5979]: https://github.com/prettier/prettier/pull/5979
|
||||||
[#6038]: https://github.com/prettier/prettier/pull/6038
|
[#6038]: https://github.com/prettier/prettier/pull/6038
|
||||||
[#6086]: https://github.com/prettier/prettier/pull/6086
|
[#6086]: https://github.com/prettier/prettier/pull/6086
|
||||||
|
@ -481,6 +510,7 @@ export type Foo = [
|
||||||
[#6152]: https://github.com/prettier/prettier/pull/6152
|
[#6152]: https://github.com/prettier/prettier/pull/6152
|
||||||
[#6159]: https://github.com/prettier/prettier/pull/6159
|
[#6159]: https://github.com/prettier/prettier/pull/6159
|
||||||
[#6172]: https://github.com/prettier/prettier/pull/6172
|
[#6172]: https://github.com/prettier/prettier/pull/6172
|
||||||
|
[#6178]: https://github.com/prettier/prettier/pull/6178
|
||||||
[@belochub]: https://github.com/belochub
|
[@belochub]: https://github.com/belochub
|
||||||
[@brainkim]: https://github.com/brainkim
|
[@brainkim]: https://github.com/brainkim
|
||||||
[@duailibe]: https://github.com/duailibe
|
[@duailibe]: https://github.com/duailibe
|
||||||
|
@ -491,3 +521,4 @@ export type Foo = [
|
||||||
[@sosukesuzuki]: https://github.com/sosukesuzuki
|
[@sosukesuzuki]: https://github.com/sosukesuzuki
|
||||||
[@thorn0]: https://github.com/thorn0
|
[@thorn0]: https://github.com/thorn0
|
||||||
[@bakkot]: https://github.com/bakkot
|
[@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 hasChildren = n.children.length > 0;
|
||||||
const isVoid =
|
const isVoid =
|
||||||
(isGlimmerComponent && !hasChildren) || voidTags.indexOf(n.tag) !== -1;
|
(isGlimmerComponent && !hasChildren) || voidTags.indexOf(n.tag) !== -1;
|
||||||
const closeTag = isVoid ? concat([" />", softline]) : ">";
|
const closeTagForNoBreak = isVoid ? concat([" />", softline]) : ">";
|
||||||
|
const closeTagForBreak = isVoid ? "/>" : ">";
|
||||||
const getParams = (path, print) =>
|
const getParams = (path, print) =>
|
||||||
indent(
|
indent(
|
||||||
concat([
|
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([
|
return concat([
|
||||||
group(
|
group(
|
||||||
concat([
|
concat([
|
||||||
|
@ -89,7 +78,7 @@ function print(path, options, print) {
|
||||||
getParams(path, print),
|
getParams(path, print),
|
||||||
n.blockParams.length ? ` as |${n.blockParams.join(" ")}|` : "",
|
n.blockParams.length ? ` as |${n.blockParams.join(" ")}|` : "",
|
||||||
ifBreak(softline, ""),
|
ifBreak(softline, ""),
|
||||||
closeTag
|
ifBreak(closeTagForBreak, closeTagForNoBreak)
|
||||||
])
|
])
|
||||||
),
|
),
|
||||||
group(
|
group(
|
||||||
|
|
|
@ -292,6 +292,12 @@ printWidth: 80
|
||||||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||||
{{@greeting}}, {{@name}}!
|
{{@greeting}}, {{@name}}!
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<UserGreeting
|
||||||
|
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Form as |f|>
|
<Form as |f|>
|
||||||
<f.input @title="hello" />
|
<f.input @title="hello" />
|
||||||
<f.input>hello</f.input>
|
<f.input>hello</f.input>
|
||||||
|
@ -315,6 +321,11 @@ printWidth: 80
|
||||||
,
|
,
|
||||||
{{@name}}
|
{{@name}}
|
||||||
!
|
!
|
||||||
|
<div>
|
||||||
|
<UserGreeting
|
||||||
|
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Form as |f|>
|
<Form as |f|>
|
||||||
<f.input @title="hello" />
|
<f.input @title="hello" />
|
||||||
<f.input>
|
<f.input>
|
||||||
|
@ -344,6 +355,12 @@ singleQuote: true
|
||||||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||||
{{@greeting}}, {{@name}}!
|
{{@greeting}}, {{@name}}!
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<UserGreeting
|
||||||
|
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Form as |f|>
|
<Form as |f|>
|
||||||
<f.input @title="hello" />
|
<f.input @title="hello" />
|
||||||
<f.input>hello</f.input>
|
<f.input>hello</f.input>
|
||||||
|
@ -367,6 +384,11 @@ singleQuote: true
|
||||||
,
|
,
|
||||||
{{@name}}
|
{{@name}}
|
||||||
!
|
!
|
||||||
|
<div>
|
||||||
|
<UserGreeting
|
||||||
|
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Form as |f|>
|
<Form as |f|>
|
||||||
<f.input @title="hello" />
|
<f.input @title="hello" />
|
||||||
<f.input>
|
<f.input>
|
||||||
|
|
|
@ -1,6 +1,12 @@
|
||||||
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
<UserGreeting @name="Ricardo" @greeting="Olá" />
|
||||||
{{@greeting}}, {{@name}}!
|
{{@greeting}}, {{@name}}!
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<UserGreeting
|
||||||
|
@aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Form as |f|>
|
<Form as |f|>
|
||||||
<f.input @title="hello" />
|
<f.input @title="hello" />
|
||||||
<f.input>hello</f.input>
|
<f.input>hello</f.input>
|
||||||
|
|
Loading…
Reference in New Issue