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

Unexpected embedded formatting for Angular template #15969

Closed
sosukesuzuki opened this issue Jan 21, 2024 · 3 comments · Fixed by #15972
Closed

Unexpected embedded formatting for Angular template #15969

sosukesuzuki opened this issue Jan 21, 2024 · 3 comments · Fixed by #15972
Labels
good first issue Good fist issue! lang:angular Issues affecting Angular template (not general JS/TS issues used for Angular) lang:typescript Issues affecting TypeScript-specific constructs (not general JS issues) locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. type:bug Issues identifying ugly output, or a defect in the program

Comments

@sosukesuzuki
Copy link
Member

Prettier 3.2.4
Playground link

--parser babel

Input:

const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Output:

const template = "foobar";

@Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

Expected output:

const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Why?

Prettier formats the content of the template field in Angular's @Component decorator as HTML. However, it now also formats the content of a different field named template as HTML. This isn't expected.

I think adding !node.computed to

prettier/src/language-js/embed/utils.js

Lines 47 to 51 in 4b1965a

(node, name) =>
isObjectProperty(node) &&
node.key.type === "Identifier" &&
node.key.name === "template" &&
name === "value",
will fix this.

@sosukesuzuki sosukesuzuki added type:bug Issues identifying ugly output, or a defect in the program lang:typescript Issues affecting TypeScript-specific constructs (not general JS issues) lang:angular Issues affecting Angular template (not general JS/TS issues used for Angular) good first issue Good fist issue! labels Jan 21, 2024
@sosukesuzuki sosukesuzuki mentioned this issue Jan 21, 2024
Merged
3 tasks
@JounQin
Copy link
Member

JounQin commented Jan 21, 2024

Seems easy to fix.

JounQin added a commit to JounQin/prettier that referenced this issue Jan 22, 2024
@JounQin
fix: do not format computed template which could be unexpected
f0c5e51 
close prettier#15969
JounQin added a commit to JounQin/prettier that referenced this issue Jan 22, 2024
@JounQin
fix: do not format computed template which could be unexpected
cd2d061 
close prettier#15969
@JounQin JounQin mentioned this issue Jan 22, 2024
Merged
4 tasks
@JounQin
Copy link
Member

JounQin commented Jan 22, 2024

@sosukesuzuki Here you are #15972

@sosukesuzuki
Copy link
Member Author

@JounQin Thank you for working on this!

@github-actions github-actions bot added the locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. label Apr 23, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
good first issue Good fist issue! lang:angular Issues affecting Angular template (not general JS/TS issues used for Angular) lang:typescript Issues affecting TypeScript-specific constructs (not general JS issues) locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. type:bug Issues identifying ugly output, or a defect in the program
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: do not format computed template which could be unexpected JounQin/prettier
2 participants
@JounQin @sosukesuzuki