From 461918d188c4742d6b0a3920bea3a4abeb8efd45 Mon Sep 17 00:00:00 2001
From: Marc Farias Jones <marc.jones@vmlyr.com>
Date: Sun, 21 Jul 2024 16:00:44 -0700
Subject: [PATCH 1/5] Vuex and Pinia support for no-undef-properties

---
 lib/rules/no-undef-properties.js       |  57 +++++-
 tests/lib/rules/no-undef-properties.js | 251 +++++++++++++++++++++++++
 2 files changed, 307 insertions(+), 1 deletion(-)

diff --git a/lib/rules/no-undef-properties.js b/lib/rules/no-undef-properties.js
index 29fbb714b..d9183fee2 100644
--- a/lib/rules/no-undef-properties.js
+++ b/lib/rules/no-undef-properties.js
@@ -111,6 +111,11 @@ module.exports = {
     ).map(toRegExp)
     const propertyReferenceExtractor = definePropertyReferenceExtractor(context)
     const programNode = context.getSourceCode().ast
+    /**
+     * Property names identified as defined via a Vuex or Pinia helpers
+     * @type {string[]}
+     */
+    const propertiesDefinedByVuexOrPiniaHelpers = []
 
     /**
      * @param {ASTNode} node
@@ -185,7 +190,8 @@ module.exports = {
       report(node, name, messageId = 'undef') {
         if (
           reserved.includes(name) ||
-          ignores.some((ignore) => ignore.test(name))
+          ignores.some((ignore) => ignore.test(name)) ||
+          propertiesDefinedByVuexOrPiniaHelpers.includes(name)
         ) {
           return
         }
@@ -331,6 +337,55 @@ module.exports = {
         }
       }),
       utils.defineVueVisitor(context, {
+        /**
+         * @param {CallExpression} node
+         */
+        CallExpression(node) {
+          if (node.callee.type !== 'Identifier') return
+          /** @type {'methods'|'computed'|null} */
+          let groupName = null
+          if (/^mapMutations|mapActions$/u.test(node.callee.name)) {
+            groupName = GROUP_METHODS
+          } else if (
+            /^mapState|mapGetters|mapWritableState$/u.test(node.callee.name)
+          ) {
+            groupName = GROUP_COMPUTED_PROPERTY
+          }
+
+          if (!groupName || node.arguments.length === 0) return
+          // 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' })`
+            // `mapState({ count: state => state.todosCount })`
+            for (const prop of arg.properties) {
+              const name =
+                prop.type === 'SpreadElement'
+                  ? null
+                  : utils.getStaticPropertyName(prop)
+              if (name) {
+                propertiesDefinedByVuexOrPiniaHelpers.push(name)
+              }
+            }
+          } else if (arg.type === 'ArrayExpression') {
+            // e.g. `mapMutations(['add'])`
+            for (const element of arg.elements) {
+              if (
+                !element ||
+                (element.type !== 'Literal' &&
+                  element.type !== 'TemplateLiteral')
+              ) {
+                continue
+              }
+              const name = utils.getStringLiteralValue(element)
+              if (name) {
+                propertiesDefinedByVuexOrPiniaHelpers.push(name)
+              }
+            }
+          }
+        },
         onVueObjectEnter(node) {
           const ctx = getVueComponentContext(node)
 
diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index 83812a248..d234bb448 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -561,7 +561,258 @@ tester.run('no-undef-properties', rule, {
         }
       }
     },
+    {
+      // Vuex
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapState({
+            a: (vm) => vm.a,
+            b: (vm) => vm.b,
+          })
+        },
+        methods: {
+          c() {return this.a * this.b}
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'Vuex';
 
+      export default {
+        computed: {
+          ...mapActions({
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapMutations({
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapActions(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapMutations(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapGetters(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      // Pinia
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapGetters(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapState(useStore, {
+            a: 'a',
+            b: store => store.b,
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, {
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapActions(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a() }} {{ b() }}
+      </template>
+      `
+    },
     `
     <script setup>
     const model = defineModel();

From 91790a330b594af593ad9af649bc4ad57b0192a3 Mon Sep 17 00:00:00 2001
From: Marc Farias Jones <marc.jones@vmlyr.com>
Date: Sun, 21 Jul 2024 19:06:22 -0700
Subject: [PATCH 2/5] fix some tests

---
 tests/lib/rules/no-undef-properties.js | 28 +++++++++-----------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index d234bb448..4102dcc4e 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -592,13 +592,11 @@ tester.run('no-undef-properties', rule, {
       import { mapActions } from 'Vuex';
 
       export default {
-        computed: {
+          methods: {
           ...mapActions({
             a: 'a',
             b: 'b',
-          })
-        },
-        methods: {
+          }),
           c() {return this.a()},
           d() {return this.b()},
         }
@@ -616,13 +614,11 @@ tester.run('no-undef-properties', rule, {
       import { mapMutations } from 'Vuex';
 
       export default {
-        computed: {
+          methods: {
           ...mapMutations({
             a: 'a',
             b: 'b',
-          })
-        },
-        methods: {
+          }),
           c() {return this.a()},
           d() {return this.b()},
         }
@@ -640,10 +636,8 @@ tester.run('no-undef-properties', rule, {
       import { mapActions } from 'Vuex';
 
       export default {
-        computed: {
-          ...mapActions(['a', 'b'])
-        },
-        methods: {
+          methods: {
+          ...mapActions(['a', 'b']),
           c() {return this.a()},
           d() {return this.b()},
         }
@@ -661,10 +655,8 @@ tester.run('no-undef-properties', rule, {
       import { mapMutations } from 'Vuex';
 
       export default {
-        computed: {
-          ...mapMutations(['a', 'b'])
-        },
         methods: {
+          ...mapMutations(['a', 'b']),
           c() {return this.a()},
           d() {return this.b()},
         }
@@ -799,10 +791,8 @@ tester.run('no-undef-properties', rule, {
       import { useStore } from '../store'
 
       export default {
-        computed: {
-          ...mapActions(useStore, ['a', 'b'])
-        },
-        methods: {
+          methods: {
+          ...mapActions(useStore, ['a', 'b']),
           c() {return this.a()},
           d() {return this.b()},
         }

From 1a3d658d072ff77e83cb32d31a655392045a189c Mon Sep 17 00:00:00 2001
From: Marc Farias Jones <marc.jones@vmlyr.com>
Date: Fri, 30 Aug 2024 15:32:23 -0700
Subject: [PATCH 3/5] rename variable to propertiesDefinedByStoreHelpers,
 change it to be a set, use isStringLiteral util

---
 lib/rules/no-undef-properties.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/lib/rules/no-undef-properties.js b/lib/rules/no-undef-properties.js
index d9183fee2..711c2ed22 100644
--- a/lib/rules/no-undef-properties.js
+++ b/lib/rules/no-undef-properties.js
@@ -113,9 +113,9 @@ module.exports = {
     const programNode = context.getSourceCode().ast
     /**
      * Property names identified as defined via a Vuex or Pinia helpers
-     * @type {string[]}
+     * @type {Set<string>}
      */
-    const propertiesDefinedByVuexOrPiniaHelpers = []
+    const propertiesDefinedByStoreHelpers = new Set()
 
     /**
      * @param {ASTNode} node
@@ -191,7 +191,7 @@ module.exports = {
         if (
           reserved.includes(name) ||
           ignores.some((ignore) => ignore.test(name)) ||
-          propertiesDefinedByVuexOrPiniaHelpers.includes(name)
+          propertiesDefinedByStoreHelpers.has(name)
         ) {
           return
         }
@@ -366,22 +366,18 @@ module.exports = {
                   ? null
                   : utils.getStaticPropertyName(prop)
               if (name) {
-                propertiesDefinedByVuexOrPiniaHelpers.push(name)
+                propertiesDefinedByStoreHelpers.add(name)
               }
             }
           } else if (arg.type === 'ArrayExpression') {
             // e.g. `mapMutations(['add'])`
             for (const element of arg.elements) {
-              if (
-                !element ||
-                (element.type !== 'Literal' &&
-                  element.type !== 'TemplateLiteral')
-              ) {
+              if (!element || !utils.isStringLiteral(element)) {
                 continue
               }
               const name = utils.getStringLiteralValue(element)
               if (name) {
-                propertiesDefinedByVuexOrPiniaHelpers.push(name)
+                propertiesDefinedByStoreHelpers.add(name)
               }
             }
           }

From 41c59613ebed2e2f2c7896012eba0c1b240f0e80 Mon Sep 17 00:00:00 2001
From: Marc Farias Jones <marc.jones@vmlyr.com>
Date: Wed, 4 Sep 2024 17:42:43 -0700
Subject: [PATCH 4/5] Added invalid test cases

---
 tests/lib/rules/no-undef-properties.js | 315 +++++++++++++++++++++++++
 1 file changed, 315 insertions(+)

diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index 4102dcc4e..108ed0554 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -1455,6 +1455,321 @@ tester.run('no-undef-properties', rule, {
           line: 14
         }
       ]
+    },
+    {
+      // Vuex
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapState({
+            a: (vm) => vm.a,
+            b: (vm) => vm.b,
+          })
+        },
+        methods: {
+          c() {return this.a * this.g}
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ c }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'g' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'Vuex';
+
+      export default {
+          methods: {
+          ...mapActions({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.f()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'f' is not defined.",
+          line: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'Vuex';
+
+      export default {
+          methods: {
+          ...mapMutations({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.x()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'x' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'Vuex';
+
+      export default {
+          methods: {
+          ...mapActions(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.f()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'f' is not defined.",
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'Vuex';
+
+      export default {
+        methods: {
+          ...mapMutations(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ q }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'q' is not defined.",
+          line: 14
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'Vuex';
+
+      export default {
+        computed: {
+          ...mapGetters(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 12
+        }
+      ]
+    },
+    {
+      // Pinia
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapGetters(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapState(useStore, {
+            a: 'a',
+            b: store => store.b,
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ q }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'q' is not defined.",
+          line: 20
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, {
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+          methods: {
+          ...mapActions(useStore, ['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.x()},
+        }
+      }
+      </script>
+      <template>
+      {{ a() }} {{ b() }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'x' is not defined.",
+          line: 11
+        }
+      ]
     }
   ]
 })

From 8aef8aa6fc59e5505e837b92ac7f9ecbc5bbaaed Mon Sep 17 00:00:00 2001
From: Marc Farias Jones <marc.jones@vmlyr.com>
Date: Thu, 5 Sep 2024 07:26:06 -0700
Subject: [PATCH 5/5] fix capitalization of vuex imports

---
 tests/lib/rules/no-undef-properties.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index 108ed0554..63313b4b0 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -566,7 +566,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapState } from 'Vuex';
+      import { mapState } from 'vuex';
 
       export default {
         computed: {
@@ -589,7 +589,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapActions } from 'Vuex';
+      import { mapActions } from 'vuex';
 
       export default {
           methods: {
@@ -611,7 +611,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapMutations } from 'Vuex';
+      import { mapMutations } from 'vuex';
 
       export default {
           methods: {
@@ -633,7 +633,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapActions } from 'Vuex';
+      import { mapActions } from 'vuex';
 
       export default {
           methods: {
@@ -652,7 +652,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapMutations } from 'Vuex';
+      import { mapMutations } from 'vuex';
 
       export default {
         methods: {
@@ -671,7 +671,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapGetters } from 'Vuex';
+      import { mapGetters } from 'vuex';
 
       export default {
         computed: {
@@ -1461,7 +1461,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapState } from 'Vuex';
+      import { mapState } from 'vuex';
 
       export default {
         computed: {
@@ -1490,7 +1490,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapActions } from 'Vuex';
+      import { mapActions } from 'vuex';
 
       export default {
           methods: {
@@ -1518,7 +1518,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapMutations } from 'Vuex';
+      import { mapMutations } from 'vuex';
 
       export default {
           methods: {
@@ -1547,7 +1547,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapActions } from 'Vuex';
+      import { mapActions } from 'vuex';
 
       export default {
           methods: {
@@ -1573,7 +1573,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapMutations } from 'Vuex';
+      import { mapMutations } from 'vuex';
 
       export default {
         methods: {
@@ -1598,7 +1598,7 @@ tester.run('no-undef-properties', rule, {
       filename: 'test.vue',
       code: `
       <script>
-      import { mapGetters } from 'Vuex';
+      import { mapGetters } from 'vuex';
 
       export default {
         computed: {