From 776ebf25b2e7570e78ac1c148fc45c823c21a542 Mon Sep 17 00:00:00 2001
From: vaakian X <vaakian@gmail.com>
Date: Tue, 11 Jul 2023 17:26:31 +0800
Subject: [PATCH] fix(compiler-sfc): fix using imported ref as template ref
 during dev (#7593)

close #7567
---
 .../__snapshots__/compileScript.spec.ts.snap    | 15 +++++++++++++++
 .../__tests__/compileScript.spec.ts             | 17 +++++++++++++++++
 .../compiler-sfc/src/script/importUsageCheck.ts |  3 +++
 3 files changed, 35 insertions(+)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 18b5d90eaf6..de19ec5aaf2 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -775,6 +775,21 @@ return { get FooBaz() { return FooBaz }, get Last() { return Last } }
 })"
 `;
 
+exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { foo, bar, Baz } from './foo'
+        
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          
+return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { x, y, z, x$y } from './x'
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 6da274dd8a5..57c3adfc3a0 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -513,6 +513,23 @@ describe('SFC compile <script setup>', () => {
       </template>
       `)
     })
+
+    test('template ref', () => {
+      const { content } = compile(`
+        <script setup lang="ts">
+          import { foo, bar, Baz } from './foo'
+        </script>
+        <template>
+          <div ref="foo"></div>
+          <div ref=""></div>
+          <Baz ref="bar" />
+        </template>
+        `)
+      expect(content).toMatch(
+        'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }'
+      )
+      assertCode(content)
+    })
   })
 
   describe('inlineTemplate mode', () => {
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index b42397d573b..28456a45bba 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -57,6 +57,9 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
                 )}`
               }
             }
+            if (prop.type === NodeTypes.ATTRIBUTE && prop.name === 'ref' && prop.value?.content) {
+              code += `,${prop.value.content}`
+            }
           }
         } else if (node.type === NodeTypes.INTERPOLATION) {
           code += `,${processExp(