From 52e0770ba8cba3a5f5f31f4aec53ac88c441af7d Mon Sep 17 00:00:00 2001
From: Wayne Zhang <waynzh19@gmail.com>
Date: Sun, 14 Apr 2024 19:31:03 +0800
Subject: [PATCH 1/4] fix(no-use-computed-property-like-method): extract
 LogicalExpression (#2438)

---
 .../no-use-computed-property-like-method.js   |  48 +++++---
 .../no-use-computed-property-like-method.js   | 108 ++++++++++++++++++
 2 files changed, 138 insertions(+), 18 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 5d5bd8b4a..6e89ad263 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -68,26 +68,39 @@ function resolvedExpressions(context, node) {
    * @returns {Iterable<Expression>}
    */
   function* extractResolvedExpressions(node) {
-    if (node.type === 'Identifier') {
-      const variable = utils.findVariableByIdentifier(context, node)
-      if (variable) {
-        for (const ref of variable.references) {
-          const id = ref.identifier
-          if (id.parent.type === 'VariableDeclarator') {
-            if (id.parent.id === id && id.parent.init) {
-              yield* resolvedExpressionsInternal(id.parent.init)
+    switch (node.type) {
+      case 'Identifier': {
+        const variable = utils.findVariableByIdentifier(context, node)
+        if (variable) {
+          for (const ref of variable.references) {
+            const id = ref.identifier
+            if (id.parent.type === 'VariableDeclarator') {
+              if (id.parent.id === id && id.parent.init) {
+                yield* resolvedExpressionsInternal(id.parent.init)
+              }
+            } else if (
+              id.parent.type === 'AssignmentExpression' &&
+              id.parent.left === id
+            ) {
+              yield* resolvedExpressionsInternal(id.parent.right)
             }
-          } else if (
-            id.parent.type === 'AssignmentExpression' &&
-            id.parent.left === id
-          ) {
-            yield* resolvedExpressionsInternal(id.parent.right)
           }
         }
+
+        break
+      }
+      case 'ConditionalExpression': {
+        yield* resolvedExpressionsInternal(node.consequent)
+        yield* resolvedExpressionsInternal(node.alternate)
+
+        break
+      }
+      case 'LogicalExpression': {
+        yield* resolvedExpressionsInternal(node.left)
+        yield* resolvedExpressionsInternal(node.right)
+
+        break
       }
-    } else if (node.type === 'ConditionalExpression') {
-      yield* resolvedExpressionsInternal(node.consequent)
-      yield* resolvedExpressionsInternal(node.alternate)
     }
   }
 }
@@ -103,7 +116,7 @@ function resolvedExpressions(context, node) {
  * props: {
  *   propA: String, // => String
  *   propB: {
- *     type: Number // => String
+ *     type: Number // => Number
  *   },
  * }
  */
@@ -189,7 +202,6 @@ function maybeFunction(context, node) {
       expr.type === 'Literal' ||
       expr.type === 'TemplateLiteral' ||
       expr.type === 'BinaryExpression' ||
-      expr.type === 'LogicalExpression' ||
       expr.type === 'UnaryExpression' ||
       expr.type === 'UpdateExpression'
     ) {
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index 63ddc0dd2..4a5e25ebe 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -564,6 +564,78 @@ tester.run('no-use-computed-property-like-method', rule, {
         }
       </script>
       `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction || this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction || this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
     }
   ],
   invalid: [
@@ -1096,6 +1168,42 @@ tester.run('no-use-computed-property-like-method', rule, {
       </script>
       `,
       errors: ['Use x instead of x().']
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsNumber: {
+              type: Number
+            },
+            propsString: {
+              type: String
+            },
+          },
+          computed: {
+            computedReturnNotFunction1() {
+              return this.propsString ? this.propsString : this.propsNumber
+            },
+            computedReturnNotFunction2() {
+              return this.propsString || this.propsNumber
+            },
+          },
+          methods: {
+            fn() {
+              this.computedReturnNotFunction1()
+              this.computedReturnNotFunction2()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnNotFunction1 instead of this.computedReturnNotFunction1().',
+        'Use this.computedReturnNotFunction2 instead of this.computedReturnNotFunction2().'
+      ]
     }
   ]
 })

From a4be0fcb30953a058e3abc0b6b6589f14ab0c5e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luiz=20Ot=C3=A1vio=20Carvalho?= <me@luizotcarvalho.com.br>
Date: Sun, 14 Apr 2024 08:31:38 -0300
Subject: [PATCH 2/4] Support Pinia methods in `vue/no-unused-properties`
 (#2441)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Luiz Otávio Carvalho <luiz.carvalho@buser.com.br>
---
 lib/rules/no-unused-properties.js       |    8 +-
 tests/lib/rules/no-unused-properties.js | 1100 +++++++++++++++++++----
 2 files changed, 918 insertions(+), 190 deletions(-)

diff --git a/lib/rules/no-unused-properties.js b/lib/rules/no-unused-properties.js
index d09aca5c2..7eb7eb75d 100644
--- a/lib/rules/no-unused-properties.js
+++ b/lib/rules/no-unused-properties.js
@@ -496,12 +496,16 @@ module.exports = {
           let groupName = null
           if (/^mapMutations|mapActions$/u.test(node.callee.name)) {
             groupName = 'methods'
-          } else if (/^mapState|mapGetters$/u.test(node.callee.name)) {
+          } else if (
+            /^mapState|mapGetters|mapWritableState$/u.test(node.callee.name)
+          ) {
             groupName = 'computed'
           }
 
           if (!groupName || node.arguments.length === 0) return
-          const arg = node.arguments[0]
+          // On Pinia the store is always the first argument
+          const arg =
+            node.arguments.length === 2 ? node.arguments[1] : node.arguments[0]
           if (arg.type === 'ObjectExpression') {
             // e.g.
             // `mapMutations({ add: 'increment' })`
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 65b185298..64e858d31 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -53,6 +53,7 @@ const unreferencedOptions = {
 
 tester.run('no-unused-properties', rule, {
   valid: [
+    // vuex getters
     {
       filename: 'test.vue',
       code: `
@@ -74,6 +75,68 @@ tester.run('no-unused-properties', rule, {
       `,
       options: allOptions
     },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(['count']),
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapGetters(['count1', 'count2'])
+          }
+        </script>
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapGetters({
+              count: 'count'
+            })
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters({
+                count: 'count'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `
+    },
+
+    // vuex mutations
     {
       filename: 'test.vue',
       code: `
@@ -136,6 +199,8 @@ tester.run('no-unused-properties', rule, {
         </template>
       `
     },
+
+    // vuex actions
     {
       filename: 'test.vue',
       code: `
@@ -196,6 +261,8 @@ tester.run('no-unused-properties', rule, {
         </template>
       `
     },
+
+    // vuex state
     {
       filename: 'test.vue',
       code: `
@@ -251,7 +318,7 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             computed: {
-              ...mapGetters(['count']),
+              ...mapState(['count'])
             }
           }
         </script>
@@ -260,27 +327,37 @@ tester.run('no-unused-properties', rule, {
         </template>
       `
     },
+
+    // pinia getters
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: mapGetters(['count1', 'count2'])
+            computed: {
+              ...mapGetters(useStore, ["bar"]),
+            },
+            methods: {
+              baz() {
+                return this.bar
+              }
+            }
           }
         </script>
         <template>
-          {{ count1 }} {{ count2 }}
+          {{ baz() }}
         </template>
-      `
+      `,
+      options: allOptions
     },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: mapGetters({
-              count: 'count'
-            })
+            computed: {
+              ...mapGetters(useStore, ['count']),
+            }
           }
         </script>
         <template>
@@ -293,15 +370,11 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            computed: {
-              ...mapGetters({
-                count: 'count'
-              })
-            }
+            computed: mapGetters(useStore, ['count1', 'count2'])
           }
         </script>
         <template>
-          {{ count }}
+          {{ count1 }} {{ count2 }}
         </template>
       `
     },
@@ -310,9 +383,9 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            computed: {
-              ...mapState(['count'])
-            }
+            computed: mapGetters(useStore, {
+              count: 'count'
+            })
           }
         </script>
         <template>
@@ -320,52 +393,55 @@ tester.run('no-unused-properties', rule, {
         </template>
       `
     },
-    // a property used in a script expression
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: ['count'],
-            created() {
-              alert(this.count + 1)
+            computed: {
+              ...mapGetters(useStore, {
+                count: 'count'
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
+
+    // pinia actions
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: ['count'],
-            created() {
-              alert(this.$props.count + 1)
+            methods: {
+              ...mapActions(useStore, {
+                add: 'increment'
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
-    // default options
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data () {
-              return {
-                foo: 1
-              }
-            },
-            computed: {
-              bar() {}
-            },
-            methods: {
-              baz () {}
-            }
-          };
+            methods: mapActions(useStore, {
+              add: 'increment'
+            })
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
     {
@@ -373,143 +449,352 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            setup () {
-              return {
-                foo
-              }
-            },
-          };
+            methods: mapActions(useStore, ['add'])
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
-
-    // a property being watched
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: {
-              count: {
-                type: Number,
-                default: 0
-              }
-            },
-            watch: {
-              count() {
-                alert('Increased!');
-              },
-            },
-          };
+            methods: {
+              ...mapActions(useStore, ['add'])
+            }
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
 
-    // a property used as a template identifier
+    // pinia state
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count }}</div>
-        </template>
         <script>
           export default {
-            props: ['count']
+            computed: mapState(useStore, {
+              count: state => state.todosCount
+            })
           }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-    // a property used as a template $props member expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ $props.count }}</div>
-        </template>
         <script>
           export default {
-            props: ['count']
+            computed: {
+              ...mapState(useStore, {
+                count: state => state.todosCount
+              })
+            }
           }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-
-    // properties used in a template expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count1 + count2 }}</div>
-        </template>
         <script>
           export default {
-            props: ['count1', 'count2']
-          };
+            computed: mapState(useStore, {
+              count (state) {
+                return state.todosCount
+              }
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-    // properties used in a template expression as $props member expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ $props.count1 + $props.count2 }}</div>
-        </template>
         <script>
           export default {
-            props: ['count1', 'count2']
-          };
+            computed: {
+              ...mapState(useStore, ['count'])
+            }
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
 
-    // a property used in v-if
+    // pinia writable state
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-if="count > 0"></div>
-        </template>
         <script>
           export default {
-            props: {
-              count: {
-                type: Number
-              }
-            }
-          };
+            computed: mapWritableState(useStore, {
+              count: state => state.todosCount
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-    // a property used in v-if as $props member expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-if="$props.count > 0"></div>
-        </template>
         <script>
           export default {
-            props: {
-              count: {
-                type: Number
-              }
+            computed: {
+              ...mapWritableState(useStore, {
+                count: state => state.todosCount
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-
-    // a property used in v-for
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-for="color in colors">{{ color }}</div>
-        </template>
         <script>
           export default {
-            props: {
+            computed: mapWritableState(useStore, {
+              count (state) {
+                return state.todosCount
+              }
+            })
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapWritableState(useStore, ['count'])
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `
+    },
+
+    // a property used in a script expression
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            created() {
+              alert(this.count + 1)
+            }
+          };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            created() {
+              alert(this.$props.count + 1)
+            }
+          };
+        </script>
+      `
+    },
+    // default options
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data () {
+              return {
+                foo: 1
+              }
+            },
+            computed: {
+              bar() {}
+            },
+            methods: {
+              baz () {}
+            }
+          };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup () {
+              return {
+                foo
+              }
+            },
+          };
+        </script>
+      `
+    },
+
+    // a property being watched
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              count: {
+                type: Number,
+                default: 0
+              }
+            },
+            watch: {
+              count() {
+                alert('Increased!');
+              },
+            },
+          };
+        </script>
+      `
+    },
+
+    // a property used as a template identifier
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          }
+        </script>
+      `
+    },
+    // a property used as a template $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ $props.count }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          }
+        </script>
+      `
+    },
+
+    // properties used in a template expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count1 + count2 }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['count1', 'count2']
+          };
+        </script>
+      `
+    },
+    // properties used in a template expression as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ $props.count1 + $props.count2 }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['count1', 'count2']
+          };
+        </script>
+      `
+    },
+
+    // a property used in v-if
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="count > 0"></div>
+        </template>
+        <script>
+          export default {
+            props: {
+              count: {
+                type: Number
+              }
+            }
+          };
+        </script>
+      `
+    },
+    // a property used in v-if as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="$props.count > 0"></div>
+        </template>
+        <script>
+          export default {
+            props: {
+              count: {
+                type: Number
+              }
+            }
+          };
+        </script>
+      `
+    },
+
+    // a property used in v-for
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="color in colors">{{ color }}</div>
+        </template>
+        <script>
+          export default {
+            props: {
               colors: {
                 type: Array,
                 default: () => []
@@ -2156,38 +2441,375 @@ tester.run('no-unused-properties', rule, {
       </script>`
     },
     {
-      // defineModel
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['a'])
+      const foo = defineModel('a')
+      </script>
+      <template>
+        {{ foo }}
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    // vuex unused mutations
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: mapMutations({
+              add2: 'increment',
+              add: 'iqwnei'
+            })
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: {
+              ...mapMutations({
+                add2: 'increment',
+                add: 'inrement'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: mapMutations(['add', 'add2'])
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: {
+              methods: {
+                ...mapMutations(['add', 'add2'])
+              }
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
+        }
+      ]
+    },
+
+    // vuex unused actions
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: {
+              ...mapActions({
+                add2: 'increment',
+                add: 'qweqwqewqwe'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: mapActions({
+              add2: 'increment',
+              add: 'inasdasda'
+            })
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: mapActions(['add', 'add2'])
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: {
+              ...mapActions(['add', 'add2'])
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
+        }
+      ]
+    },
+
+    // vuex unused state
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapState({
+              count2: state => state.todosCount,
+              count: state => state.todosCount
+            })
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapState({
+                count2: state => state.todosCount,
+                count: state => state.todosCount
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapState({
+              count2 (state) {
+                return state.todosCount
+              },
+
+              count (state) {
+                return state.todosCount
+              }
+            })
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapState(['count', 'count2', 'count3'])
+            }
+          }
+        </script>
+        <template>
+          {{ count2 }} {{ count3 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapState({
+              count: 'todosCount',
+              count2: 'someCount'
+            })
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
+    },
+
+    // vuex unused getters
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(['count', 'count2']),
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
       filename: 'test.vue',
       code: `
-      <script setup>
-      defineProps(['a'])
-      const foo = defineModel('a')
-      </script>
-      <template>
-        {{ foo }}
-      </template>
-      `
-    }
-  ],
-  invalid: [
+        <script>
+          export default {
+            computed: mapGetters(['count1', 'count2', 'count'])
+          }
+        </script>
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 4
+        }
+      ]
+    },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            methods: mapMutations({
-              add2: 'increment',
-              add: 'iqwnei'
+            computed: mapGetters({
+              count2: 'count',
+              count: 'count'
             })
           }
         </script>
         <template>
-          {{ add() }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'add2' of method found, but never used.",
+          message: "'count2' of computed property found, but never used.",
           line: 5
         }
       ]
@@ -2197,22 +2819,22 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            methods: {
-              ...mapMutations({
-                add2: 'increment',
-                add: 'inrement'
+            computed: {
+              ...mapGetters({
+                count: 'count',
+                count3: 'count2'
               })
             }
           }
         </script>
         <template>
-          {{ add() }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'add2' of method found, but never used.",
-          line: 6
+          message: "'count3' of computed property found, but never used.",
+          line: 7
         }
       ]
     },
@@ -2221,17 +2843,21 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            methods: mapMutations(['add', 'add2'])
+            computed: {
+              ...mapGetters({
+                a: { b :'c' }, // This is an invalid definition, but it does not use "a".
+              })
+            }
           }
         </script>
         <template>
-          {{ add() }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'add2' of method found, but never used.",
-          line: 4
+          message: "'a' of computed property found, but never used.",
+          line: 6
         }
       ]
     },
@@ -2240,31 +2866,34 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            methods: {
-              methods: {
-                ...mapMutations(['add', 'add2'])
-              }
+            computed: {
+              ...mapGetters([
+                "a",
+                a['foo'] // cannot be inferred.
+              ])
             }
           }
         </script>
         <template>
-          {{ add() }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'add2' of method found, but never used.",
+          message: "'a' of computed property found, but never used.",
           line: 6
         }
       ]
     },
+
+    // pinia unused actions
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
             methods: {
-              ...mapActions({
+              ...mapActions(useStore, {
                 add2: 'increment',
                 add: 'qweqwqewqwe'
               })
@@ -2287,7 +2916,7 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            methods: mapActions({
+            methods: mapActions(useStore, {
               add2: 'increment',
               add: 'inasdasda'
             })
@@ -2309,7 +2938,7 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            methods: mapActions(['add', 'add2'])
+            methods: mapActions(useStore, ['add', 'add2'])
           }
         </script>
         <template>
@@ -2329,7 +2958,7 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             methods: {
-              ...mapActions(['add', 'add2'])
+              ...mapActions(useStore, ['add', 'add2'])
             }
           }
         </script>
@@ -2344,12 +2973,14 @@ tester.run('no-unused-properties', rule, {
         }
       ]
     },
+
+    // pinia unused state
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: mapState({
+            computed: mapState(useStore, {
               count2: state => state.todosCount,
               count: state => state.todosCount
             })
@@ -2372,7 +3003,7 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             computed: {
-              ...mapState({
+              ...mapState(useStore, {
                 count2: state => state.todosCount,
                 count: state => state.todosCount
               })
@@ -2395,7 +3026,7 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            computed: mapState({
+            computed: mapState(useStore, {
               count2 (state) {
                 return state.todosCount
               },
@@ -2423,17 +3054,17 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             computed: {
-              ...mapGetters(['count', 'count2']),
+              ...mapState(useStore, ['count', 'count2', 'count3'])
             }
           }
         </script>
         <template>
-          {{ count }}
+          {{ count2 }} {{ count3 }}
         </template>
       `,
       errors: [
         {
-          message: "'count2' of computed property found, but never used.",
+          message: "'count' of computed property found, but never used.",
           line: 5
         }
       ]
@@ -2443,28 +3074,33 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            computed: mapGetters(['count1', 'count2', 'count'])
+            computed: mapState(useStore, {
+              count: 'todosCount',
+              count2: 'someCount'
+            })
           }
         </script>
         <template>
-          {{ count1 }} {{ count2 }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'count' of computed property found, but never used.",
-          line: 4
+          message: "'count2' of computed property found, but never used.",
+          line: 6
         }
       ]
     },
+
+    // pinia unused writable state
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: mapGetters({
-              count2: 'count',
-              count: 'count'
+            computed: mapWritableState(useStore, {
+              count2: state => state.todosCount,
+              count: state => state.todosCount
             })
           }
         </script>
@@ -2485,9 +3121,9 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             computed: {
-              ...mapGetters({
-                count: 'count',
-                count3: 'count2'
+              ...mapWritableState(useStore, {
+                count2: state => state.todosCount,
+                count: state => state.todosCount
               })
             }
           }
@@ -2498,8 +3134,8 @@ tester.run('no-unused-properties', rule, {
       `,
       errors: [
         {
-          message: "'count3' of computed property found, but never used.",
-          line: 7
+          message: "'count2' of computed property found, but never used.",
+          line: 6
         }
       ]
     },
@@ -2508,11 +3144,15 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            computed: {
-              ...mapGetters({
-                a: { b :'c' }, // This is an invalid definition, but it does not use "a".
-              })
-            }
+            computed: mapWritableState(useStore, {
+              count2 (state) {
+                return state.todosCount
+              },
+
+              count (state) {
+                return state.todosCount
+              }
+            })
           }
         </script>
         <template>
@@ -2521,8 +3161,8 @@ tester.run('no-unused-properties', rule, {
       `,
       errors: [
         {
-          message: "'a' of computed property found, but never used.",
-          line: 6
+          message: "'count2' of computed property found, but never used.",
+          line: 5
         }
       ]
     },
@@ -2532,57 +3172,93 @@ tester.run('no-unused-properties', rule, {
         <script>
           export default {
             computed: {
-              ...mapGetters([
-                "a",
-                a['foo'] // cannot be inferred.
-              ])
+              ...mapWritableState(useStore, ['count', 'count2', 'count3'])
             }
           }
         </script>
+        <template>
+          {{ count2 }} {{ count3 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapWritableState(useStore, {
+              count: 'todosCount',
+              count2: 'someCount'
+            })
+          }
+        </script>
         <template>
           {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'a' of computed property found, but never used.",
+          message: "'count2' of computed property found, but never used.",
           line: 6
         }
       ]
     },
 
-    // vuex unused state
+    // pinia unused getters
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
             computed: {
-              ...mapState(['count', 'count2', 'count3'])
+              ...mapGetters(useStore, ['count', 'count2']),
             }
           }
         </script>
         <template>
-          {{ count2 }} {{ count3 }}
+          {{ count }}
         </template>
       `,
       errors: [
         {
-          message: "'count' of computed property found, but never used.",
+          message: "'count2' of computed property found, but never used.",
           line: 5
         }
       ]
     },
-
-    // vuex unused state
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: mapState({
-              count: 'todosCount',
-              count2: 'someCount'
+            computed: mapGetters(useStore, ['count1', 'count2', 'count'])
+          }
+        </script>
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: mapGetters(useStore, {
+              count2: 'count',
+              count: 'count'
             })
           }
         </script>
@@ -2593,19 +3269,67 @@ tester.run('no-unused-properties', rule, {
       errors: [
         {
           message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, {
+                count: 'count',
+                count3: 'count2'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count3' of computed property found, but never used.",
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, {
+                a: { b :'c' }, // This is an invalid definition, but it does not use "a".
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'a' of computed property found, but never used.",
           line: 6
         }
       ]
     },
-
-    // vuex unused state
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
             computed: {
-              ...mapState(['count', 'additional'])
+              ...mapGetters(useStore, [
+                "a",
+                a['foo'] // cannot be inferred.
+              ])
             }
           }
         </script>
@@ -2615,8 +3339,8 @@ tester.run('no-unused-properties', rule, {
       `,
       errors: [
         {
-          message: "'additional' of computed property found, but never used.",
-          line: 5
+          message: "'a' of computed property found, but never used.",
+          line: 6
         }
       ]
     },

From e665b7c0d50683b142beb47de7cb1fca5dd5a7ae Mon Sep 17 00:00:00 2001
From: Magomed Chemurziev <m-chemurziev@ya.ru>
Date: Sun, 14 Apr 2024 14:33:01 +0300
Subject: [PATCH 3/4] Fixed false negatives for props in template in
 `vue/no-unused-properties` (#2435)

---
 lib/rules/no-unused-properties.js       |  33 +++++--
 tests/lib/rules/no-unused-properties.js | 121 ++++++++++++++++++++++++
 2 files changed, 148 insertions(+), 6 deletions(-)

diff --git a/lib/rules/no-unused-properties.js b/lib/rules/no-unused-properties.js
index 7eb7eb75d..b15cf5a85 100644
--- a/lib/rules/no-unused-properties.js
+++ b/lib/rules/no-unused-properties.js
@@ -233,6 +233,8 @@ module.exports = {
     const deepData = Boolean(options.deepData)
     const ignorePublicMembers = Boolean(options.ignorePublicMembers)
     const unreferencedOptions = new Set(options.unreferencedOptions || [])
+    /** @type {null | Pattern} */
+    let propsReferencePattern = null
 
     const propertyReferenceExtractor = definePropertyReferenceExtractor(
       context,
@@ -332,8 +334,9 @@ module.exports = {
 
         for (const property of container.properties) {
           if (
-            property.groupName === 'props' &&
-            propertyReferencesForProps.hasProperty(property.name)
+            (property.groupName === 'props' &&
+              propertyReferencesForProps.hasProperty(property.name)) ||
+            propertyReferences.hasProperty('$props')
           ) {
             // used props
             continue
@@ -369,6 +372,7 @@ module.exports = {
             }
             continue
           }
+
           context.report({
             node: property.node,
             messageId: 'unused',
@@ -450,9 +454,9 @@ module.exports = {
             return
           }
 
-          const pattern = target.parent.id
+          propsReferencePattern = target.parent.id
           const propertyReferences =
-            propertyReferenceExtractor.extractFromPattern(pattern)
+            propertyReferenceExtractor.extractFromPattern(propsReferencePattern)
           container.propertyReferencesForProps.push(propertyReferences)
         },
         onDefineModelEnter(node, model) {
@@ -709,9 +713,26 @@ module.exports = {
        * @param {VExpressionContainer} node
        */
       VExpressionContainer(node) {
-        templatePropertiesContainer.propertyReferences.push(
+        const property =
           propertyReferenceExtractor.extractFromVExpressionContainer(node)
-        )
+
+        templatePropertiesContainer.propertyReferences.push(property)
+
+        if (!propsReferencePattern) {
+          return
+        }
+
+        // props.prop in template
+        for (const key of property.allProperties().keys()) {
+          if (
+            propsReferencePattern.type === 'Identifier' &&
+            propsReferencePattern.name === key
+          ) {
+            templatePropertiesContainer.propertyReferences.push(
+              property.getNest(key)
+            )
+          }
+        }
       },
       /**
        * @param {VAttribute} node
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 64e858d31..b89ea01f0 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -718,6 +718,20 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property used as a template $props expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ $props }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          }
+        </script>
+      `
+    },
 
     // properties used in a template expression
     {
@@ -910,6 +924,20 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property used in v-on as $props expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="alert($props)" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
 
     // data used in a script expression
     {
@@ -2452,6 +2480,48 @@ tester.run('no-unused-properties', rule, {
         {{ foo }}
       </template>
       `
+    },
+
+    // props.prop in template
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{props}}
+      </template>
+      <script setup>
+      const props = defineProps(['a', 'b', 'c'])
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{props.a}}
+      </template>
+      <script setup>
+      const props = defineProps(['a'])
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{foo.a}}
+      </template>
+      <script setup>
+      const foo = defineProps(['a'])
+      </script>`
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{ foo: string, bar: string }>()
+      </script>
+      <template>
+      {{ props.foo }}{{ bar }}
+      </template>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
   invalid: [
@@ -4619,6 +4689,57 @@ tester.run('no-unused-properties', rule, {
           line: 6
         }
       ]
+    },
+
+    // a property used as a template $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ $props.foo }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['foo', 'bar']
+          }
+        </script>
+      `,
+      errors: ["'bar' of property found, but never used."]
+    },
+
+    // props.prop in template
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{props.a}}
+      </template>
+      <script setup>
+      const props = defineProps(['a', 'b'])
+      </script>`,
+      errors: ["'b' of property found, but never used."]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{foo.a}}
+      </template>
+      <script setup>
+      const foo = defineProps(['a', 'b'])
+      </script>`,
+      errors: ["'b' of property found, but never used."]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{ foo: string, bar: string, baz: string }>()
+      </script>
+      <template>
+      {{ props.foo }}{{ bar }}
+      </template>`,
+      errors: ["'baz' of property found, but never used."],
+      ...getTypeScriptFixtureTestOptions()
     }
   ]
 })

From cfad3eecc506effaedf43cc74f231d19fc780997 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 14 Apr 2024 20:41:06 +0900
Subject: [PATCH 4/4] 9.25.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index efa2d8ab3..ee2e37c71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "9.24.1",
+  "version": "9.25.0",
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
   "scripts": {