A common issue that beginners run into is relying on async code in a computed property

Test scenarios: <div class="highlight highlight-source-js notranslate position-rel

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

It's all or did i miss something? <div class="highlight highlight-source-js notran

Almost there <a class="user-mention notranslate" data-hovercard-type="user" data-hover

Done in v3.8.0 🚀 Thanks <a class="user-mention notr

Rule proposition: No async in computed property functions about eslint-plugin-vue HOT 10 CLOSED

vuejs commented on May 22, 2024 1

Rule proposition: No async in computed property functions

from eslint-plugin-vue.

Comments (10)

michalsnik commented on May 22, 2024 1

I think we should cover first 3 examples, and the last one would be to detect presence of any of then, catch or finally in all CallExpressions inside computed property's body. Bur I'm against checking arguments response and res as they might be used even if the body has nothing to do with async computing. For example application has a module that gathers users' responses for a given topic, than we could have a computed property activeResponse in which we'd like to call a utility function with response argument, or short res. I had similar case with route in other plugin. I thought it's enough to check for that name and then someone had an app with generating routes on google maps :D

from eslint-plugin-vue.

michalsnik commented on May 22, 2024

Sounds nice! I think this one will definitely fit in Best practices category.

Could you please add few examples of code that in your opinion should cause warnings @chrisvfritz ?
This way it will be easier to get anyone's head around this and later to define proper test scenarios.

from eslint-plugin-vue.

chrisvfritz commented on May 22, 2024

Test scenarios:

computed: {
  foo: async function () {
    return await someFunc()
  }
}

computed: {
  foo () {
    return new Promise((resolve, reject) => {})
  }
}

computed: {
  foo () {
    return fetch(url).then(response => {})
  }
}

computed: {
  foo () {
    return funcWithCallback(function () {})
  }
}

from eslint-plugin-vue.

mysticatea commented on May 22, 2024

I have a concern about callbacks. Can it distinguish sync or async? For example, return this.users.map(u => u.name). It may be Array#map or Promise#map (Bluebird).

from eslint-plugin-vue.

chrisvfritz commented on May 22, 2024

@mysticatea I think it'd be better to err on the side of undermatching than overmatching, but I'm thinking about a variety of strategies that could be combined for pretty good detection. For example, if there's a then method or any argument called response or res.

from eslint-plugin-vue.

chrisvfritz commented on May 22, 2024

@michalsnik Good thinking. 🙂

from eslint-plugin-vue.

armano2 commented on May 22, 2024

It's all or did i miss something?

  invalid: [
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: async function () {
            return await someFunc()
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: async function () {
            return new Promise((resolve, reject) => {}) }
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return bar.then(response => {})
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    }
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return bar.catch(e => {})
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return Promise.all([])
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return Promise.race([])
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return Promise.reject([])
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    },
    {
      filename: 'test.vue',
      code: `export default {
        computed: {
          foo: function () {
            return Promise.resolve([])
          }
        }
      }`,
      errors: ['Computed properies cannot have side effect.']
    }
  ]

from eslint-plugin-vue.

michalsnik commented on May 22, 2024

Almost there @armano2, I have few things to mention:

You missed the case with .finally
Message should be: Unexpected asynchronous action in computed property "xxx" or something similar.
We should also test cases with explicit getters and setters:

computed: {
  foo: {
    get() {},
    set() {}
  }
}

We should wait with implementation of this rule, as I'm introducing logic that will help implementing this scenario in no-side-effects-in-computed-property rule.

from eslint-plugin-vue.

armano2 commented on May 22, 2024

i partially implemented those rules yesterday, but i will have a look into your helpers 🍡

thank you for feedback

from eslint-plugin-vue.

michalsnik commented on May 22, 2024

Done in v3.8.0 🚀 Thanks @armano2 for the hard work!

from eslint-plugin-vue.

Rule proposition: No async in computed property functions about eslint-plugin-vue HOT 10 CLOSED

Comments (10)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent