Add support for Vue2 functional component to vue/no-unused-properties and vue/no-undef-properties rules (#1761)

Author: ota-meshi

Diff for: 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,16 +584,23 @@ function definePropertyReferenceExtractor(context) {
 
       ignoreRef = (name) => globalScope.set.has(name)
     }
+    /** @type {IPropertyReferences[]} */
     const references = []
     for (const id of node.references
       .filter((ref) => ref.variable == null)
       .map((ref) => ref.id)) {
       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 for: 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 for: 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
+        }
+      ]
     }
   ]
 })