Merge pull request #846 from bmish/require-computed-macros-optional-chaining

Support optional chaining in `require-computed-macros` rule

Author: bmish

lib/utils/property-getter.js

@@ -31,23 +31,30 @@ function isThisGetCall(node) {
 }
 
 /**
- * Checks if a MemberExpression node looks like `this.x` or `this.x.y` or `this.get('x')`.
+ * Checks if a MemberExpression node looks like:
+ * * `this.x`
+ * * `this.x.y`
+ * * `this.x?.y`
+ * * `this.get('x')`.
  *
  * @param {Node} node The MemberExpression node to check.
- * @returns {boolean} Whether the node looks like `this.x` or `this.x.y` or `this.get('x')`.
+ * @returns {boolean} Whether the node looks as expected.
  */
 function isSimpleThisExpression(node) {
   if (isThisGetCall(node)) {
     return true;
   }
 
-  if (!types.isMemberExpression(node)) {
+  if (!(types.isMemberExpression(node) || types.isOptionalMemberExpression(node))) {
     return false;
   }
 
   let current = node;
   while (current !== null) {
-    if (types.isMemberExpression(current) && !current.computed) {
+    if (
+      (types.isMemberExpression(current) || types.isOptionalMemberExpression(current)) &&
+      !current.computed
+    ) {
       if (!types.isIdentifier(current.property)) {
         return false;
       }
@@ -78,6 +85,9 @@ function nodeToDependentKey(nodeWithThisExpression, context) {
 
   const sourceCode = context.getSourceCode();
   return javascriptUtils.removeWhitespace(
-    sourceCode.getText(nodeWithThisExpression).replace(/^this\./, '')
+    sourceCode
+      .getText(nodeWithThisExpression)
+      .replace(/^this\./, '')
+      .replace(/\?\./g, '.') // Replace any optional chaining.
   );
 }

lib/utils/types.js

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

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

@@ -97,6 +97,8 @@ ruleTester.run('require-computed-macros', rule, {
 
     // MAPBY
     "mapBy('children', 'age')",
+    "computed(function() { return this.children?.mapBy('age'); })", // Ignored because function might not exist.
+    "computed(function() { return this.nested?.children.mapBy('age'); })", // Ignored because function might not exist.
 
     // Decorator (these are ignored when the `includeNativeGetters` option is off):
     "class Test { @computed('x') get someProp() { return this.x; } }",
@@ -126,6 +128,12 @@ ruleTester.run('require-computed-macros', rule, {
       output: "computed.reads('x')",
       errors: [{ message: ERROR_MESSAGE_READS, type: 'CallExpression' }],
     },
+    {
+      // Optional chaining.
+      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; } }",
@@ -155,6 +163,12 @@ ruleTester.run('require-computed-macros', rule, {
       output: "computed.and('x', 'y.z', 'w')",
       errors: [{ message: ERROR_MESSAGE_AND, type: 'CallExpression' }],
     },
+    {
+      // Optional chaining.
+      code: 'computed(function() { return this.x?.y && this.z; })',
+      output: "computed.and('x.y', 'z')",
+      errors: [{ message: ERROR_MESSAGE_AND, type: 'CallExpression' }],
+    },
     {
       // Decorator:
       code: 'class Test { @computed() get someProp() { return this.x && this.y; } }',
@@ -176,6 +190,12 @@ ruleTester.run('require-computed-macros', rule, {
       output: "computed.gt('x', 123)",
       errors: [{ message: ERROR_MESSAGE_GT, type: 'CallExpression' }],
     },
+    {
+      // Optional chaining:
+      code: 'computed(function() { return this.x?.y > 123; })',
+      output: "computed.gt('x.y', 123)",
+      errors: [{ message: ERROR_MESSAGE_GT, type: 'CallExpression' }],
+    },
     {
       // Decorator:
       code: 'class Test { @computed() get someProp() { return this.x > 123; } }',

tests/lib/utils/property-getter-test.js

@@ -16,10 +16,13 @@ describe('isSimpleThisExpression', () => {
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x[1]'))).toBeFalsy();
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x[i]'))).toBeFalsy();
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x.y[i]'))).toBeFalsy();
+    expect(propertyGetterUtils.isSimpleThisExpression(parse('this?.get()'))).toBeFalsy();
 
     // True:
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x'))).toBeTruthy();
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x.y'))).toBeTruthy();
+    expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x?.y'))).toBeTruthy();
+    expect(propertyGetterUtils.isSimpleThisExpression(parse('this.x?.y?.z'))).toBeTruthy();
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.get("property")'))).toBeTruthy();
     expect(propertyGetterUtils.isSimpleThisExpression(parse('this.get("x.y")'))).toBeTruthy();
   });
@@ -40,6 +43,7 @@ describe('isThisGetCall', () => {
     expect(
       propertyGetterUtils.isThisGetCall(parse('this.get("unexpected", "argument").something'))
     ).toBeFalsy();
+    expect(propertyGetterUtils.isThisGetCall(parse('this?.get("property")'))).toBeFalsy();
 
     // True:
     expect(propertyGetterUtils.isThisGetCall(parse('this.get("property")'))).toBeTruthy();