Extract rule: template-no-html-comments

Author: NullVoxPopuli

README.md

@@ -203,6 +203,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-chained-this](docs/rules/template-no-chained-this.md)                                     | disallow redundant `this.this` in templates                     |    | 🔧 |    |
 | [template-no-debugger](docs/rules/template-no-debugger.md)                                             | disallow {{debugger}} in templates                              |    |    |    |
 | [template-no-element-event-actions](docs/rules/template-no-element-event-actions.md)                   | disallow element event actions (use {{on}} modifier instead)    |    |    |    |
+| [template-no-html-comments](docs/rules/template-no-html-comments.md)                                   | disallow HTML comments in templates                             |    | 🔧 |    |
 | [template-no-inline-event-handlers](docs/rules/template-no-inline-event-handlers.md)                   | disallow DOM event handler attributes                           |    |    |    |
 | [template-no-inline-styles](docs/rules/template-no-inline-styles.md)                                   | disallow inline styles                                          |    |    |    |
 | [template-no-input-placeholder](docs/rules/template-no-input-placeholder.md)                           | disallow placeholder attribute on input elements                |    |    |    |

docs/rules/template-no-html-comments.md

@@ -0,0 +1,41 @@
+# ember/template-no-html-comments
+
+🔧 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 HTML comments in templates. HTML comments will be visible in the rendered output, which may expose sensitive information or clutter the DOM.
+
+## Rule Details
+
+This rule disallows HTML comments (`<!-- -->`) in templates and suggests using Glimmer comments (`{{! }}` or `{{!-- --}}`) instead.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <!-- This is an HTML comment -->
+  <div>Content</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  {{! This is a Glimmer comment }}
+  <div>Content</div>
+</template>
+
+<template>
+  {{!-- This is a block Glimmer comment --}}
+  <div>Content</div>
+</template>
+```
+
+## References
+
+- [Ember guides/template features](https://guides.emberjs.com/release/components/#toc_supported-features)
+- [Handlebars docs/comments](https://handlebarsjs.com/guide/#template-comments)

lib/rules/template-no-html-comments.js

@@ -0,0 +1,71 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow HTML comments in templates',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-html-comments.md',
+      templateMode: 'both',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noHtmlComments:
+        'HTML comments should not be used in templates. Use Handlebars comments instead.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-html-comments.js',
+      docs: 'docs/rule/no-html-comments.md',
+      tests: 'test/unit/rules/no-html-comments-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      'Program:exit'(node) {
+        // Check for HTML comments in the source text
+        const sourceCode = context.sourceCode || context.getSourceCode();
+        const text = sourceCode.getText(node);
+
+        // Find all HTML comments in template blocks
+        const htmlCommentRegex = /<!--([\S\s]*?)-->/g;
+        let match;
+
+        const hasTemplateTag = text.includes('<template>');
+
+        while ((match = htmlCommentRegex.exec(text)) !== null) {
+          let isInTemplate = false;
+
+          if (hasTemplateTag) {
+            const beforeComment = text.slice(0, match.index);
+            const templateStart = beforeComment.lastIndexOf('<template>');
+            const templateEnd = text.indexOf('</template>', match.index);
+            isInTemplate = templateStart !== -1 && templateEnd !== -1;
+          } else {
+            // Standalone .hbs file — entire file is template content
+            isInTemplate = true;
+          }
+
+          if (isInTemplate) {
+            const commentContent = match[1];
+            const startIndex = match.index;
+            const endIndex = match.index + match[0].length;
+
+            context.report({
+              loc: {
+                start: sourceCode.getLocFromIndex(startIndex),
+                end: sourceCode.getLocFromIndex(endIndex),
+              },
+              messageId: 'noHtmlComments',
+              fix(fixer) {
+                return fixer.replaceTextRange([startIndex, endIndex], `{{!${commentContent}}}`);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-html-comments.js

@@ -0,0 +1,69 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-html-comments');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-html-comments', rule, {
+  valid: [
+    '<template>{{! This is a comment }}</template>',
+    '<template>{{!-- This is a comment --}}</template>',
+    '<template><div>Content</div></template>',
+
+    '<template>{{!-- comment here --}}</template>',
+    '<template>{{!--comment here--}}</template>',
+  ],
+  invalid: [
+    {
+      code: '<template><!-- HTML comment --></template>',
+      output: '<template>{{! HTML comment }}</template>',
+      errors: [{ messageId: 'noHtmlComments' }],
+    },
+
+    {
+      code: '<template><!-- comment here --></template>',
+      output: '<template>{{! comment here }}</template>',
+      errors: [{ messageId: 'noHtmlComments' }],
+    },
+    {
+      code: '<template><!--comment here--></template>',
+      output: '<template>{{!comment here}}</template>',
+      errors: [{ messageId: 'noHtmlComments' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-html-comments', rule, {
+  valid: [
+    '{{!-- comment here --}}',
+    '{{!--comment here--}}',
+    '{{! template-lint-disable no-bare-strings }}',
+    '{{! template-lint-disable }}',
+  ],
+  invalid: [
+    {
+      code: '<!-- comment here -->',
+      output: '{{! comment here }}',
+      errors: [{ messageId: 'noHtmlComments' }],
+    },
+    {
+      code: '<!--comment here-->',
+      output: '{{!comment here}}',
+      errors: [{ messageId: 'noHtmlComments' }],
+    },
+  ],
+});