Computed Side Effects false positives

[sevenmay]

The "Computed Side Effects" rule produces false positives.

<script setup>
import { ref, computed } from 'vue';

const str1 = ref('abc');

const str2 = computed(() => {
  const inner = 'def';
  return str1.value + inner;
});
</script>

<template>
  <div>
    <p>Test</p>
    <p>{{ str1 }}</p>
    <p>{{ str2 }}</p>
  </div>
</template>

The problem is const inner = 'def';.

Node v20.10.0
vue-mess-detector v0.63.1

Thanks, great job!

[rrd108]

Thanks for reporting.

Do you want to send a PR with a failing test or a fix?

[sevenmay]

This regex \b(set|push|pop|shift|unshift|splice|reverse|sort)\b|(?<!=)=(?!=) simply matches assignments, ex: = in const mult = 3;.

The rule "Computed Side Effects" is quite complicated to check: ref, reactive, direct assignment, assignment calling a method, etc.
I don't know how far you want to go.

For example, how do you find a mutation made by calling a method?

Even checking the mutation of a property in a reactive object is complicated. How do you differentiate between a local object (scoped in the computed body) and a reactive object?

Maybe it's better to narrow the scope and call it "Mutate ref in computed" and check only for .value = .

[David-Pena]

What do you think? @rrd108

[rrd108]

I think we should keep the rule and we can incremently add suportfor all the different use cases.

Defining a varibale inside a computed property is not really a good practice, but I can understand why it is there.