fix(eslint-plugin-template): [prefer-self-closing-tags] improve code …

…style of fixer result (#1520)
angular-eslint · Sep 16, 2023 · 6a86f19 · 6a86f19
1 parent 470e12b
commit 6a86f19
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/packages/eslint-plugin-template/docs/rules/prefer-self-closing-tags.md b/packages/eslint-plugin-template/docs/rules/prefer-self-closing-tags.md
@@ -118,6 +118,37 @@ The rule does not have any configuration options.
 ~~~~~~~~~~~~~~~
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-self-closing-tags": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<my-component
+  type="text"
+  [name]="foo"
+  [items]="items"
+></my-component>
+ ~~~~~~~~~~~~~~~
+```
+
 </details>
 
 <br>

diff --git a/packages/eslint-plugin-template/src/rules/prefer-self-closing-tags.ts b/packages/eslint-plugin-template/src/rules/prefer-self-closing-tags.ts
@@ -61,13 +61,19 @@ export default createESLintRule<[], typeof MESSAGE_ID>({
           return;
         }
 
+        // HTML tags always have more than two characters
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const openingTagLastChar = startSourceSpan.toString().at(-2)!;
+        const hasOwnWhitespace = openingTagLastChar.trim() === '';
+        const closingTagPrefix = hasOwnWhitespace ? '' : ' ';
+
         context.report({
           loc: parserServices.convertNodeSourceSpanToLoc(endSourceSpan),
           messageId: MESSAGE_ID,
           fix: (fixer) =>
             fixer.replaceTextRange(
               [startSourceSpan.end.offset - 1, endSourceSpan.end.offset],
-              ' />',
+              closingTagPrefix + '/>',
             ),
         });
       },

diff --git a/packages/eslint-plugin-template/tests/rules/prefer-self-closing-tags/cases.ts b/packages/eslint-plugin-template/tests/rules/prefer-self-closing-tags/cases.ts
@@ -61,4 +61,25 @@ export const invalid = [
     `,
     messageId,
   }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'it should fail if the opening and closing tag are on the same new line',
+    annotatedSource: `
+      <my-component
+        type="text"
+        [name]="foo"
+        [items]="items"
+      ></my-component>
+       ~~~~~~~~~~~~~~~
+    `,
+    annotatedOutput: `
+      <my-component
+        type="text"
+        [name]="foo"
+        [items]="items"
+      />
+       
+    `,
+    messageId,
+  }),
 ];