From 678de0289cb8b75159febd078641ebfacfcff579 Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Tue, 23 Jan 2024 09:36:15 +0800
Subject: [PATCH] fix: do not format computed template which could be
 unexpected (#15972)

---
 changelog_unreleased/angular/15969.md         | 30 ++++++++++
 src/language-js/embed/utils.js                |  1 +
 .../15969-computed.component.ts               |  8 +++
 .../__snapshots__/jsfmt.spec.js.snap          | 58 +++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 changelog_unreleased/angular/15969.md
 create mode 100644 tests/format/typescript/angular-component-examples/15969-computed.component.ts

diff --git a/changelog_unreleased/angular/15969.md b/changelog_unreleased/angular/15969.md
new file mode 100644
index 000000000..668076fb4
--- /dev/null
+++ b/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 {}
+```
diff --git a/src/language-js/embed/utils.js b/src/language-js/embed/utils.js
index 107fe490b..ca9c41c02 100644
--- a/src/language-js/embed/utils.js
+++ b/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",
diff --git a/tests/format/typescript/angular-component-examples/15969-computed.component.ts b/tests/format/typescript/angular-component-examples/15969-computed.component.ts
new file mode 100644
index 000000000..72b37c781
--- /dev/null
+++ b/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 {}
diff --git a/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap
index 9a41ce0f2..c81691af2 100644
--- a/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap
+++ b/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"]