From b4189ed0ccfe16c8ddebb5327969d5e08ce49594 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 26 Aug 2021 09:21:19 +0800
Subject: [PATCH 1/2] fix(refSugar): should transform ref with typed
 declaration

chore: improve RE

test: improve test case
---
 .../compileScriptRefTransform.spec.ts.snap        | 15 +++++++++++++++
 .../__tests__/compileScriptRefTransform.spec.ts   | 11 +++++++++++
 packages/ref-transform/src/refTransform.ts        |  2 +-
 3 files changed, 27 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..5a7b9eb7ca7 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
@@ -42,6 +42,21 @@ 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');
+      
+return { msg }
+}
+
+})"
+`;
+
 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..ea109e463df 100644
--- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
@@ -99,6 +99,17 @@ describe('sfc ref transform', () => {
     assertCode(content)
   })
 
+  test('usage /w typescript', () => {
+    const { content } = compileWithRefTransform(`
+      <script setup lang="ts">
+        let msg = $ref<string | number>('foo');
+      </script>
+    `)
+    expect(content).toMatch(`import { ref as _ref`)
+    expect(content).toMatch(`let msg = _ref<string | number>('foo')`)
+    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..b688ee5e465 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)?(\(|\<)/
 
 export function shouldTransform(src: string): boolean {
   return transformCheckRE.test(src)

From 55580b1325c6bc98d476a80ebd145e25f7995aa6 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 27 Aug 2021 10:18:26 +0800
Subject: [PATCH 2/2] chore: improve code

---
 .../__snapshots__/compileScriptRefTransform.spec.ts.snap       | 3 ++-
 .../compiler-sfc/__tests__/compileScriptRefTransform.spec.ts   | 2 ++
 packages/ref-transform/src/refTransform.ts                     | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
index 5a7b9eb7ca7..df1136bead6 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
@@ -50,8 +50,9 @@ export default _defineComponent({
   expose()
 
         let msg = _ref<string | number>('foo');
+        let bar = _ref <string | number>('bar');
       
-return { msg }
+return { msg, bar }
 }
 
 })"
diff --git a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
index ea109e463df..34dc9efea32 100644
--- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
@@ -103,10 +103,12 @@ describe('sfc ref transform', () => {
     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)
   })
 
diff --git a/packages/ref-transform/src/refTransform.ts b/packages/ref-transform/src/refTransform.ts
index b688ee5e465..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)