no-side-effects-in-computed-properties.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /**
  2. * @fileoverview Don't introduce side effects in computed properties
  3. * @author Michał Sajnóg
  4. */
  5. 'use strict'
  6. const utils = require('../utils')
  7. /**
  8. * @typedef {import('../utils').VueObjectData} VueObjectData
  9. * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
  10. */
  11. // ------------------------------------------------------------------------------
  12. // Rule Definition
  13. // ------------------------------------------------------------------------------
  14. module.exports = {
  15. meta: {
  16. type: 'problem',
  17. docs: {
  18. description: 'disallow side effects in computed properties',
  19. categories: ['vue3-essential', 'essential'],
  20. url:
  21. 'https://eslint.vuejs.org/rules/no-side-effects-in-computed-properties.html'
  22. },
  23. fixable: null,
  24. schema: []
  25. },
  26. /** @param {RuleContext} context */
  27. create(context) {
  28. /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
  29. const computedPropertiesMap = new Map()
  30. /**
  31. * @typedef {object} ScopeStack
  32. * @property {ScopeStack | null} upper
  33. * @property {BlockStatement | Expression | null} body
  34. */
  35. /**
  36. * @type {ScopeStack | null}
  37. */
  38. let scopeStack = null
  39. /** @param {FunctionExpression | ArrowFunctionExpression | FunctionDeclaration} node */
  40. function onFunctionEnter(node) {
  41. scopeStack = {
  42. upper: scopeStack,
  43. body: node.body
  44. }
  45. }
  46. function onFunctionExit() {
  47. scopeStack = scopeStack && scopeStack.upper
  48. }
  49. return utils.defineVueVisitor(context, {
  50. onVueObjectEnter(node) {
  51. computedPropertiesMap.set(node, utils.getComputedProperties(node))
  52. },
  53. ':function': onFunctionEnter,
  54. ':function:exit': onFunctionExit,
  55. /**
  56. * @param {(Identifier | ThisExpression) & {parent: MemberExpression}} node
  57. * @param {VueObjectData} data
  58. */
  59. 'MemberExpression > :matches(Identifier, ThisExpression)'(
  60. node,
  61. { node: vueNode }
  62. ) {
  63. if (!scopeStack) {
  64. return
  65. }
  66. const targetBody = scopeStack.body
  67. const computedProperty = /** @type {ComponentComputedProperty[]} */ (computedPropertiesMap.get(
  68. vueNode
  69. )).find((cp) => {
  70. return (
  71. cp.value &&
  72. node.loc.start.line >= cp.value.loc.start.line &&
  73. node.loc.end.line <= cp.value.loc.end.line &&
  74. targetBody === cp.value
  75. )
  76. })
  77. if (!computedProperty) {
  78. return
  79. }
  80. if (!utils.isThis(node, context)) {
  81. return
  82. }
  83. const mem = node.parent
  84. if (mem.object !== node) {
  85. return
  86. }
  87. const invalid = utils.findMutating(mem)
  88. if (invalid) {
  89. context.report({
  90. node: invalid.node,
  91. message: 'Unexpected side effect in "{{key}}" computed property.',
  92. data: { key: computedProperty.key || 'Unknown' }
  93. })
  94. }
  95. }
  96. })
  97. }
  98. }