feat: check return type of data props methods computed

tyankatsu0105 · tyankatsu0105 · commit 587d808eed1e · 2020-11-13T23:56:38.000+09:00
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
@@ -21,22 +21,83 @@ This rule disallows to use computed property like method.
 
 <script>
   export default {
+    data() {
+      return {
+        dataString: 'dataString',
+        dataNumber: 10,
+        dataObject: {
+          inside: "inside"
+        },
+        dataArray: [1,2,3,4,5],
+        dataBoolean: true,
+        dataFunction() {
+          alert('dataFunction')
+        }
+      }
+    },
     props: {
-      name: {
+      propsString: {
         type: String
       },
+      propsNumber: {
+        type: Number
+      },
+      propsObject: {
+        type: Object
+      },
+      propsArray: {
+        type: Array
+      },
+      propsBoolean: {
+        type: Boolean
+      },
+      propsFunction: {
+        type: Function
+      },
     },
     computed: {
-      isExpectedName() {
-        return this.name === 'name';
+      computedReturnString() {
+        return 'computedReturnString'
+      },
+      computedReturnNumber() {
+        return 10
+      },
+      computedReturnObject() {
+        return {
+          inside: "inside"
+        }
+      },
+      computedReturnArray() {
+        return [1,2,3,4,5]
+      },
+      computedReturnBoolean() {
+        return true
+      },
+      computedReturnFunction() {
+        const fn = () => alert('computedReturnFunction')
+        return fn
       }
     },
     methods: {
-      getName() {
-        return this.isExpectedName
+      methodsReturnString() {
+        return 'methodsReturnString'
+      },
+      methodsReturnNumber() {
+        return 'methodsReturnNumber'
+      },
+      methodsReturnObject() {
+        return {
+          inside: "inside"
+        }
+      },
+      methodsReturnArray() {
+        return [1,2,3,4,5]
+      },
+      methodsReturnBoolean() {
+        return true
       },
-      getNameCallLikeMethod() {
-        return this.isExpectedName()
+      methodsReturnFunction() {
+        console.log(this.dataObject.inside);
       }
     }
   }
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
@@ -7,18 +7,198 @@
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
-
-const { defineVueVisitor, getComputedProperties } = require('../utils')
+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
+ *
+ * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string } }}} ProprtyMap
  */
-
 // ------------------------------------------------------------------------------
 // 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
+ * @return {string | null}
+ */
+const getComponetPropsType = (property) => {
+  if (property.property.value.type === 'ObjectExpression') {
+    const propsTypeProperty = property.property.value.properties.find(
+      (property) =>
+        property.type === 'Property' &&
+        property.key.type === 'Identifier' &&
+        property.key.name === 'type' &&
+        property.value.type === 'Identifier'
+    )
+
+    if (propsTypeProperty === undefined) return null
+
+    if (
+      propsTypeProperty.type === 'Property' &&
+      propsTypeProperty.value.type === 'Identifier'
+    )
+      return propsTypeProperty.value.name
+  }
+  return null
+}
+
+/**
+ *
+ * @param {any} obj
+ */
+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
+ */
+const getValueType = ({ property, propertyMap }) => {
+  if (property.type === 'array') {
+    return {
+      type: null
+    }
+  }
+
+  if (property.type === 'object') {
+    if (property.groupName === 'props') {
+      return {
+        type: getComponetPropsType(property)
+      }
+    }
+
+    if (property.groupName === 'computed' || property.groupName === 'methods') {
+      if (
+        property.property.value.type === 'FunctionExpression' &&
+        property.property.value.body.type === 'BlockStatement'
+      ) {
+        const blockStatement = property.property.value.body
+
+        /**
+         * Only check return statement inside computed and methods
+         */
+        const returnStatement = blockStatement.body.find(
+          (b) => b.type === 'ReturnStatement'
+        )
+        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 (
+            propertyMap &&
+            propertyMap[property.name] &&
+            returnStatement.argument &&
+            returnStatement.argument.type === 'MemberExpression' &&
+            returnStatement.argument.property.type === 'Identifier'
+          )
+            return {
+              type:
+                propertyMap[returnStatement.argument.property.name].valueType
+                  .type
+            }
+
+          if (
+            propertyMap &&
+            propertyMap[property.name] &&
+            returnStatement.argument &&
+            returnStatement.argument.type === 'CallExpression' &&
+            returnStatement.argument.callee.type === 'MemberExpression' &&
+            returnStatement.argument.callee.property.type === 'Identifier'
+          )
+            return {
+              type:
+                propertyMap[returnStatement.argument.callee.property.name]
+                  .valueType.type
+            }
+        }
+
+        const evaluated = eslitUtils.getStaticValue(returnStatement.argument)
+
+        if (evaluated) {
+          return {
+            type: getPrototypeType(evaluated.value)
+          }
+        }
+      }
+    }
+
+    const evaluated = eslitUtils.getStaticValue(property.property.value)
+
+    if (evaluated) {
+      return {
+        type: getPrototypeType(evaluated.value)
+      }
+    }
+
+    return {
+      type: null
+    }
+  }
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -31,43 +211,67 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      unexpected: 'Does not allow to use computed with this expression.'
+      unexpected: 'Use {{ likeProperty }} instead of {{ likeMethod }}.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {BlockStatement | Expression} body
-     */
-    /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
-    const computedPropertiesMap = new Map()
-
-    return defineVueVisitor(context, {
+    const GROUP_NAMES = ['data', 'props', 'computed', 'methods']
+    const groups = new Set(GROUP_NAMES)
+
+    /** @type ProprtyMap */
+    const propertyMap = {}
+
+    /**@type ObjectExpression */
+    let nodeMap = {}
+
+    return utils.defineVueVisitor(context, {
       onVueObjectEnter(node) {
-        computedPropertiesMap.set(node, getComputedProperties(node))
+        nodeMap = node
+        const properties = utils.iterateProperties(node, groups)
+
+        for (const property of properties) {
+          propertyMap[property.name] = {
+            ...propertyMap[property.name],
+            ...property,
+            valueType: getValueType({ property })
+          }
+        }
       },
 
       /** @param {MemberExpression} node */
-      'MemberExpression[object.type="ThisExpression"]'(
-        node,
-        { node: vueNode }
-      ) {
-        if (node.property.type !== 'Identifier') return
+      'MemberExpression[object.type="ThisExpression"]'(node) {
         if (node.parent.type !== 'CallExpression') return
+        if (node.property.type !== 'Identifier') return
+
+        const properties = utils.iterateProperties(nodeMap, groups)
+
+        for (const property of properties) {
+          propertyMap[property.name] = {
+            ...propertyMap[property.name],
+            ...property,
+            valueType: getValueType({ property, propertyMap })
+          }
+        }
 
-        const computedProperties = computedPropertiesMap
-          .get(vueNode)
-          .map((item) => item.key)
+        const thisMember = node.property.name
 
-        if (!computedProperties.includes(node.property.name)) return
+        if (!propertyMap[thisMember].valueType.type) return
 
-        context.report({
-          node: node.property,
-          loc: node.property.loc,
-          messageId: 'unexpected'
-        })
+        if (
+          propertyMap[thisMember].groupName === 'computed' &&
+          propertyMap[thisMember].valueType.type !== 'Function'
+        ) {
+          context.report({
+            node,
+            loc: node.loc,
+            messageId: 'unexpected',
+            data: {
+              likeProperty: `this.${thisMember}`,
+              likeMethod: `this.${thisMember}()`
+            }
+          })
+        }
       }
     })
   }
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
