feat: add prefer-use-template-ref rule

lib/rules/prefer-use-template-ref.js

@@ -6,6 +6,12 @@
 
 const utils = require('../utils')
 
+/** @param expression {Expression | null} */
+function expressionIsRef(expression) {
+  // @ts-ignore
+  return expression?.callee?.name === 'ref'
+}
+
 /** @type {import("eslint").Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -47,19 +53,33 @@ module.exports = {
         },
         {
           VariableDeclarator(declarator) {
-            // @ts-ignore
-            if (declarator.init?.callee?.name !== 'ref') {
+            if (!expressionIsRef(declarator.init)) {
               return
             }
 
             scriptRefs.push({
+              // @ts-ignore
               node: declarator.init,
               // @ts-ignore
               ref: declarator.id.name
             })
           }
         }
       ),
+      utils.executeOnVue(context, (obj) => {
+        const properties = utils.iterateProperties(obj, new Set(['data']))
+        for (const node of properties) {
+          // @ts-ignore
+          if (expressionIsRef(node.property.value)) {
+            scriptRefs.push({
+              // @ts-ignore
+              node: node.property.value,
+              // @ts-ignore
+              ref: node.property.key.name
+            })
+          }
+        }
+      }),
       {
         'Program:exit'() {
           for (const templateRef of templateRefs) {

tests/lib/rules/prefer-use-template-ref.js

@@ -58,7 +58,8 @@ tester.run('prefer-use-template-ref', rule, {
       <script setup>
         import { useTemplateRef } from 'vue';
         function getFirstListItemElement() {
-          const firstListItem = useTemplateRef('firstListItem');
+          const firstListItem = useTemplateRef('firstListItem')
+          console.log(firstListItem)
         }
       </script>
       `
@@ -121,18 +122,30 @@ tester.run('prefer-use-template-ref', rule, {
           Name:
           <input v-model="name" />
         </label>
-        <p ref="textRef">Text</p>
+        <p ref="textRef">{{niceName}}</p>
         <button
       </template>
       <script>
         import { useTemplateRef } from 'vue';
         export default {
           name: 'NameRow',
+          methods: {
+            someFunction() {
+              return {
+                label: ref(5),
+              }
+            }
+          }
           data() {
             return {
               label: useTemplateRef('label'),
               name: ref('')
             }
+          },
+          computed: {
+            niceName() {
+              return 'Nice ' + this.name;
+            }
           }
         }
       </script>
@@ -263,30 +276,41 @@ tester.run('prefer-use-template-ref', rule, {
       filename: 'options-api-only-refs.vue',
       code: `
       <template>
-        <label ref="label">
+        <label ref="labelElem">
           Name:
           <input v-model="name" />
         </label>
-        <button
+        {{ loremIpsum }}
       </template>
       <script>
         import { ref } from 'vue';
         export default {
           name: 'NameRow',
+          props: {
+            defaultLabel: {
+              type: String,
+            },
+          },
           data() {
             return {
-              label: ref(),
+              label: ref(this.defaultLabel),
+              labelElem: ref(),
               name: ref('')
             }
+          },
+          computed: {
+            loremIpsum() {
+              return this.name + ' lorem ipsum'
+            }
           }
         }
       </script>
       `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
-          line: 14,
-          column: 33
+          line: 21,
+          column: 22
         }
       ]
     }