Merge pull request #2531 from johanrd/autofix/no-array-prototype-extensions

Restore autofix: `template-no-array-prototype-extensions`

Author: NullVoxPopuli

README.md

@@ -206,7 +206,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [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.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-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                                    |    |    |    |
 | [template-no-bare-strings](docs/rules/template-no-bare-strings.md)                                           | disallow bare strings in templates (require translation/localization)        |    |    |    |
 | [template-no-bare-yield](docs/rules/template-no-bare-yield.md)                                               | disallow templates whose only meaningful content is a bare {{yield}}         |    |    |    |

docs/rules/template-no-array-prototype-extensions.md

@@ -1,5 +1,7 @@
 # ember/template-no-array-prototype-extensions
 
+🔧 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 -->
 
 💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

lib/rules/template-no-array-prototype-extensions.js

@@ -59,6 +59,20 @@ function isGetHelperWithMatchedLiteral(node, matchedStr) {
   return false;
 }
 
+/**
+ * Build a `get` helper call string from a path containing `firstObject`.
+ * e.g. "this.items.firstObject" => { target: "this.items", key: "0" }
+ * e.g. "this.items.firstObject.name" => { target: "this.items", key: "0.name" }
+ */
+function buildGetHelperParts(originalPath) {
+  const parts = originalPath.split('.');
+  const firstObjectIndex = parts.indexOf(FIRST_OBJECT_PROP_NAME);
+  const target = parts.slice(0, firstObjectIndex).join('.');
+  const afterParts = ['0', ...parts.slice(firstObjectIndex + 1)];
+  const key = afterParts.join('.');
+  return { target, key };
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -70,7 +84,7 @@ module.exports = {
       strictGts: true,
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-array-prototype-extensions.md',
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
       lastObject: ERROR_MESSAGES.LAST_OBJECT,
@@ -79,6 +93,8 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
     return {
       GlimmerPathExpression(node) {
         if (!node.original) {
@@ -96,14 +112,50 @@ module.exports = {
           });
         }
 
-        // Handle firstObject
-        if (
-          !isAllowed(node.original, FIRST_OBJECT_PROP_NAME) ||
-          isGetHelperWithMatchedLiteral(node, FIRST_OBJECT_PROP_NAME)
-        ) {
+        // Handle firstObject — with autofix
+        const isGetWithFirstObject = isGetHelperWithMatchedLiteral(node, FIRST_OBJECT_PROP_NAME);
+
+        if (!isAllowed(node.original, FIRST_OBJECT_PROP_NAME) || isGetWithFirstObject) {
           context.report({
             node,
             messageId: 'firstObject',
+            fix(fixer) {
+              const parent = node.parent;
+
+              // Case 1: get helper with firstObject in string literal
+              // e.g. {{get @list "items.firstObject"}} => {{get @list "items.0"}}
+              if (isGetWithFirstObject) {
+                const literalNode = parent.params[1];
+                const literalText = sourceCode.getText(literalNode);
+                // Detect quote character used in source
+                const quote = literalText[0];
+                const literalValue = literalNode.value || literalNode.original;
+                const newValue = literalValue
+                  .split('.')
+                  .map((part) => (part === FIRST_OBJECT_PROP_NAME ? '0' : part))
+                  .join('.');
+                return fixer.replaceText(literalNode, `${quote}${newValue}${quote}`);
+              }
+
+              // Case 2: PathExpression is the path of a MustacheStatement
+              // e.g. {{this.items.firstObject}} => {{get this.items "0"}}
+              // e.g. {{this.items.firstObject.name}} => {{get this.items "0.name"}}
+              if (parent && parent.type === 'GlimmerMustacheStatement' && parent.path === node) {
+                const { target, key } = buildGetHelperParts(node.original);
+                const newText = `{{get ${target} "${key}"}}`;
+                return fixer.replaceText(parent, newText);
+              }
+
+              // Case 3: PathExpression used as a subexpression argument or other context
+              // e.g. {{helper this.items.firstObject}} => {{helper (get this.items "0")}}
+              if (parent) {
+                const { target, key } = buildGetHelperParts(node.original);
+                const newText = `(get ${target} "${key}")`;
+                return fixer.replaceText(node, newText);
+              }
+
+              return null;
+            },
           });
         }
       },

tests/lib/rules/template-no-array-prototype-extensions.js

@@ -17,15 +17,72 @@ ruleTester.run('template-no-array-prototype-extensions', rule, {
   ],
 
   invalid: [
+    // firstObject — basic path in MustacheStatement
     {
       code: '<template>{{this.items.firstObject}}</template>',
-      output: null,
+      output: '<template>{{get this.items "0"}}</template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — path with trailing property
+    {
+      code: '<template>{{this.items.firstObject.name}}</template>',
+      output: '<template>{{get this.items "0.name"}}</template>',
       errors: [{ messageId: 'firstObject' }],
     },
+    // firstObject — deeper path
+    {
+      code: '<template>{{this.model.items.firstObject}}</template>',
+      output: '<template>{{get this.model.items "0"}}</template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — in get helper string literal
+    {
+      code: '<template>{{get @model "items.firstObject"}}</template>',
+      output: '<template>{{get @model "items.0"}}</template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — in get helper string literal with trailing property
+    {
+      code: '<template>{{get @model "items.firstObject.name"}}</template>',
+      output: '<template>{{get @model "items.0.name"}}</template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — in hash argument context
+    {
+      code: '<template>{{foo bar=this.list.firstObject}}</template>',
+      output: '<template>{{foo bar=(get this.list "0")}}</template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — @arg prefix path
+    {
+      code: '<template><Foo @bar={{@list.firstObject}} /></template>',
+      output: '<template><Foo @bar={{get @list "0"}} /></template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — deeper path with trailing properties
+    {
+      code: '<template><Foo @bar={{this.list.firstObject.name.foo}} /></template>',
+      output: '<template><Foo @bar={{get this.list "0.name.foo"}} /></template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — subexpression param context
+    {
+      code: '<template><div data-test={{eq this.list.firstObject.abc "def"}}>Hello</div></template>',
+      output:
+        '<template><div data-test={{eq (get this.list "0.abc") "def"}}>Hello</div></template>',
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // lastObject — no fix available
     {
       code: '<template>{{this.users.lastObject}}</template>',
       output: null,
       errors: [{ messageId: 'lastObject' }],
     },
+    // lastObject — deeper path, no fix
+    {
+      code: '<template>{{this.users.lastObject.name}}</template>',
+      output: null,
+      errors: [{ messageId: 'lastObject' }],
+    },
   ],
 });