fix(no-use-computed-property-like-method): extract LogicalExpression (#…

…2438)
vuejs · Apr 14, 2024 · 52e0770 · 52e0770
1 parent 45ce14e
commit 52e0770
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 18 deletions.
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
@@ -68,26 +68,39 @@ function resolvedExpressions(context, node) {
    * @returns {Iterable<Expression>}
    */
   function* extractResolvedExpressions(node) {
-    if (node.type === 'Identifier') {
-      const variable = utils.findVariableByIdentifier(context, node)
-      if (variable) {
-        for (const ref of variable.references) {
-          const id = ref.identifier
-          if (id.parent.type === 'VariableDeclarator') {
-            if (id.parent.id === id && id.parent.init) {
-              yield* resolvedExpressionsInternal(id.parent.init)
+    switch (node.type) {
+      case 'Identifier': {
+        const variable = utils.findVariableByIdentifier(context, node)
+        if (variable) {
+          for (const ref of variable.references) {
+            const id = ref.identifier
+            if (id.parent.type === 'VariableDeclarator') {
+              if (id.parent.id === id && id.parent.init) {
+                yield* resolvedExpressionsInternal(id.parent.init)
+              }
+            } else if (
+              id.parent.type === 'AssignmentExpression' &&
+              id.parent.left === id
+            ) {
+              yield* resolvedExpressionsInternal(id.parent.right)
             }
-          } else if (
-            id.parent.type === 'AssignmentExpression' &&
-            id.parent.left === id
-          ) {
-            yield* resolvedExpressionsInternal(id.parent.right)
           }
         }
+
+        break
+      }
+      case 'ConditionalExpression': {
+        yield* resolvedExpressionsInternal(node.consequent)
+        yield* resolvedExpressionsInternal(node.alternate)
+
+        break
+      }
+      case 'LogicalExpression': {
+        yield* resolvedExpressionsInternal(node.left)
+        yield* resolvedExpressionsInternal(node.right)
+
+        break
       }
-    } else if (node.type === 'ConditionalExpression') {
-      yield* resolvedExpressionsInternal(node.consequent)
-      yield* resolvedExpressionsInternal(node.alternate)
     }
   }
 }
@@ -103,7 +116,7 @@ function resolvedExpressions(context, node) {
  * props: {
  *   propA: String, // => String
  *   propB: {
- *     type: Number // => String
+ *     type: Number // => Number
  *   },
  * }
  */
@@ -189,7 +202,6 @@ function maybeFunction(context, node) {
       expr.type === 'Literal' ||
       expr.type === 'TemplateLiteral' ||
       expr.type === 'BinaryExpression' ||
-      expr.type === 'LogicalExpression' ||
       expr.type === 'UnaryExpression' ||
       expr.type === 'UpdateExpression'
     ) {

diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -564,6 +564,78 @@ tester.run('no-use-computed-property-like-method', rule, {
         }
       </script>
       `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction || this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction || this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
     }
   ],
   invalid: [
@@ -1096,6 +1168,42 @@ tester.run('no-use-computed-property-like-method', rule, {
       </script>
       `,
       errors: ['Use x instead of x().']
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsNumber: {
+              type: Number
+            },
+            propsString: {
+              type: String
+            },
+          },
+          computed: {
+            computedReturnNotFunction1() {
+              return this.propsString ? this.propsString : this.propsNumber
+            },
+            computedReturnNotFunction2() {
+              return this.propsString || this.propsNumber
+            },
+          },
+          methods: {
+            fn() {
+              this.computedReturnNotFunction1()
+              this.computedReturnNotFunction2()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnNotFunction1 instead of this.computedReturnNotFunction1().',
+        'Use this.computedReturnNotFunction2 instead of this.computedReturnNotFunction2().'
+      ]
     }
   ]
 })