From df63ab26d52b8be55672e73191058106b852930c Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Tue, 18 Jan 2022 17:48:26 +0900
Subject: [PATCH] Add support for Vue2 functional component to
 `vue/no-unused-properties` and `vue/no-undef-properties` rules

---
 lib/utils/property-references.js        | 19 ++++++++--
 tests/lib/rules/no-undef-properties.js  | 43 +++++++++++++++++++++++
 tests/lib/rules/no-unused-properties.js | 46 +++++++++++++++++++++++++
 3 files changed, 105 insertions(+), 3 deletions(-)

diff --git a/lib/utils/property-references.js b/lib/utils/property-references.js
index 37709ee0b..5170240d8 100644
--- a/lib/utils/property-references.js
+++ b/lib/utils/property-references.js
@@ -96,6 +96,12 @@ function definePropertyReferenceExtractor(context) {
   /** @type {{ toRefNodes: Set<ESNode>, toRefsNodes: Set<ESNode>} | null} */
   let toRefSet = null
 
+  let isFunctionalTemplate = false
+  const templateBody = context.getSourceCode().ast.templateBody
+  if (templateBody) {
+    isFunctionalTemplate = utils.hasAttribute(templateBody, 'functional')
+  }
+
   function getToRefSet() {
     if (toRefSet) {
       return toRefSet
@@ -578,6 +584,7 @@ function definePropertyReferenceExtractor(context) {
 
       ignoreRef = (name) => globalScope.set.has(name)
     }
+    /** @type {IPropertyReferences[]} */
     const references = []
     for (const id of node.references
       .filter((ref) => ref.variable == null)
@@ -585,9 +592,15 @@ function definePropertyReferenceExtractor(context) {
       if (ignoreRef(id.name)) {
         continue
       }
-      references.push(
-        extractFromName(id.name, id, () => extractFromExpression(id, true))
-      )
+      if (!isFunctionalTemplate) {
+        references.push(
+          extractFromName(id.name, id, () => extractFromExpression(id, true))
+        )
+      } else {
+        if (id.name === 'props') {
+          references.push(extractFromExpression(id, true))
+        }
+      }
     }
     return mergePropertyReferences(references)
   }
diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index f432a8d0e..8b8ebbb1d 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -517,6 +517,24 @@ tester.run('no-undef-properties', rule, {
         };
       </script>
       `
+    },
+
+    // Vue2 functional component
+    {
+      filename: 'test.vue',
+      code: `
+      <template functional>
+        <div>{{props.a}} {{props.b}}</div>
+      </template>
+
+      <script>
+      export default {
+        props: {
+          a: String,
+          b: String,
+        },
+      };
+      </script>`
     }
   ],
 
@@ -1086,6 +1104,31 @@ tester.run('no-undef-properties', rule, {
           line: 16
         }
       ]
+    },
+
+    // Vue2 functional component
+    {
+      filename: 'test.vue',
+      code: `
+      <template functional>
+        <div>{{props.a}} {{props.b}} {{props.c}}</div>
+      </template>
+
+      <script>
+      export default {
+        props: {
+          a: String,
+          b: String,
+        },
+      };
+      </script>`,
+      errors: [
+        {
+          message: "'c' is not defined.",
+          line: 3,
+          column: 46
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index ecd41243e..0023443cb 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -1678,6 +1678,24 @@ tester.run('no-unused-properties', rule, {
       <style lang="scss" scoped>
       //
       </style>`
+    },
+
+    // Vue2 functional component
+    {
+      filename: 'test.vue',
+      code: `
+      <template functional>
+        <div>{{props.a}} {{props.b}}</div>
+      </template>
+
+      <script>
+      export default {
+        props: {
+          a: String,
+          b: String,
+        },
+      };
+      </script>`
     }
   ],
 
@@ -2756,6 +2774,34 @@ tester.run('no-unused-properties', rule, {
         "'foo.bar.b' of data found, but never used.",
         "'foo.baz' of data found, but never used."
       ]
+    },
+
+    // Vue2 functional component
+    {
+      filename: 'test.vue',
+      code: `
+      <template functional>
+        <div>{{a}} {{b}} {{props.c}}</div>
+      </template>
+
+      <script>
+      export default {
+        props: {
+          a: String,
+          b: String,
+        },
+      };
+      </script>`,
+      errors: [
+        {
+          message: "'a' of property found, but never used.",
+          line: 9
+        },
+        {
+          message: "'b' of property found, but never used.",
+          line: 10
+        }
+      ]
     }
   ]
 })