fix(ref-transform): should transform $ref when used with generic arguments (#4446)

fix #4442

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
index f5674a371a968fb195ed6187e693f2a1dba8f910..df1136bead6d402c9476d3b11e19e8ad57b23874 100644 (file)
--- 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 13c011f4ab089c8108029a21697f9d329af41140..34dc9efea323d2ca0ab9c0c885eb1fc54ba8e674 100644 (file)
--- 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 2421699bc746493f57b440279843e921764cc872..7fae8562e0c2c3e9bd913da6e0e4a41ce05b02ef 100644 (file)
--- 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)