From 95f7028a6629beee0b824ab64667c2d54ff14ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1ndor=20Levcs=C3=A1k?= <levchak.sanek@gmail.com>
Date: Mon, 4 Dec 2023 21:00:54 +0100
Subject: [PATCH 1/2] feat (vue/no-unused-properties): mark properties as used
 when accessed via $props.<prop> in template

---
 lib/utils/property-references.js        |  11 ++-
 tests/lib/rules/no-unused-properties.js | 107 ++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 1 deletion(-)

diff --git a/lib/utils/property-references.js b/lib/utils/property-references.js
index 4d4e39805..dc0e639ce 100644
--- a/lib/utils/property-references.js
+++ b/lib/utils/property-references.js
@@ -655,8 +655,17 @@ function definePropertyReferenceExtractor(
           references.push(extractFromExpression(id, true))
         }
       } else {
+        const referenceId =
+          id.name === '$props' &&
+          id.parent.type === 'MemberExpression' &&
+          id.parent.property.type === 'Identifier'
+            ? id.parent.property
+            : id
+
         references.push(
-          extractFromName(id.name, id, () => extractFromExpression(id, true))
+          extractFromName(referenceId.name, referenceId, () =>
+            extractFromExpression(referenceId, true)
+          )
         )
       }
     }
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 0139559b1..84d781fd5 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -139,6 +139,20 @@ tester.run('no-unused-properties', rule, {
         </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
     {
@@ -154,6 +168,20 @@ tester.run('no-unused-properties', rule, {
         </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
     {
@@ -173,6 +201,24 @@ tester.run('no-unused-properties', rule, {
         </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
     {
@@ -193,6 +239,25 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property used in v-for as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="color in $props.colors">{{ color }}</div>
+        </template>
+        <script>
+          export default {
+            props: {
+              colors: {
+                type: Array,
+                default: () => []
+              }
+            }
+          };
+        </script>
+      `
+    },
 
     // a property used in v-html
     {
@@ -208,6 +273,20 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property used in v-html as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-html="$props.message" />
+        </template>
+        <script>
+          export default {
+            props: ['message']
+          };
+        </script>
+      `
+    },
 
     // a property passed in a component
     {
@@ -223,6 +302,20 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property passed in a component as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <counter :count="$props.count" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
 
     // a property used in v-on
     {
@@ -238,6 +331,20 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    // a property used in v-on as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="alert($props.count)" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
 
     // data used in a script expression
     {

From 04a43f0ae042d14d5a7c80570e40b880bb480d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1ndor=20Levcs=C3=A1k?= <levchak.sanek@gmail.com>
Date: Wed, 27 Dec 2023 12:08:59 +0100
Subject: [PATCH 2/2] feat (vue/no-unused-properties): mark properties as used
 when accessed via $props.<prop> in script

---
 lib/utils/property-references.js        | 17 ++++++++-
 tests/lib/rules/no-unused-properties.js | 51 +++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/lib/utils/property-references.js b/lib/utils/property-references.js
index dc0e639ce..1ed26640f 100644
--- a/lib/utils/property-references.js
+++ b/lib/utils/property-references.js
@@ -317,7 +317,22 @@ function definePropertyReferenceExtractor(
           if (parent.object === node) {
             // `arg.foo`
             const name = utils.getStaticPropertyName(parent)
-            if (name) {
+
+            if (
+              name === '$props' &&
+              parent.parent.type === 'MemberExpression'
+            ) {
+              // `$props.arg`
+              const propName = utils.getStaticPropertyName(parent.parent)
+
+              if (!propName) return unknownMemberAsUnreferenced ? NEVER : ANY
+
+              return new PropertyReferencesForMember(
+                parent.parent,
+                propName,
+                withInTemplate
+              )
+            } else if (name) {
               return new PropertyReferencesForMember(
                 parent,
                 name,
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 84d781fd5..3363f9128 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -67,6 +67,19 @@ tester.run('no-unused-properties', rule, {
         </script>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            created() {
+              alert(this.$props.count + 1)
+            }
+          };
+        </script>
+      `
+    },
     // default options
     {
       filename: 'test.vue',
@@ -1303,6 +1316,21 @@ tester.run('no-unused-properties', rule, {
       </script>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['x'],
+          computed: {
+            y: {
+              get: () => this.$props.x * 2
+            }
+          }
+        };
+      </script>
+      `
+    },
 
     // deep data
     {
@@ -1694,6 +1722,29 @@ tester.run('no-unused-properties', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      </template>
+      <script>
+      export default {
+        props: {
+          a: String,
+        },
+        computed: {
+          /** @public */
+          b () { return this.$props.a },
+        },
+      }
+      </script>`,
+      options: [
+        {
+          groups: ['props', 'computed'],
+          ignorePublicMembers: true
+        }
+      ]
+    },
 
     // expose
     {