From 5c7ebacdffbec39a234679ee39400fc4c0bc3c3d Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 09:56:52 +0800 Subject: [PATCH 1/6] Add tests --- tests/format/angular/self-closing/jsfmt.spec.js | 1 + .../angular/self-closing/self-closing.component.html | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 tests/format/angular/self-closing/jsfmt.spec.js create mode 100644 tests/format/angular/self-closing/self-closing.component.html diff --git a/tests/format/angular/self-closing/jsfmt.spec.js b/tests/format/angular/self-closing/jsfmt.spec.js new file mode 100644 index 000000000000..b802ad8670c5 --- /dev/null +++ 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 new file mode 100644 index 000000000000..4bba9c8de42e --- /dev/null +++ b/tests/format/angular/self-closing/self-closing.component.html @@ -0,0 +1,7 @@ + + + + + +
+
From e0f9f600812b802e839e76d73d8a213e0c9e1f58 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 09:59:17 +0800 Subject: [PATCH 2/6] `recognizeSelfClosing` -> `canSelfClose` --- src/language-html/parser-html.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js index 5763fe7c72b9..e964ebdbe7aa 100644 --- 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 & { * 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,7 +405,7 @@ module.exports = { parsers: { html: createParser({ name: "html", - recognizeSelfClosing: true, + canSelfClose: true, normalizeTagName: true, normalizeAttributeName: true, allowHtmComponentClosingTags: true, @@ -413,7 +413,7 @@ module.exports = { angular: createParser({ name: "angular" }), vue: createParser({ name: "vue", - recognizeSelfClosing: true, + canSelfClose: true, isTagNameCaseSensitive: true, getTagContentType: (tagName, prefix, hasParent, attrs) => { if ( From 03d9b90a03442927f5048955d4ae4a06c3640dde Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 10:00:21 +0800 Subject: [PATCH 3/6] Allow self-closing in angular --- src/language-html/parser-html.js | 2 +- .../__snapshots__/jsfmt.spec.js.snap | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js index e964ebdbe7aa..a959d6e11cd2 100644 --- a/src/language-html/parser-html.js +++ b/src/language-html/parser-html.js @@ -410,7 +410,7 @@ module.exports = { normalizeAttributeName: true, allowHtmComponentClosingTags: true, }), - angular: createParser({ name: "angular" }), + angular: createParser({ name: "angular", canSelfClose: true }), vue: createParser({ name: "vue", canSelfClose: true, diff --git a/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000000..84c6f1000a4d --- /dev/null +++ b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`self-closing.component.html format 1`] = ` +====================================options===================================== +parsers: ["angular"] +printWidth: 80 + | printWidth +=====================================input====================================== + + + + + +
+
+ +=====================================output===================================== + + + + + +
+
+ +================================================================================ +`; From 37ff7db1067a1411157f846a4255ddc201ed7675 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 10:04:12 +0800 Subject: [PATCH 4/6] More tests --- .../self-closing/__snapshots__/jsfmt.spec.js.snap | 9 +++++++++ .../angular/self-closing/self-closing.component.html | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap index 84c6f1000a4d..f4a624bed741 100644 --- a/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/angular/self-closing/__snapshots__/jsfmt.spec.js.snap @@ -8,20 +8,29 @@ printWidth: 80 =====================================input====================================== + +
+
=====================================output===================================== + +
+
================================================================================ `; diff --git a/tests/format/angular/self-closing/self-closing.component.html b/tests/format/angular/self-closing/self-closing.component.html index 4bba9c8de42e..06e1d53f7657 100644 --- a/tests/format/angular/self-closing/self-closing.component.html +++ b/tests/format/angular/self-closing/self-closing.component.html @@ -1,7 +1,13 @@ + +
+
From 821e74e6dab989b9d239424af17ed5de31fc2731 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 10:04:24 +0800 Subject: [PATCH 5/6] Add changelog --- changelog_unreleased/angular/14170.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 changelog_unreleased/angular/14170.md diff --git a/changelog_unreleased/angular/14170.md b/changelog_unreleased/angular/14170.md new file mode 100644 index 000000000000..4f393d97542b --- /dev/null +++ b/changelog_unreleased/angular/14170.md @@ -0,0 +1,16 @@ +#### Allow self closing tags in angular template (#14170 by @fisker) + + +```html +// Input + + +// Prettier stable +SyntaxError: Only void and foreign elements can be self closed "app-test" (1:1) +> 1 | + | ^^^^^^^^^ + 2 | + +// Prettier main + +``` From b31fd56491e16d6752e94252419f585fcb8899b7 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Fri, 13 Jan 2023 10:06:29 +0800 Subject: [PATCH 6/6] Add link --- changelog_unreleased/angular/14170.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/changelog_unreleased/angular/14170.md b/changelog_unreleased/angular/14170.md index 4f393d97542b..471169c7dbfe 100644 --- a/changelog_unreleased/angular/14170.md +++ b/changelog_unreleased/angular/14170.md @@ -1,4 +1,6 @@ -#### Allow self closing tags in angular template (#14170 by @fisker) +#### 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. ```html