Fix template-no-attrs-in-components: align detection with upstream

The port flagged this.attrs.* (which is not a real Ember API) and ran
on all templates. Upstream gates on file path (templates/components/,
components/*/template, ui/components/, -components/) and flags bare
attrs.* — the pre-Octane args-leakage pattern. Restore upstream's
behavior.

Author: johanrd

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

@@ -1,24 +1,42 @@
+const COMPONENT_TEMPLATE_REGEX = new RegExp(
+  'templates/components|components/.*/template|ui/components|-components/'
+);
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'disallow attrs in component templates',
       category: 'Deprecations',
-
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-attrs-in-components.md',
+      templateMode: 'loose',
     },
     schema: [],
     messages: {
-      noThisAttrs:
-        'Component templates should not contain `this.attrs`. Use `@arg` syntax instead.',
+      noAttrs: 'Component templates should not contain `attrs`.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-attrs-in-components.js',
+      docs: 'docs/rule/no-attrs-in-components.md',
+      tests: 'test/unit/rules/no-attrs-in-components-test.js',
     },
   },
   create(context) {
+    if (!COMPONENT_TEMPLATE_REGEX.test(context.filename)) {
+      return {};
+    }
     return {
       GlimmerPathExpression(node) {
-        if (node.original?.startsWith('this.attrs.') || node.original === 'this.attrs') {
-          context.report({ node, messageId: 'noThisAttrs' });
+        const original = node.original;
+        if (typeof original !== 'string') {
+          return;
+        }
+        // Flag bare `attrs` or `attrs.<something>` (pre-Octane args-leakage).
+        // Do NOT flag `this.attrs.*` — that is a different (non-existent) API.
+        if (original === 'attrs' || original.startsWith('attrs.')) {
+          context.report({ node, messageId: 'noAttrs' });
         }
       },
     };

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

@@ -8,40 +8,87 @@ const ruleTester = new RuleTester({
 
 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>
-     }`,
+    // Not a component template path: nothing is flagged, regardless of content.
+    {
+      code: '<template>{{@value}}</template>',
+      filename: 'app/templates/application.hbs',
+    },
+    {
+      code: '<template>{{this.value}}</template>',
+      filename: 'app/templates/application.hbs',
+    },
+    // `this.attrs.*` is not a real Ember API, but it is NOT what this rule
+    // targets — upstream only flags bare `attrs.*`. So outside of a component
+    // template, `this.attrs.*` should not be flagged.
+    {
+      code: '<template>{{this.attrs.foo}}</template>',
+      filename: 'app/templates/application.hbs',
+    },
+    // Even `attrs.*` itself is only flagged inside component templates.
+    {
+      code: '<template>{{attrs.value}}</template>',
+      filename: 'app/templates/application.hbs',
+    },
+    // Inside a component template, non-attrs paths are fine.
+    {
+      code: '<template>{{@value}}</template>',
+      filename: 'app/templates/components/foo.hbs',
+    },
+    {
+      code: '<template>{{this.value}}</template>',
+      filename: 'app/templates/components/foo.hbs',
+    },
+    // Upstream does NOT flag `this.attrs.*`; only bare `attrs.*`.
+    {
+      code: '<template>{{this.attrs.foo}}</template>',
+      filename: 'app/templates/components/foo.hbs',
+    },
+    // Pod-style components path matches the gate, but no `attrs` usage.
+    {
+      code: '<template>{{@value}}</template>',
+      filename: 'app/components/foo/template.hbs',
+    },
+    // `-components/` path gate, no `attrs` usage.
+    {
+      code: '<template>{{@value}}</template>',
+      filename: 'app/ui-components/foo.hbs',
+    },
   ],
   invalid: [
+    // Bare `attrs.*` inside `templates/components/` — flagged.
+    {
+      code: '<template>{{attrs.foo}}</template>',
+      filename: 'app/templates/components/foo.hbs',
+      output: null,
+      errors: [{ messageId: 'noAttrs' }],
+    },
+    // Bare `attrs` (no dotted tail) inside `templates/components/` — flagged.
+    {
+      code: '<template>{{attrs}}</template>',
+      filename: 'app/templates/components/foo.hbs',
+      output: null,
+      errors: [{ messageId: 'noAttrs' }],
+    },
+    // Pod-style path `components/*/template` — flagged.
     {
-      code: '<template>{{this.attrs.value}}</template>',
+      code: '<template>{{attrs.name}}</template>',
+      filename: 'app/components/foo/template.hbs',
       output: null,
-      errors: [{ messageId: 'noThisAttrs' }],
+      errors: [{ messageId: 'noAttrs' }],
     },
+    // `ui/components` path — flagged.
     {
-      code: '<template>{{this.attrs}}</template>',
+      code: '<template>{{attrs.name}}</template>',
+      filename: 'app/ui/components/foo.hbs',
       output: null,
-      errors: [{ messageId: 'noThisAttrs' }],
+      errors: [{ messageId: 'noAttrs' }],
     },
-    // Class component using this.attrs
+    // `-components/` path — flagged.
     {
-      code: `import Component from '@glimmer/component';
-       class MyComponent extends Component {
-         <template>{{this.attrs.name}}</template>
-       }`,
+      code: '<template>{{attrs.name}}</template>',
+      filename: 'app/ui-components/foo.hbs',
       output: null,
-      errors: [{ messageId: 'noThisAttrs' }],
+      errors: [{ messageId: 'noAttrs' }],
     },
   ],
 });