Simplify interpolation handling in ngNonBindable (#20115)

changelog_unreleased/angular/20044.md

@@ -1,4 +1,4 @@
-#### Preserve interpolations inside elements with `ngNonBindable` directive (#20044 by @splincode)
+#### Preserve interpolations inside elements with `ngNonBindable` directive (#20044 by @splincode, #20115 by @fisker)
 
 <!-- prettier-ignore -->
 ```html

src/language-html/embed.js

@@ -23,7 +23,6 @@ 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([
@@ -110,10 +109,7 @@ function embed(path, options) {
             ];
           };
         }
-      } else if (
-        node.parent.kind === "interpolation" &&
-        !isInNgNonBindable(path, options)
-      ) {
+      } else if (node.parent.kind === "interpolation") {
         return async (textToDoc) => {
           const textToDocOptions = {
             __isInHtmlInterpolation: true, // to avoid unexpected `}}`

src/language-html/utilities/index.js

@@ -18,6 +18,7 @@ import {
   CSS_WHITE_SPACE_TAGS,
 } from "../constants.evaluate.js";
 import isUnknownNamespace from "./is-unknown-namespace.js";
+import { hasOrInNgNonBindable } from "./ng-non-bindable.js";
 
 const htmlTrimLeadingBlankLines = (string) =>
   string.replaceAll(/^[\t\f\r ]*\n/g, "");
@@ -121,7 +122,15 @@ function isScriptLikeTag(node, options) {
 }
 
 function canHaveInterpolation(node, options) {
-  return node.children && !isScriptLikeTag(node, options);
+  if (!node.children || isScriptLikeTag(node, options)) {
+    return false;
+  }
+
+  if (hasOrInNgNonBindable(node, options)) {
+    return false;
+  }
+
+  return true;
 }
 
 function isWhitespaceSensitiveNode(node, options) {

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

@@ -1,29 +0,0 @@
-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 };

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

@@ -0,0 +1,20 @@
+import { getOrInsertComputed } from "../../utilities/get-or-insert.js";
+
+const isElementWithNgNonBindable = (node) =>
+  node?.kind === "element" && Object.hasOwn(node.attrMap, "ngNonBindable");
+
+const angularNonBindableCache = new WeakMap();
+const hasOrInNgNonBindableInternal = (node) =>
+  Boolean(node) &&
+  getOrInsertComputed(
+    angularNonBindableCache,
+    node,
+    (node) =>
+      isElementWithNgNonBindable(node) ||
+      hasOrInNgNonBindableInternal(node.parent),
+  );
+
+const hasOrInNgNonBindable = (node, options) =>
+  options.parser === "angular" && hasOrInNgNonBindableInternal(node);
+
+export { hasOrInNgNonBindable };

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

@@ -78,24 +78,38 @@ parsers: ["angular"]
 
 <pre ngNonBindable>{{foo   +bar}}</pre>
 
+<div ngNonBindable>   {{   foo   +   bar   }}   </div>
+<div ngNonBindable>   [[   foo   +   bar   ]]   </div>
+<span ngNonBindable>   {{   foo   +   bar   }}   </span>
+<span ngNonBindable>   [[   foo   +   bar   ]]   </span>
+<pre ngNonBindable>   {{   foo   +   bar   }}   </pre>
+<pre ngNonBindable>   [[   foo   +   bar   ]]   </pre>
+
 =====================================output=====================================
-<span ngNonBindable>{{foo   +bar}}</span>
+<span ngNonBindable>{{foo +bar}}</span>
 
 <div ngNonBindable>
-  {{foo   +bar}}
-  <span>{{baz   +qux}}</span>
+  {{foo +bar}}
+  <span>{{baz +qux}}</span>
 </div>
 
 <span>{{ foo + bar }}</span>
 
 <span ngNonBindable>
   @if (A) {
-  <span>{{foo   +bar}}</span>
+  <span>{{foo +bar}}</span>
   }
 </span>
 
 <pre ngNonBindable>{{foo   +bar}}</pre>
 
+<div ngNonBindable>{{ foo + bar }}</div>
+<div ngNonBindable>[[ foo + bar ]]</div>
+<span ngNonBindable> {{ foo + bar }} </span>
+<span ngNonBindable> [[ foo + bar ]] </span>
+<pre ngNonBindable>   {{   foo   +   bar   }}   </pre>
+<pre ngNonBindable>   [[   foo   +   bar   ]]   </pre>
+
 ================================================================================
 `;
 

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

@@ -7,9 +7,15 @@ parsers: ["angular"]
                                                       printWidth: 80 (default) |
 =====================================input======================================
 <span ngNonBindable>{{foo   +bar}}</span>
+<pre ngNonBindable>{{foo   +bar}}</pre>
+<span ngNonBindable>{{foo
+.bar(
+)}}</span>
 
 =====================================output=====================================
-<span ngNonBindable>{{foo   +bar}}</span>
+<span ngNonBindable>{{foo +bar}}</span>
+<pre ngNonBindable>{{foo   +bar}}</pre>
+<span ngNonBindable>{{foo .bar( )}}</span>
 
 ================================================================================
 `;

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

@@ -1 +1,5 @@
 <span ngNonBindable>{{foo   +bar}}</span>
+<pre ngNonBindable>{{foo   +bar}}</pre>
+<span ngNonBindable>{{foo
+.bar(
+)}}</span>

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

@@ -14,3 +14,10 @@
 </span>
 
 <pre ngNonBindable>{{foo   +bar}}</pre>
+
+<div ngNonBindable>   {{   foo   +   bar   }}   </div>
+<div ngNonBindable>   [[   foo   +   bar   ]]   </div>
+<span ngNonBindable>   {{   foo   +   bar   }}   </span>
+<span ngNonBindable>   [[   foo   +   bar   ]]   </span>
+<pre ngNonBindable>   {{   foo   +   bar   }}   </pre>
+<pre ngNonBindable>   [[   foo   +   bar   ]]   </pre>