Angular: allow self-closing tags on custom elements (#14170)

Fixes #14168
prettier · Jan 14, 2023 · 4ad9160 · 4ad9160
1 parent 06ea1ac
commit 4ad9160
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 11 deletions.
diff --git a/changelog_unreleased/angular/14170.md b/changelog_unreleased/angular/14170.md
@@ -0,0 +1,18 @@
+#### Allow self-closing tags on custom elements (#14170 by @fisker)
+
+See [Angular v15.1.0 release note](https://github.com/angular/angular/releases/tag/15.1.0) for details.
+
+<!-- prettier-ignore -->
+```html
+// Input
+<app-test/>
+
+// Prettier stable
+SyntaxError: Only void and foreign elements can be self closed "app-test" (1:1)
+> 1 | <app-test/>
+    | ^^^^^^^^^
+  2 |
+
+// Prettier main
+<app-test />
+```
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
@@ -24,7 +24,7 @@ const { locStart, locEnd } = require("./loc.js");
  * @typedef {import('angular-html-parser/lib/compiler/src/ml_parser/parser').ParseTreeResult} ParserTreeResult
  * @typedef {Omit<import('angular-html-parser').ParseOptions, 'canSelfClose'> & {
  *   name?: 'html' | 'angular' | 'vue' | 'lwc';
- *   recognizeSelfClosing?: boolean;
+ *   canSelfClose?: boolean;
  *   normalizeTagName?: boolean;
  *   normalizeAttributeName?: boolean;
  * }} ParserOptions
@@ -42,7 +42,7 @@ const { locStart, locEnd } = require("./loc.js");
 function ngHtmlParser(
   input,
   {
-    recognizeSelfClosing,
+    canSelfClose,
     normalizeTagName,
     normalizeAttributeName,
     allowHtmComponentClosingTags,
@@ -64,7 +64,7 @@ function ngHtmlParser(
   } = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
 
   let { rootNodes, errors } = parser.parse(input, {
-    canSelfClose: recognizeSelfClosing,
+    canSelfClose,
     allowHtmComponentClosingTags,
     isTagNameCaseSensitive,
     getTagContentType,
@@ -97,7 +97,7 @@ function ngHtmlParser(
         let secondParseResult;
         const doSecondParse = () =>
           parser.parse(input, {
-            canSelfClose: recognizeSelfClosing,
+            canSelfClose,
             allowHtmComponentClosingTags,
             isTagNameCaseSensitive,
           });
@@ -135,13 +135,13 @@ function ngHtmlParser(
       }
     } else {
       // If not Vue SFC, treat as html
-      recognizeSelfClosing = true;
+      canSelfClose = true;
       normalizeTagName = true;
       normalizeAttributeName = true;
       allowHtmComponentClosingTags = true;
       isTagNameCaseSensitive = false;
       const htmlParseResult = parser.parse(input, {
-        canSelfClose: recognizeSelfClosing,
+        canSelfClose,
         allowHtmComponentClosingTags,
         isTagNameCaseSensitive,
       });
@@ -373,7 +373,7 @@ function _parse(text, options, parserOptions, shouldParseFrontMatter = true) {
  */
 function createParser({
   name,
-  recognizeSelfClosing = false,
+  canSelfClose = false,
   normalizeTagName = false,
   normalizeAttributeName = false,
   allowHtmComponentClosingTags = false,
@@ -386,7 +386,7 @@ function createParser({
         text,
         { parser: name, ...options },
         {
-          recognizeSelfClosing,
+          canSelfClose,
           normalizeTagName,
           normalizeAttributeName,
           allowHtmComponentClosingTags,
@@ -405,15 +405,15 @@ module.exports = {
   parsers: {
     html: createParser({
       name: "html",
-      recognizeSelfClosing: true,
+      canSelfClose: true,
       normalizeTagName: true,
       normalizeAttributeName: true,
       allowHtmComponentClosingTags: true,
     }),
-    angular: createParser({ name: "angular" }),
+    angular: createParser({ name: "angular", canSelfClose: true }),
     vue: createParser({
       name: "vue",
-      recognizeSelfClosing: true,
+      canSelfClose: true,
       isTagNameCaseSensitive: true,
       getTagContentType: (tagName, prefix, hasParent, attrs) => {
         if (

diff --git a/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`self-closing.component.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<app-test/>
+<app-test />
+<app-test
+/>
+<img>
+<img/>
+<img />
+<img
+/>
+<div/>
+<div />
+<div
+/>
+
+=====================================output=====================================
+<app-test />
+<app-test />
+<app-test />
+<img />
+<img />
+<img />
+<img />
+<div />
+<div />
+<div />
+
+================================================================================
+`;
diff --git a/tests/format/angular/self-closing/jsfmt.spec.js b/tests/format/angular/self-closing/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["angular"]);
diff --git a/tests/format/angular/self-closing/self-closing.component.html b/tests/format/angular/self-closing/self-closing.component.html
@@ -0,0 +1,13 @@
+<app-test/>
+<app-test />
+<app-test
+/>
+<img>
+<img/>
+<img />
+<img
+/>
+<div/>
+<div />
+<div
+/>