Apply PR Feedback

Author: NullVoxPopuli

README.md

@@ -202,7 +202,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [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-action-on-submit-button](docs/rules/template-no-action-on-submit-button.md)                     | disallow action attribute on submit buttons                                  |    |    |    |
-| [template-no-args-paths](docs/rules/template-no-args-paths.md)                                               | disallow @args in paths                                                      |    |    |    |
+| [template-no-args-paths](docs/rules/template-no-args-paths.md)                                               | disallow args.foo paths in templates, use @foo instead                       |    | 🔧 |    |
 | [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-at-ember-render-modifiers](docs/rules/template-no-at-ember-render-modifiers.md)                 | disallow usage of @ember/render-modifiers                                    |    |    |    |

docs/rules/template-no-args-paths.md

@@ -1,5 +1,7 @@
 # ember/template-no-args-paths
 
+🔧 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 -->
 
 Arguments that are passed to components are prefixed with the `@` symbol in Angle bracket syntax.

lib/rules/template-no-args-paths.js

@@ -3,13 +3,17 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'disallow @args in paths',
+      description: 'disallow args.foo paths in templates, use @foo instead',
       category: 'Best Practices',
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-args-paths.md',
       templateMode: 'both',
     },
+    fixable: 'code',
     schema: [],
-    messages: { argsPath: 'Do not use paths with @args, use @argName directly instead.' },
+    messages: {
+      argsPath:
+        'Component templates should avoid "{{path}}" usage, try "@{{replacement}}" instead.',
+    },
     originallyFrom: {
       name: 'ember-template-lint',
       rule: 'lib/rules/no-args-paths.js',
@@ -18,16 +22,75 @@ module.exports = {
     },
   },
   create(context) {
+    const localScopes = [];
+
+    function pushLocals(params) {
+      localScopes.push(new Set(params || []));
+    }
+
+    function popLocals() {
+      localScopes.pop();
+    }
+
+    function isLocal(name) {
+      for (const scope of localScopes) {
+        if (scope.has(name)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
     return {
+      GlimmerBlockStatement(node) {
+        if (node.program && node.program.blockParams) {
+          pushLocals(node.program.blockParams);
+        }
+      },
+      'GlimmerBlockStatement:exit'(node) {
+        if (node.program && node.program.blockParams) {
+          popLocals();
+        }
+      },
+
+      GlimmerElementNode(node) {
+        if (node.blockParams && node.blockParams.length > 0) {
+          pushLocals(node.blockParams);
+        }
+      },
+      'GlimmerElementNode:exit'(node) {
+        if (node.blockParams && node.blockParams.length > 0) {
+          popLocals();
+        }
+      },
+
       GlimmerPathExpression(node) {
         const path = node.original;
-        if (
-          path?.startsWith('@args.') ||
-          path?.startsWith('args.') ||
-          path?.startsWith('this.args.')
-        ) {
-          context.report({ node, messageId: 'argsPath' });
+
+        // @args.foo is a valid named argument — skip paths starting with @
+        if (node.head?.type === 'AtHead') {
+          return;
+        }
+
+        if (!path?.startsWith('args.') && !path?.startsWith('this.args.')) {
+          return;
+        }
+
+        // Skip when 'args' is a block param in the current scope
+        if (isLocal('args')) {
+          return;
         }
+
+        const replacement = path.replace(/^(this\.)?args\./, '');
+
+        context.report({
+          node,
+          messageId: 'argsPath',
+          data: { path, replacement },
+          fix(fixer) {
+            return fixer.replaceText(node, `@${replacement}`);
+          },
+        });
       },
     };
   },

tests/lib/rules/template-no-args-paths.js

@@ -8,6 +8,8 @@ const ruleTester = new RuleTester({
 ruleTester.run('template-no-args-paths', rule, {
   valid: [
     '<template>{{@foo}}</template>',
+    // @args.foo is a valid named argument, not a path violation
+    '<template>{{@args.foo}}</template>',
     '<template><div @foo={{cleanup this.args}}></div></template>',
     '<template>{{foo (name this.args)}}</template>',
     '<template>{{foo name=this.args}}</template>',
@@ -16,52 +18,48 @@ ruleTester.run('template-no-args-paths', rule, {
     '<template><Foo {{mod this.args}} /></template>',
     '<template><Foo {{mod items=this.args}} /></template>',
     '<template><Foo {{mod items=(extract this.args)}} /></template>',
+    // args as a block param is not flagged
+    '<template>{{#each items as |args|}}{{args.name}}{{/each}}</template>',
   ],
   invalid: [
-    {
-      code: '<template>{{@args.foo}}</template>',
-      output: null,
-      errors: [{ messageId: 'argsPath' }],
-    },
-
     {
       code: '<template>{{hello (format value=args.foo)}}</template>',
-      output: null,
+      output: '<template>{{hello (format value=@foo)}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{hello value=args.foo}}</template>',
-      output: null,
+      output: '<template>{{hello value=@foo}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{hello (format args.foo.bar)}}</template>',
-      output: null,
+      output: '<template>{{hello (format @foo.bar)}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template><br {{hello args.foo.bar}}></template>',
-      output: null,
+      output: '<template><br {{hello @foo.bar}}></template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{hello args.foo.bar}}</template>',
-      output: null,
+      output: '<template>{{hello @foo.bar}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{args.foo.bar}}</template>',
-      output: null,
+      output: '<template>{{@foo.bar}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{args.foo}}</template>',
-      output: null,
+      output: '<template>{{@foo}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<template>{{this.args.foo}}</template>',
-      output: null,
+      output: '<template>{{@foo}}</template>',
       errors: [{ messageId: 'argsPath' }],
     },
   ],
@@ -77,6 +75,8 @@ const hbsRuleTester = new RuleTester({
 
 hbsRuleTester.run('template-no-args-paths', rule, {
   valid: [
+    // @args.foo is a valid named argument
+    '{{@args.foo}}',
     '<div @foo={{cleanup this.args}}></div>',
     '{{foo (name this.args)}}',
     '{{foo name=this.args}}',
@@ -85,47 +85,49 @@ hbsRuleTester.run('template-no-args-paths', rule, {
     '<Foo {{mod this.args}} />',
     '<Foo {{mod items=this.args}} />',
     '<Foo {{mod items=(extract this.args)}} />',
+    // args as a block param is not flagged
+    '{{#each items as |args|}}{{args.name}}{{/each}}',
   ],
   invalid: [
     {
       code: '{{hello (format value=args.foo)}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{hello (format value=@foo)}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{hello value=args.foo}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{hello value=@foo}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{hello (format args.foo.bar)}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{hello (format @foo.bar)}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '<br {{hello args.foo.bar}}>',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '<br {{hello @foo.bar}}>',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{hello args.foo.bar}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{hello @foo.bar}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{args.foo.bar}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{@foo.bar}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{args.foo}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{@foo}}',
+      errors: [{ messageId: 'argsPath' }],
     },
     {
       code: '{{this.args.foo}}',
-      output: null,
-      errors: [{ message: 'Do not use paths with @args, use @argName directly instead.' }],
+      output: '{{@foo}}',
+      errors: [{ messageId: 'argsPath' }],
     },
   ],
 });