feat(sfc): support $shallowRef ref sugar

packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap

@@ -33,8 +33,8 @@ return { a, b, c }
 }"
 `;
 
-exports[`<script setup> ref sugar $ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
+exports[`<script setup> ref sugar $ref & $shallowRef declarations 1`] = `
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
 export default {
   setup(__props, { expose }) {
@@ -42,7 +42,7 @@ export default {
 
     let foo = _ref()
     let a = _ref(1)
-    let b = _ref({
+    let b = _shallowRef({
       count: 0
     })
     let c = () => {}

packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts

@@ -6,24 +6,26 @@ describe('<script setup> ref sugar', () => {
     return compile(src, { refSugar: true })
   }
 
-  test('$ref declarations', () => {
+  test('$ref & $shallowRef declarations', () => {
     const { content, bindings } = compileWithRefSugar(`<script setup>
     let foo = $ref()
     let a = $ref(1)
-    let b = $ref({
+    let b = $shallowRef({
       count: 0
     })
     let c = () => {}
     let d
     </script>`)
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
+    expect(content).toMatch(
+      `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
+    )
     expect(content).not.toMatch(`$ref()`)
     expect(content).not.toMatch(`$ref(1)`)
-    expect(content).not.toMatch(`$ref({`)
+    expect(content).not.toMatch(`$shallowRef({`)
     expect(content).toMatch(`let foo = _ref()`)
     expect(content).toMatch(`let a = _ref(1)`)
     expect(content).toMatch(`
-    let b = _ref({
+    let b = _shallowRef({
       count: 0
     })
     `)

packages/compiler-sfc/src/compileScript.ts

@@ -65,6 +65,7 @@ const DEFINE_EXPOSE = 'defineExpose'
 const WITH_DEFAULTS = 'withDefaults'
 
 const $REF = `$ref`
+const $SHALLOW_REF = '$shallowRef'
 const $COMPUTED = `$computed`
 const $FROM_REFS = `$fromRefs`
 const $RAW = `$raw`
@@ -531,7 +532,12 @@ export function compileScript(
   }
 
   function isRefSugarCall(callee: string) {
-    return callee === $REF || callee === $COMPUTED || callee === $FROM_REFS
+    return (
+      callee === $REF ||
+      callee === $COMPUTED ||
+      callee === $FROM_REFS ||
+      callee === $SHALLOW_REF
+    )
   }
 
   function processRefSugar(
@@ -558,24 +564,28 @@ export function compileScript(
 
     const callee = (decl.init.callee as Identifier).name
     const start = decl.init.start! + startOffset
-    if (callee === $REF) {
+    if (callee === $REF || callee === $SHALLOW_REF) {
       if (statement.kind !== 'let') {
-        error(`${$REF}() bindings can only be declared with let.`, decl)
+        error(`${callee}() bindings can only be declared with let.`, decl)
       }
       if (decl.id.type !== 'Identifier') {
         error(
-          `${$REF}() bindings cannot be used with destructuring. ` +
+          `${callee}() bindings cannot be used with destructuring. ` +
             `If you are trying to destructure from an object of refs, ` +
             `use \`let { x } = $fromRefs(obj)\`.`,
           decl.id
         )
       }
       registerRefBinding(decl.id)
-      s.overwrite(start, start + $REF.length, helper('ref'))
+      s.overwrite(
+        start,
+        start + callee.length,
+        helper(callee === $REF ? 'ref' : 'shallowRef')
+      )
     } else if (callee === $COMPUTED) {
       if (decl.id.type !== 'Identifier') {
         error(
-          `${$COMPUTED}() bindings cannot be used with destructuring.`,
+          `${callee}() bindings cannot be used with destructuring.`,
           decl.id
         )
       }
@@ -584,7 +594,7 @@ export function compileScript(
     } else if (callee === $FROM_REFS) {
       if (!decl.id.type.endsWith('Pattern')) {
         error(
-          `${$FROM_REFS}() declaration must be used with destructure patterns.`,
+          `${callee}() declaration must be used with destructure patterns.`,
           decl
         )
       }
@@ -1124,10 +1134,7 @@ export function compileScript(
         return false // skip walk
       } else if (
         parent &&
-        isCallOf(
-          node,
-          id => id === $REF || id === $FROM_REFS || id === $COMPUTED
-        ) &&
+        isCallOf(node, isRefSugarCall) &&
         (parent.type !== 'VariableDeclarator' || node !== parent.init)
       ) {
         error(