Respect trailingComma in angular templates (#15926)

Co-authored-by: Sosuke Suzuki <[email protected]>

Author: fisker

changelog_unreleased/angular/15926.md

@@ -0,0 +1,42 @@
+#### Respect `trailingComma` in Angular templates (#15926 by @fisker)
+
+If you are using an old version of Angular doesn't support trailing comma, make sure add
+
+```yaml
+overrides:
+  - files: "<patterns-of-my-angular-files>"
+    options:
+      trailingComma: none
+```
+
+to your `.prettierrc` file.
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+<div
+  [ngClass]="{
+    'px-lg': ctx.spacing == 'lg',
+    'px-md': ctx.spacing == 'md',
+    'px-xs': ctx.spacing == 'xs',
+  }"
+></div>
+
+// Prettier stable
+<div
+  [ngClass]="{
+    'px-lg': ctx.spacing == 'lg',
+    'px-md': ctx.spacing == 'md',
+    'px-xs': ctx.spacing == 'xs'
+  }"
+></div>
+
+// Prettier main
+<div
+  [ngClass]="{
+    'px-lg': ctx.spacing == 'lg',
+    'px-md': ctx.spacing == 'md',
+    'px-xs': ctx.spacing == 'xs',
+  }"
+></div>
+```

src/language-html/embed.js

@@ -114,7 +114,6 @@ function embed(path, options) {
           };
           if (options.parser === "angular") {
             textToDocOptions.parser = "__ng_interpolation";
-            textToDocOptions.trailingComma = "none";
           } else if (options.parser === "vue") {
             textToDocOptions.parser = isVueSfcWithTypescriptScript(
               path,

src/language-html/embed/angular-attributes.js

@@ -18,11 +18,7 @@ function createAngularPrinter({ parser }) {
     formatAttributeValue(
       getUnescapedAttributeValue(path.node),
       textToDoc,
-      {
-        parser,
-        // angular does not allow trailing comma
-        trailingComma: "none",
-      },
+      { parser },
       shouldHugJsExpression,
     );
 }

src/language-html/embed/angular-control-flow-block-parameters.js

@@ -24,7 +24,6 @@ function printAngularControlFlowBlockParameters(
     {
       parser: "__ng_directive",
       __isInHtmlAttribute: false,
-      trailingComma: "none",
     },
     shouldHugJsExpression,
   );

src/language-html/embed/angular-interpolation.js

@@ -19,7 +19,6 @@ async function printAngularInterpolation(text, textToDoc) {
               await formatAttributeValue(part, textToDoc, {
                 parser: "__ng_interpolation",
                 __isInHtmlInterpolation: true, // to avoid unexpected `}}`
-                trailingComma: "none",
               }),
             ]),
             line,

src/language-js/print/call-arguments.js

@@ -82,7 +82,12 @@ function printCallArguments(path, options, print) {
   const isDynamicImport =
     node.type === "ImportExpression" || node.callee.type === "Import";
   const maybeTrailingComma =
-    !isDynamicImport && shouldPrintComma(options, "all") ? "," : "";
+    // Angular does not allow trailing comma
+    !options.parser.startsWith("__ng_") &&
+    !isDynamicImport &&
+    shouldPrintComma(options, "all")
+      ? ","
+      : "";
 
   function allArgsBrokenOut() {
     return group(

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

@@ -451,10 +451,10 @@ printWidth: 80
   [target]="{a: 1}"
   [target]="{a: 1}"
   [target]="{
-    trailingComma: 'notAllowed'
+    trailingComma: 'notAllowed',
   }"
   [target]="[
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong,
   ]"
   [target]="true"
   [target]="undefined"
@@ -540,14 +540,14 @@ printWidth: 80
     listRow.NextScheduledSendStatus == 3
   "
   [target]="{
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
   *ngIf="form.controls.details?.controls.amount?.errors.min"
   [ngClass]="{
     'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
     'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
-    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
+    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER,
   }"
   [stickout]="+toolAssembly.stickoutMm"
   test="{{ 'test' | translate }}"
@@ -730,10 +730,10 @@ printWidth: 80
   [target]="{ a: 1 }"
   [target]="{ a: 1 }"
   [target]="{
-    trailingComma: 'notAllowed'
+    trailingComma: 'notAllowed',
   }"
   [target]="[
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong,
   ]"
   [target]="true"
   [target]="undefined"
@@ -819,14 +819,14 @@ printWidth: 80
     listRow.NextScheduledSendStatus == 3
   "
   [target]="{
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
   *ngIf="form.controls.details?.controls.amount?.errors.min"
   [ngClass]="{
     'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
     'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
-    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
+    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER,
   }"
   [stickout]="+toolAssembly.stickoutMm"
   test="{{ 'test' | translate }}"
@@ -1053,20 +1053,20 @@ printWidth: 1
     ]
   "
   [target]="[
-    1
+    1,
   ]"
   [target]="{
-    a: 1
+    a: 1,
   }"
   [target]="{
-    a: 1
+    a: 1,
   }"
   [target]="{
     trailingComma:
-      'notAllowed'
+      'notAllowed',
   }"
   [target]="[
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong,
   ]"
   [target]="
     true
@@ -1210,7 +1210,7 @@ printWidth: 1
       1,
       2,
       3,
-      666666666666666666666666666666666666
+      666666666666666666666666666666666666,
     ];
     let i = index
   "
@@ -1320,7 +1320,7 @@ printWidth: 1
       3
   "
   [target]="{
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
   [error]="
     'We couldn\\\\\\'t find anything with that name.'
@@ -1355,7 +1355,7 @@ printWidth: 1
         | async
       )
         .level ===
-      dialogLevelEnum.DANGER
+      dialogLevelEnum.DANGER,
   }"
   [stickout]="
     +toolAssembly.stickoutMm
@@ -1636,10 +1636,10 @@ trailingComma: "es5"
   [target]="{ a: 1 }"
   [target]="{ a: 1 }"
   [target]="{
-    trailingComma: 'notAllowed'
+    trailingComma: 'notAllowed',
   }"
   [target]="[
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong,
   ]"
   [target]="true"
   [target]="undefined"
@@ -1725,14 +1725,14 @@ trailingComma: "es5"
     listRow.NextScheduledSendStatus == 3
   "
   [target]="{
-    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
   *ngIf="form.controls.details?.controls.amount?.errors.min"
   [ngClass]="{
     'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
     'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
-    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
+    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER,
   }"
   [stickout]="+toolAssembly.stickoutMm"
   test="{{ 'test' | translate }}"
@@ -3395,21 +3395,21 @@ printWidth: 1
 <div>
   {{
     [
-      1
+      1,
     ]
   }}
 </div>
 <div>
   {{
     {
-      a: 1
+      a: 1,
     }
   }}
 </div>
 <div>
   {{
     {
-      a: 1
+      a: 1,
     }
   }}
 </div>
@@ -3599,8 +3599,8 @@ printWidth: 1
               | translate
                 : {
                     count:
-                      array.length
-                  })
+                      array.length,
+                  }),
           }
   }}
 </p>
@@ -3609,7 +3609,7 @@ printWidth: 1
     {
       a:
         1 +
-        {}
+        {},
     }
   }}
 </p>
@@ -3618,14 +3618,14 @@ printWidth: 1
     {
       a:
         a ===
-        {}
+        {},
     }
   }}
 </p>
 <p>
   {{
     {
-      a: !{}
+      a: !{},
     }
   }}
 </p>
@@ -3634,7 +3634,7 @@ printWidth: 1
     {
       a: a
         ? b
-        : {}
+        : {},
     }
   }}
 </p>
@@ -8391,7 +8391,7 @@ can be found in the LICENSE file at http://angular.io/license
   <div
     [ngClass]="{
       special:
-        isSpecial
+        isSpecial,
     }"
   ></div>
 </div>
@@ -9371,7 +9371,7 @@ bindon-ngModel
   [ngClass]="{
     bad: false,
     curly: true,
-    special: true
+    special: true,
   }"
 >
   Curly