Update dependency angular-html-parser to v9 (#17365)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: fisker <lionkay@gmail.com>

package.json

@@ -56,7 +56,7 @@
     "acorn": "8.15.0",
     "acorn-jsx": "5.3.2",
     "angular-estree-parser": "13.0.4",
-    "angular-html-parser": "8.1.0",
+    "angular-html-parser": "9.3.0",
     "camelcase": "8.0.0",
     "ci-info": "4.3.1",
     "cjk-regex": "3.4.0",

src/language-html/clean.js

@@ -96,6 +96,15 @@ function clean(original, cloned, parent) {
   if (original.type === "angularLetDeclarationInitializer") {
     delete cloned.value;
   }
+
+  // We always print void tags as self closing
+  if (
+    original.type === "element" &&
+    original.isVoid &&
+    !original.isSelfClosing
+  ) {
+    cloned.isSelfClosing = true;
+  }
 }
 
 clean.ignoredProperties = ignoredProperties;

src/language-html/parser-html.js

@@ -22,7 +22,7 @@ import isUnknownNamespace from "./utils/is-unknown-namespace.js";
 
 /**
  * @import {ParseOptions as AngularHtmlParserParseOptions} from "angular-html-parser"
- * @import {Node as AstNode, Attribute, Element} from "angular-html-parser/lib/compiler/src/ml_parser/ast.js"
+ * @import {Node as AstNode, Attribute, Element, Comment, Text} from "angular-html-parser/lib/compiler/src/ml_parser/ast.js"
  * @import {ParseTreeResult} from "angular-html-parser/lib/compiler/src/ml_parser/parser.js"
  */
 
@@ -199,9 +199,10 @@ function ngHtmlParser(input, parseOptions, options) {
    */
   const restoreNameAndValue = (node) => {
     switch (node.type) {
-      case "element":
-        restoreName(node);
-        for (const attr of node.attrs) {
+      case "element": {
+        const element = /** @type {Element} */ (node);
+        restoreName(element);
+        for (const attr of element.attrs) {
           restoreName(attr);
           if (!attr.valueSpan) {
             attr.value = null;
@@ -213,14 +214,19 @@ function ngHtmlParser(input, parseOptions, options) {
           }
         }
         break;
-      case "comment":
-        node.value = node.sourceSpan
+      }
+      case "comment": {
+        const comment = /** @type {Comment} */ (node);
+        comment.value = comment.sourceSpan
           .toString()
           .slice("<!--".length, -"-->".length);
         break;
-      case "text":
-        node.value = node.sourceSpan.toString();
+      }
+      case "text": {
+        const text = /** @type {Text} */ (node);
+        text.value = text.sourceSpan.toString();
         break;
+      }
       // No default
     }
   };
@@ -274,17 +280,18 @@ function ngHtmlParser(input, parseOptions, options) {
    */
   const addTagDefinition = (node) => {
     if (node.type === "element") {
+      const element = /** @type {Element} */ (node);
       const tagDefinition = getHtmlTagDefinition(
-        isTagNameCaseSensitive ? node.name : node.name.toLowerCase(),
+        isTagNameCaseSensitive ? element.name : element.name.toLowerCase(),
       );
       if (
-        !node.namespace ||
-        node.namespace === tagDefinition.implicitNamespacePrefix ||
-        isUnknownNamespace(node)
+        !element.namespace ||
+        element.namespace === tagDefinition.implicitNamespacePrefix ||
+        isUnknownNamespace(element)
       ) {
-        node.tagDefinition = tagDefinition;
+        element.tagDefinition = tagDefinition;
       } else {
-        node.tagDefinition = getHtmlTagDefinition(""); // the default one
+        element.tagDefinition = getHtmlTagDefinition(""); // the default one
       }
     }
   };
@@ -371,7 +378,6 @@ function parse(
           location.column,
         ),
     );
-    // @ts-expect-error -- not a real AstNode
     rawAst.children.unshift({
       ...frontMatter,
       sourceSpan: new ParseSourceSpan(start, end),

tests/format/angular/control-flow/__snapshots__/format.test.js.snap

@@ -592,23 +592,6 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`unknown-block.html format 1`] = `
-====================================options=====================================
-parsers: ["angular"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@unknown (foo) {
-} @unknown (foo) {
-}
-
-=====================================output=====================================
-@unknown (foo) {}
-@unknown (foo) {}
-
-================================================================================
-`;
-
 exports[`with-comment.html format 1`] = `
 ====================================options=====================================
 parsers: ["angular"]

tests/format/angular/control-flow/small-print-width/__snapshots__/format.test.js.snap

@@ -6,12 +6,12 @@ parsers: ["angular"]
 printWidth: 20
                     | printWidth
 =====================================input======================================
-@unknown (long expression;long expression;long expression;long expression;long expression;long expression;long expression;long expression;) {
+@for (long expression;long expression;long expression;long expression;long expression;long expression;long expression;long expression;) {
 
 }
 
 =====================================output=====================================
-@unknown (
+@for (
   long expression;
   long expression;
   long expression;

tests/format/angular/control-flow/small-print-width/test.html

@@ -1,3 +1,3 @@
-@unknown (long expression;long expression;long expression;long expression;long expression;long expression;long expression;long expression;) {
+@for (long expression;long expression;long expression;long expression;long expression;long expression;long expression;long expression;) {
 
 }

tests/format/angular/let-declaration/__snapshots__/format.test.js.snap

@@ -185,7 +185,11 @@ parsers: ["angular"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<!-- import from https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b -->
+<!--
+from
+https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b
+https://github.com/angular/angular/commit/18a675081f945ed4d7f4c0ee83172ca1528e7b2e
+-->
 
 @let foo = 123 + 456;
 
@@ -216,7 +220,7 @@ foo = 123;
  789
  ;
 
-@block {@let foo = 123 + 456;}
+@defer {@let foo = 123 + 456;}
 
 @let foo = 'a; b';
 @let foo = "';'";
@@ -236,7 +240,11 @@ foo = 123;
 @let foo = fn({a: 1, b: [otherFn([{c: ";"}], 321, {d: [',']})]});
 
 =====================================output=====================================
-<!-- import from https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b -->
+<!--
+from
+https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b
+https://github.com/angular/angular/commit/18a675081f945ed4d7f4c0ee83172ca1528e7b2e
+-->
 
 @let foo = 123 + 456;
 
@@ -255,7 +263,7 @@ foo = 123;
 
 @let foo = 123 + 456 + 789;
 
-@block {
+@defer {
   @let foo = 123 + 456;
 }
 

tests/format/angular/let-declaration/valid-from-tokenizer-test.html

@@ -1,4 +1,8 @@
-<!-- import from https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b -->
+<!--
+from
+https://github.com/angular/angular/commit/62c5b66b4119b7e1dfaf1e28c100e5f8431cb05b
+https://github.com/angular/angular/commit/18a675081f945ed4d7f4c0ee83172ca1528e7b2e
+-->
 
 @let foo = 123 + 456;
 
@@ -29,7 +33,7 @@ foo = 123;
  789
  ;
 
-@block {@let foo = 123 + 456;}
+@defer {@let foo = 123 + 456;}
 
 @let foo = 'a; b';
 @let foo = "';'";

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`unkown-block.html [angular] format 1`] = `
+"Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (4:1)
+  2 | } @unknown (foo) {
+  3 | }
+> 4 |
+    | ^
+Cause: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)"
+`;

tests/format/misc/errors/angular/format.test.js

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

tests/format/misc/errors/vue/__snapshots__/format.test.js.snap

@@ -5,7 +5,8 @@ exports[`unclosed_tag.vue [vue] format 1`] = `
 > 1 | <div
     | ^^^^
 > 2 |
-    | ^"
+    | ^
+Cause: Opening tag "div" not terminated."
 `;
 
 exports[`unclosed_tag_in_template.vue [vue] format 1`] = `
@@ -14,7 +15,8 @@ exports[`unclosed_tag_in_template.vue [vue] format 1`] = `
   3 |     </
 > 4 | </template>
     | ^
-  5 |"
+  5 |
+Cause: Unexpected character "<""
 `;
 
 exports[`upper-case.html [vue] format 1`] = `
@@ -25,5 +27,6 @@ exports[`upper-case.html [vue] format 1`] = `
      |                     ^^^^^^^^
    9 |   </div>
   10 | </body>
-  11 |   <script src="https://unpkg.com/vue/dist/vue.js"></script>"
+  11 |   <script src="https://unpkg.com/vue/dist/vue.js"></script>
+Cause: Void elements do not have end tags "Input""
 `;

tests/format/mjml/parse/mj-raw/__snapshots__/format.test.js.snap

@@ -8,7 +8,8 @@ exports[`invalid-in-html.mjml [html] format 1`] = `
     |         ^^^^
   4 |
   5 | <MJ-RAW><P></MJ-RAW>
-  6 | <MJ-TEXT>WRAPPED</MJ-TEXT>"
+  6 | <MJ-TEXT>WRAPPED</MJ-TEXT>
+Cause: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags"
 `;
 
 exports[`invalid-in-html.mjml format 1`] = `

tests/format/mjml/parse/mj-style/__snapshots__/format.test.js.snap

@@ -7,7 +7,8 @@ exports[`invalid-in-html.mjml [html] format 1`] = `
     |                         ^^^^
   3 |   }
   4 | </mj-style>
-  5 |"
+  5 |
+Cause: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags"
 `;
 
 exports[`invalid-in-html.mjml format 1`] = `

yarn.lock

@@ -2834,10 +2834,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"angular-html-parser@npm:8.1.0":
-  version: 8.1.0
-  resolution: "angular-html-parser@npm:8.1.0"
-  checksum: 10/670c1937c5d95465d6594eb9e3e15495efab8c1a77e4317701ac3d1a8cf4654026376ed6de430e7873aff40f4d2ad7531398346a21fbe571d75a302acc6dd940
+"angular-html-parser@npm:9.3.0":
+  version: 9.3.0
+  resolution: "angular-html-parser@npm:9.3.0"
+  checksum: 10/454226af9bebf86f73647ee99b21245397cb37a7a1cab7e6dfa3f96db0e5e597bc547e6a9f9b5ecc9cfef8d5fa568be4cb34396737721b2e9ee1d67ddca0a11f
   languageName: node
   linkType: hard
 
@@ -7334,7 +7334,7 @@ __metadata:
     acorn: "npm:8.15.0"
     acorn-jsx: "npm:5.3.2"
     angular-estree-parser: "npm:13.0.4"
-    angular-html-parser: "npm:8.1.0"
+    angular-html-parser: "npm:9.3.0"
     browserslist: "npm:4.26.3"
     browserslist-to-esbuild: "npm:2.1.1"
     buffer: "npm:6.0.3"