fix(eslint-plugin-template): [prefer-self-closing-tags] always ignore…

… index.html files (#1865)
angular-eslint · Jun 17, 2024 · acdc4a6 · acdc4a6
1 parent 2f9e378
commit acdc4a6
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
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
@@ -531,6 +531,34 @@ The rule does not have any configuration options.
 <ng-content select="my-selector" />
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-self-closing-tags": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+**Filename: src/index.html**
+
+```html
+<app-root></app-root>
+```
+
 </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
@@ -30,6 +30,11 @@ export default createESLintRule<[], typeof MESSAGE_ID>({
   create(context) {
     const parserServices = getTemplateParserServices(context);
 
+    // angular 18 doesnt support self closing tags in index.html
+    if (context.physicalFilename.endsWith('src/index.html')) {
+      // If it is, return an empty object to skip this rule
+      return {};
+    }
     return {
       'Element$1, Template, Content'(
         node: TmplAstElement | TmplAstTemplate | TmplAstContent,

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
@@ -16,6 +16,7 @@ export const valid = [
   '<ng-template>Content</ng-template>',
   '<ng-content/>',
   '<ng-content select="my-selector" />',
+  { code: '<app-root></app-root>', filename: 'src/index.html' },
 ];
 
 export const invalid = [

diff --git a/tools/scripts/generate-rule-docs.ts b/tools/scripts/generate-rule-docs.ts
@@ -244,6 +244,7 @@ type AllRuleData = {
 interface ExtractedTestCase {
   code: string;
   options?: unknown[];
+  filename?: string;
 }
 
 async function generateAllRuleData(): Promise<AllRuleData> {
@@ -325,6 +326,13 @@ async function generateAllRuleData(): Promise<AllRuleData> {
                 newExtractedTestCase.options =
                   convertArrayLiteralExpressionToCode(prop.initializer);
               }
+              if (
+                ts.isPropertyAssignment(prop) &&
+                prop.name.getText() === 'filename' &&
+                ts.isStringLiteral(prop.initializer)
+              ) {
+                newExtractedTestCase.filename = prop.initializer.text;
+              }
             });
           }
 
@@ -440,18 +448,18 @@ function convertCodeExamplesToMarkdown(
   ruleName: string,
 ): string {
   return codeExamples
-    .map(({ code, options }, i) => {
+    .map((extractedTestCase: ExtractedTestCase, i) => {
       let formattedCode = removeLeadingAndTrailingEmptyLinesFromCodeExample(
-        removeLeadingIndentationFromCodeExample(code),
+        removeLeadingIndentationFromCodeExample(extractedTestCase.code),
       );
       if (kind === 'invalid') {
         formattedCode = standardizeSpecialUnderlineChar(formattedCode);
       }
 
       const exampleRuleConfig: unknown[] = ['error'];
       // Not all unit tests have options configured
-      if (options) {
-        exampleRuleConfig.push(options[0]);
+      if (extractedTestCase.options) {
+        exampleRuleConfig.push(extractedTestCase.options[0]);
       }
       const formattedConfig = JSON.stringify(
         {
@@ -465,7 +473,7 @@ function convertCodeExamplesToMarkdown(
 
       return `<br>
 
-#### ${options ? 'Custom' : 'Default'} Config
+#### ${extractedTestCase.options ? 'Custom' : 'Default'} Config
 
 \`\`\`json
 ${formattedConfig}
@@ -475,6 +483,12 @@ ${formattedConfig}
 
 #### ${kind === 'invalid' ? '❌ Invalid' : '✅ Valid'} Code
 
+${
+  extractedTestCase.filename
+    ? `**Filename: ${extractedTestCase.filename}**`
+    : ''
+}
+
 \`\`\`${highligher}
 ${formattedCode}
 \`\`\`