fix(prefer-use-template-ref): should check only root-level variables …

…(rebase to vuejs#2608)
Thomasan1999 · Nov 18, 2024 · 39f5a64 · 39f5a64
1 parent a4e2a2e
commit 39f5a64
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 36 deletions.
diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
@@ -36,9 +36,9 @@ function getScriptRefsFromSetupFunction(body) {
   const variableDeclarators = variableDeclarations.map(
     (declaration) => declaration.declarations[0]
   )
-  const refDeclarators = variableDeclarators.filter(
+  const refDeclarators = variableDeclarators.filter((declarator) =>
     // @ts-ignore
-    (declarator) => declarator.init?.callee?.name === 'ref'
+    ['ref', 'shallowRef'].includes(declarator.init?.callee?.name)
   )
 
   return refDeclarators.map(convertDeclaratorToScriptRef)

diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
@@ -211,11 +211,11 @@ tester.run('prefer-use-template-ref', rule, {
           </div>
       </template>
       <script setup>
-        import { ref } from 'vue';
+        import { ref, shallowRef } from 'vue';
         function getFirstListItemElement() {
           const firstListItem = ref();
           const nestedCallback = () => {
-            const second = ref();
+            const second = shallowRef();
             console.log(second);
           }
           nestedCallback();
@@ -236,12 +236,12 @@ tester.run('prefer-use-template-ref', rule, {
           </div>
       </template>
       <script>
-        import { ref } from 'vue';
+        import { ref, shallowRef } from 'vue';
         export default {
           name: 'ComponentWithRefInBlock',
           setup() {
             function getFirstListItemElement() {
-              const firstListItem = ref();
+              const firstListItem = shallowRef();
               const nestedCallback = () => {
                 const second = ref();
                 console.log(second);
@@ -333,36 +333,6 @@ tester.run('prefer-use-template-ref', rule, {
         }
       ]
     },
-    {
-      filename: 'ref-in-block.vue',
-      code: `
-      <template>
-          <div>
-            <ul>
-              <li ref="firstListItem">Morning</li>
-              <li>Afternoon</li>
-              <li>Evening</li>
-            </ul>
-          </div>
-      </template>
-      <script setup>
-        import { ref } from 'vue';
-        function getFirstListItemElement() {
-          const firstListItem = ref();
-        }
-      </script>
-      `,
-      errors: [
-        {
-          messageId: 'preferUseTemplateRef',
-          data: {
-            name: 'ref'
-          },
-          line: 14,
-          column: 33
-        }
-      ]
-    },
     {
       filename: 'setup-function-only-refs.vue',
       code: `