Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ember / glimmer: Preserve self-closing tags #13691

Merged
merged 3 commits into from Jan 4, 2023
Merged

ember / glimmer: Preserve self-closing tags #13691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33fa1b6
Preserve self-closing tags
dcyriller Oct 20, 2022
d630444
Add changelog entry
dcyriller Oct 20, 2022
e8544f8
Clarify changelog and test
dcyriller Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 34 additions & 0 deletions changelog_unreleased/handlebars/13691.md
View file
Open in desktop
@@ -0,0 +1,34 @@
#### Preserve self-closing tags (#13691 by @dcyriller)

<!-- prettier-ignore -->
```hbs
{{! Input }}
<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component></Component>

{{! Prettier stable }}
<div></div>
<div></div>
<custom-component></custom-component>
<custom-component></custom-component>
<i></i>
<i></i>
<Component />
<Component />

{{! Prettier main }}
<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component />
```
1 change: 1 addition & 0 deletions src/language-handlebars/utils.js
View file
Open in desktop
Expand Up @@ -41,6 +41,7 @@ const voidTags = new Set(htmlVoidElements);
function isVoid(node) {
return (
voidTags.has(node.tag) ||
Copy link
Sponsor Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we remove the html void tag check?

<img> should always self closed. If anyone wrote <img></img>, we can just ignore.

Copy link
Sponsor Member

@fisker fisker Oct 21, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<img></img> can't be parsed at all. So let's remove it.

node.selfClosing === true ||
dcyriller marked this conversation as resolved.
Show resolved Hide resolved
(isGlimmerComponent(node) &&
node.children.every((node) => isWhitespaceNode(node)))
);
Expand Down
18 changes: 18 additions & 0 deletions tests/format/handlebars/element-node/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -45,6 +45,15 @@ printWidth: 80

<MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>

<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component></Component>

=====================================output=====================================
<div class="attribute" {{modifier}} {{! comment}}>
Hello
Expand Down Expand Up @@ -91,5 +100,14 @@ printWidth: 80
@prop4={{true}}
as |thing|
/>

<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component />
================================================================================
`;
9 changes: 9 additions & 0 deletions tests/format/handlebars/element-node/element-node.hbs
View file
Open in desktop
Expand Up @@ -36,3 +36,12 @@
<img />

<MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>

<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component></Component>
2 changes: 1 addition & 1 deletion tests/format/handlebars/html-whitespace-sensitivity/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -702,7 +702,7 @@ printWidth: 40
=====================================input======================================
<i />   |   <i />
=====================================output=====================================
<i></i>   |   <i></i>
<i />   |   <i />
================================================================================
`;

Expand Down
12 changes: 6 additions & 6 deletions tests/format/handlebars/single-quote-option/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -99,8 +99,8 @@ singleQuote: false
<div title='My "title"'></div>
<div title="My other 'title'"></div>

<div title="{{t 'my.title'}}"></div>
<div title="{{t 'my.title'}}"></div>
<div title="{{t 'my.title'}}" />
<div title="{{t 'my.title'}}" />

<a href="/{{url}}/{{url}}"></a>
<a href="/{{url}}/{{url}}"></a>
Expand All @@ -126,7 +126,7 @@ singleQuote: false
class="padding
{{if foo (if fooAgain 'bar' (if fooAgainAgain 'bar' 'foo'))}}
baz"
></div>
/>
================================================================================
`;

Expand Down Expand Up @@ -161,8 +161,8 @@ singleQuote: true
<div title='My "title"'></div>
<div title="My other 'title'"></div>

<div title='{{t "my.title"}}'></div>
<div title='{{t "my.title"}}'></div>
<div title='{{t "my.title"}}' />
<div title='{{t "my.title"}}' />

<a href='/{{url}}/{{url}}'></a>
<a href='/{{url}}/{{url}}'></a>
Expand All @@ -188,7 +188,7 @@ singleQuote: true
class='padding
{{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}}
baz'
></div>
/>
================================================================================
`;

Expand Down