Merge pull request #2617 from NullVoxPopuli/nvp/template-lint-extract-rule-template-self-closing-void-elements

Extract rule: template-self-closing-void-elements

Author: NullVoxPopuli

README.md

@@ -245,6 +245,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-obsolete-elements](docs/rules/template-no-obsolete-elements.md)                                 | disallow obsolete HTML elements                                              |    |    |    |
 | [template-no-outlet-outside-routes](docs/rules/template-no-outlet-outside-routes.md)                         | disallow {{outlet}} outside of route templates                               |    |    |    |
 | [template-no-page-title-component](docs/rules/template-no-page-title-component.md)                           | disallow usage of ember-page-title component                                 |    |    |    |
+| [template-self-closing-void-elements](docs/rules/template-self-closing-void-elements.md)                     | require self-closing on void elements                                        |    | 🔧 |    |
 | [template-simple-modifiers](docs/rules/template-simple-modifiers.md)                                         | require simple modifier syntax                                               |    |    |    |
 | [template-simple-unless](docs/rules/template-simple-unless.md)                                               | require simple conditions in unless blocks                                   |    |    |    |
 | [template-splat-attributes-only](docs/rules/template-splat-attributes-only.md)                               | disallow ...spread other than ...attributes                                  |    |    |    |

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

@@ -0,0 +1,46 @@
+# ember/template-self-closing-void-elements
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+Disallow or require self-closing void elements.
+
+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
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <img src="http://emberjs.com/images/ember-logo.svg" alt="ember" />
+  <hr />
+</template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  <img src="http://emberjs.com/images/ember-logo.svg" alt="ember">
+  <hr>
+</template>
+```
+
+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.
+
+## Configuration
+
+The following values are valid configuration:
+
+- boolean -- `true` for enabled / `false` for disabled
+- string -- `"require"` to mandate the use of self-closing tags
+
+## References
+
+- [HTML spec/void elements](https://html.spec.whatwg.org/#void-elements)

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

@@ -0,0 +1,96 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require self-closing on void elements',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-self-closing-void-elements.md',
+      templateMode: 'both',
+    },
+    fixable: 'code',
+    schema: [
+      {
+        oneOf: [{ type: 'boolean' }, { type: 'string', enum: ['require'] }],
+      },
+    ],
+    messages: {
+      redundantSelfClosing: 'Self-closing a void element is redundant',
+      requireSelfClosing: 'Self-closing a void element is required',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/self-closing-void-elements.js',
+      docs: 'docs/rule/self-closing-void-elements.md',
+      tests: 'test/unit/rules/self-closing-void-elements-test.js',
+    },
+  },
+
+  create(context) {
+    const VOID_ELEMENTS = new Set([
+      'area',
+      'base',
+      'br',
+      'col',
+      'command',
+      'embed',
+      'hr',
+      'img',
+      'input',
+      'keygen',
+      'link',
+      'meta',
+      'param',
+      'source',
+      'track',
+      'wbr',
+    ]);
+
+    const sourceCode = context.sourceCode;
+    const config = context.options[0] ?? true;
+
+    if (config === false) {
+      return {};
+    }
+
+    const requireSelfClosing = config === 'require';
+
+    return {
+      GlimmerElementNode(node) {
+        if (!VOID_ELEMENTS.has(node.tag)) {
+          return;
+        }
+
+        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);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};