Merge pull request #2452 from NullVoxPopuli/nvp/template-lint-extract-rule-template-modifier-name-case

NullVoxPopuli · web-flow · commit f71806b088d8 · 2026-03-13T15:01:01.000-04:00
Extract rule: template-modifier-name-case
diff --git a/README.md b/README.md
@@ -403,6 +403,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-block-indentation](docs/rules/template-block-indentation.md)         | enforce consistent indentation for block statements and their children         |    |    |    |
 | [template-eol-last](docs/rules/template-eol-last.md)                           | require or disallow newline at the end of template files                       |    | 🔧 |    |
 | [template-linebreak-style](docs/rules/template-linebreak-style.md)             | enforce consistent linebreaks in templates                                     |    | 🔧 |    |
+| [template-modifier-name-case](docs/rules/template-modifier-name-case.md)       | require dasherized names for modifiers                                         |    | 🔧 |    |
 | [template-no-only-default-slot](docs/rules/template-no-only-default-slot.md)   | disallow using only the default slot                                           |    | 🔧 |    |
 
 ### Testing
diff --git a/docs/rules/template-modifier-name-case.md b/docs/rules/template-modifier-name-case.md
@@ -0,0 +1,41 @@
+# ember/template-modifier-name-case
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+> **HBS Only**: This rule applies to classic `.hbs` template files only (loose mode). It is not relevant for `gjs`/`gts` files (strict mode), where these patterns cannot occur.
+
+<!-- end auto-generated rule header -->
+
+Requires dasherized names for modifiers.
+
+Modifiers should use dasherized names when being invoked, not camelCase. This is a stylistic rule that will prevent you from using camelCase modifiers, requiring you to use dasherized modifier names instead.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template><div {{didInsert}}></div></template>
+```
+
+```gjs
+<template><div {{onFocus}}></div></template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template><div {{did-insert}}></div></template>
+```
+
+```gjs
+<template><div {{on-focus}}></div></template>
+```
+
+## See Also
+
+- [named-functions-in-promises](named-functions-in-promises.md)
+
+## References
+
+- [Template syntax guide - Modifiers](https://guides.emberjs.com/release/components/template-syntax/#toc_modifiers)
diff --git a/lib/rules/template-modifier-name-case.js b/lib/rules/template-modifier-name-case.js
@@ -0,0 +1,120 @@
+/* eslint-disable unicorn/consistent-function-scoping */
+
+const SIMPLE_DASHERIZE_REGEXP = /[A-Z]/g;
+const ALPHA = /[A-Za-z]/;
+
+function dasherize(key) {
+  return key
+    .replaceAll(SIMPLE_DASHERIZE_REGEXP, (char, index) => {
+      if (index === 0 || !ALPHA.test(key[index - 1])) {
+        return char.toLowerCase();
+      }
+      return `-${char.toLowerCase()}`;
+    })
+    .replaceAll('::', '/');
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require dasherized names for modifiers',
+      category: 'Stylistic Issues',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-modifier-name-case.md',
+      templateMode: 'loose',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      dasherized:
+        'Use dasherized names for modifier invocation. Please replace `{{modifierName}}` with `{{dasherizedName}}`.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/modifier-name-case.js',
+      docs: 'docs/rule/modifier-name-case.md',
+      tests: 'test/unit/rules/modifier-name-case-test.js',
+    },
+  },
+
+  create(context) {
+    const filename = context.filename ?? context.getFilename();
+    if (!filename.endsWith('.hbs')) {
+      return {};
+    }
+
+    function isModifierHelper(node) {
+      return (
+        node.path && node.path.type === 'GlimmerPathExpression' && node.path.original === 'modifier'
+      );
+    }
+
+    return {
+      GlimmerElementModifierStatement(node) {
+        const modifierName = node.path?.original;
+
+        if (typeof modifierName === 'string' && modifierName !== dasherize(modifierName)) {
+          const dasherizedName = dasherize(modifierName);
+          context.report({
+            node,
+            messageId: 'dasherized',
+            data: { modifierName, dasherizedName },
+            fix(fixer) {
+              return fixer.replaceTextRange(node.path.range, dasherizedName);
+            },
+          });
+        }
+      },
+
+      GlimmerSubExpression(node) {
+        if (!isModifierHelper(node)) {
+          return;
+        }
+
+        const nameParam = node.params?.[0];
+
+        if (nameParam && nameParam.type === 'GlimmerStringLiteral') {
+          const modifierName = nameParam.value;
+
+          if (typeof modifierName === 'string' && modifierName !== dasherize(modifierName)) {
+            const dasherizedName = dasherize(modifierName);
+            context.report({
+              node: nameParam,
+              messageId: 'dasherized',
+              data: { modifierName, dasherizedName },
+              fix(fixer) {
+                return fixer.replaceTextRange(nameParam.range, `"${dasherizedName}"`);
+              },
+            });
+          }
+        }
+      },
+
+      GlimmerMustacheStatement(node) {
+        if (!isModifierHelper(node)) {
+          return;
+        }
+
+        const nameParam = node.params?.[0];
+
+        if (nameParam && nameParam.type === 'GlimmerStringLiteral') {
+          const modifierName = nameParam.value;
+
+          if (typeof modifierName === 'string' && modifierName !== dasherize(modifierName)) {
+            const dasherizedName = dasherize(modifierName);
+            context.report({
+              node: nameParam,
+              messageId: 'dasherized',
+              data: { modifierName, dasherizedName },
+              fix(fixer) {
+                return fixer.replaceTextRange(nameParam.range, `"${dasherizedName}"`);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+/* eslint-enable unicorn/consistent-function-scoping */
diff --git a/tests/lib/rules/template-modifier-name-case.js b/tests/lib/rules/template-modifier-name-case.js
@@ -0,0 +1,102 @@
+const rule = require('../../../lib/rules/template-modifier-name-case');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-modifier-name-case', rule, {
+  // Rule is HBS-only: hyphenated identifiers are not valid JS, so camelCase
+  // modifier names in .gjs/.gts files are intentional and must not be flagged.
+  valid: [
+    '<template><div {{did-insert}}></div></template>',
+    '<template><div {{did-update}}></div></template>',
+    '<template><div {{on-click}}></div></template>',
+    '<template><div {{(modifier "did-insert")}}></div></template>',
+    '<template><div {{(modifier "on-click")}}></div></template>',
+    '<template><div {{did-insert "something"}}></div></template>',
+    '<template><div {{did-insert action=something}}></div></template>',
+    '<template><button {{on "click" somethingAmazing}}></button></template>',
+    '<template><button onclick={{do-a-thing "foo"}}></button></template>',
+    '<template><button onclick={{doAThing "foo"}}></button></template>',
+    '<template><a href="#" onclick={{amazingActionThing "foo"}} {{did-insert}}></a></template>',
+    '<template><div didInsert></div></template>',
+    '<template><div {{(modifier "foo-bar")}}></div></template>',
+    '<template><div {{(if this.foo (modifier "foo-bar"))}}></div></template>',
+    '<template><div {{(modifier this.fooBar)}}></div></template>',
+    // camelCase modifiers in GJS are not flagged — hyphenated names are invalid JS identifiers
+    '<template><div {{didInsert}}></div></template>',
+    '<template><div {{doSomething}}></div></template>',
+    '<template><div {{fooBar}}></div></template>',
+    '<template><div {{FooBar}}></div></template>',
+    '<template><div {{(modifier "fooBar")}}></div></template>',
+  ],
+  invalid: [],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-modifier-name-case', rule, {
+  valid: [
+    { filename: 'test.hbs', code: '<div {{did-insert}}></div>' },
+    { filename: 'test.hbs', code: '<div {{did-insert "something"}}></div>' },
+    { filename: 'test.hbs', code: '<div {{did-insert action=something}}></div>' },
+    { filename: 'test.hbs', code: '<button {{on "click" somethingAmazing}}></button>' },
+    { filename: 'test.hbs', code: '<button onclick={{do-a-thing "foo"}}></button>' },
+    { filename: 'test.hbs', code: '<button onclick={{doAThing "foo"}}></button>' },
+    {
+      filename: 'test.hbs',
+      code: '<a href="#" onclick={{amazingActionThing "foo"}} {{did-insert}}></a>',
+    },
+    { filename: 'test.hbs', code: '<div didInsert></div>' },
+    { filename: 'test.hbs', code: '<div {{(modifier "foo-bar")}}></div>' },
+    { filename: 'test.hbs', code: '<div {{(if this.foo (modifier "foo-bar"))}}></div>' },
+    { filename: 'test.hbs', code: '<div {{(modifier this.fooBar)}}></div>' },
+  ],
+  invalid: [
+    {
+      filename: 'test.hbs',
+      code: '<div {{didInsert}}></div>',
+      output: '<div {{did-insert}}></div>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+    {
+      filename: 'test.hbs',
+      code: '<div class="monkey" {{didInsert "something" with="somethingElse"}}></div>',
+      output: '<div class="monkey" {{did-insert "something" with="somethingElse"}}></div>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+    // PascalCase: index-0 guard prevents leading dash
+    {
+      filename: 'test.hbs',
+      code: '<div {{FooBar}}></div>',
+      output: '<div {{foo-bar}}></div>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+    {
+      filename: 'test.hbs',
+      code: '<a href="#" onclick={{amazingActionThing "foo"}} {{doSomething}}></a>',
+      output: '<a href="#" onclick={{amazingActionThing "foo"}} {{do-something}}></a>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+    {
+      filename: 'test.hbs',
+      code: '<div {{(modifier "fooBar")}}></div>',
+      output: '<div {{(modifier "foo-bar")}}></div>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+    {
+      filename: 'test.hbs',
+      code: '<div {{(if this.foo (modifier "fooBar"))}}></div>',
+      output: '<div {{(if this.foo (modifier "foo-bar"))}}></div>',
+      errors: [{ messageId: 'dasherized' }],
+    },
+  ],
+});
