refactor(ref-transform): use shallowRef to align with types

Author: yyx990803

packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap

@@ -55,12 +55,12 @@ exports[`accessing ref binding 1`] = `
 `;
 
 exports[`array destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
     let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
-const a = _ref(__a);
-const b = _ref(__b);
-const c = _ref(__c);
+const a = _shallowRef(__a);
+const b = _shallowRef(__b);
+const c = _shallowRef(__c);
     console.log(n.value, a.value, b.value, c.value)
     "
 `;
@@ -114,13 +114,13 @@ exports[`mutating ref binding 1`] = `
 `;
 
 exports[`nested destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { shallowRef as _shallowRef } from 'vue'
 
     let [{ a: { b: __b }}] = (useFoo())
-const b = _ref(__b);
+const b = _shallowRef(__b);
     let { c: [__d, __e] } = (useBar())
-const d = _ref(__d);
-const e = _ref(__e);
+const d = _shallowRef(__d);
+const e = _shallowRef(__e);
     console.log(b.value, d.value, e.value)
     "
 `;
@@ -163,16 +163,16 @@ exports[`nested scopes 1`] = `
 `;
 
 exports[`object destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
     let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
-const a = _ref(__a);
-const c = _ref(__c);
-const d = _ref(__d);
-const f = _ref(__f);
-const g = _ref(__g);
+const a = _shallowRef(__a);
+const c = _shallowRef(__c);
+const d = _shallowRef(__d);
+const f = _shallowRef(__f);
+const g = _shallowRef(__g);
     let { foo: __foo } = (useSomthing(() => 1));
-const foo = _ref(__foo);
+const foo = _shallowRef(__foo);
     console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
     "
 `;

packages/ref-transform/__tests__/refTransform.spec.ts

@@ -210,14 +210,14 @@ test('object destructure', () => {
     `let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
   )
   expect(code).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
-  expect(code).toMatch(`\nconst a = _ref(__a);`)
-  expect(code).not.toMatch(`\nconst b = _ref(__b);`)
-  expect(code).toMatch(`\nconst c = _ref(__c);`)
-  expect(code).toMatch(`\nconst d = _ref(__d);`)
-  expect(code).not.toMatch(`\nconst e = _ref(__e);`)
-  expect(code).toMatch(`\nconst f = _ref(__f);`)
-  expect(code).toMatch(`\nconst g = _ref(__g);`)
-  expect(code).toMatch(`\nconst foo = _ref(__foo);`)
+  expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
+  expect(code).not.toMatch(`\nconst b = _shallowRef(__b);`)
+  expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
+  expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
+  expect(code).not.toMatch(`\nconst e = _shallowRef(__e);`)
+  expect(code).toMatch(`\nconst f = _shallowRef(__f);`)
+  expect(code).toMatch(`\nconst g = _shallowRef(__g);`)
+  expect(code).toMatch(`\nconst foo = _shallowRef(__foo);`)
   expect(code).toMatch(
     `console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
   )
@@ -231,9 +231,9 @@ test('array destructure', () => {
     console.log(n, a, b, c)
     `)
   expect(code).toMatch(`let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`)
-  expect(code).toMatch(`\nconst a = _ref(__a);`)
-  expect(code).toMatch(`\nconst b = _ref(__b);`)
-  expect(code).toMatch(`\nconst c = _ref(__c);`)
+  expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
+  expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
+  expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
   expect(code).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
   expect(rootVars).toStrictEqual(['n', 'a', 'b', 'c'])
   assertCode(code)
@@ -247,11 +247,11 @@ test('nested destructure', () => {
     `)
   expect(code).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
   expect(code).toMatch(`let { c: [__d, __e] } = (useBar())`)
-  expect(code).not.toMatch(`\nconst a = _ref(__a);`)
-  expect(code).not.toMatch(`\nconst c = _ref(__c);`)
-  expect(code).toMatch(`\nconst b = _ref(__b);`)
-  expect(code).toMatch(`\nconst d = _ref(__d);`)
-  expect(code).toMatch(`\nconst e = _ref(__e);`)
+  expect(code).not.toMatch(`\nconst a = _shallowRef(__a);`)
+  expect(code).not.toMatch(`\nconst c = _shallowRef(__c);`)
+  expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
+  expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
+  expect(code).toMatch(`\nconst e = _shallowRef(__e);`)
   expect(rootVars).toStrictEqual(['b', 'd', 'e'])
   assertCode(code)
 })

packages/ref-transform/src/refTransform.ts

@@ -255,7 +255,7 @@ export function transformAST(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + offset,
-          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
         )
       }
     }
@@ -289,7 +289,7 @@ export function transformAST(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + offset,
-          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
         )
       }
     }