Extract rule: template-no-class-bindings

README.md

@@ -192,22 +192,23 @@ rules in templates can be disabled with eslint directives with mustache or html
 
 ### Best Practices
 
-| Name                                                                                                   | Description                                                     | 💼 | 🔧 | 💡 |
-| :----------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :- | :- | :- |
-| [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md)             | disallow setting certain attributes on builtin components       |    |    |    |
-| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md)                             | disallow usage of {{action}} modifiers                          |    |    |    |
-| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md)       | disallow @arguments on HTML elements                            |    |    |    |
-| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md)         | disallow usage of Ember Array prototype extensions              |    |    |    |
-| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements                          |    |    |    |
-| [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md)                           | disallow capital arguments (use lowercase @arg instead of @Arg) |    |    |    |
-| [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-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                |    |    |    |
-| [template-no-input-tagname](docs/rules/template-no-input-tagname.md)                                   | disallow tagName attribute on {{input}} helper                  |    |    |    |
-| [template-no-log](docs/rules/template-no-log.md)                                                       | disallow {{log}} in templates                                   |    |    |    |
+| Name                                                                                                   | Description                                                                  | 💼 | 🔧 | 💡 |
+| :----------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :- | :- | :- |
+| [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md)             | disallow setting certain attributes on builtin components                    |    |    |    |
+| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md)                             | disallow usage of {{action}} modifiers                                       |    |    |    |
+| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md)       | disallow @arguments on HTML elements                                         |    |    |    |
+| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md)         | disallow usage of Ember Array prototype extensions                           |    |    |    |
+| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements                                       |    |    |    |
+| [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md)                           | disallow capital arguments (use lowercase @arg instead of @Arg)              |    |    |    |
+| [template-no-chained-this](docs/rules/template-no-chained-this.md)                                     | disallow redundant `this.this` in templates                                  |    | 🔧 |    |
+| [template-no-class-bindings](docs/rules/template-no-class-bindings.md)                                 | disallow passing classBinding or classNameBindings as arguments 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-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                             |    |    |    |
+| [template-no-input-tagname](docs/rules/template-no-input-tagname.md)                                   | disallow tagName attribute on {{input}} helper                               |    |    |    |
+| [template-no-log](docs/rules/template-no-log.md)                                                       | disallow {{log}} in templates                                                |    |    |    |
 
 ### Components
 

docs/rules/template-no-class-bindings.md

@@ -0,0 +1,41 @@
+# ember/template-no-class-bindings
+
+<!-- end auto-generated rule header -->
+
+> **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.
+
+Disallow passing `classBinding` or `classNameBindings` as arguments within templates. These are legacy Ember Classic patterns that should be replaced with modern approaches.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+<SomeThing @classBinding='isActive:active' />
+```
+
+```hbs
+{{some-thing classNameBindings='isActive:active:inactive'}}
+```
+
+```hbs
+<SomeThing @classNameBindings='isActive:active:inactive' />
+```
+
+This rule **allows** the following:
+
+```hbs
+<SomeThing class={{if this.isActive 'active'}} />
+```
+
+```hbs
+<SomeThing />
+```
+
+## Migration
+
+- find in templates and remove `classBinding` and/or `classNameBindings`.
+
+## References
+
+- [ember-template-lint no-class-bindings](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-class-bindings.md)

lib/rules/template-no-class-bindings.js

@@ -0,0 +1,56 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow passing classBinding or classNameBindings as arguments in templates',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-class-bindings.md',
+      templateMode: 'loose',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noClassBindings:
+        'Passing the `{{name}}` property as an argument within templates is not allowed.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-class-bindings.js',
+      docs: 'docs/rule/no-class-bindings.md',
+      tests: 'test/unit/rules/no-class-bindings-test.js',
+    },
+  },
+
+  create(context) {
+    const FORBIDDEN_ATTR_NAMES = new Set([
+      'classBinding',
+      '@classBinding',
+      'classNameBindings',
+      '@classNameBindings',
+    ]);
+
+    const FORBIDDEN_HASH_KEYS = new Set(['classBinding', 'classNameBindings']);
+
+    return {
+      'GlimmerElementNode > GlimmerAttrNode'(node) {
+        if (FORBIDDEN_ATTR_NAMES.has(node.name)) {
+          context.report({
+            node,
+            messageId: 'noClassBindings',
+            data: { name: node.name },
+          });
+        }
+      },
+      GlimmerHashPair(node) {
+        if (FORBIDDEN_HASH_KEYS.has(node.key)) {
+          context.report({
+            node,
+            messageId: 'noClassBindings',
+            data: { name: node.key },
+          });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-class-bindings.js

@@ -0,0 +1,113 @@
+const rule = require('../../../lib/rules/template-no-class-bindings');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-class-bindings', rule, {
+  valid: [
+    '<template><SomeThing /></template>',
+    '<template>{{lol-wat}}</template>',
+    '<template>{{true}}</template>',
+    '<template>{{"hehe"}}</template>',
+    '<template><div class="foo"></div></template>',
+  ],
+  invalid: [
+    {
+      code: '<template>{{some-thing classBinding="lol:wat"}}</template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noClassBindings',
+          data: { name: 'classBinding' },
+        },
+      ],
+    },
+    {
+      code: '<template><SomeThing @classBinding="lol:wat" /></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noClassBindings',
+          data: { name: '@classBinding' },
+        },
+      ],
+    },
+    {
+      code: '<template>{{some-thing classNameBindings="lol:foo:bar"}}</template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noClassBindings',
+          data: { name: 'classNameBindings' },
+        },
+      ],
+    },
+    {
+      code: '<template><SomeThing @classNameBindings="lol:foo:bar" /></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noClassBindings',
+          data: { name: '@classNameBindings' },
+        },
+      ],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-class-bindings', rule, {
+  valid: ['<SomeThing />', '{{lol-wat}}', '{{true}}', '{{"hehe"}}'],
+  invalid: [
+    {
+      code: '{{some-thing classBinding="lol:wat"}}',
+      output: null,
+      errors: [
+        {
+          message:
+            'Passing the `classBinding` property as an argument within templates is not allowed.',
+        },
+      ],
+    },
+    {
+      code: '<SomeThing @classBinding="lol:wat" />',
+      output: null,
+      errors: [
+        {
+          message:
+            'Passing the `@classBinding` property as an argument within templates is not allowed.',
+        },
+      ],
+    },
+    {
+      code: '{{some-thing classNameBindings="lol:foo:bar"}}',
+      output: null,
+      errors: [
+        {
+          message:
+            'Passing the `classNameBindings` property as an argument within templates is not allowed.',
+        },
+      ],
+    },
+    {
+      code: '<SomeThing @classNameBindings="lol:foo:bar" />',
+      output: null,
+      errors: [
+        {
+          message:
+            'Passing the `@classNameBindings` property as an argument within templates is not allowed.',
+        },
+      ],
+    },
+  ],
+});