Extract rule: template-modifier-name-case

NullVoxPopuli · NullVoxPopuli · commit 905fbdaf3b85 · 2026-02-17T18:57:32.000-05:00
diff --git a/README.md b/README.md
@@ -322,13 +322,14 @@ rules in templates can be disabled with eslint directives with mustache or html
 
 ### Stylistic Issues
 
-| Name                                                               | Description                                                    | 💼 | 🔧 | 💡 |
-| :----------------------------------------------------------------- | :------------------------------------------------------------- | :- | :- | :- |
-| [order-in-components](docs/rules/order-in-components.md)           | enforce proper order of properties in components               |    | 🔧 |    |
-| [order-in-controllers](docs/rules/order-in-controllers.md)         | enforce proper order of properties in controllers              |    | 🔧 |    |
-| [order-in-models](docs/rules/order-in-models.md)                   | enforce proper order of properties in models                   |    | 🔧 |    |
-| [order-in-routes](docs/rules/order-in-routes.md)                   | enforce proper order of properties in routes                   |    | 🔧 |    |
-| [template-attribute-order](docs/rules/template-attribute-order.md) | enforce consistent ordering of attributes in template elements |    |    |    |
+| Name                                                                     | Description                                                    | 💼 | 🔧 | 💡 |
+| :----------------------------------------------------------------------- | :------------------------------------------------------------- | :- | :- | :- |
+| [order-in-components](docs/rules/order-in-components.md)                 | enforce proper order of properties in components               |    | 🔧 |    |
+| [order-in-controllers](docs/rules/order-in-controllers.md)               | enforce proper order of properties in controllers              |    | 🔧 |    |
+| [order-in-models](docs/rules/order-in-models.md)                         | enforce proper order of properties in models                   |    | 🔧 |    |
+| [order-in-routes](docs/rules/order-in-routes.md)                         | enforce proper order of properties in routes                   |    | 🔧 |    |
+| [template-attribute-order](docs/rules/template-attribute-order.md)       | enforce consistent ordering of attributes in template elements |    |    |    |
+| [template-modifier-name-case](docs/rules/template-modifier-name-case.md) | require dasherized names for modifiers                         |    | 🔧 |    |
 
 ### Testing
 
diff --git a/docs/rules/template-modifier-name-case.md b/docs/rules/template-modifier-name-case.md
@@ -0,0 +1,47 @@
+# 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).
+
+<!-- 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:
+
+```hbs
+<div {{didInsert}}></div>
+```
+
+```hbs
+<div {{onFocus}}></div>
+```
+
+```hbs
+<div {{modifier 'didInsert'}}></div>
+```
+
+This rule **allows** the following:
+
+```hbs
+<div {{did-insert}}></div>
+```
+
+```hbs
+<div {{on-focus}}></div>
+```
+
+```hbs
+<div {{modifier 'did-insert'}}></div>
+```
+
+## 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,102 @@
+/* eslint-disable unicorn/consistent-function-scoping, eslint-plugin/no-unused-message-ids */
+
+function dasherize(str) {
+  return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require dasherized names for modifiers',
+      category: 'Stylistic Issues',
+      strictGjs: true,
+      strictGts: true,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-modifier-name-case.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      dasherized:
+        'Use dasherized names for modifier invocation. Please replace `{{dasherizeModifierName}}` with `{{dasherizeModifierName}}`.',
+    },
+  },
+
+  create(context) {
+    function generateErrorMessage(modifierName) {
+      const dasherizedName = dasherize(modifierName);
+      return `Use dasherized names for modifier invocation. Please replace \`${modifierName}\` with \`${dasherizedName}\`.`;
+    }
+
+    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)) {
+          context.report({
+            node,
+            message: generateErrorMessage(modifierName),
+            fix(fixer) {
+              const dasherizedName = dasherize(modifierName);
+              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)) {
+            context.report({
+              node: nameParam,
+              message: generateErrorMessage(modifierName),
+              fix(fixer) {
+                const dasherizedName = dasherize(modifierName);
+                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)) {
+            context.report({
+              node: nameParam,
+              message: generateErrorMessage(modifierName),
+              fix(fixer) {
+                const dasherizedName = dasherize(modifierName);
+                return fixer.replaceTextRange(nameParam.range, `"${dasherizedName}"`);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+/* eslint-enable unicorn/consistent-function-scoping, eslint-plugin/no-unused-message-ids */
diff --git a/tests/lib/rules/template-modifier-name-case.js b/tests/lib/rules/template-modifier-name-case.js
@@ -0,0 +1,59 @@
+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, {
+  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>',
+  ],
+  invalid: [
+    {
+      code: '<template><div {{didInsert}}></div></template>',
+      output: '<template><div {{did-insert}}></div></template>',
+      errors: [
+        {
+          message:
+            'Use dasherized names for modifier invocation. Please replace `didInsert` with `did-insert`.',
+        },
+      ],
+    },
+    {
+      code: '<template><div {{doSomething}}></div></template>',
+      output: '<template><div {{do-something}}></div></template>',
+      errors: [
+        {
+          message:
+            'Use dasherized names for modifier invocation. Please replace `doSomething` with `do-something`.',
+        },
+      ],
+    },
+    {
+      code: '<template><div {{fooBar}}></div></template>',
+      output: '<template><div {{foo-bar}}></div></template>',
+      errors: [
+        {
+          message:
+            'Use dasherized names for modifier invocation. Please replace `fooBar` with `foo-bar`.',
+        },
+      ],
+    },
+    {
+      code: '<template><div {{(modifier "didInsert")}}></div></template>',
+      output: '<template><div {{(modifier "did-insert")}}></div></template>',
+      errors: [
+        {
+          message:
+            'Use dasherized names for modifier invocation. Please replace `didInsert` with `did-insert`.',
+        },
+      ],
+    },
+  ],
+});
