Sync with template-lint

Author: NullVoxPopuli

docs/rules/template-self-closing-void-elements.md

@@ -6,59 +6,41 @@
 
 Disallow or require self-closing void elements.
 
-## Rule Details
-
-Void elements (like `<img>`, `<br>`, `<input>`, etc.) cannot have child content. By default, this rule disallows redundant self-closing syntax (`/>`) on void elements since it's unnecessary in HTML.
-
-## Config
-
-This rule accepts a single option:
-
-- `true` (default) — disallow self-closing void elements (e.g., `<br />` → `<br>`)
-- `"require"` — require self-closing void elements (e.g., `<br>` → `<br />`)
+HTML has no self-closing tags. The HTML5 parser will ignore a self-closing marker on
+[void elements](https://html.spec.whatwg.org/#void-elements) (elements that should not
+have a closing tag), but it is unnecessary and can be confusing when mixed with
+SVG/XML-like syntax.
 
 ## Examples
 
-Examples of **incorrect** code for this rule (with default config):
+This rule **forbids** the following:
 
 ```gjs
 <template>
-  <img src="foo.jpg" />
+  <img src="http://emberjs.com/images/ember-logo.svg" alt="ember" />
+  <hr />
 </template>
 ```
 
-```gjs
-<template>
-  <br />
-</template>
-```
+This rule **allows** the following:
 
 ```gjs
 <template>
-  <input type="text" />
+  <img src="http://emberjs.com/images/ember-logo.svg" alt="ember">
+  <hr>
 </template>
 ```
 
-Examples of **correct** code for this rule (with default config):
+There may be cases where a self-closing tag is preferred for void elements. In those
+cases, pass the string `"require"` to require the self-closing form instead.
 
-```gjs
-<template>
-  <img src="foo.jpg">
-</template>
-```
+## Configuration
 
-```gjs
-<template>
-  <br>
-</template>
-```
+The following values are valid configuration:
 
-```gjs
-<template>
-  <input type="text">
-</template>
-```
+- boolean -- `true` for enabled / `false` for disabled
+- string -- `"require"` to mandate the use of self-closing tags
 
 ## References
 
-- [eslint-plugin-ember template-self-closing-void-elements](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-self-closing-void-elements.md)
+- [HTML spec/void elements](https://html.spec.whatwg.org/#void-elements)

lib/rules/template-self-closing-void-elements.js

@@ -15,8 +15,8 @@ module.exports = {
       },
     ],
     messages: {
-      redundantSelfClosing: 'Self-closing a void element is redundant.',
-      requireSelfClosing: 'Self-closing a void element is required.',
+      redundantSelfClosing: 'Self-closing a void element is redundant',
+      requireSelfClosing: 'Self-closing a void element is required',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -46,7 +46,13 @@ module.exports = {
       'wbr',
     ]);
 
-    const config = context.options[0];
+    const sourceCode = context.sourceCode;
+    const config = context.options[0] ?? true;
+
+    if (config === false) {
+      return {};
+    }
+
     const requireSelfClosing = config === 'require';
 
     return {
@@ -57,16 +63,30 @@ module.exports = {
 
         if (requireSelfClosing) {
           if (!node.selfClosing) {
+            const source = sourceCode.getText(node).trim();
+
             context.report({
               node,
               messageId: 'requireSelfClosing',
+              fix(fixer) {
+                return fixer.replaceText(node, source.replace(/>$/, '/>'));
+              },
             });
           }
         } else {
           if (node.selfClosing) {
+            const source = sourceCode.getText(node).trim();
+
             context.report({
               node,
               messageId: 'redundantSelfClosing',
+              fix(fixer) {
+                const replacement = node.blockParams?.length
+                  ? source.replace(/\/>$/, '>')
+                  : source.replace(/\s*\/>$/, '>');
+
+                return fixer.replaceText(node, replacement);
+              },
             });
           }
         }