From 33cf6c88664137e8c9d6e75a3b4c5f5cce763c12 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Thu, 2 Sep 2021 04:55:30 +0800
Subject: [PATCH] fix(ref-transform): should transform $ref when used with
 generic arguments (#4446)

fix #4442
---
 .../compileScriptRefTransform.spec.ts.snap       | 16 ++++++++++++++++
 .../__tests__/compileScriptRefTransform.spec.ts  | 13 +++++++++++++
 packages/ref-transform/src/refTransform.ts       |  2 +-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
index f5674a371a9..df1136bead6 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
@@ -42,6 +42,22 @@ return { foo, a, b, c, d }
 }"
 `;
 
+exports[`sfc ref transform usage /w typescript 1`] = `
+"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
+
+export default _defineComponent({
+  setup(__props, { expose }) {
+  expose()
+
+        let msg = _ref<string | number>('foo');
+        let bar = _ref <string | number>('bar');
+      
+return { msg, bar }
+}
+
+})"
+`;
+
 exports[`sfc ref transform usage in normal <script> 1`] = `
 "import { ref as _ref } from 'vue'
 
diff --git a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
index 13c011f4ab0..34dc9efea32 100644
--- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
@@ -99,6 +99,19 @@ describe('sfc ref transform', () => {
     assertCode(content)
   })
 
+  test('usage /w typescript', () => {
+    const { content } = compileWithRefTransform(`
+      <script setup lang="ts">
+        let msg = $ref<string | number>('foo');
+        let bar = $ref <string | number>('bar');
+      </script>
+    `)
+    expect(content).toMatch(`import { ref as _ref`)
+    expect(content).toMatch(`let msg = _ref<string | number>('foo')`)
+    expect(content).toMatch(`let bar = _ref <string | number>('bar')`)
+    assertCode(content)
+  })
+
   test('usage with normal <script> + <script setup>', () => {
     const { content, bindings } = compileWithRefTransform(`<script>
     let a = $ref(0)
diff --git a/packages/ref-transform/src/refTransform.ts b/packages/ref-transform/src/refTransform.ts
index 2421699bc74..7fae8562e0c 100644
--- a/packages/ref-transform/src/refTransform.ts
+++ b/packages/ref-transform/src/refTransform.ts
@@ -25,7 +25,7 @@ import { babelParserDefaultPlugins } from '@vue/shared'
 const TO_VAR_SYMBOL = '$'
 const TO_REF_SYMBOL = '$$'
 const shorthands = ['ref', 'computed', 'shallowRef']
-const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\(/
+const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\s*(\(|\<)/
 
 export function shouldTransform(src: string): boolean {
   return transformCheckRE.test(src)