fix: do not format computed template which could be unexpected (#15972)

changelog_unreleased/angular/15969.md

@@ -0,0 +1,30 @@
+#### Unexpected embedded formatting for Angular template (#15969 by @JounQin)
+
+Computed template should not be considered as Angular component template
+
+<!-- prettier-ignore -->
+```ts
+// Input
+const template = "foobar";
+
+@Component({
+  [template]: `<h1>{{       hello }}</h1>`,
+})
+export class AppComponent {}
+
+// Prettier stable
+const template = "foobar";
+
+@Component({
+  [template]: `<h1>{{ hello }}</h1>`,
+})
+export class AppComponent {}
+
+// Prettier main
+const template = "foobar";
+
+@Component({
+  [template]: `<h1>{{       hello }}</h1>`,
+})
+export class AppComponent {}
+```

src/language-js/embed/utils.js

@@ -56,6 +56,7 @@ function isAngularComponentTemplate(path) {
     (node) => node.type === "TemplateLiteral",
     (node, name) =>
       isObjectProperty(node) &&
+      !node.computed &&
       node.key.type === "Identifier" &&
       node.key.name === "template" &&
       name === "value",

tests/format/typescript/angular-component-examples/15969-computed.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: `<h1>{{       hello }}</h1>`,
+})
+export class AppComponent {}

tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap

@@ -156,6 +156,64 @@ export class AppComponent {}
 ================================================================================
 `;
 
+exports[`15969-computed.component.ts - {"trailingComma":"es5"} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+================================================================================
+`;
+
+exports[`15969-computed.component.ts - {"trailingComma":"none"} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`
+})
+export class AppComponent {}
+
+================================================================================
+`;
+
 exports[`test.component.ts - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]