Fix comments get duplicated in angular interpolation (#17862)

changelog_unreleased/angular/17862.md

@@ -0,0 +1,15 @@
+#### Fix comments get duplicated in interpolation (#17862 by @fisker)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+{{a() // comment}}
+
+<!-- Prettier stable -->
+{{ a(// comment) // comment }}
+
+<!-- Prettier main -->
+{{
+  a() // comment
+}}
+```

eslint.config.js

@@ -430,6 +430,7 @@ export default [
           functions: ["hasComment", "getComments"],
         },
         "src/language-js/pragma.js",
+        "src/language-js/parse/angular.js",
         "src/language-js/parse/babel.js",
         "src/language-js/parse/meriyah.js",
         "src/language-js/parse/json.js",

src/language-js/parse/angular.js

@@ -13,14 +13,21 @@ function createParser(parseMethod) {
   return {
     astFormat: "estree",
     parse(text) {
-      const node = parseMethod(text);
+      let node = parseMethod(text);
+      // @ts-expect-error -- safe
+      const { comments } = node;
+      // @ts-expect-error -- safe
+      delete node.comments;
+
+      if (parseMethod === parseAction && node.type !== "NGChainedExpression") {
+        // @ts-expect-error -- expected
+        node = { ...node, type: "NGChainedExpression", expressions: [node] };
+      }
 
       return {
         type: "NGRoot",
-        node:
-          parseMethod === parseAction && node.type !== "NGChainedExpression"
-            ? { ...node, type: "NGChainedExpression", expressions: [node] }
-            : node,
+        node,
+        comments,
       };
     },
     locStart,

src/language-js/print/angular.js

@@ -1,11 +1,6 @@
 import { group, join, line } from "../../document/builders.js";
 import UnexpectedNodeError from "../../utils/unexpected-node-error.js";
-import {
-  createTypeCheckFunction,
-  getComments,
-  hasComment,
-  hasNode,
-} from "../utils/index.js";
+import { createTypeCheckFunction, hasNode } from "../utils/index.js";
 import { printBinaryishExpression } from "./binaryish.js";
 
 /** @import AstPath from "../../common/ast-path.js" */
@@ -20,12 +15,7 @@ function printAngular(path, options, print) {
 
   switch (node.type) {
     case "NGRoot":
-      return [
-        print("node"),
-        hasComment(node.node)
-          ? " //" + getComments(node.node)[0].value.trimEnd()
-          : "",
-      ];
+      return print("node");
     case "NGPipeExpression":
       return printBinaryishExpression(path, options, print);
     case "NGChainedExpression":

tests/format/angular/angular/__snapshots__/format.test.js.snap

@@ -468,7 +468,9 @@ printWidth: 80
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello"
+  [target]="
+    a // hello
+  "
   [target]="a.b"
   [target]="a?.b"
   [target]="a?.[b]"
@@ -480,7 +482,9 @@ printWidth: 80
   (target)="a = 1"
   (target)="a.b = 1"
   (target)="a[b] = 1"
-  (target)="(a) // hello"
+  (target)="
+    (a) // hello
+  "
   (target)="(a); (b)"
   (event)="(0)"
   (event)="(a.b)"
@@ -747,7 +751,9 @@ printWidth: 80
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello"
+  [target]="
+    a // hello
+  "
   [target]="a.b"
   [target]="a?.b"
   [target]="a?.[b]"
@@ -759,7 +765,9 @@ printWidth: 80
   (target)="a = 1"
   (target)="a.b = 1"
   (target)="a[b] = 1"
-  (target)="(a) // hello"
+  (target)="
+    (a) // hello
+  "
   (target)="(a); (b)"
   (event)="(0)"
   (event)="(a.b)"
@@ -1653,7 +1661,9 @@ trailingComma: "es5"
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello"
+  [target]="
+    a // hello
+  "
   [target]="a.b"
   [target]="a?.b"
   [target]="a?.[b]"
@@ -1665,7 +1675,9 @@ trailingComma: "es5"
   (target)="a = 1"
   (target)="a.b = 1"
   (target)="a[b] = 1"
-  (target)="(a) // hello"
+  (target)="
+    (a) // hello
+  "
   (target)="(a); (b)"
   (event)="(0)"
   (event)="(a.b)"
@@ -1932,7 +1944,9 @@ trailingComma: "none"
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello"
+  [target]="
+    a // hello
+  "
   [target]="a.b"
   [target]="a?.b"
   [target]="a?.[b]"
@@ -1944,7 +1958,9 @@ trailingComma: "none"
   (target)="a = 1"
   (target)="a.b = 1"
   (target)="a[b] = 1"
-  (target)="(a) // hello"
+  (target)="
+    (a) // hello
+  "
   (target)="(a); (b)"
   (event)="(0)"
   (event)="(a.b)"
@@ -3027,11 +3043,19 @@ printWidth: 80
 <div>{{ !x }}</div>
 <div>{{ a }}</div>
 <div>{{ a }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <div>{{ a.b }}</div>
 <div>{{ a?.b() }}</div>
 <div>{{ a?.b }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
     | localize: localizationSection
@@ -3194,11 +3218,19 @@ printWidth: 80
 <div>{{ !x }}</div>
 <div>{{ a }}</div>
 <div>{{ a }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <div>{{ a.b }}</div>
 <div>{{ a?.b() }}</div>
 <div>{{ a?.b }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
@@ -3740,11 +3772,19 @@ trailingComma: "es5"
 <div>{{ !x }}</div>
 <div>{{ a }}</div>
 <div>{{ a }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <div>{{ a.b }}</div>
 <div>{{ a?.b() }}</div>
 <div>{{ a?.b }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
     | localize: localizationSection
@@ -3907,11 +3947,19 @@ trailingComma: "none"
 <div>{{ !x }}</div>
 <div>{{ a }}</div>
 <div>{{ a }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <div>{{ a.b }}</div>
 <div>{{ a?.b() }}</div>
 <div>{{ a?.b }}</div>
-<div>{{ a // hello }}</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
     | localize: localizationSection

tests/format/angular/interpolation/html/__snapshots__/format.test.js.snap

@@ -16,3 +16,19 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`comments.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+{{a() // comment }}
+
+=====================================output=====================================
+{{
+  a() // comment
+}}
+
+================================================================================
+`;

tests/format/angular/interpolation/html/comments.html

@@ -0,0 +1 @@
+{{a() // comment }}