Unexpected embedded formatting for Angular template

[sosukesuzuki]

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.

[JounQin]

Seems easy to fix.

[JounQin]

@sosukesuzuki Here you are #15972

[sosukesuzuki]

@JounQin Thank you for working on this!