Limit modifer-name-case to only hbs

Author: NullVoxPopuli

docs/rules/template-modifier-name-case.md

@@ -2,6 +2,8 @@
 
 🔧 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.

lib/rules/template-modifier-name-case.js

@@ -22,7 +22,7 @@ module.exports = {
       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: 'both',
+      templateMode: 'loose',
     },
     fixable: 'code',
     schema: [],
@@ -39,6 +39,11 @@ module.exports = {
   },
 
   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'

tests/lib/rules/template-modifier-name-case.js

@@ -7,13 +7,14 @@ const ruleTester = new RuleTester({
 });
 
 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>',
@@ -24,69 +25,14 @@ ruleTester.run('template-modifier-name-case', rule, {
     '<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: [
-    {
-      code: '<template><div {{didInsert}}></div></template>',
-      output: '<template><div {{did-insert}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{doSomething}}></div></template>',
-      output: '<template><div {{do-something}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{fooBar}}></div></template>',
-      output: '<template><div {{foo-bar}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    // PascalCase: index-0 guard prevents leading dash
-    {
-      code: '<template><div {{FooBar}}></div></template>',
-      output: '<template><div {{foo-bar}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{XFoo}}></div></template>',
-      output: '<template><div {{x-foo}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    // Namespaced :: → /
-    {
-      code: '<template><div {{Foo::barBaz}}></div></template>',
-      output: '<template><div {{foo/bar-baz}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{(modifier "didInsert")}}></div></template>',
-      output: '<template><div {{(modifier "did-insert")}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-
-    {
-      code: '<template><div class="monkey" {{didInsert "something" with="somethingElse"}}></div></template>',
-      output:
-        '<template><div class="monkey" {{did-insert "something" with="somethingElse"}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><a href="#" onclick={{amazingActionThing "foo"}} {{doSomething}}></a></template>',
-      output:
-        '<template><a href="#" onclick={{amazingActionThing "foo"}} {{do-something}}></a></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{(modifier "fooBar")}}></div></template>',
-      output: '<template><div {{(modifier "foo-bar")}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-    {
-      code: '<template><div {{(if this.foo (modifier "fooBar"))}}></div></template>',
-      output: '<template><div {{(if this.foo (modifier "foo-bar"))}}></div></template>',
-      errors: [{ messageId: 'dasherized' }],
-    },
-  ],
+  invalid: [],
 });
 
 const hbsRuleTester = new RuleTester({
@@ -99,46 +45,55 @@ const hbsRuleTester = new RuleTester({
 
 hbsRuleTester.run('template-modifier-name-case', rule, {
   valid: [
-    '<div {{did-insert}}></div>',
-    '<div {{did-insert "something"}}></div>',
-    '<div {{did-insert action=something}}></div>',
-    '<button {{on "click" somethingAmazing}}></button>',
-    '<button onclick={{do-a-thing "foo"}}></button>',
-    '<button onclick={{doAThing "foo"}}></button>',
-    '<a href="#" onclick={{amazingActionThing "foo"}} {{did-insert}}></a>',
-    '<div didInsert></div>',
-    '<div {{(modifier "foo-bar")}}></div>',
-    '<div {{(if this.foo (modifier "foo-bar"))}}></div>',
-    '<div {{(modifier this.fooBar)}}></div>',
+    { 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' }],