Rename vue/no-setup-props-destructure to vue/no-setup-props-reactivity-loss and remove from config (#2268)

Author: ota-meshi

docs/rules/index.md

@@ -79,7 +79,6 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  | :three::two::hammer: |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  | :three::two::hammer: |
 | [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  | :three::two::warning: |
-| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  | :three::two::hammer: |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: | :three::two::warning: |
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  | :three::two::warning: |
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  | :three::two::warning: |
@@ -245,6 +244,7 @@ For example:
 | [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  | :hammer: |
 | [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  | :hammer: |
 | [vue/no-root-v-if](./no-root-v-if.md) | disallow `v-if` directives on root element |  | :hammer: |
+| [vue/no-setup-props-reactivity-loss](./no-setup-props-reactivity-loss.md) | disallow usages that lose the reactivity of `props` passed to `setup` |  | :hammer: |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  | :hammer: |
 | [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
 | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
@@ -339,6 +339,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 |:--------|:------------|
 | [vue/component-tags-order](./component-tags-order.md) | [vue/block-order](./block-order.md) |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | [vue/no-setup-props-reactivity-loss](./no-setup-props-reactivity-loss.md) |
 | [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
 | [vue/v-on-function-call](./v-on-function-call.md) | [vue/v-on-handler-style](./v-on-handler-style.md) |
 

docs/rules/no-setup-props-destructure.md

@@ -2,14 +2,14 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-setup-props-destructure
-description: disallow destructuring of `props` passed to `setup`
+description: disallow usages that lose the reactivity of `props` passed to `setup`
 since: v7.0.0
 ---
 # vue/no-setup-props-destructure
 
-> disallow destructuring of `props` passed to `setup`
+> disallow usages that lose the reactivity of `props` passed to `setup`
 
-- :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"`.
+- :no_entry_sign: This rule was **deprecated** and replaced by [vue/no-setup-props-reactivity-loss](no-setup-props-reactivity-loss.md) rule.
 
 ## :book: Rule Details
 

docs/rules/no-setup-props-reactivity-loss.md

@@ -0,0 +1,102 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-setup-props-reactivity-loss
+description: disallow usages that lose the reactivity of `props` passed to `setup`
+---
+# vue/no-setup-props-reactivity-loss
+
+> disallow usages that lose the reactivity of `props` passed to `setup`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule reports the destructuring or member expression of `props` passed to `setup` causing the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  setup(props) {
+    watch(() => props.count, () => {
+      console.log(props.count)
+    })
+
+    return () => {
+      return h('div', props.count)
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+Destructuring the `props` passed to `setup` will cause the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  setup({ count }) {
+    watch(() => count, () => { // not going to detect changes
+      console.log(count)
+    })
+
+    return () => {
+      return h('div', count) // not going to update
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+Also, destructuring in root scope of `setup()` should error, but ok inside nested callbacks or returned render functions:
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  setup(props) {
+    /* ✗ BAD */
+    const { count } = props
+
+    watch(() => props.count, () => {
+      /* ✓ GOOD */
+      const { count } = props
+      console.log(count)
+    })
+
+    return () => {
+      /* ✓ GOOD */
+      const { count } = props
+      return h('div', count)
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Guide - Composition API - Setup](https://vuejs.org/api/composition-api-setup.html)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-setup-props-reactivity-loss.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-setup-props-reactivity-loss.js)

lib/configs/essential.js

@@ -28,7 +28,6 @@ module.exports = {
         vueVersion: 2
       }
     ],
-    'vue/no-setup-props-destructure': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',

lib/configs/vue3-essential.js

@@ -42,7 +42,6 @@ module.exports = {
     'vue/no-reserved-component-names': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-reserved-props': 'error',
-    'vue/no-setup-props-destructure': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',

lib/index.js

@@ -131,6 +131,7 @@ module.exports = {
     'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
     'no-root-v-if': require('./rules/no-root-v-if'),
     'no-setup-props-destructure': require('./rules/no-setup-props-destructure'),
+    'no-setup-props-reactivity-loss': require('./rules/no-setup-props-reactivity-loss'),
     'no-shared-component-data': require('./rules/no-shared-component-data'),
     'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
     'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),