feat: add optional chaining support to require-computed-property-dependencies rule

Author: bmish

lib/rules/require-computed-property-dependencies.js

@@ -224,8 +224,11 @@ function findThisGetCalls(node) {
   new Traverser().traverse(node, {
     enter(child, parent) {
       if (
-        types.isMemberExpression(child) &&
-        !(types.isCallExpression(parent) && parent.callee === child) &&
+        (types.isOptionalMemberExpression(child) || types.isMemberExpression(child)) &&
+        !(
+          (types.isCallExpression(parent) || types.isOptionalCallExpression(parent)) &&
+          parent.callee === child
+        ) &&
         !(types.isAssignmentExpression(child.parent) && child === parent.left) && // Ignore the left side (x) of an assignment: this.x = 123;
         propertyGetterUtils.isSimpleThisExpression(child)
       ) {

lib/utils/property-getter.js

@@ -87,7 +87,7 @@ function nodeToDependentKey(nodeWithThisExpression, context) {
   return javascriptUtils.removeWhitespace(
     sourceCode
       .getText(nodeWithThisExpression)
-      .replace(/^this\./, '')
+      .replace(/^this\??\./, '')
       .replace(/\?\./g, '.') // Replace any optional chaining.
   );
 }

lib/utils/types.js

@@ -29,6 +29,7 @@ module.exports = {
   isNewExpression,
   isObjectExpression,
   isObjectPattern,
+  isOptionalCallExpression,
   isOptionalMemberExpression,
   isProperty,
   isReturnStatement,
@@ -341,6 +342,16 @@ function isObjectPattern(node) {
   return node !== undefined && node.type === 'ObjectPattern';
 }
 
+/**
+ * Check whether or not a node is an OptionalCallExpression.
+ *
+ * @param {Object} node The node to check.
+ * @returns {boolean} Whether or not the node is an OptionalCallExpression.
+ */
+function isOptionalCallExpression(node) {
+  return node.type === 'OptionalCallExpression';
+}
+
 /**
  * Check whether or not a node is an OptionalMemberExpression.
  *

tests/lib/rules/require-computed-macros.js

@@ -134,6 +134,12 @@ ruleTester.run('require-computed-macros', rule, {
       output: "computed.reads('x.y.z')",
       errors: [{ message: ERROR_MESSAGE_READS, type: 'CallExpression' }],
     },
+    {
+      // Optional chaining unnecessarily used on `this`.
+      code: 'computed(function() { return this?.x?.y?.z; })',
+      output: "computed.reads('x.y.z')",
+      errors: [{ message: ERROR_MESSAGE_READS, type: 'CallExpression' }],
+    },
     {
       // Decorator:
       code: "class Test { @computed('x') get someProp() { return this.x; } }",

tests/lib/rules/require-computed-property-dependencies.js

@@ -25,6 +25,9 @@ ruleTester.run('require-computed-property-dependencies', rule, {
     "Ember.computed('name', function() { return this.get('name'); });",
     // String concatenation in dependent key:
     " Ember.computed('na' + 'me', function() { return this.get('name'); });",
+    // Optional chaining:
+    'Ember.computed(function() { return this?.someFunction(); });',
+    "Ember.computed('x.y', function() { return this?.x?.y });",
     // Without `Ember.`:
     "computed('name', function() {return this.get('name');});",
     `
@@ -880,5 +883,51 @@ ruleTester.run('require-computed-property-dependencies', rule, {
         },
       ],
     },
+
+    {
+      // Optional chaining:
+      code: 'computed(function() { return this.x?.y?.z; })',
+      output: "computed('x.y.z', function() { return this.x?.y?.z; })",
+      errors: [
+        {
+          message: 'Use of undeclared dependencies in computed property: x.y.z',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    {
+      // Optional chaining plus overlap with non-optional-chaining:
+      code: 'computed(function() { return this.x?.y?.z + this.x.y.foo; })',
+      output: "computed('x.y.{foo,z}', function() { return this.x?.y?.z + this.x.y.foo; })",
+      errors: [
+        {
+          message: 'Use of undeclared dependencies in computed property: x.y.foo, x.y.z',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    {
+      // Optional chaining with function call:
+      code: 'computed(function() { return this.x?.y?.someFunction(); })',
+      output: "computed('x.y', function() { return this.x?.y?.someFunction(); })",
+      errors: [
+        {
+          message: 'Use of undeclared dependencies in computed property: x.y',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    {
+      // Optional chaining with array/object access:
+      code: 'computed(function() { return this.x?.someArrayOrObject[index]; })',
+      output:
+        "computed('x.someArrayOrObject', function() { return this.x?.someArrayOrObject[index]; })",
+      errors: [
+        {
+          message: 'Use of undeclared dependencies in computed property: x.someArrayOrObject',
+          type: 'CallExpression',
+        },
+      ],
+    },
   ],
 });