fix(prefer-use-template-ref): add support for shallowRef (#2608)

Author: ntnyq

docs/rules/index.md

@@ -270,7 +270,7 @@ For example:
 | [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
 | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
 | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
-| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref` for template refs |  | :hammer: |
+| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |  | :hammer: |
 | [vue/require-default-export](./require-default-export.md) | require components to be the default export |  | :warning: |
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |

docs/rules/prefer-use-template-ref.md

@@ -2,31 +2,32 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/prefer-use-template-ref
-description: require using `useTemplateRef` instead of `ref` for template refs
+description: require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
 since: v9.31.0
 ---
 
 # vue/prefer-use-template-ref
 
-> require using `useTemplateRef` instead of `ref` for template refs
+> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
 
 ## :book: Rule Details
 
 Vue 3.5 introduced a new way of obtaining template refs via
 the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API.
 
-This rule enforces using the new `useTemplateRef` function instead of `ref` for template refs.
+This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs.
 
 <eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
 
 ```vue
 <template>
   <button ref="submitRef">Submit</button>
+  <button ref="cancelRef">Cancel</button>
   <button ref="closeRef">Close</button>
 </template>
 
 <script setup>
-  import { ref, useTemplateRef } from 'vue';
+  import { ref, shallowRef, useTemplateRef } from 'vue';
 
   /* ✓ GOOD */
   const submitRef = useTemplateRef('submitRef');
@@ -35,6 +36,7 @@ This rule enforces using the new `useTemplateRef` function instead of `ref` for
 
   /* ✗ BAD */
   const closeRef = ref();
+  const cancelRef = shallowRef();
 </script>
 ```
 
@@ -47,14 +49,16 @@ This rule skips `ref` template function refs as these should be used to allow cu
 
 ```vue
 <template>
-  <button :ref="ref => button = ref">Content</button>
+  <button :ref="ref => submitRef = ref">Submit</button>
+  <button :ref="ref => cancelRef = ref">Cancel</button>
 </template>
 
 <script setup>
-  import { ref } from 'vue';
+  import { ref, shallowRef } from 'vue';
   
   /* ✓ GOOD */
-  const button = ref();
+  const submitRef = ref();
+  const cancelRef = shallowRef();
 </script>
 ```
 

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

@@ -8,8 +8,12 @@ const utils = require('../utils')
 
 /** @param expression {Expression | null} */
 function expressionIsRef(expression) {
-  // @ts-ignore
-  return expression?.callee?.name === 'ref'
+  return (
+    // @ts-ignore
+    expression?.callee?.name === 'ref' ||
+    // @ts-ignore
+    expression?.callee?.name === 'shallowRef'
+  )
 }
 
 /** @type {import("eslint").Rule.RuleModule} */
@@ -18,13 +22,13 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description:
-        'require using `useTemplateRef` instead of `ref` for template refs',
+        'require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html'
     },
     schema: [],
     messages: {
-      preferUseTemplateRef: "Replace 'ref' with 'useTemplateRef'."
+      preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'."
     }
   },
   /** @param {RuleContext} context */
@@ -79,7 +83,11 @@ module.exports = {
 
             context.report({
               node: scriptRef.node,
-              messageId: 'preferUseTemplateRef'
+              messageId: 'preferUseTemplateRef',
+              data: {
+                // @ts-ignore
+                name: scriptRef.node?.callee?.name
+              }
             })
           }
         }

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

@@ -214,6 +214,9 @@ tester.run('prefer-use-template-ref', rule, {
       errors: [
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 7,
           column: 22
         }
@@ -235,6 +238,9 @@ tester.run('prefer-use-template-ref', rule, {
       errors: [
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 9,
           column: 22
         }
@@ -256,11 +262,17 @@ tester.run('prefer-use-template-ref', rule, {
       errors: [
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 8,
           column: 25
         },
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 9,
           column: 22
         }
@@ -288,6 +300,9 @@ tester.run('prefer-use-template-ref', rule, {
       errors: [
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 14,
           column: 33
         }
@@ -314,10 +329,35 @@ tester.run('prefer-use-template-ref', rule, {
       errors: [
         {
           messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
           line: 12,
           column: 28
         }
       ]
+    },
+    {
+      filename: 'single-shallowRef.vue',
+      code: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { shallowRef } from 'vue';
+        const root = shallowRef();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'shallowRef'
+          },
+          line: 7,
+          column: 22
+        }
+      ]
     }
   ]
 })