feat(compiler-sfc): new script setup implementation

- now exposes all top level bindings to template
- support `ref:` syntax sugar

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

@@ -22,199 +22,76 @@ function assertCode(code: string) {
 }
 
 describe('SFC compile <script setup>', () => {
-  test('should hoist imports', () => {
-    assertCode(
-      compile(`<script setup>import { ref } from 'vue'</script>`).content
-    )
-  })
-
-  test('should extract comment for import or type declarations', () => {
-    assertCode(
-      compile(`<script setup>
-import a from 'a' // comment
-import b from 'b'
-</script>`).content
-    )
-  })
-
   test('explicit setup signature', () => {
     assertCode(
       compile(`<script setup="props, { emit }">emit('foo')</script>`).content
     )
   })
 
-  test('import dedupe between <script> and <script setup>', () => {
+  test('should expose top level declarations', () => {
     const { content } = compile(`
-      <script>
-      import { x } from './x'
-      </script>
       <script setup>
       import { x } from './x'
-      x()
+      let a = 1
+      const b = 2
+      function c() {}
+      class d {}
       </script>
       `)
     assertCode(content)
-    expect(content.indexOf(`import { x }`)).toEqual(
-      content.lastIndexOf(`import { x }`)
-    )
+    expect(content).toMatch('return { x, a, b, c, d }')
   })
 
-  describe('exports', () => {
-    test('export const x = ...', () => {
-      const { content, bindings } = compile(
-        `<script setup>export const x = 1</script>`
+  describe('imports', () => {
+    test('should hoist and expose imports', () => {
+      assertCode(
+        compile(`<script setup>import { ref } from 'vue'</script>`).content
       )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup'
-      })
     })
 
-    test('export const { x } = ... (destructuring)', () => {
-      const { content, bindings } = compile(`<script setup>
-          export const [a = 1, { b } = { b: 123 }, ...c] = useFoo()
-          export const { d = 2, _: [e], ...f } = useBar()
-        </script>`)
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        a: 'setup',
-        b: 'setup',
-        c: 'setup',
-        d: 'setup',
-        e: 'setup',
-        f: 'setup'
-      })
+    test('should extract comment for import or type declarations', () => {
+      assertCode(
+        compile(`<script setup>
+  import a from 'a' // comment
+  import b from 'b'
+  </script>`).content
+      )
     })
 
-    test('export function x() {}', () => {
-      const { content, bindings } = compile(
-        `<script setup>export function x(){}</script>`
-      )
+    test('dedupe between user & helper', () => {
+      const { content } = compile(`<script setup>
+  import { ref } from 'vue'
+  ref: foo = 1
+  </script>`)
       assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup'
-      })
+      expect(content).toMatch(`import { ref } from 'vue'`)
     })
 
-    test('export class X() {}', () => {
-      const { content, bindings } = compile(
-        `<script setup>export class X {}</script>`
-      )
+    test('import dedupe between <script> and <script setup>', () => {
+      const { content } = compile(`
+        <script>
+        import { x } from './x'
+        </script>
+        <script setup>
+        import { x } from './x'
+        x()
+        </script>
+        `)
       assertCode(content)
-      expect(bindings).toStrictEqual({
-        X: 'setup'
-      })
-    })
-
-    test('export { x }', () => {
-      const { content, bindings } = compile(
-        `<script setup>
-           const x = 1
-           const y = 2
-           export { x, y }
-          </script>`
+      expect(content.indexOf(`import { x }`)).toEqual(
+        content.lastIndexOf(`import { x }`)
       )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup',
-        y: 'setup'
-      })
-    })
-
-    test(`export { x } from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-           export { x, y } from './x'
-          </script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        x: 'setup',
-        y: 'setup'
-      })
-    })
-
-    test(`export default from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export default from './x'
-          </script>`,
-        {
-          babelParserPlugins: ['exportDefaultFrom']
-        }
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({})
-    })
-
-    test(`export { x as default }`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          import x from './x'
-          const y = 1
-          export { x as default, y }
-          </script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-      })
-    })
-
-    test(`export { x as default } from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export { x as default, y } from './x'
-          </script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-      })
-    })
-
-    test(`export * from './x'`, () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export * from './x'
-          export const y = 1
-          </script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        y: 'setup'
-        // in this case we cannot extract bindings from ./x so it falls back
-        // to runtime proxy dispatching
-      })
-    })
-
-    test('export default in <script setup>', () => {
-      const { content, bindings } = compile(
-        `<script setup>
-          export default {
-            props: ['foo']
-          }
-          export const y = 1
-          </script>`
-      )
-      assertCode(content)
-      expect(bindings).toStrictEqual({
-        foo: 'props',
-        y: 'setup'
-      })
     })
   })
 
   describe('<script setup lang="ts">', () => {
     test('hoist type declarations', () => {
-      const { content, bindings } = compile(`
+      const { content } = compile(`
       <script setup lang="ts">
         export interface Foo {}
         type Bar = {}
-        export const a = 1
       </script>`)
       assertCode(content)
-      expect(bindings).toStrictEqual({ a: 'setup' })
     })
 
     test('extract props', () => {
@@ -333,7 +210,7 @@ import b from 'b'
     test('w/ <script setup>', () => {
       assertCode(
         compile(
-          `<script setup>export const color = 'red'</script>\n` +
+          `<script setup>const color = 'red'</script>\n` +
             `<style vars="{ color }">div{ color: var(--color); }</style>`
         ).content
       )
@@ -356,8 +233,8 @@ import b from 'b'
       assertAwaitDetection(`const a = 1 + (await foo)`)
     })
 
-    test('export', () => {
-      assertAwaitDetection(`export const a = 1 + (await foo)`)
+    test('ref', () => {
+      assertAwaitDetection(`ref: a = 1 + (await foo)`)
     })
 
     test('nested statements', () => {
@@ -366,7 +243,7 @@ import b from 'b'
 
     test('should ignore await inside functions', () => {
       // function declaration
-      assertAwaitDetection(`export async function foo() { await bar }`, false)
+      assertAwaitDetection(`async function foo() { await bar }`, false)
       // function expression
       assertAwaitDetection(`const foo = async () => { await bar }`, false)
       // object method
@@ -379,6 +256,197 @@ import b from 'b'
     })
   })
 
+  describe('ref: syntax sugar', () => {
+    test('convert ref declarations', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: a = 1
+      ref: b = {
+        count: 0
+      }
+      let c = () => {}
+      let d
+      </script>`)
+      expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).not.toMatch(`ref: a`)
+      expect(content).toMatch(`const a = ref(1)`)
+      expect(content).toMatch(`
+      const b = ref({
+        count: 0
+      })
+      `)
+      // normal declarations left untouched
+      expect(content).toMatch(`let c = () => {}`)
+      expect(content).toMatch(`let d`)
+      assertCode(content)
+      expect(bindings).toStrictEqual({
+        a: 'setup',
+        b: 'setup',
+        c: 'setup',
+        d: 'setup'
+      })
+    })
+
+    test('multi ref declarations', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: a = 1, b = 2, c = {
+        count: 0
+      }
+      </script>`)
+      expect(content).toMatch(`
+      const a = ref(1), b = ref(2), c = ref({
+        count: 0
+      })
+      `)
+      expect(content).toMatch(`return { a, b, c }`)
+      assertCode(content)
+      expect(bindings).toStrictEqual({
+        a: 'setup',
+        b: 'setup',
+        c: 'setup'
+      })
+    })
+
+    test('should not convert non ref labels', () => {
+      const { content } = compile(`<script setup>
+      foo: a = 1, b = 2, c = {
+        count: 0
+      }
+      </script>`)
+      expect(content).toMatch(`foo: a = 1, b = 2`)
+      assertCode(content)
+    })
+
+    test('accessing ref binding', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 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 } = compile(`<script setup>
+      ref: a = 1
+      console.log(b.a)
+      function get(a) {
+        return a + 1
+      }
+      </script>`)
+      expect(content).not.toMatch(`a.value`)
+    })
+
+    test('mutating ref binding', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 1
+      ref: b = { count: 0 }
+      function inc() {
+        a++
+        a = a + 1
+        b.count++
+        b.count = b.count + 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`)
+      assertCode(content)
+    })
+
+    test('using ref binding in property shorthand', () => {
+      const { content } = compile(`<script setup>
+      ref: a = 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('object destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: n = 1, ({ a, b: c, d = 1, e: f = 2, ...g } = useFoo())
+      console.log(n, a, c, d, f, g)
+      </script>`)
+      expect(content).toMatch(
+        `const n = ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()`
+      )
+      expect(content).toMatch(`\nconst a = ref(__a);`)
+      expect(content).not.toMatch(`\nconst b = ref(__b);`)
+      expect(content).toMatch(`\nconst c = ref(__c);`)
+      expect(content).toMatch(`\nconst d = ref(__d);`)
+      expect(content).not.toMatch(`\nconst e = ref(__e);`)
+      expect(content).toMatch(`\nconst f = ref(__f);`)
+      expect(content).toMatch(`\nconst g = ref(__g);`)
+      expect(content).toMatch(
+        `console.log(n.value, a.value, c.value, d.value, f.value, g.value)`
+      )
+      expect(content).toMatch(`return { n, a, c, d, f, g }`)
+      expect(bindings).toStrictEqual({
+        n: 'setup',
+        a: 'setup',
+        c: 'setup',
+        d: 'setup',
+        f: 'setup',
+        g: 'setup'
+      })
+      assertCode(content)
+    })
+
+    test('array destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: n = 1, [a, b = 1, ...c] = useFoo()
+      console.log(n, a, b, c)
+      </script>`)
+      expect(content).toMatch(
+        `const n = ref(1), [__a, __b = 1, ...__c] = useFoo()`
+      )
+      expect(content).toMatch(`\nconst a = ref(__a);`)
+      expect(content).toMatch(`\nconst b = ref(__b);`)
+      expect(content).toMatch(`\nconst c = ref(__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: 'setup',
+        a: 'setup',
+        b: 'setup',
+        c: 'setup'
+      })
+      assertCode(content)
+    })
+
+    test('nested destructure', () => {
+      const { content, bindings } = compile(`<script setup>
+      ref: [{ a: { b }}] = useFoo()
+      ref: ({ c: [d, e] } = useBar())
+      console.log(b, d, e)
+      </script>`)
+      expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`)
+      expect(content).toMatch(`const { c: [__d, __e] } = useBar()`)
+      expect(content).not.toMatch(`\nconst a = ref(__a);`)
+      expect(content).not.toMatch(`\nconst c = ref(__c);`)
+      expect(content).toMatch(`\nconst b = ref(__b);`)
+      expect(content).toMatch(`\nconst d = ref(__d);`)
+      expect(content).toMatch(`\nconst e = ref(__e);`)
+      expect(content).toMatch(`return { b, d, e }`)
+      expect(bindings).toStrictEqual({
+        b: 'setup',
+        d: 'setup',
+        e: 'setup'
+      })
+      assertCode(content)
+    })
+  })
+
   describe('errors', () => {
     test('<script> and <script setup> must have same lang', () => {
       expect(() =>
@@ -386,13 +454,27 @@ import b from 'b'
       ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
-    test('export local as default', () => {
+    test('non-type named exports', () => {
+      expect(() =>
+        compile(`<script setup>
+        export const a = 1
+        </script>`)
+      ).toThrow(`cannot contain non-type named exports`)
+
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
         </script>`)
-      ).toThrow(`Cannot export locally defined variable as default`)
+      ).toThrow(`cannot contain non-type named exports`)
+    })
+
+    test('ref: non-assignment expressions', () => {
+      expect(() =>
+        compile(`<script setup>
+        ref: a = 1, foo()
+        </script>`)
+      ).toThrow(`ref: statements can only contain assignment expressions`)
     })
 
     test('export default referencing local var', () => {
@@ -410,10 +492,10 @@ import b from 'b'
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('export default referencing exports', () => {
+    test('export default referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
-        export const bar = 1
+        ref: bar = 1
         export default {
           props: bar
         }
@@ -440,22 +522,6 @@ import b from 'b'
       assertCode(
         compile(`<script setup>
           import { bar } from './bar'
-          export { bar }
-          export default {
-            props: {
-              foo: {
-                default: () => bar
-              }
-            }
-          }
-        </script>`).content
-      )
-    })
-
-    test('should allow export default referencing re-exported binding', () => {
-      assertCode(
-        compile(`<script setup>
-          export { bar } from './bar'
           export default {
             props: {
               foo: {
@@ -479,29 +545,6 @@ import b from 'b'
       `)
       ).toThrow(`Default export is already declared`)
 
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      const x = {}
-      export { x as default }
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      export { x as default } from './y'
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
       expect(() =>
         compile(`
       <script>