From d0e8e47ad32617c146440cfed4e283bd5d9f4f97 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Thu, 21 May 2020 19:56:28 +0900
Subject: [PATCH] Add `vue/no-mutating-props` rule (from #633) (#1148)

* Add `no-mutating-props` rule.

* update

* support vue3

* delete unused function

Co-authored-by: Armano <armano2@users.noreply.github.com>
---
 docs/rules/README.md                 |   2 +
 docs/rules/no-mutating-props.md      |  99 +++++
 lib/configs/essential.js             |   1 +
 lib/configs/vue3-essential.js        |   1 +
 lib/index.js                         |   1 +
 lib/rules/no-mutating-props.js       | 361 +++++++++++++++
 lib/utils/index.js                   |  19 +
 tests/lib/rules/no-mutating-props.js | 640 +++++++++++++++++++++++++++
 8 files changed, 1124 insertions(+)
 create mode 100644 docs/rules/no-mutating-props.md
 create mode 100644 lib/rules/no-mutating-props.js
 create mode 100644 tests/lib/rules/no-mutating-props.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index e160ba03d..ecea70df7 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -56,6 +56,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
 | [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
@@ -163,6 +164,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
new file mode 100644
index 000000000..2d0833333
--- /dev/null
+++ b/docs/rules/no-mutating-props.md
@@ -0,0 +1,99 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-mutating-props
+description: disallow mutation of component props
+---
+# vue/no-mutating-props
+> disallow mutation of component props
+
+- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+
+## :book: Rule Details
+
+This rule reports mutation of component props.
+
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <input v-model="value" @click="openModal">
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+    methods: {
+      openModal() {
+        this.value = 'test'
+      }
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+    methods: {
+      openModal() {
+        this.$emit('input', 'test')
+      }
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
+
+```vue
+<script>
+  export default {
+    setup (props) {
+      // ✗ BAD
+      props.value = 'test'
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further reading
+
+- [Vue - Prop Mutation - deprecated](https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated)
+- [Style guide - Implicit parent-child communication](https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-mutating-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-mutating-props.js)
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index 21335f197..f85195de1 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -11,6 +11,7 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-multiple-template-root': 'error',
+    'vue/no-mutating-props': 'error',
     'vue/no-parsing-error': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
diff --git a/lib/configs/vue3-essential.js b/lib/configs/vue3-essential.js
index 64d5eb72e..c8e630496 100644
--- a/lib/configs/vue3-essential.js
+++ b/lib/configs/vue3-essential.js
@@ -24,6 +24,7 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-lifecycle-after-await': 'error',
+    'vue/no-mutating-props': 'error',
     'vue/no-parsing-error': 'error',
     'vue/no-ref-as-operand': 'error',
     'vue/no-reserved-keys': 'error',
diff --git a/lib/index.js b/lib/index.js
index ba8da3e72..58642e5b6 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -66,6 +66,7 @@ module.exports = {
     'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
     'no-multiple-template-root': require('./rules/no-multiple-template-root'),
+    'no-mutating-props': require('./rules/no-mutating-props'),
     'no-parsing-error': require('./rules/no-parsing-error'),
     'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
     'no-ref-as-operand': require('./rules/no-ref-as-operand'),
diff --git a/lib/rules/no-mutating-props.js b/lib/rules/no-mutating-props.js
new file mode 100644
index 000000000..90e614b48
--- /dev/null
+++ b/lib/rules/no-mutating-props.js
@@ -0,0 +1,361 @@
+/**
+ * @fileoverview disallow mutation component props
+ * @author 2018 Armano
+ */
+'use strict'
+
+const utils = require('../utils')
+const { findVariable } = require('eslint-utils')
+
+/**
+ * @typedef {import('vue-eslint-parser').AST.ESLintObjectExpression} ObjectExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintMemberExpression} MemberExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintProperty} Property
+ * @typedef {import('vue-eslint-parser').AST.ESLintIdentifier} Identifier
+ * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
+ * @typedef {import('vue-eslint-parser').AST.ESLintObjectPattern} ObjectPattern
+ * @typedef {import('vue-eslint-parser').AST.ESLintArrayPattern} ArrayPattern
+ * @typedef {import('vue-eslint-parser').AST.ESLintPattern} Pattern
+ * @typedef {import('vue-eslint-parser').AST.Node} Node
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow mutation of component props',
+      categories: ['vue3-essential', 'essential'],
+      url: 'https://eslint.vuejs.org/rules/no-mutating-props.html'
+    },
+    fixable: null, // or "code" or "whitespace"
+    schema: [
+      // fill in your schema
+    ]
+  },
+
+  create (context) {
+    /** @type {Map<ObjectExpression, Set<string>>} */
+    const propsMap = new Map()
+    /** @type { { type: 'export' | 'mark' | 'definition', object: ObjectExpression } | null } */
+    let vueObjectData = null
+
+    /**
+     * @param {Node} node
+     * @param {string} name
+     */
+    function report (node, name) {
+      context.report({
+        node,
+        message: 'Unexpected mutation of "{{key}}" prop.',
+        data: {
+          key: name
+        }
+      })
+    }
+
+    /**
+     * @param {Node} node
+     * @returns {VExpressionContainer}
+     */
+    function getVExpressionContainer (node) {
+      let n = node
+      while (n.type !== 'VExpressionContainer') {
+        n = n.parent
+      }
+      return n
+    }
+    /**
+     * @param {MemberExpression|Property} node
+     * @returns {string}
+     */
+    function getPropertyNameText (node) {
+      const name = utils.getStaticPropertyName(node)
+      if (name) {
+        return name
+      }
+      if (node.computed) {
+        const expr = node.type === 'Property' ? node.key : node.property
+        const str = context.getSourceCode().getText(expr)
+        return `[${str}]`
+      }
+      return '?unknown?'
+    }
+    /**
+     * @param {Node} node
+     * @returns {node is Identifier}
+     */
+    function isVmReference (node) {
+      if (node.type !== 'Identifier') {
+        return false
+      }
+      const parent = node.parent
+      if (parent.type === 'MemberExpression') {
+        if (parent.property === node) {
+          // foo.id
+          return false
+        }
+      } else if (parent.type === 'Property') {
+        // {id: foo}
+        if (parent.key === node && !parent.computed) {
+          return false
+        }
+      }
+
+      const exprContainer = getVExpressionContainer(node)
+
+      for (const reference of exprContainer.references) {
+        if (reference.variable != null) {
+          // Not vm reference
+          continue
+        }
+        if (reference.id === node) {
+          return true
+        }
+      }
+      return false
+    }
+
+    /**
+     * @param {MemberExpression|Identifier} props
+     * @param {string} name
+     */
+    function verifyMutating (props, name) {
+      const invalid = findMutating(props)
+      if (invalid) {
+        report(invalid.node, name)
+      }
+    }
+
+    /**
+     * @param {MemberExpression|Identifier} props
+     * @returns { { kind: 'assignment' | 'update' | 'call' , node: Node, pathNodes: MemberExpression[] } }
+     */
+    function findMutating (props) {
+      /** @type {MemberExpression[]} */
+      const pathNodes = []
+      let node = props
+      let target = node.parent
+      while (true) {
+        if (target.type === 'AssignmentExpression') {
+          if (target.left === node) {
+            // this.xxx <=|+=|-=>
+            return {
+              kind: 'assignment',
+              node: target,
+              pathNodes
+            }
+          }
+        } else if (target.type === 'UpdateExpression') {
+          // this.xxx <++|-->
+          return {
+            kind: 'update',
+            node: target,
+            pathNodes
+          }
+        } else if (target.type === 'CallExpression') {
+          if (node !== props && target.callee === node) {
+            const callName = utils.getStaticPropertyName(node)
+            if (callName && /^push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill$/u.exec(callName)) {
+              // this.xxx.push()
+              pathNodes.pop()
+              return {
+                kind: 'call',
+                node: target,
+                pathNodes
+              }
+            }
+          }
+        } else if (target.type === 'MemberExpression') {
+          if (target.object === node) {
+            pathNodes.push(target)
+            node = target
+            target = target.parent
+            continue // loop
+          }
+        }
+
+        return null
+      }
+    }
+
+    /**
+     * @param {Pattern} param
+     * @param {string[]} path
+     * @returns {Generator<{ node: Identifier, path: string[] }>}
+     */
+    function * iterateParamProperties (param, path) {
+      if (!param) {
+        return
+      }
+      if (param.type === 'Identifier') {
+        yield {
+          node: param,
+          path
+        }
+      } else if (param.type === 'RestElement') {
+        yield * iterateParamProperties(param.argument, path)
+      } else if (param.type === 'AssignmentPattern') {
+        yield * iterateParamProperties(param.left, path)
+      } else if (param.type === 'ObjectPattern') {
+        for (const prop of param.properties) {
+          if (prop.type === 'Property') {
+            const name = getPropertyNameText(prop)
+            yield * iterateParamProperties(prop.value, [...path, name])
+          } else if (prop.type === 'RestElement') {
+            yield * iterateParamProperties(prop.argument, path)
+          }
+        }
+      } else if (param.type === 'ArrayPattern') {
+        for (let index = 0; index < param.elements.length; index++) {
+          const element = param.elements[index]
+          yield * iterateParamProperties(element, [...path, `${index}`])
+        }
+      }
+    }
+
+    return Object.assign({},
+      utils.defineVueVisitor(context,
+        {
+          ObjectExpression (node, { node: vueNode }) {
+            if (node !== vueNode) {
+              return
+            }
+            propsMap.set(node, new Set(utils.getComponentProps(node).map(p => p.propName)))
+          },
+          'ObjectExpression:exit' (node, { node: vueNode, type }) {
+            if (node !== vueNode) {
+              return
+            }
+            if (!vueObjectData || vueObjectData.type !== 'export') {
+              vueObjectData = {
+                type,
+                object: node
+              }
+            }
+          },
+          'Property[value.type=/^(Arrow)?FunctionExpression$/]' (node, { node: vueNode }) {
+            if (node.parent !== vueNode) {
+              return
+            }
+            if (utils.getStaticPropertyName(node) !== 'setup') {
+              return
+            }
+            /** @type {Pattern} */
+            const propsParam = node.value.params[0]
+            if (!propsParam) {
+              // no arguments
+              return
+            }
+            if (propsParam.type === 'RestElement' || propsParam.type === 'ArrayPattern') {
+              // cannot check
+              return
+            }
+            for (const { node: prop, path } of iterateParamProperties(propsParam, [])) {
+              // @ts-ignore
+              const variable = findVariable(context.getScope(), prop)
+              if (!variable) {
+                continue
+              }
+
+              for (const reference of variable.references) {
+                if (!reference.isRead()) {
+                  continue
+                }
+                /** @type {Identifier} */
+                const id = reference.identifier
+
+                const invalid = findMutating(id)
+                if (!invalid) {
+                  continue
+                }
+                let name
+                if (path.length === 0) {
+                  if (invalid.pathNodes.length === 0) {
+                    continue
+                  }
+                  const mem = invalid.pathNodes[0]
+                  name = getPropertyNameText(mem)
+                } else {
+                  if (invalid.pathNodes.length === 0 && invalid.kind !== 'call') {
+                    continue
+                  }
+                  name = path[0]
+                }
+
+                report(invalid.node, name)
+              }
+            }
+          },
+          'MemberExpression > :matches(Identifier, ThisExpression)' (node, { node: vueNode }) {
+            if (!utils.isThis(node, context)) {
+              return
+            }
+            /** @type {MemberExpression} */
+            const mem = node.parent
+            if (mem.object !== node) {
+              return
+            }
+            const name = utils.getStaticPropertyName(mem)
+            if (name && propsMap.get(vueNode).has(name)) {
+              verifyMutating(mem, name)
+            }
+          }
+        }
+      ),
+      utils.defineTemplateBodyVisitor(context, {
+        'VExpressionContainer MemberExpression > ThisExpression' (node) {
+          if (!vueObjectData) {
+            return
+          }
+          /** @type {MemberExpression} */
+          const mem = node.parent
+          if (mem.object !== node) {
+            return
+          }
+          const name = utils.getStaticPropertyName(mem)
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            verifyMutating(mem, name)
+          }
+        },
+        'VExpressionContainer Identifier' (node) {
+          if (!vueObjectData) {
+            return
+          }
+          if (!isVmReference(node)) {
+            return
+          }
+          const name = node.name
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            verifyMutating(node, name)
+          }
+        },
+        "VAttribute[directive=true][key.name.name='model'] VExpressionContainer > *" (node) {
+          if (!vueObjectData) {
+            return
+          }
+          const nodes = utils.getMemberChaining(node)
+          const first = nodes[0]
+          let name
+          if (isVmReference(first)) {
+            name = first.name
+          } else if (first.type === 'ThisExpression') {
+            const mem = nodes[1]
+            if (!mem) {
+              return
+            }
+            name = utils.getStaticPropertyName(mem)
+          } else {
+            return
+          }
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            report(node, name)
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index ad72908fe..dc883e026 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -15,6 +15,7 @@
  * @typedef {import('vue-eslint-parser').AST.ESLintObjectExpression} ObjectExpression
  * @typedef {import('vue-eslint-parser').AST.ESLintProperty} Property
  * @typedef {import('vue-eslint-parser').AST.ESLintTemplateLiteral} TemplateLiteral
+ * @typedef {import('vue-eslint-parser').AST.ESLintNode} ESLintNode
  */
 
 /**
@@ -877,6 +878,24 @@ module.exports = {
     return body.errors.some(error => typeof error.code === 'string' && error.code.startsWith('eof-'))
   },
 
+  /**
+   * Get the chaining nodes of MemberExpression.
+   *
+   * @param  {ESLintNode} node The node to parse
+   * @return {[ESLintNode, ...MemberExpression[]]} The chaining nodes
+   */
+  getMemberChaining (node) {
+    const nodes = []
+    let n = node
+
+    while (n.type === 'MemberExpression') {
+      nodes.push(n)
+      n = n.object
+    }
+    nodes.push(n)
+
+    return nodes.reverse()
+  },
   /**
    * Parse CallExpression or MemberExpression to get simplified version without arguments
    *
diff --git a/tests/lib/rules/no-mutating-props.js b/tests/lib/rules/no-mutating-props.js
new file mode 100644
index 000000000..d87df48b9
--- /dev/null
+++ b/tests/lib/rules/no-mutating-props.js
@@ -0,0 +1,640 @@
+/**
+ * @fileoverview disallow mutation of component props
+ * @author 2018 Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-mutating-props')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+ruleTester.run('no-mutating-props', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="foo"></div>
+            <div v-if="prop1 = [1, 2]"></div>
+            <div v-if="prop2++"></div>
+            <div v-text="prop3.shift()"></div>
+            <div v-text="prop4.slice(0).shift()"></div>
+            <div v-if="this.prop5 = [1, 2] && this.someProp"></div>
+            <div v-if="this.prop6++ && this.someProp < 10"></div>
+            <div v-text="this.prop7.shift()"></div>
+            <div v-text="this.prop8.slice(0).shift()"></div>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['foo']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+            <input :value="prop5.text" @input="$emit('input', $event.target.value)">
+            <div v-for="prop5 of data">
+              <input v-model="prop5">
+            </div>
+            <div v-for="(prop6, index) of data">
+              <input v-model="prop6">
+            </div>
+            <template v-for="(test, index) of data">
+              <template v-for="(prop6, index) of data">
+                <input v-model="prop6">
+                <div v-text="prop6.shift()"></div>
+              </template>
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-for="i in prop.slice()">
+            <input v-for="i in prop.foo.slice()">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              todo: {
+                type: Object,
+                required: true
+              },
+              items: {
+                type: Array,
+                default: []
+              }
+            },
+            methods: {
+              openModal() {
+                this.$emit('someEvent', this.todo)
+                const a = this.items.slice(0).push('something') // no mutation because of \`slice(0)\`
+              }
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="prop">
+            <div v-for="prop in data">
+              <MyComp @click="prop.foo++"></MyComp>
+              <input v-model="prop">
+            </div>
+            <input v-model="prop()">
+            <input v-model="foo">
+            <input @click="prop().foo++">
+            <input v-model="foo[this]">
+            <input v-model="foo[this.prop]">
+            <input v-model="this">
+            <MyComp @click="bar = {prop: foo++}"></MyComp>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop'],
+            methods: {
+              onKeydown() {
+                const vm = this
+                foo.prop = 1
+                vm()()()
+                vm.prop()()
+                prop++
+                prop = 1
+                const bar = {prop: foo}
+                prop[this] ++
+              }
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <button @click="foo++"></button>
+            <button @click="foo+=1"></button>
+            <button @click="foo.push($event)"></button>
+            <input v-model="foo">
+            <input v-model="this.foo">
+          </div>
+        </template>
+      `
+    },
+
+    // setup
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props ++
+              props = 1
+              props.push(1)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a}) {
+              a ++
+              a = 1
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({...props}) {
+              props ++
+              props = 1
+              props.push(1)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            ssss(props) {
+              props.a ++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              const a = props.a
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup() {
+              props.a++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(...props) {
+              props.a++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup([props]) {
+              props.a++
+            }
+          }
+        </script>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="prop1 = [1, 2]"></div>
+            <div v-if="prop2++"></div>
+            <div v-text="prop3.shift()"></div>
+            <div v-text="prop4.slice(0).shift()"></div>
+            <div v-if="this.prop5 = [1, 2] && this.someProp"></div>
+            <div v-if="this.prop6++ && this.someProp < 10"></div>
+            <div v-text="this.prop7.shift()"></div>
+            <div v-text="this.prop8.slice(0).shift()"></div>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop3" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "prop5" prop.',
+          line: 8
+        },
+        {
+          message: 'Unexpected mutation of "prop6" prop.',
+          line: 9
+        },
+        {
+          message: 'Unexpected mutation of "prop7" prop.',
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3', 'prop4']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop3" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "prop4" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              todo: {
+                type: Object,
+                required: true
+              },
+              items: {
+                type: Array,
+                default: []
+              }
+            },
+            methods: {
+              openModal() {
+                ++this.items
+                this.todo.type = 'completed'
+                this.items.push('something')
+              }
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "items" prop.',
+          line: 16
+        },
+        {
+          message: 'Unexpected mutation of "todo" prop.',
+          line: 17
+        },
+        {
+          message: 'Unexpected mutation of "items" prop.',
+          line: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <template v-for="(test, index) of data">
+              <template v-for="(prop, index) of data">
+                <input v-model="prop">
+              </template>
+              <input v-model="prop">
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 8
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <template v-for="prop of data">
+              <input v-model="this.prop">
+              <div v-text="prop.shift()"></div>
+              <div v-text="this.prop.shift()"></div>
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 7
+        }
+      ]
+    },
+
+    // setup
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props.a ++
+              props.b = 1
+              props.c.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a,b,c, d: [e, , f]}) {
+              a.foo ++
+              b.foo = 1
+              c.push(1)
+
+              c.x.push(1)
+              e.foo++
+              f.foo++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 9
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 10
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 11
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a: foo, b: [...bar], c: baz = 1}) {
+              foo.x ++
+              bar.x = 1
+              baz.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({...props}) {
+              props.a ++
+              props.b = 1
+              props.c.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props[a] ++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        'Unexpected mutation of "[a]" prop.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({[a]: c}) {
+              c.foo ++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        'Unexpected mutation of "[a]" prop.'
+      ]
+    }
+  ]
+})