feat: refactor rule

Author: tyankatsu0105

docs/rules/no-use-computed-property-like-method.md

@@ -56,6 +56,44 @@ This rule disallows to use computed property like method.
       },
     },
     computed: {
+      computedReturnDataString() {
+        return this.dataString
+      },
+      computedReturnDataNumber() {
+        return this.dataNumber
+      },
+      computedReturnDataObject() {
+        return this.dataObject
+      },
+      computedReturnDataArray() {
+        return this.dataArray
+      },
+      computedReturnDataBoolean() {
+        return this.dataBoolean
+      },
+      computedReturnDataFunction() {
+        return this.dataFunction
+      },
+
+      computedReturnPropsString() {
+        return this.propsString
+      },
+      computedReturnPropsNumber() {
+        return this.propsNumber
+      },
+      computedReturnPropsObject() {
+        return this.propsObject
+      },
+      computedReturnPropsArray() {
+        return this.propsArray
+      },
+      computedReturnPropsBoolean() {
+        return this.propsBoolean
+      },
+      computedReturnPropsFunction() {
+        return this.propsFunction
+      },
+
       computedReturnString() {
         return 'computedReturnString'
       },
@@ -76,7 +114,24 @@ This rule disallows to use computed property like method.
       computedReturnFunction() {
         const fn = () => alert('computedReturnFunction')
         return fn
+      },
+
+      computedReturnMethodsReturnString() {
+        return this.methodsReturnString
+      },
+      computedReturnMethodsReturnNumber() {
+        return this.methodsReturnNumber
+      },
+      computedReturnMethodsReturnObject() {
+        return this.methodsReturnObject
+      },
+      computedReturnMethodsReturnArray() {
+        return this.methodsReturnArray
+      },
+      computedReturnMethodsReturnBoolean() {
+        return this.methodsReturnBoolean
       }
+
     },
     methods: {
       methodsReturnString() {
@@ -97,7 +152,137 @@ This rule disallows to use computed property like method.
         return true
       },
       methodsReturnFunction() {
-        console.log(this.dataObject.inside);
+        const fn = () => alert('methodsReturnFunction')
+        return fn
+      },
+
+      fn() {
+        /* Reference data */
+        /* ✓ GOOD */
+        this.computedReturnDataString
+        this.computedReturnDataNumber
+        this.computedReturnDataObject
+        this.computedReturnDataArray
+        this.computedReturnDataBoolean
+        this.computedReturnDataFunction
+        this.computedReturnDataFunction()
+        /* ✗ BAD */
+        this.computedReturnDataString()
+        this.computedReturnDataNumber()
+        this.computedReturnDataObject()
+        this.computedReturnDataArray()
+        this.computedReturnDataBoolean()
+
+        /* Reference props */
+        /* ✓ GOOD */
+        this.computedReturnPropsString
+        this.computedReturnPropsNumber
+        this.computedReturnPropsObject
+        this.computedReturnPropsArray
+        this.computedReturnPropsBoolean
+        this.computedReturnPropsFunction
+        this.computedReturnPropsFunction()
+        /* ✗ BAD */
+        this.computedReturnPropsString()
+        this.computedReturnPropsNumber()
+        this.computedReturnPropsObject()
+        this.computedReturnPropsArray()
+        this.computedReturnPropsBoolean()
+
+        /* ✓ GOOD */
+        this.computedReturnString
+        this.computedReturnNumber
+        this.computedReturnObject
+        this.computedReturnArray
+        this.computedReturnBoolean
+        this.computedReturnFunction
+        this.computedReturnFunction()
+        /* ✗ BAD */
+        this.computedReturnString()
+        this.computedReturnNumber()
+        this.computedReturnObject()
+        this.computedReturnArray()
+        this.computedReturnBoolean()
+
+        /* Reference methods */
+        /* ✓ GOOD */
+        this.computedReturnMethodsReturnString
+        this.computedReturnMethodsReturnNumber
+        this.computedReturnMethodsReturnObject
+        this.computedReturnMethodsReturnArray
+        this.computedReturnMethodsReturnBoolean
+        this.computedReturnMethodsReturnFunction
+        this.computedReturnMethodsReturnFunction()
+        /* ✗ BAD */
+        this.computedReturnMethodsReturnString()
+        this.computedReturnMethodsReturnNumber()
+        this.computedReturnMethodsReturnObject()
+        this.computedReturnMethodsReturnArray()
+        this.computedReturnMethodsReturnBoolean()
+      }
+    }
+  }
+</script>
+```
+
+This rule can't check if props is used as array:
+</eslint-code-block>
+<eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
+
+```vue
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      "propsString",
+      "propsNumber",
+      "propsObject",
+      "propsArray",
+      "propsBoolean",
+      "propsFunction"
+    },
+    computed: {
+      computedReturnPropsString() {
+        return this.propsString
+      },
+      computedReturnPropsNumber() {
+        return this.propsNumber
+      },
+      computedReturnPropsObject() {
+        return this.propsObject
+      },
+      computedReturnPropsArray() {
+        return this.propsArray
+      },
+      computedReturnPropsBoolean() {
+        return this.propsBoolean
+      },
+      computedReturnPropsFunction() {
+        return this.propsFunction
+      },
+    },
+    methods: {
+      fn() {
+        /* Reference props */
+        /* ✓ GOOD */
+        this.computedReturnPropsString
+        this.computedReturnPropsString()
+        this.computedReturnPropsNumber
+        this.computedReturnPropsNumber()
+        this.computedReturnPropsObject
+        this.computedReturnPropsObject()
+        this.computedReturnPropsArray
+        this.computedReturnPropsArray()
+        this.computedReturnPropsBoolean
+        this.computedReturnPropsBoolean()
+        this.computedReturnPropsFunction
+        this.computedReturnPropsFunction()
+        /* ✗ BAD */
+        /* Nope. everything is GOOD!! */
       }
     }
   }

lib/rules/no-use-computed-property-like-method.js

@@ -11,8 +11,6 @@ const eslitUtils = require('eslint-utils')
 const utils = require('../utils')
 
 /**
- * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
- * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
  * @typedef {import('../utils').ComponentPropertyData} ComponentPropertyData
  * @typedef {import('../utils').ComponentObjectPropertyData} ComponentObjectPropertyData
  *
@@ -22,21 +20,6 @@ const utils = require('../utils')
 // Rule Definition
 // ------------------------------------------------------------------------------
 
-function replacer(key, value) {
-  if (key === 'parent') {
-    return undefined
-  }
-  if (key === 'errors' && Array.isArray(value)) {
-    return value.map((e) => ({
-      message: e.message,
-      index: e.index,
-      lineNumber: e.lineNumber,
-      column: e.column
-    }))
-  }
-  return value
-}
-
 /**
  *
  * @param {ComponentObjectPropertyData} property
@@ -70,32 +53,6 @@ const getComponetPropsType = (property) => {
 const getPrototypeType = (obj) =>
   Object.prototype.toString.call(obj).slice(8, -1)
 
-/**
- *
- * @param {Expression | Super} objectOrCallee
- * @returns {string | null}
- */
-// const getThisMember = (objectOrCallee) => {
-//   if (objectOrCallee.type === 'MemberExpression') {
-//     if (objectOrCallee.object.type === 'Identifier') return null
-
-//     if (
-//       objectOrCallee.object.type === 'ThisExpression' &&
-//       objectOrCallee.property.type === 'Identifier'
-//     )
-//       return objectOrCallee.property.name
-
-//     if (objectOrCallee.object.type === 'MemberExpression')
-//       getThisMember(objectOrCallee.object)
-//   }
-
-//   if (objectOrCallee.type === 'CallExpression') {
-//     if (objectOrCallee.callee.type === 'Identifier') return null
-
-//     getThisMember(objectOrCallee.callee)
-//   }
-// }
-
 /**
  * Get return type of property.
  * @param {{ property: ComponentPropertyData, propertyMap: ProprtyMap }} args
@@ -130,27 +87,13 @@ const getValueType = ({ property, propertyMap }) => {
         if (!returnStatement || returnStatement.type !== 'ReturnStatement')
           return
 
-        // if (property.groupName === 'computed') {
-        //   if (
-        //     propertyMap &&
-        //     propertyMap[property.name] &&
-        //     returnStatement.argument
-        //   ) {
-        //     const thisMember = getThisMember(returnStatement.argument)
-        //     return {
-        //       type: propertyMap[thisMember].valueType.type
-        //     }
-        //   }
-        // }
-
-        /**
-         * TODO: consider this.xxx.xxx().xxx.xxx().xxx().....
-         */
-        if (property.groupName === 'computed') {
+        if (
+          property.groupName === 'computed' &&
+          propertyMap &&
+          propertyMap[property.name] &&
+          returnStatement.argument
+        ) {
           if (
-            propertyMap &&
-            propertyMap[property.name] &&
-            returnStatement.argument &&
             returnStatement.argument.type === 'MemberExpression' &&
             returnStatement.argument.property.type === 'Identifier'
           )
@@ -161,9 +104,6 @@ const getValueType = ({ property, propertyMap }) => {
             }
 
           if (
-            propertyMap &&
-            propertyMap[property.name] &&
-            returnStatement.argument &&
             returnStatement.argument.type === 'CallExpression' &&
             returnStatement.argument.callee.type === 'MemberExpression' &&
             returnStatement.argument.callee.property.type === 'Identifier'
@@ -175,6 +115,18 @@ const getValueType = ({ property, propertyMap }) => {
             }
         }
 
+        /**
+         * Use value as Object even if object includes method
+         */
+        if (
+          property.groupName === 'computed' &&
+          returnStatement.argument.type === 'ObjectExpression'
+        ) {
+          return {
+            type: 'Object'
+          }
+        }
+
         const evaluated = eslitUtils.getStaticValue(returnStatement.argument)
 
         if (evaluated) {
@@ -223,11 +175,11 @@ module.exports = {
     const propertyMap = {}
 
     /**@type ObjectExpression */
-    let nodeMap = {}
+    let vueNodeMap = {}
 
     return utils.defineVueVisitor(context, {
       onVueObjectEnter(node) {
-        nodeMap = node
+        vueNodeMap = node
         const properties = utils.iterateProperties(node, groups)
 
         for (const property of properties) {
@@ -239,12 +191,12 @@ module.exports = {
         }
       },
 
-      /** @param {MemberExpression} node */
+      /**
+       * Re-check propertyMap's valueType.
+       * Because there is a possibility that propertyMap's member reference other propertyMap's member.
+       */
       'MemberExpression[object.type="ThisExpression"]'(node) {
-        if (node.parent.type !== 'CallExpression') return
-        if (node.property.type !== 'Identifier') return
-
-        const properties = utils.iterateProperties(nodeMap, groups)
+        const properties = utils.iterateProperties(vueNodeMap, groups)
 
         for (const property of properties) {
           propertyMap[property.name] = {
@@ -253,8 +205,16 @@ module.exports = {
             valueType: getValueType({ property, propertyMap })
           }
         }
+      },
+
+      /** @param {ThisExpression} node */
+      'ThisExpression[parent.type="MemberExpression"][parent.parent.type="CallExpression"]'(
+        node
+      ) {
+        if (node.parent.type !== 'MemberExpression') return
+        if (node.parent.property.type !== 'Identifier') return
 
-        const thisMember = node.property.name
+        const thisMember = node.parent.property.name
 
         if (!propertyMap[thisMember].valueType.type) return