feat(experimental): standalone ref transform

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

@@ -1,33 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<script setup> ref sugar $computed declaration 1`] = `
-"import { computed as _computed } from 'vue'
-
+exports[`<script setup> ref sugar $ unwrapping 1`] = `
+"import { ref, shallowRef } from 'vue'
+    
 export default {
   setup(__props, { expose }) {
   expose()
 
-    const a = _computed(() => 1)
+    let foo = (ref())
+    let a = (ref(1))
+    let b = (shallowRef({
+      count: 0
+    }))
+    let c = () => {}
+    let d
     
-return { a }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar $raw 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1)
-    const b = (a)
-    const c = ({ a })
-    callExternal((a))
-    
-return { a, b, c }
+return { foo, a, b, c, d, ref, shallowRef }
 }
 
 }"
@@ -53,231 +41,3 @@ return { foo, a, b, c, d }
 
 }"
 `;
-
-exports[`<script setup> ref sugar accessing ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1)
-    console.log(a.value)
-    function get() {
-      return a.value + 1
-    }
-    
-return { a, get }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar array destructure 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
-const a = _shallowRef(__a);
-const b = _shallowRef(__b);
-const c = _shallowRef(__c);
-    console.log(n.value, a.value, b.value, c.value)
-    
-return { n, a, b, c }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar handle TS casting syntax 1`] = `
-"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
-
-export default _defineComponent({
-  setup(__props, { expose }) {
-  expose()
-
-      let a = _ref(1)
-      console.log(a.value!) 
-      console.log(a.value! + 1) 
-      console.log(a.value as number) 
-      console.log((a.value as number) + 1) 
-      console.log(<number>a.value) 
-      console.log(<number>a.value + 1) 
-      console.log(a.value! + (a.value as number)) 
-      console.log(a.value! + <number>a.value) 
-      console.log((a.value as number) + <number>a.value)
-      
-return { a }
-}
-
-})"
-`;
-
-exports[`<script setup> ref sugar mixing $ref & $computed declarations 1`] = `
-"import { ref as _ref, computed as _computed } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    
-return { a, b }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar multi $ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    
-return { a, b, c }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar mutating ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1)
-    let b = _ref({ count: 0 })
-    function inc() {
-      a.value++
-      a.value = a.value + 1
-      b.value.count++
-      b.value.count = b.value.count + 1
-      ;({ a: a.value } = { a: 2 })
-      ;[a.value] = [1]
-    }
-    
-return { a, b, inc }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar nested destructure 1`] = `
-"import { shallowRef as _shallowRef } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let [{ a: { b: __b }}] = (useFoo())
-const b = _shallowRef(__b);
-    let { c: [__d, __e] } = (useBar())
-const d = _shallowRef(__d);
-const e = _shallowRef(__e);
-    console.log(b.value, d.value, e.value)
-    
-return { b, d, e }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar object destructure 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
-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 = _shallowRef(__foo);
-    console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
-    
-return { n, a, c, d, f, g, foo }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar should not rewrite scope variable 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-      let a = _ref(1)
-      let b = _ref(1)
-      let d = _ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b.value)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d.value)
-        console.log(e)
-      }
-    
-return { a, b, d, e, test }
-}
-
-}"
-`;
-
-exports[`<script setup> ref sugar should not rewrite type identifiers 1`] = `
-"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
-
-export default _defineComponent({
-  props: {
-    msg: { type: String, required: true },
-    ids: { type: Array, required: false }
-  } as unknown as undefined,
-  setup(__props: {msg: string; ids?: string[]}, { expose }) {
-  expose()
-
-const props = __props
-        
-        let ids = _ref([])
-      
-return { props, ids }
-}
-
-})"
-`;
-
-exports[`<script setup> ref sugar using ref binding in property shorthand 1`] = `
-"import { ref as _ref } from 'vue'
-
-export default {
-  setup(__props, { expose }) {
-  expose()
-
-    let a = _ref(1)
-    const b = { a: a.value }
-    function test() {
-      const { a } = b
-    }
-    
-return { a, b, test }
-}
-
-}"
-`;

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

@@ -1,11 +1,50 @@
 import { BindingTypes } from '@vue/compiler-core'
 import { compileSFCScript as compile, assertCode } from './utils'
 
+// this file only tests integration with SFC - main test case for the ref
+// transform can be found in <root>/packages/ref-transform/__tests__
 describe('<script setup> ref sugar', () => {
   function compileWithRefSugar(src: string) {
     return compile(src, { refSugar: true })
   }
 
+  test('$ unwrapping', () => {
+    const { content, bindings } = compileWithRefSugar(`<script setup>
+    import { ref, shallowRef } from 'vue'
+    let foo = $(ref())
+    let a = $(ref(1))
+    let b = $(shallowRef({
+      count: 0
+    }))
+    let c = () => {}
+    let d
+    </script>`)
+    expect(content).not.toMatch(`$(ref())`)
+    expect(content).not.toMatch(`$(ref(1))`)
+    expect(content).not.toMatch(`$(shallowRef({`)
+    expect(content).toMatch(`let foo = (ref())`)
+    expect(content).toMatch(`let a = (ref(1))`)
+    expect(content).toMatch(`
+    let b = (shallowRef({
+      count: 0
+    }))
+    `)
+    // normal declarations left untouched
+    expect(content).toMatch(`let c = () => {}`)
+    expect(content).toMatch(`let d`)
+    expect(content).toMatch(`return { foo, a, b, c, d, ref, shallowRef }`)
+    assertCode(content)
+    expect(bindings).toStrictEqual({
+      foo: BindingTypes.SETUP_REF,
+      a: BindingTypes.SETUP_REF,
+      b: BindingTypes.SETUP_REF,
+      c: BindingTypes.SETUP_LET,
+      d: BindingTypes.SETUP_LET,
+      ref: BindingTypes.SETUP_CONST,
+      shallowRef: BindingTypes.SETUP_CONST
+    })
+  })
+
   test('$ref & $shallowRef declarations', () => {
     const { content, bindings } = compileWithRefSugar(`<script setup>
     let foo = $ref()
@@ -42,307 +81,7 @@ describe('<script setup> ref sugar', () => {
     })
   })
 
-  test('multi $ref declarations', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    let a = $ref(1), b = $ref(2), c = $ref({
-      count: 0
-    })
-    </script>`)
-    expect(content).toMatch(`
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    `)
-    expect(content).toMatch(`return { a, b, c }`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_REF
-    })
-  })
-
-  test('$computed declaration', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    const a = $computed(() => 1)
-    </script>`)
-    expect(content).toMatch(`
-    const a = _computed(() => 1)
-    `)
-    expect(content).toMatch(`return { a }`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      a: BindingTypes.SETUP_REF
-    })
-  })
-
-  test('mixing $ref & $computed declarations', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    let a = $ref(1), b = $computed(() => a + 1)
-    </script>`)
-    expect(content).toMatch(`
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    `)
-    expect(content).toMatch(`return { a, b }`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF
-    })
-  })
-
-  test('accessing ref binding', () => {
-    const { content } = compileWithRefSugar(`<script setup>
-    let a = $ref(1)
-    console.log(a)
-    function get() {
-      return a + 1
-    }
-    </script>`)
-    expect(content).toMatch(`console.log(a.value)`)
-    expect(content).toMatch(`return a.value + 1`)
-    assertCode(content)
-  })
-
-  test('cases that should not append .value', () => {
-    const { content } = compileWithRefSugar(`<script setup>
-    let a = $ref(1)
-    console.log(b.a)
-    function get(a) {
-      return a + 1
-    }
-    </script>`)
-    expect(content).not.toMatch(`a.value`)
-  })
-
-  test('mutating ref binding', () => {
-    const { content } = compileWithRefSugar(`<script setup>
-    let a = $ref(1)
-    let b = $ref({ count: 0 })
-    function inc() {
-      a++
-      a = a + 1
-      b.count++
-      b.count = b.count + 1
-      ;({ a } = { a: 2 })
-      ;[a] = [1]
-    }
-    </script>`)
-    expect(content).toMatch(`a.value++`)
-    expect(content).toMatch(`a.value = a.value + 1`)
-    expect(content).toMatch(`b.value.count++`)
-    expect(content).toMatch(`b.value.count = b.value.count + 1`)
-    expect(content).toMatch(`;({ a: a.value } = { a: 2 })`)
-    expect(content).toMatch(`;[a.value] = [1]`)
-    assertCode(content)
-  })
-
-  test('using ref binding in property shorthand', () => {
-    const { content } = compileWithRefSugar(`<script setup>
-    let a = $ref(1)
-    const b = { a }
-    function test() {
-      const { a } = b
-    }
-    </script>`)
-    expect(content).toMatch(`const b = { a: a.value }`)
-    // should not convert destructure
-    expect(content).toMatch(`const { a } = b`)
-    assertCode(content)
-  })
-
-  test('should not rewrite scope variable', () => {
-    const { content } = compileWithRefSugar(`
-    <script setup>
-      let a = $ref(1)
-      let b = $ref(1)
-      let d = $ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d)
-        console.log(e)
-      }
-    </script>`)
-    expect(content).toMatch('console.log(a)')
-    expect(content).toMatch('console.log(b.value)')
-    expect(content).toMatch('console.log(c)')
-    expect(content).toMatch('console.log(d.value)')
-    expect(content).toMatch('console.log(e)')
-    assertCode(content)
-  })
-
-  test('object destructure', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    let n = $ref(1), { a, b: c, d = 1, e: f = 2, ...g } = $fromRefs(useFoo())
-    let { foo } = $fromRefs(useSomthing(() => 1));
-    console.log(n, a, c, d, f, g, foo)
-    </script>`)
-    expect(content).toMatch(
-      `let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
-    )
-    expect(content).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
-    expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
-    expect(content).not.toMatch(`\nconst b = _shallowRef(__b);`)
-    expect(content).toMatch(`\nconst c = _shallowRef(__c);`)
-    expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
-    expect(content).not.toMatch(`\nconst e = _shallowRef(__e);`)
-    expect(content).toMatch(`\nconst f = _shallowRef(__f);`)
-    expect(content).toMatch(`\nconst g = _shallowRef(__g);`)
-    expect(content).toMatch(`\nconst foo = _shallowRef(__foo);`)
-    expect(content).toMatch(
-      `console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
-    )
-    expect(content).toMatch(`return { n, a, c, d, f, g, foo }`)
-    expect(bindings).toStrictEqual({
-      n: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_REF,
-      d: BindingTypes.SETUP_REF,
-      f: BindingTypes.SETUP_REF,
-      g: BindingTypes.SETUP_REF,
-      foo: BindingTypes.SETUP_REF
-    })
-    assertCode(content)
-  })
-
-  test('array destructure', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    let n = $ref(1), [a, b = 1, ...c] = $fromRefs(useFoo())
-    console.log(n, a, b, c)
-    </script>`)
-    expect(content).toMatch(
-      `let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`
-    )
-    expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
-    expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
-    expect(content).toMatch(`\nconst c = _shallowRef(__c);`)
-    expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
-    expect(content).toMatch(`return { n, a, b, c }`)
-    expect(bindings).toStrictEqual({
-      n: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_REF
-    })
-    assertCode(content)
-  })
-
-  test('nested destructure', () => {
-    const { content, bindings } = compileWithRefSugar(`<script setup>
-    let [{ a: { b }}] = $fromRefs(useFoo())
-    let { c: [d, e] } = $fromRefs(useBar())
-    console.log(b, d, e)
-    </script>`)
-    expect(content).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
-    expect(content).toMatch(`let { c: [__d, __e] } = (useBar())`)
-    expect(content).not.toMatch(`\nconst a = _shallowRef(__a);`)
-    expect(content).not.toMatch(`\nconst c = _shallowRef(__c);`)
-    expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
-    expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
-    expect(content).toMatch(`\nconst e = _shallowRef(__e);`)
-    expect(content).toMatch(`return { b, d, e }`)
-    expect(bindings).toStrictEqual({
-      b: BindingTypes.SETUP_REF,
-      d: BindingTypes.SETUP_REF,
-      e: BindingTypes.SETUP_REF
-    })
-    assertCode(content)
-  })
-
-  test('$raw', () => {
-    const { content } = compileWithRefSugar(`<script setup>
-    let a = $ref(1)
-    const b = $raw(a)
-    const c = $raw({ a })
-    callExternal($raw(a))
-    </script>`)
-    expect(content).toMatch(`const b = (a)`)
-    expect(content).toMatch(`const c = ({ a })`)
-    expect(content).toMatch(`callExternal((a))`)
-    assertCode(content)
-  })
-
-  //#4062
-  test('should not rewrite type identifiers', () => {
-    const { content } = compile(
-      `
-      <script setup lang="ts">
-        const props = defineProps<{msg: string; ids?: string[]}>()
-        let ids = $ref([])
-      </script>`,
-      {
-        refSugar: true
-      }
-    )
-    assertCode(content)
-    expect(content).not.toMatch('.value')
-  })
-
-  // #4254
-  test('handle TS casting syntax', () => {
-    const { content } = compile(
-      `
-      <script setup lang="ts">
-      let a = $ref(1)
-      console.log(a!) 
-      console.log(a! + 1) 
-      console.log(a as number) 
-      console.log((a as number) + 1) 
-      console.log(<number>a) 
-      console.log(<number>a + 1) 
-      console.log(a! + (a as number)) 
-      console.log(a! + <number>a) 
-      console.log((a as number) + <number>a)
-      </script>`,
-      {
-        refSugar: true
-      }
-    )
-    assertCode(content)
-    expect(content).toMatch('console.log(a.value!)')
-    expect(content).toMatch('console.log(a.value as number)')
-    expect(content).toMatch('console.log(<number>a.value)')
-  })
-
   describe('errors', () => {
-    test('non-let $ref declaration', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-        const a = $ref(1)
-        </script>`,
-          { refSugar: true }
-        )
-      ).toThrow(`$ref() bindings can only be declared with let`)
-    })
-
-    test('$ref w/ destructure', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-        let { a } = $ref(1)
-        </script>`,
-          { refSugar: true }
-        )
-      ).toThrow(`$ref() bindings cannot be used with destructuring`)
-    })
-
-    test('$computed w/ destructure', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-        const { a } = $computed(() => 1)
-        </script>`,
-          { refSugar: true }
-        )
-      ).toThrow(`$computed() bindings cannot be used with destructuring`)
-    })
-
     test('defineProps/Emit() referencing ref declarations', () => {
       expect(() =>
         compile(
@@ -368,26 +107,5 @@ describe('<script setup> ref sugar', () => {
         )
       ).toThrow(`cannot reference locally declared variables`)
     })
-
-    test('warn usage in non-init positions', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-      let bar = $ref(1)
-      bar = $ref(2)
-    </script>`,
-          { refSugar: true }
-        )
-      ).toThrow(`$ref can only be used directly as a variable initializer`)
-
-      expect(() =>
-        compile(
-          `<script setup>
-      let bar = { foo: $computed(1) }
-    </script>`,
-          { refSugar: true }
-        )
-      ).toThrow(`$computed can only be used directly as a variable initializer`)
-    })
   })
 })