Fix Angular ngNonBindable interpolation formatting (#20044)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/angular/20044.md

@@ -0,0 +1,13 @@
+#### Preserve interpolations inside elements with `ngNonBindable` directive (#20044 by @splincode)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<span ngNonBindable>{{foo+bar}}</span>
+
+<!-- Prettier stable -->
+<span ngNonBindable>{{ foo + bar }}</span>
+
+<!-- Prettier main -->
+<span ngNonBindable>{{foo+bar}}</span>
+```

src/language-html/embed.js

@@ -23,6 +23,7 @@ import {
   isScriptLikeTag,
   isVueNonHtmlBlock,
 } from "./utilities/index.js";
+import { isInNgNonBindable } from "./utilities/is-in-ng-non-bindable.js";
 import isVueSfcWithTypescriptScript from "./utilities/is-vue-sfc-with-typescript-script.js";
 
 const embeddedAngularControlFlowBlocks = new Set([
@@ -109,7 +110,10 @@ function embed(path, options) {
             ];
           };
         }
-      } else if (node.parent.kind === "interpolation") {
+      } else if (
+        node.parent.kind === "interpolation" &&
+        !isInNgNonBindable(path, options)
+      ) {
         return async (textToDoc) => {
           const textToDocOptions = {
             __isInHtmlInterpolation: true, // to avoid unexpected `}}`

src/language-html/utilities/is-in-ng-non-bindable.js

@@ -0,0 +1,29 @@
+import { getOrInsertComputed } from "../../utilities/get-or-insert.js";
+
+const angularNonBindableCache = new WeakMap();
+function hasOrInNgNonBindable(node) {
+  return getOrInsertComputed(angularNonBindableCache, node, (node) => {
+    if (
+      node.kind === "element" &&
+      Object.hasOwn(node.attrMap, "ngNonBindable")
+    ) {
+      return true;
+    }
+
+    if (!node.parent) {
+      return false;
+    }
+
+    return hasOrInNgNonBindable(node.parent);
+  });
+}
+
+function isInNgNonBindable(path, options) {
+  if (options.parser !== "angular") {
+    return false;
+  }
+
+  return hasOrInNgNonBindable(path.node.parent);
+}
+
+export { isInNgNonBindable };

tests/format/angular/ng-non-bindable/__snapshots__/format.test.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ng-non-bindable.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<span ngNonBindable>{{foo   +bar}}</span>
+
+<div ngNonBindable>
+  {{foo   +bar}}
+  <span>{{baz   +qux}}</span>
+</div>
+
+<span>{{foo   +bar}}</span>
+
+<span ngNonBindable>
+  @if (A) {
+    <span>{{foo   +bar}}</span>
+  }
+</span>
+
+=====================================output=====================================
+<span ngNonBindable>{{foo   +bar}}</span>
+
+<div ngNonBindable>
+  {{foo   +bar}}
+  <span>{{baz   +qux}}</span>
+</div>
+
+<span>{{ foo + bar }}</span>
+
+<span ngNonBindable>
+  @if (A) {
+    <span>{{foo   +bar}}</span>
+  }
+</span>
+
+================================================================================
+`;

tests/format/angular/ng-non-bindable/embedded-language-formatting/__snapshots__/format.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ng-non-bindable.html - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<span ngNonBindable>{{foo   +bar}}</span>
+
+=====================================output=====================================
+<span ngNonBindable>{{foo   +bar}}</span>
+
+================================================================================
+`;

tests/format/angular/ng-non-bindable/embedded-language-formatting/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"], { embeddedLanguageFormatting: "off" });

tests/format/angular/ng-non-bindable/embedded-language-formatting/ng-non-bindable.html

@@ -0,0 +1 @@
+<span ngNonBindable>{{foo   +bar}}</span>

tests/format/angular/ng-non-bindable/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"]);

tests/format/angular/ng-non-bindable/ng-non-bindable.html

@@ -0,0 +1,14 @@
+<span ngNonBindable>{{foo   +bar}}</span>
+
+<div ngNonBindable>
+  {{foo   +bar}}
+  <span>{{baz   +qux}}</span>
+</div>
+
+<span>{{foo   +bar}}</span>
+
+<span ngNonBindable>
+  @if (A) {
+    <span>{{foo   +bar}}</span>
+  }
+</span>

tests/format/vue/interpolation/__snapshots__/format.test.js.snap

@@ -75,6 +75,21 @@ parsers: ["vue"]
 ================================================================================
 `;
 
+exports[`ng-non-bindable.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<template><span ngNonBindable>{{foo   +bar}}</span></template>
+
+=====================================output=====================================
+<template>
+  <span ngNonBindable>{{ foo + bar }}</span>
+</template>
+
+================================================================================
+`;
+
 exports[`parenthesized.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]

tests/format/vue/interpolation/ng-non-bindable.vue

@@ -0,0 +1 @@
+<template><span ngNonBindable>{{foo   +bar}}</span></template>