Merge pull request #2407 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-attrs-in-components

Extract rule: template-no-attrs-in-components

Author: NullVoxPopuli

README.md

@@ -255,6 +255,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [no-old-shims](docs/rules/no-old-shims.md)                                                       | disallow usage of old shims for modules                   | ✅  | 🔧 |    |
 | [no-string-prototype-extensions](docs/rules/no-string-prototype-extensions.md)                   | disallow usage of `String` prototype extensions           | ✅  |    |    |
 | [template-no-action](docs/rules/template-no-action.md)                                           | disallow {{action}} helper                                |    |    |    |
+| [template-no-attrs-in-components](docs/rules/template-no-attrs-in-components.md)                 | disallow attrs in component templates                     |    |    |    |
 
 ### Ember Data
 

docs/rules/template-no-attrs-in-components.md

@@ -0,0 +1,23 @@
+# ember/template-no-attrs-in-components
+
+<!-- end auto-generated rule header -->
+
+This rule prevents the usage of `this.attrs` property to access values passed to the component. Use `@arg` syntax instead.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+{{this.attrs.foo}}
+```
+
+This rule **allows** the following:
+
+```hbs
+{{@foo}}
+```
+
+## References
+
+- [rfcs/named args](https://github.com/emberjs/rfcs/blob/master/text/0276-named-args.md#motivation)

lib/rules/template-no-attrs-in-components.js

@@ -0,0 +1,27 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow attrs in component templates',
+      category: 'Deprecations',
+      strictGjs: true,
+      strictGts: true,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-attrs-in-components.md',
+    },
+    schema: [],
+    messages: {
+      noThisAttrs:
+        'Component templates should not contain `this.attrs`. Use `@arg` syntax instead.',
+    },
+  },
+  create(context) {
+    return {
+      GlimmerPathExpression(node) {
+        if (node.original?.startsWith('this.attrs.') || node.original === 'this.attrs') {
+          context.report({ node, messageId: 'noThisAttrs' });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-attrs-in-components.js

@@ -0,0 +1,47 @@
+const rule = require('../../../lib/rules/template-no-attrs-in-components');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-attrs-in-components', rule, {
+  valid: [
+    '<template>{{@value}}</template>',
+    '<template>{{this.value}}</template>',
+    // Class component with normal this access
+    `import Component from '@glimmer/component';
+     class MyComponent extends Component {
+       <template>{{this.args.name}}</template>
+     }`,
+    // Bare attrs is not accessible without this, so it's allowed
+    '<template>{{attrs.value}}</template>',
+    '<template>{{attrs}}</template>',
+    `import Component from '@glimmer/component';
+     class MyComponent extends Component {
+       <template>{{attrs.name}}</template>
+     }`,
+  ],
+  invalid: [
+    {
+      code: '<template>{{this.attrs.value}}</template>',
+      output: null,
+      errors: [{ messageId: 'noThisAttrs' }],
+    },
+    {
+      code: '<template>{{this.attrs}}</template>',
+      output: null,
+      errors: [{ messageId: 'noThisAttrs' }],
+    },
+    // Class component using this.attrs
+    {
+      code: `import Component from '@glimmer/component';
+       class MyComponent extends Component {
+         <template>{{this.attrs.name}}</template>
+       }`,
+      output: null,
+      errors: [{ messageId: 'noThisAttrs' }],
+    },
+  ],
+});