Finalize initial logic for no-side-effects-in-computed-properties rule

Author: michalsnik

lib/rules/no-side-effects-in-computed-properties.js

@@ -6,6 +6,30 @@
 
 const utils = require('../utils')
 
+function parseMemberExpression (node) {
+  const members = []
+  let memberExpression
+
+  if (node.type === 'MemberExpression') {
+    memberExpression = node
+
+    while (memberExpression.type === 'MemberExpression') {
+      if (memberExpression.property.type === 'Identifier') {
+        members.push(memberExpression.property.name)
+      }
+      memberExpression = memberExpression.object
+    }
+
+    if (memberExpression.type === 'ThisExpression') {
+      members.push('this')
+    } else if (memberExpression.type === 'Identifier') {
+      members.push(memberExpression.name)
+    }
+  }
+
+  return members.reverse()
+}
+
 function getComputedProperties (componentProperties) {
   const computedPropertiesNode = componentProperties
     .filter(p =>
@@ -23,26 +47,66 @@ function getComputedProperties (componentProperties) {
     let value
 
     if (cp.value.type === 'FunctionExpression') {
-      value = cp.value.body.body
+      value = cp.value.body
     } else if (cp.value.type === 'ObjectExpression') {
       value = cp.value.properties
         .filter(p =>
           p.key.type === 'Identifier' &&
           p.key.name === 'get' &&
           p.value.type === 'FunctionExpression'
         )
-        .map(p => p.value.body.body)[0]
+        .map(p => p.value.body)[0]
     }
 
     return { key, value }
   })
 }
 
 function create (context) {
-  return utils.executeOnVueComponent(context, (properties) => {
-    const computedProperties = getComputedProperties(properties)
-    // to be continued...
-  })
+  const forbiddenNodes = []
+
+  return Object.assign({},
+    {
+      // this.xxx <=|+=|-=>
+      'AssignmentExpression > MemberExpression' (node) {
+        if (parseMemberExpression(node)[0] === 'this') {
+          forbiddenNodes.push(node)
+        }
+      },
+      // this.xxx <++|-->
+      'UpdateExpression > MemberExpression' (node) {
+        if (parseMemberExpression(node)[0] === 'this') {
+          forbiddenNodes.push(node)
+        }
+      },
+      // this.xxx.func()
+      'CallExpression' (node) {
+        const code = context.getSourceCode().getText(node)
+        const MUTATION_REGEX = /(this.)((?!(concat|slice)\().)*((push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)\()/g
+
+        if (MUTATION_REGEX.test(code)) {
+          forbiddenNodes.push(node)
+        }
+      }
+    },
+    utils.executeOnVueComponent(context, (properties) => {
+      const computedProperties = getComputedProperties(properties)
+
+      computedProperties.forEach(cp => {
+        forbiddenNodes.forEach(node => {
+          if (
+            node.loc.start.line >= cp.value.loc.start.line &&
+            node.loc.end.line <= cp.value.loc.end.line
+          ) {
+            context.report({
+              node: node,
+              message: `Unexpected side effect in "${cp.key}" computed property.`
+            })
+          }
+        })
+      })
+    })
+  )
 }
 
 // ------------------------------------------------------------------------------

lib/utils/index.js

@@ -302,17 +302,17 @@ module.exports = {
     const _this = this
 
     return {
-      ExportDefaultDeclaration (node) {
+      'ExportDefaultDeclaration:exit' (node) {
         // export default {} in .vue || .jsx
         if (!_this.isVueComponentFile(node, filePath)) return
         cb(node.declaration.properties)
       },
-      CallExpression (node) {
+      'CallExpression:exit' (node) {
         // Vue.component('xxx', {}) || component('xxx', {})
         if (!_this.isVueComponent(node)) return
         cb(node.arguments.slice(-1)[0].properties)
       },
-      NewExpression (node) {
+      'NewExpression:exit' (node) {
         // new Vue({})
         if (!_this.isVueInstance(node)) return
         cb(node.arguments[0].properties)

tests/lib/rules/no-side-effects-in-computed-properties.js

@@ -83,27 +83,63 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
         computed: {
           test1() {
             this.firstName = 'lorem'
+            asd.qwe.zxc = 'lorem'
             return this.firstName + ' ' + this.lastName
           },
           test2() {
-            return this.something.reverse()
+            this.count += 2;
+            this.count++;
+            return this.count;
           },
           test3() {
+            return this.something.reverse()
+          },
+          test4() {
             const test = this.another.something.push('example')
             return 'something'
           },
-          test4: {
+        }
+      })`,
+      parserOptions,
+      errors: [{
+        line: 4,
+        message: 'Unexpected side effect in "test1" computed property.'
+      }, {
+        line: 9,
+        message: 'Unexpected side effect in "test2" computed property.'
+      }, {
+        line: 10,
+        message: 'Unexpected side effect in "test2" computed property.'
+      }, {
+        line: 14,
+        message: 'Unexpected side effect in "test3" computed property.'
+      }, {
+        line: 17,
+        message: 'Unexpected side effect in "test4" computed property.'
+      }]
+    },
+    {
+      code: `Vue.component('test', {
+        computed: {
+          test1: {
             get() {
               this.firstName = 'lorem'
               return this.firstName + ' ' + this.lastName
             }
           },
-          test5: {
+          test2: {
+            get() {
+              this.count += 2;
+              this.count++;
+              return this.count;
+            }
+          },
+          test3: {
             get() {
               return this.something.reverse()
             }
           },
-          test6: {
+          test4: {
             get() {
               const test = this.another.something.push('example')
               return 'something'
@@ -116,26 +152,20 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       })`,
       parserOptions,
       errors: [{
-        line: 4,
-        message: 'Unexpected side effect in "test1" computed property'
-      }, {
-        line: 8,
-        message: 'Unexpected side effect in "test2" computed property'
+        line: 5,
+        message: 'Unexpected side effect in "test1" computed property.'
       }, {
         line: 11,
-        message: 'Unexpected side effect in "test3" computed property'
-      }, {
-        line: 15,
-        message: 'Unexpected side effect in "test4" computed property'
+        message: 'Unexpected side effect in "test2" computed property.'
       }, {
-        line: 21,
-        message: 'Unexpected side effect in "test5" computed property'
+        line: 12,
+        message: 'Unexpected side effect in "test2" computed property.'
       }, {
-        line: 26,
-        message: 'Unexpected side effect in "test6" computed property'
+        line: 18,
+        message: 'Unexpected side effect in "test3" computed property.'
       }, {
-        line: 31,
-        message: 'Unexpected side effect in "test7" computed property'
+        line: 23,
+        message: 'Unexpected side effect in "test4" computed property.'
       }]
     }
   ]