From 556560fae31d9e406cfae656089657b6332686c1 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 29 Oct 2020 15:03:39 -0400
Subject: [PATCH 01/27] feat(compiler-sfc): new script setup implementation

- now exposes all top level bindings to template
- support `ref:` syntax sugar
---
 .../src/transforms/transformExpression.ts     |  97 ++--
 .../__snapshots__/compileScript.spec.ts.snap  | 361 +++++++------
 .../__tests__/compileScript.spec.ts           | 455 +++++++++-------
 packages/compiler-sfc/src/compileScript.ts    | 504 +++++++++++-------
 packages/compiler-sfc/src/genCssVars.ts       |   2 +-
 5 files changed, 810 insertions(+), 609 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index a671c563..c2f00a4c 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -161,9 +161,9 @@ export function processExpression(
         if (!isDuplicate(node)) {
           const needPrefix = shouldPrefix(node, parent)
           if (!knownIds[node.name] && needPrefix) {
-            if (isPropertyShorthand(node, parent)) {
-              // property shorthand like { foo }, we need to add the key since we
-              // rewrite the value
+            if (isStaticProperty(parent) && parent.shorthand) {
+              // property shorthand like { foo }, we need to add the key since
+              // we rewrite the value
               node.prefix = `${node.name}: `
             }
             node.name = prefix(node.name)
@@ -278,46 +278,65 @@ const isStaticProperty = (node: Node): node is ObjectProperty =>
   (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
   !node.computed
 
-const isPropertyShorthand = (node: Node, parent: Node) => {
-  return (
-    isStaticProperty(parent) &&
-    parent.value === node &&
-    parent.key.type === 'Identifier' &&
-    parent.key.name === (node as Identifier).name &&
-    parent.key.start === node.start
-  )
-}
-
 const isStaticPropertyKey = (node: Node, parent: Node) =>
   isStaticProperty(parent) && parent.key === node
 
-function shouldPrefix(identifier: Identifier, parent: Node) {
+function shouldPrefix(id: Identifier, parent: Node) {
+  // declaration id
   if (
-    !(
-      isFunction(parent) &&
-      // not id of a FunctionDeclaration
-      ((parent as any).id === identifier ||
-        // not a params of a function
-        parent.params.includes(identifier))
-    ) &&
-    // not a key of Property
-    !isStaticPropertyKey(identifier, parent) &&
-    // not a property of a MemberExpression
-    !(
-      (parent.type === 'MemberExpression' ||
-        parent.type === 'OptionalMemberExpression') &&
-      parent.property === identifier &&
-      !parent.computed
-    ) &&
-    // not in an Array destructure pattern
-    !(parent.type === 'ArrayPattern') &&
-    // skip whitelisted globals
-    !isGloballyWhitelisted(identifier.name) &&
-    // special case for webpack compilation
-    identifier.name !== `require` &&
-    // is a special keyword but parsed as identifier
-    identifier.name !== `arguments`
+    (parent.type === 'VariableDeclarator' ||
+      parent.type === 'ClassDeclaration') &&
+    parent.id === id
   ) {
-    return true
+    return false
   }
+
+  if (isFunction(parent)) {
+    // function decalration/expression id
+    if ((parent as any).id === id) {
+      return false
+    }
+    // params list
+    if (parent.params.includes(id)) {
+      return false
+    }
+  }
+
+  // property key
+  // this also covers object destructure pattern
+  if (isStaticPropertyKey(id, parent)) {
+    return false
+  }
+
+  // array destructure pattern
+  if (parent.type === 'ArrayPattern') {
+    return false
+  }
+
+  // member expression property
+  if (
+    (parent.type === 'MemberExpression' ||
+      parent.type === 'OptionalMemberExpression') &&
+    parent.property === id &&
+    !parent.computed
+  ) {
+    return false
+  }
+
+  // is a special keyword but parsed as identifier
+  if (id.name === 'arguments') {
+    return false
+  }
+
+  // skip whitelisted globals
+  if (isGloballyWhitelisted(id.name)) {
+    return false
+  }
+
+  // special case for webpack compilation
+  if (id.name === 'require') {
+    return false
+  }
+
+  return true
 }
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index a6bb93e7..69937bc9 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SFC compile <script setup> <script setup lang="ts"> extract emits 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots, defineComponent } from 'vue'
 declare function __emit__(e: 'foo' | 'bar'): void
       declare function __emit__(e: 'baz', id: number): void
       
@@ -16,15 +15,14 @@ export function setup(_: {}, { emit: myEmit }: {
 return {  }
 }
 
-export default __define__({
+export default __defineComponent__({
   emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
   setup
 })"
 `;
 
 exports[`SFC compile <script setup> <script setup lang="ts"> extract props 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots, defineComponent } from 'vue'
 interface Test {}
 
       type Alias = number[]
@@ -59,7 +57,7 @@ export function setup(myProps: {
 return {  }
 }
 
-export default __define__({
+export default __defineComponent__({
   props: {
     string: { type: String, required: true },
     number: { type: Number, required: true },
@@ -88,19 +86,17 @@ export default __define__({
 `;
 
 exports[`SFC compile <script setup> <script setup lang="ts"> hoist type declarations 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots, defineComponent } from 'vue'
 export interface Foo {}
         type Bar = {}
-        
+      
 export function setup() {
 
-        const a = 1
-      
-return { a }
+        
+return {  }
 }
 
-export default __define__({
+export default __defineComponent__({
   setup
 })"
 `;
@@ -149,7 +145,7 @@ export default __default__"
 `;
 
 exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
-"import { useCssVars as __useCssVars__ } from 'vue'
+"import { useCssVars } from 'vue'
 
 export function setup() {
 const color = 'red'
@@ -166,26 +162,6 @@ exports[`SFC compile <script setup> errors should allow export default referenci
 export function setup() {
 
           
-return { bar }
-}
-
-const __default__ = {
-            props: {
-              foo: {
-                default: () => bar
-              }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> errors should allow export default referencing re-exported binding 1`] = `
-"import { bar } from './bar'
-          
-export function setup() {
-
-          
 return { bar }
 }
 
@@ -205,7 +181,7 @@ exports[`SFC compile <script setup> errors should allow export default referenci
 
           const bar = 1
           
-return {  }
+return { bar }
 }
 
 const __default__ = {
@@ -228,175 +204,220 @@ return {  }
 export default { setup }"
 `;
 
-exports[`SFC compile <script setup> exports export * from './x' 1`] = `
-"import { toRefs as __toRefs__ } from 'vue'
-import * as __export_all_0__ from './x'
-          
+exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
+"import { ref } from 'vue'
+  
 export function setup() {
 
-          const y = 1
-          
-return Object.assign(
-  { y },
-  __toRefs__(__export_all_0__)
-)
+  const foo = ref(1)
+  
+return { ref, foo }
 }
 
 export default { setup }"
 `;
 
-exports[`SFC compile <script setup> exports export { x } 1`] = `
-"export function setup() {
-
-           const x = 1
-           const y = 2
-           
-return { x, y }
-}
-
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> exports export { x } from './x' 1`] = `
-"import { x, y } from './x'
-          
-export function setup() {
-
-           
-return { x, y }
-}
-
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> exports export { x as default } 1`] = `
-"import x from './x'
-          
-export function setup() {
-
-          const y = 1
-          
-return { y }
-}
-
-
-const __default__ = x
-__default__.setup = setup
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> exports export { x as default } from './x' 1`] = `
-"import { x as __default__ } from './x'
-import { y } from './x'
-          
-export function setup() {
-
-          
-return { y }
-}
-
-__default__.setup = setup
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> exports export class X() {} 1`] = `
-"export function setup() {
-class X {}
-return { X }
-}
-
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> exports export const { x } = ... (destructuring) 1`] = `
-"export function setup() {
-
-          const [a = 1, { b } = { b: 123 }, ...c] = useFoo()
-          const { d = 2, _: [e], ...f } = useBar()
+exports[`SFC compile <script setup> imports import dedupe between <script> and <script setup> 1`] = `
+"import { x } from './x'
         
-return { a, b, c, d, e, f }
-}
+export function setup() {
 
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> exports export const x = ... 1`] = `
-"export function setup() {
-const x = 1
+        x()
+        
 return { x }
 }
 
 export default { setup }"
 `;
 
-exports[`SFC compile <script setup> exports export default from './x' 1`] = `
-"import __default__ from './x'
-          
+exports[`SFC compile <script setup> imports should extract comment for import or type declarations 1`] = `
+"import a from 'a' // comment
+  import b from 'b'
+  
 export function setup() {
 
-          
+  
+return { a, b }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
+"import { ref } from 'vue'
+export function setup() {
+
+return { ref }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const a = ref(1)
+      console.log(a.value)
+      function get() {
+        return a.value + 1
+      }
+      
+return { a, get }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const n = ref(1), [__a, __b = 1, ...__c] = useFoo()
+const a = ref(__a);
+const b = ref(__b);
+const c = ref(__c);
+      console.log(n.value, a.value, b.value, c.value)
+      
+return { n, a, b, c }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const a = ref(1)
+      const b = ref({
+        count: 0
+      })
+      let c = () => {}
+      let d
+      
+return { a, b, c, d }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const a = ref(1), b = ref(2), c = ref({
+        count: 0
+      })
+      
+return { a, b, c }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const a = ref(1)
+      const b = ref({ count: 0 })
+      function inc() {
+        a.value++
+        a.value = a.value + 1
+        b.value.count++
+        b.value.count = b.value.count + 1
+      }
+      
+return { a, b, inc }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const [{ a: { b: __b }}] = useFoo()
+const b = ref(__b);
+      const { c: [__d, __e] } = useBar()
+const d = ref(__d);
+const e = ref(__e);
+      console.log(b.value, d.value, e.value)
+      
+return { b, d, e }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
+"import { ref } from 'vue'
+
+export function setup() {
+
+      const 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);
+      console.log(n.value, a.value, c.value, d.value, f.value, g.value)
+      
+return { n, a, c, d, f, g }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
+"export function setup() {
+
+      foo: a = 1, b = 2, c = {
+        count: 0
+      }
+      
 return {  }
 }
 
-__default__.setup = setup
-export default __default__"
+export default { setup }"
 `;
 
-exports[`SFC compile <script setup> exports export default in <script setup> 1`] = `
-"export function setup() {
+exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = `
+"import { ref } from 'vue'
 
-          const y = 1
-          
-return { y }
-}
+export function setup() {
 
-const __default__ = {
-            props: ['foo']
-          }
-          __default__.setup = setup
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> exports export function x() {} 1`] = `
-"export function setup() {
-function x(){}
-return { x }
+      const a = ref(1)
+      const b = { a: a.value }
+      function test() {
+        const { a } = b
+      }
+      
+return { a, b, test }
 }
 
 export default { setup }"
 `;
 
-exports[`SFC compile <script setup> import dedupe between <script> and <script setup> 1`] = `
+exports[`SFC compile <script setup> should expose top level declarations 1`] = `
 "import { x } from './x'
       
 export function setup() {
 
-      x()
+      let a = 1
+      const b = 2
+      function c() {}
+      class d {}
       
-return {  }
-}
-
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> should extract comment for import or type declarations 1`] = `
-"import a from 'a' // comment
-import b from 'b'
-
-export function setup() {
-
-
-return {  }
-}
-
-export default { setup }"
-`;
-
-exports[`SFC compile <script setup> should hoist imports 1`] = `
-"import { ref } from 'vue'
-export function setup() {
-
-return {  }
+return { x, a, b, c, d }
 }
 
 export default { setup }"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 38a385ac..7c17d42d 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/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>
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 93cc6cc4..cf40389b 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -20,7 +20,9 @@ import {
   TSDeclareFunction,
   ObjectProperty,
   ArrayExpression,
-  Statement
+  Statement,
+  Expression,
+  LabeledStatement
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
@@ -31,6 +33,7 @@ export interface SFCScriptCompileOptions {
    * https://babeljs.io/docs/en/babel-parser#plugins
    */
   babelParserPlugins?: ParserPlugin[]
+  refSugar?: boolean
 }
 
 let hasWarned = false
@@ -102,38 +105,159 @@ export function compileScript(
   }
 
   const defaultTempVar = `__default__`
-  const bindings: BindingMetadata = {}
-  const imports: Record<string, string> = {}
-  const setupScopeVars: Record<string, boolean> = {}
-  const setupExports: Record<string, boolean> = {}
-  let exportAllIndex = 0
+  const bindingMetadata: BindingMetadata = {}
+  const helperImports: Set<string> = new Set()
+  const userImports: Record<string, string> = Object.create(null)
+  const setupBindings: Record<string, boolean> = Object.create(null)
+  const refBindings: Record<string, boolean> = Object.create(null)
+  const refIdentifiers: Set<Identifier> = new Set()
+  const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
   let needDefaultExportRefCheck = false
   let hasAwait = false
 
-  const checkDuplicateDefaultExport = (node: Node) => {
-    if (defaultExport) {
-      // <script> already has export default
-      throw new Error(
-        `Default export is already declared in normal <script>.\n\n` +
-          generateCodeFrame(
-            source,
-            node.start! + startOffset,
-            node.start! + startOffset + `export default`.length
-          )
-      )
-    }
-  }
-
   const s = new MagicString(source)
   const startOffset = scriptSetup.loc.start.offset
   const endOffset = scriptSetup.loc.end.offset
   const scriptStartOffset = script && script.loc.start.offset
   const scriptEndOffset = script && script.loc.end.offset
 
-  let scriptAst
+  function error(
+    msg: string,
+    node: Node,
+    end: number = node.end! + startOffset
+  ) {
+    throw new Error(
+      msg + `\n\n` + generateCodeFrame(source, node.start! + startOffset, end)
+    )
+  }
+
+  function processRefExpression(exp: Expression, statement: LabeledStatement) {
+    if (exp.type === 'AssignmentExpression') {
+      helperImports.add('ref')
+      const { left, right } = exp
+      if (left.type === 'Identifier') {
+        if (left.name[0] === '$') {
+          error(`ref variable identifiers cannot start with $.`, left)
+        }
+        refBindings[left.name] = setupBindings[left.name] = true
+        refIdentifiers.add(left)
+        s.prependRight(right.start! + startOffset, `ref(`)
+        s.appendLeft(right.end! + startOffset, ')')
+      } else if (left.type === 'ObjectPattern') {
+        // remove wrapping parens
+        for (let i = left.start!; i > 0; i--) {
+          const char = source[i + startOffset]
+          if (char === '(') {
+            s.remove(i + startOffset, i + startOffset + 1)
+            break
+          }
+        }
+        for (let i = left.end!; i > 0; i++) {
+          const char = source[i + startOffset]
+          if (char === ')') {
+            s.remove(i + startOffset, i + startOffset + 1)
+            break
+          }
+        }
+        processRefObjectPattern(left, statement)
+      } else if (left.type === 'ArrayPattern') {
+        processRefArrayPattern(left, statement)
+      }
+    } else if (exp.type === 'SequenceExpression') {
+      // possible multiple declarations
+      // ref: x = 1, y = 2
+      exp.expressions.forEach(e => processRefExpression(e, statement))
+    } else {
+      error(`ref: statements can only contain assignment expressions.`, exp)
+    }
+  }
+
+  function processRefObjectPattern(
+    pattern: ObjectPattern,
+    statement: LabeledStatement
+  ) {
+    for (const p of pattern.properties) {
+      let nameId: Identifier | undefined
+      if (p.type === 'ObjectProperty') {
+        if (p.key.start! === p.value.start!) {
+          // shorthand { foo } --> { foo: __foo }
+          nameId = p.key as Identifier
+          s.appendLeft(nameId.end! + startOffset, `: __${nameId.name}`)
+          if (p.value.type === 'AssignmentPattern') {
+            // { foo = 1 }
+            refIdentifiers.add(p.value.left as Identifier)
+          }
+        } else {
+          if (p.value.type === 'Identifier') {
+            // { foo: bar } --> { foo: __bar }
+            nameId = p.value
+            s.prependRight(nameId.start! + startOffset, `__`)
+          } else if (p.value.type === 'ObjectPattern') {
+            processRefObjectPattern(p.value, statement)
+          } else if (p.value.type === 'ArrayPattern') {
+            processRefArrayPattern(p.value, statement)
+          } else if (p.value.type === 'AssignmentPattern') {
+            // { foo: bar = 1 } --> { foo: __bar = 1 }
+            nameId = p.value.left as Identifier
+            s.prependRight(nameId.start! + startOffset, `__`)
+          }
+        }
+      } else {
+        // rest element { ...foo } --> { ...__foo }
+        nameId = p.argument as Identifier
+        s.prependRight(nameId.start! + startOffset, `__`)
+      }
+      if (nameId) {
+        // register binding
+        refBindings[nameId.name] = setupBindings[nameId.name] = true
+        refIdentifiers.add(nameId)
+        // append binding declarations after the parent statement
+        s.appendLeft(
+          statement.end! + startOffset,
+          `\nconst ${nameId.name} = ref(__${nameId.name});`
+        )
+      }
+    }
+  }
+
+  function processRefArrayPattern(
+    pattern: ArrayPattern,
+    statement: LabeledStatement
+  ) {
+    for (const e of pattern.elements) {
+      if (!e) continue
+      let nameId: Identifier | undefined
+      if (e.type === 'Identifier') {
+        // [a] --> [__a]
+        nameId = e
+      } else if (e.type === 'AssignmentPattern') {
+        // [a = 1] --> [__a = 1]
+        nameId = e.left as Identifier
+      } else if (e.type === 'RestElement') {
+        // [...a] --> [...__a]
+        nameId = e.argument as Identifier
+      } else if (e.type === 'ObjectPattern') {
+        processRefObjectPattern(e, statement)
+      } else if (e.type === 'ArrayPattern') {
+        processRefArrayPattern(e, statement)
+      }
+      if (nameId) {
+        s.prependRight(nameId.start! + startOffset, `__`)
+        // register binding
+        refBindings[nameId.name] = setupBindings[nameId.name] = true
+        refIdentifiers.add(nameId)
+        // append binding declarations after the parent statement
+        s.appendLeft(
+          statement.end! + startOffset,
+          `\nconst ${nameId.name} = ref(__${nameId.name});`
+        )
+      }
+    }
+  }
 
   // 1. process normal <script> first if it exists
+  let scriptAst
   if (script) {
     // import dedupe between <script> and <script setup>
     scriptAst = parse(script.content, {
@@ -147,7 +271,7 @@ export function compileScript(
         for (const {
           local: { name }
         } of node.specifiers) {
-          imports[name] = node.source.value
+          userImports[name] = node.source.value
         }
       } else if (node.type === 'ExportDefaultDeclaration') {
         // export default
@@ -280,6 +404,21 @@ export function compileScript(
       end++
     }
 
+    // process `ref: x` bindings (convert to refs)
+    if (
+      enableRefSugar &&
+      node.type === 'LabeledStatement' &&
+      node.label.name === 'ref' &&
+      node.body.type === 'ExpressionStatement'
+    ) {
+      s.overwrite(
+        node.label.start! + startOffset,
+        node.body.start! + startOffset,
+        'const '
+      )
+      processRefExpression(node.body.expression, node)
+    }
+
     if (node.type === 'ImportDeclaration') {
       // import declarations are moved to top
       s.move(start, end, 0)
@@ -287,7 +426,7 @@ export function compileScript(
       let prev
       let removed = 0
       for (const specifier of node.specifiers) {
-        if (imports[specifier.local.name]) {
+        if (userImports[specifier.local.name]) {
           // already imported in <script setup>, dedupe
           removed++
           s.remove(
@@ -295,7 +434,7 @@ export function compileScript(
             specifier.end! + startOffset
           )
         } else {
-          imports[specifier.local.name] = node.source.value
+          userImports[specifier.local.name] = node.source.value
         }
         prev = specifier
       }
@@ -305,106 +444,23 @@ export function compileScript(
     }
 
     if (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') {
-      // named exports
-      if (node.declaration) {
-        // variable/function/class declarations.
-        // remove leading `export ` keyword
-        s.remove(start, start + 7)
-        walkDeclaration(node.declaration, setupExports)
-      }
-      if (node.specifiers.length) {
-        // named export with specifiers
-        if (node.source) {
-          // export { x } from './x'
-          // change it to import and move to top
-          s.overwrite(start, start + 6, 'import')
-          s.move(start, end, 0)
-        } else {
-          // export { x }
-          s.remove(start, end)
-        }
-        for (const specifier of node.specifiers) {
-          if (specifier.type === 'ExportDefaultSpecifier') {
-            // export default from './x'
-            // rewrite to `import __default__ from './x'`
-            checkDuplicateDefaultExport(node)
-            defaultExport = node
-            s.overwrite(
-              specifier.exported.start! + startOffset,
-              specifier.exported.start! + startOffset + 7,
-              defaultTempVar
-            )
-          } else if (
-            specifier.type === 'ExportSpecifier' &&
-            specifier.exported.type === 'Identifier'
-          ) {
-            if (specifier.exported.name === 'default') {
-              checkDuplicateDefaultExport(node)
-              defaultExport = node
-              // 1. remove specifier
-              if (node.specifiers.length > 1) {
-                // removing the default specifier from a list of specifiers.
-                // look ahead until we reach the first non , or whitespace char.
-                let end = specifier.end! + startOffset
-                while (end < source.length) {
-                  if (/[^,\s]/.test(source.charAt(end))) {
-                    break
-                  }
-                  end++
-                }
-                s.remove(specifier.start! + startOffset, end)
-              } else {
-                s.remove(node.start! + startOffset!, node.end! + startOffset!)
-              }
-              if (!node.source) {
-                // export { x as default, ... }
-                const local = specifier.local.name
-                if (setupScopeVars[local] || setupExports[local]) {
-                  throw new Error(
-                    `Cannot export locally defined variable as default in <script setup>.\n` +
-                      `Default export must be an object literal with no reference to local scope.\n` +
-                      generateCodeFrame(
-                        source,
-                        specifier.start! + startOffset,
-                        specifier.end! + startOffset
-                      )
-                  )
-                }
-                // rewrite to `const __default__ = x` and move to end
-                s.append(`\nconst ${defaultTempVar} = ${local}\n`)
-              } else {
-                // export { x as default } from './x'
-                // rewrite to `import { x as __default__ } from './x'` and
-                // add to top
-                s.prepend(
-                  `import { ${
-                    specifier.local.name
-                  } as ${defaultTempVar} } from '${node.source.value}'\n`
-                )
-              }
-            } else {
-              setupExports[specifier.exported.name] = true
-              if (node.source) {
-                imports[specifier.exported.name] = node.source.value
-              }
-            }
-          }
-        }
-      }
+      // TODO warn
+      error(`<script setup> cannot contain non-type named exports.`, node)
     }
 
     if (node.type === 'ExportAllDeclaration') {
-      // export * from './x'
-      s.overwrite(
-        start,
-        node.source.start! + startOffset,
-        `import * as __export_all_${exportAllIndex++}__ from `
-      )
-      s.move(start, end, 0)
+      // TODO warn
     }
 
     if (node.type === 'ExportDefaultDeclaration') {
-      checkDuplicateDefaultExport(node)
+      if (defaultExport) {
+        // <script> already has export default
+        error(
+          `Default export is already declared in normal <script>.`,
+          node,
+          node.start! + startOffset + `export default`.length
+        )
+      }
       // export default {} inside <script setup>
       // this should be kept in module scope - move it to the end
       s.move(start, end, source.length)
@@ -421,7 +477,7 @@ export function compileScript(
         node.type === 'ClassDeclaration') &&
       !node.declare
     ) {
-      walkDeclaration(node, setupScopeVars)
+      walkDeclaration(node, setupBindings)
     }
 
     // Type declarations
@@ -483,9 +539,6 @@ export function compileScript(
     // await
     if (
       node.type === 'VariableDeclaration' ||
-      (node.type === 'ExportNamedDeclaration' &&
-        node.declaration &&
-        node.declaration.type === 'VariableDeclaration') ||
       node.type.endsWith('Statement')
     ) {
       ;(walk as any)(node, {
@@ -501,20 +554,50 @@ export function compileScript(
     }
   }
 
-  // 4. check default export to make sure it doesn't reference setup scope
-  // variables
-  if (needDefaultExportRefCheck) {
-    checkDefaultExport(
-      defaultExport!,
-      setupScopeVars,
-      imports,
-      setupExports,
-      source,
-      startOffset
-    )
+  // 4. Do a full walk to rewrite identifiers referencing let exports with ref
+  // value access
+  if (enableRefSugar && Object.keys(refBindings).length) {
+    for (const node of scriptSetupAst) {
+      if (node.type !== 'ImportDeclaration') {
+        walkIdentifiers(node, (id, parent) => {
+          if (refBindings[id.name] && !refIdentifiers.has(id)) {
+            if (isStaticProperty(parent) && parent.shorthand) {
+              // let binding used in a property shorthand
+              // { foo } -> { foo: foo.value }
+              // skip for destructure patterns
+              if (!(parent as any).inPattern) {
+                s.appendLeft(id.end! + startOffset, `: ${id.name}.value`)
+              }
+            } else {
+              s.appendLeft(id.end! + startOffset, '.value')
+            }
+          } else if (id.name[0] === '$' && refBindings[id.name.slice(1)]) {
+            // $xxx raw ref access variables, remove the $ prefix
+            s.remove(id.start! + startOffset, id.start! + startOffset + 1)
+          }
+        })
+      }
+    }
   }
 
-  // 5. remove non-script content
+  // 5. check default export to make sure it doesn't reference setup scope
+  // variables
+  if (needDefaultExportRefCheck) {
+    walkIdentifiers(defaultExport!, id => {
+      if (setupBindings[id.name]) {
+        error(
+          `\`export default\` in <script setup> cannot reference locally ` +
+            `declared variables because it will be hoisted outside of the ` +
+            `setup() function. If your component options requires initialization ` +
+            `in the module scope, use a separate normal <script> to export ` +
+            `the options instead.`,
+          id
+        )
+      }
+    })
+  }
+
+  // 6. remove non-script content
   if (script) {
     if (startOffset < scriptStartOffset!) {
       // <script setup> before <script>
@@ -532,11 +615,11 @@ export function compileScript(
     s.remove(endOffset, source.length)
   }
 
-  // 5. finalize setup argument signature.
+  // 7. finalize setup argument signature.
   let args = ``
   if (isTS) {
     if (slotsType === '__Slots__') {
-      s.prepend(`import { Slots as __Slots__ } from 'vue'\n`)
+      helperImports.add('Slots')
     }
     const ctxType = `{
   emit: ${emitType},
@@ -560,7 +643,7 @@ export function compileScript(
     args = hasExplicitSignature ? (setupValue as string) : ``
   }
 
-  // 6. wrap setup code with function.
+  // 8. wrap setup code with function.
   // export the content of <script setup> as a named export, `setup`.
   // this allows `import { setup } from '*.vue'` for testing purposes.
   s.prependLeft(
@@ -569,27 +652,18 @@ export function compileScript(
   )
 
   // generate return statement
-  let returned = `{ ${Object.keys(setupExports).join(', ')} }`
-
-  // handle `export * from`. We need to call `toRefs` on the imported module
-  // object before merging.
-  if (exportAllIndex > 0) {
-    s.prepend(`import { toRefs as __toRefs__ } from 'vue'\n`)
-    for (let i = 0; i < exportAllIndex; i++) {
-      returned += `,\n  __toRefs__(__export_all_${i}__)`
-    }
-    returned = `Object.assign(\n  ${returned}\n)`
-  }
+  const exposedBindings = { ...userImports, ...setupBindings }
+  let returned = `{ ${Object.keys(exposedBindings).join(', ')} }`
 
   // inject `useCssVars` calls
   if (hasCssVars) {
-    s.prepend(`import { useCssVars as __useCssVars__ } from 'vue'\n`)
+    helperImports.add(`useCssVars`)
     for (const style of styles) {
       const vars = style.attrs.vars
       if (typeof vars === 'string') {
         s.prependRight(
           endOffset,
-          `\n${genCssVarsCode(vars, !!style.scoped, setupExports)}`
+          `\n${genCssVarsCode(vars, !!style.scoped, exposedBindings)}`
         )
       }
     }
@@ -597,18 +671,18 @@ export function compileScript(
 
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
-  // 7. finalize default export
+  // 9. finalize default export
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
-    s.prepend(`import { defineComponent as __define__ } from 'vue'\n`)
+    helperImports.add(`defineComponent`)
     // we have to use object spread for types to be merged properly
     // user's TS setting should compile it down to proper targets
     const def = defaultExport ? `\n  ...${defaultTempVar},` : ``
     const runtimeProps = genRuntimeProps(typeDeclaredProps)
     const runtimeEmits = genRuntimeEmits(typeDeclaredEmits)
     s.append(
-      `export default __define__({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
+      `export default __defineComponent__({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
     )
   } else {
     if (defaultExport) {
@@ -620,22 +694,28 @@ export function compileScript(
     }
   }
 
-  // 8. expose bindings for template compiler optimization
-  if (scriptAst) {
-    Object.assign(bindings, analyzeScriptBindings(scriptAst))
+  // 10. finalize Vue helper imports
+  const helpers = [...helperImports].filter(i => userImports[i] !== 'vue')
+  if (helpers.length) {
+    s.prepend(`import { ${helpers.join(', ')} } from 'vue'\n`)
   }
-  Object.keys(setupExports).forEach(key => {
-    bindings[key] = 'setup'
+
+  // 11. expose bindings for template compiler optimization
+  if (scriptAst) {
+    Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
+  }
+  Object.keys(exposedBindings).forEach(key => {
+    bindingMetadata[key] = 'setup'
   })
   Object.keys(typeDeclaredProps).forEach(key => {
-    bindings[key] = 'props'
+    bindingMetadata[key] = 'props'
   })
-  Object.assign(bindings, analyzeScriptBindings(scriptSetupAst))
+  Object.assign(bindingMetadata, analyzeScriptBindings(scriptSetupAst))
 
   s.trim()
   return {
     ...scriptSetup,
-    bindings,
+    bindings: bindingMetadata,
     content: s.toString(),
     map: (s.generateMap({
       source: filename,
@@ -903,38 +983,21 @@ function genRuntimeEmits(emits: Set<string>) {
 }
 
 /**
- * export default {} inside `<script setup>` cannot access variables declared
- * inside since it's hoisted. Walk and check to make sure.
+ * Walk an AST and find identifiers that are variable references.
+ * This is largely the same logic with `transformExpressions` in compiler-core
+ * but with some subtle differences as this needs to handle a wider range of
+ * possible syntax.
  */
-function checkDefaultExport(
+function walkIdentifiers(
   root: Node,
-  scopeVars: Record<string, boolean>,
-  imports: Record<string, string>,
-  exports: Record<string, boolean>,
-  source: string,
-  offset: number
+  onIdentifier: (node: Identifier, parent: Node) => void
 ) {
   const knownIds: Record<string, number> = Object.create(null)
   ;(walk as any)(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node) {
       if (node.type === 'Identifier') {
-        if (
-          !knownIds[node.name] &&
-          !isStaticPropertyKey(node, parent) &&
-          (scopeVars[node.name] || (!imports[node.name] && exports[node.name]))
-        ) {
-          throw new Error(
-            `\`export default\` in <script setup> cannot reference locally ` +
-              `declared variables because it will be hoisted outside of the ` +
-              `setup() function. If your component options requires initialization ` +
-              `in the module scope, use a separate normal <script> to export ` +
-              `the options instead.\n\n` +
-              generateCodeFrame(
-                source,
-                node.start! + offset,
-                node.end! + offset
-              )
-          )
+        if (!knownIds[node.name] && isRefIdentifier(node, parent)) {
+          onIdentifier(node, parent)
         }
       } else if (isFunction(node)) {
         // walk function expressions and add its arguments to known identifiers
@@ -968,6 +1031,12 @@ function checkDefaultExport(
             }
           })
         )
+      } else if (
+        node.type === 'ObjectProperty' &&
+        parent.type === 'ObjectPattern'
+      ) {
+        // mark property in destructure pattern
+        ;(node as any).inPattern = true
       }
     },
     leave(node: Node & { scopeIds?: Set<string> }) {
@@ -983,15 +1052,64 @@ function checkDefaultExport(
   })
 }
 
-function isStaticPropertyKey(node: Node, parent: Node): boolean {
-  return (
-    parent &&
-    (parent.type === 'ObjectProperty' || parent.type === 'ObjectMethod') &&
-    !parent.computed &&
-    parent.key === node
-  )
+function isRefIdentifier(id: Identifier, parent: Node) {
+  // declaration id
+  if (
+    (parent.type === 'VariableDeclarator' ||
+      parent.type === 'ClassDeclaration') &&
+    parent.id === id
+  ) {
+    return false
+  }
+
+  if (isFunction(parent)) {
+    // function decalration/expression id
+    if ((parent as any).id === id) {
+      return false
+    }
+    // params list
+    if (parent.params.includes(id)) {
+      return false
+    }
+  }
+
+  // property key
+  // this also covers object destructure pattern
+  if (isStaticPropertyKey(id, parent)) {
+    return false
+  }
+
+  // array destructure pattern
+  if (parent.type === 'ArrayPattern') {
+    return false
+  }
+
+  // member expression property
+  if (
+    (parent.type === 'MemberExpression' ||
+      parent.type === 'OptionalMemberExpression') &&
+    parent.property === id &&
+    !parent.computed
+  ) {
+    return false
+  }
+
+  // is a special keyword but parsed as identifier
+  if (id.name === 'arguments') {
+    return false
+  }
+
+  return true
 }
 
+const isStaticProperty = (node: Node): node is ObjectProperty =>
+  node &&
+  (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
+  !node.computed
+
+const isStaticPropertyKey = (node: Node, parent: Node) =>
+  isStaticProperty(parent) && parent.key === node
+
 function isFunction(node: Node): node is FunctionNode {
   return /Function(?:Expression|Declaration)$|Method$/.test(node.type)
 }
diff --git a/packages/compiler-sfc/src/genCssVars.ts b/packages/compiler-sfc/src/genCssVars.ts
index a5360889..d18afe60 100644
--- a/packages/compiler-sfc/src/genCssVars.ts
+++ b/packages/compiler-sfc/src/genCssVars.ts
@@ -13,7 +13,7 @@ import { ParserPlugin } from '@babel/parser'
 export function genCssVarsCode(
   varsExp: string,
   scoped: boolean,
-  knownBindings?: Record<string, boolean>
+  knownBindings?: Record<string, string | boolean>
 ) {
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {

From 941b645d5843a05337eaeadb980c3feb28b72080 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 30 Oct 2020 11:52:46 -0400
Subject: [PATCH 02/27] refactor(compiler-sfc): improve compileScript error
 messages

---
 packages/compiler-sfc/src/compileScript.ts | 74 ++++++++++++++++------
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index cf40389b..176c1ea3 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1,7 +1,7 @@
 import MagicString from 'magic-string'
 import { BindingMetadata } from '@vue/compiler-core'
 import { SFCDescriptor, SFCScriptBlock } from './parse'
-import { parse, ParserPlugin } from '@babel/parser'
+import { parse as _parse, ParserOptions, ParserPlugin } from '@babel/parser'
 import { babelParserDefaultPlugins, generateCodeFrame } from '@vue/shared'
 import {
   Node,
@@ -69,14 +69,14 @@ export function compileScript(
 
   if (!scriptSetup) {
     if (!script) {
-      throw new Error(`SFC contains no <script> tags.`)
+      throw new Error(`[@vue/compiler-sfc] SFC contains no <script> tags.`)
     }
     if (scriptLang && scriptLang !== 'ts') {
       // do not process non js/ts script blocks
       return script
     }
     try {
-      const scriptAst = parse(script.content, {
+      const scriptAst = _parse(script.content, {
         plugins,
         sourceType: 'module'
       }).program.body
@@ -95,7 +95,7 @@ export function compileScript(
 
   if (script && scriptLang !== scriptSetupLang) {
     throw new Error(
-      `<script> and <script setup> must have the same language type.`
+      `[@vue/compiler-sfc] <script> and <script setup> must have the same language type.`
     )
   }
 
@@ -122,13 +122,31 @@ export function compileScript(
   const scriptStartOffset = script && script.loc.start.offset
   const scriptEndOffset = script && script.loc.end.offset
 
+  function parse(
+    input: string,
+    options: ParserOptions,
+    offset: number
+  ): Statement[] {
+    try {
+      return _parse(input, options).program.body
+    } catch (e) {
+      e.message = `[@vue/compiler-sfc] ${e.message}\n\n${generateCodeFrame(
+        source,
+        e.pos + offset,
+        e.pos + offset + 1
+      )}`
+      throw e
+    }
+  }
+
   function error(
     msg: string,
     node: Node,
     end: number = node.end! + startOffset
   ) {
     throw new Error(
-      msg + `\n\n` + generateCodeFrame(source, node.start! + startOffset, end)
+      `[@vue/compiler-sfc] ${msg}\n\n` +
+        generateCodeFrame(source, node.start! + startOffset, end)
     )
   }
 
@@ -260,10 +278,14 @@ export function compileScript(
   let scriptAst
   if (script) {
     // import dedupe between <script> and <script setup>
-    scriptAst = parse(script.content, {
-      plugins,
-      sourceType: 'module'
-    }).program.body
+    scriptAst = parse(
+      script.content,
+      {
+        plugins,
+        sourceType: 'module'
+      },
+      scriptStartOffset!
+    )
 
     for (const node of scriptAst) {
       if (node.type === 'ImportDeclaration') {
@@ -348,8 +370,18 @@ export function compileScript(
     // <script setup="xxx" lang="ts">
     // parse the signature to extract the props/emit variables the user wants
     // we need them to find corresponding type declarations.
-    const signatureAST = parse(`(${setupValue})=>{}`, { plugins }).program
-      .body[0]
+    let signatureAST
+    try {
+      signatureAST = _parse(`(${setupValue})=>{}`, { plugins }).program.body[0]
+    } catch (e) {
+      throw new Error(
+        `[@vue/compiler-sfc] Invalid <script setup> signature: ${setupValue}\n\n${generateCodeFrame(
+          source,
+          startOffset - 1,
+          startOffset
+        )}`
+      )
+    }
     const params = ((signatureAST as ExpressionStatement)
       .expression as ArrowFunctionExpression).params
     if (params[0] && params[0].type === 'Identifier') {
@@ -377,14 +409,18 @@ export function compileScript(
   }
 
   // 3. parse <script setup> and  walk over top level statements
-  const scriptSetupAst = parse(scriptSetup.content, {
-    plugins: [
-      ...plugins,
-      // allow top level await but only inside <script setup>
-      'topLevelAwait'
-    ],
-    sourceType: 'module'
-  }).program.body
+  const scriptSetupAst = parse(
+    scriptSetup.content,
+    {
+      plugins: [
+        ...plugins,
+        // allow top level await but only inside <script setup>
+        'topLevelAwait'
+      ],
+      sourceType: 'module'
+    },
+    startOffset
+  )
 
   for (const node of scriptSetupAst) {
     const start = node.start! + startOffset

From ed2eb81317a378b657ee33692a90b7565394bdca Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 30 Oct 2020 12:03:14 -0400
Subject: [PATCH 03/27] refactor(compiler-sfc): always parse explicit script
 setup signature

---
 packages/compiler-sfc/src/compileScript.ts | 52 ++++++++++++----------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 176c1ea3..3572cedc 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -366,10 +366,8 @@ export function compileScript(
   // record declared types for runtime props type generation
   const declaredTypes: Record<string, string[]> = {}
 
-  if (isTS && hasExplicitSignature) {
-    // <script setup="xxx" lang="ts">
-    // parse the signature to extract the props/emit variables the user wants
-    // we need them to find corresponding type declarations.
+  // <script setup="xxx">
+  if (hasExplicitSignature) {
     let signatureAST
     try {
       signatureAST = _parse(`(${setupValue})=>{}`, { plugins }).program.body[0]
@@ -382,26 +380,32 @@ export function compileScript(
         )}`
       )
     }
-    const params = ((signatureAST as ExpressionStatement)
-      .expression as ArrowFunctionExpression).params
-    if (params[0] && params[0].type === 'Identifier') {
-      propsASTNode = params[0]
-      propsVar = propsASTNode.name
-    }
-    if (params[1] && params[1].type === 'ObjectPattern') {
-      setupCtxASTNode = params[1]
-      for (const p of params[1].properties) {
-        if (
-          p.type === 'ObjectProperty' &&
-          p.key.type === 'Identifier' &&
-          p.value.type === 'Identifier'
-        ) {
-          if (p.key.name === 'emit') {
-            emitVar = p.value.name
-          } else if (p.key.name === 'slots') {
-            slotsVar = p.value.name
-          } else if (p.key.name === 'attrs') {
-            attrsVar = p.value.name
+
+    if (isTS) {
+      // <script setup="xxx" lang="ts">
+      // parse the signature to extract the props/emit variables the user wants
+      // we need them to find corresponding type declarations.
+      const params = ((signatureAST as ExpressionStatement)
+        .expression as ArrowFunctionExpression).params
+      if (params[0] && params[0].type === 'Identifier') {
+        propsASTNode = params[0]
+        propsVar = propsASTNode.name
+      }
+      if (params[1] && params[1].type === 'ObjectPattern') {
+        setupCtxASTNode = params[1]
+        for (const p of params[1].properties) {
+          if (
+            p.type === 'ObjectProperty' &&
+            p.key.type === 'Identifier' &&
+            p.value.type === 'Identifier'
+          ) {
+            if (p.key.name === 'emit') {
+              emitVar = p.value.name
+            } else if (p.key.name === 'slots') {
+              slotsVar = p.value.name
+            } else if (p.key.name === 'attrs') {
+              attrsVar = p.value.name
+            }
           }
         }
       }

From 8485cd48437bf47880a61b03c57090e8bfdf527b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 30 Oct 2020 15:29:38 -0400
Subject: [PATCH 04/27] fix: handle case of ref declaration without initial
 value

---
 .../__snapshots__/compileScript.spec.ts.snap  |  3 ++-
 .../__tests__/compileScript.spec.ts           |  5 ++++
 packages/compiler-sfc/src/compileScript.ts    | 26 +++++++++++--------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 69937bc9..7865e20d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -292,6 +292,7 @@ exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1
 
 export function setup() {
 
+      const foo = ref()
       const a = ref(1)
       const b = ref({
         count: 0
@@ -299,7 +300,7 @@ export function setup() {
       let c = () => {}
       let d
       
-return { a, b, c, d }
+return { foo, a, b, c, d }
 }
 
 export default { setup }"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 7c17d42d..e1f2c8ae 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -259,6 +259,7 @@ describe('SFC compile <script setup>', () => {
   describe('ref: syntax sugar', () => {
     test('convert ref declarations', () => {
       const { content, bindings } = compile(`<script setup>
+      ref: foo
       ref: a = 1
       ref: b = {
         count: 0
@@ -267,7 +268,10 @@ describe('SFC compile <script setup>', () => {
       let d
       </script>`)
       expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).not.toMatch(`ref: foo`)
       expect(content).not.toMatch(`ref: a`)
+      expect(content).not.toMatch(`ref: b`)
+      expect(content).toMatch(`const foo = ref()`)
       expect(content).toMatch(`const a = ref(1)`)
       expect(content).toMatch(`
       const b = ref({
@@ -279,6 +283,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`let d`)
       assertCode(content)
       expect(bindings).toStrictEqual({
+        foo: 'setup',
         a: 'setup',
         b: 'setup',
         c: 'setup',
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 3572cedc..9b93717c 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -155,11 +155,7 @@ export function compileScript(
       helperImports.add('ref')
       const { left, right } = exp
       if (left.type === 'Identifier') {
-        if (left.name[0] === '$') {
-          error(`ref variable identifiers cannot start with $.`, left)
-        }
-        refBindings[left.name] = setupBindings[left.name] = true
-        refIdentifiers.add(left)
+        registerRefBinding(left)
         s.prependRight(right.start! + startOffset, `ref(`)
         s.appendLeft(right.end! + startOffset, ')')
       } else if (left.type === 'ObjectPattern') {
@@ -186,11 +182,22 @@ export function compileScript(
       // possible multiple declarations
       // ref: x = 1, y = 2
       exp.expressions.forEach(e => processRefExpression(e, statement))
+    } else if (exp.type === 'Identifier') {
+      registerRefBinding(exp)
+      s.appendLeft(exp.end! + startOffset, ` = ref()`)
     } else {
       error(`ref: statements can only contain assignment expressions.`, exp)
     }
   }
 
+  function registerRefBinding(id: Identifier) {
+    if (id.name[0] === '$') {
+      error(`ref variable identifiers cannot start with $.`, id)
+    }
+    refBindings[id.name] = setupBindings[id.name] = true
+    refIdentifiers.add(id)
+  }
+
   function processRefObjectPattern(
     pattern: ObjectPattern,
     statement: LabeledStatement
@@ -227,9 +234,7 @@ export function compileScript(
         s.prependRight(nameId.start! + startOffset, `__`)
       }
       if (nameId) {
-        // register binding
-        refBindings[nameId.name] = setupBindings[nameId.name] = true
-        refIdentifiers.add(nameId)
+        registerRefBinding(nameId)
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,
@@ -261,10 +266,9 @@ export function compileScript(
         processRefArrayPattern(e, statement)
       }
       if (nameId) {
+        registerRefBinding(nameId)
+        // prefix original
         s.prependRight(nameId.start! + startOffset, `__`)
-        // register binding
-        refBindings[nameId.name] = setupBindings[nameId.name] = true
-        refIdentifiers.add(nameId)
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,

From 6e3abc86058f967bcf6fad94c62572989d4dbcbc Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 30 Oct 2020 16:56:12 -0400
Subject: [PATCH 05/27] fix(compiler-sfc): fix script setup ts helpers

---
 packages/compiler-sfc/src/compileScript.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 9b93717c..7ba32b85 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -358,7 +358,7 @@ export function compileScript(
 
   let propsType = `{}`
   let emitType = `(e: string, ...args: any[]) => void`
-  let slotsType = `__Slots__`
+  let slotsType = `Slots`
   let attrsType = `Record<string, any>`
 
   let propsASTNode
@@ -662,7 +662,7 @@ export function compileScript(
   // 7. finalize setup argument signature.
   let args = ``
   if (isTS) {
-    if (slotsType === '__Slots__') {
+    if (slotsType === 'Slots') {
       helperImports.add('Slots')
     }
     const ctxType = `{
@@ -726,7 +726,7 @@ export function compileScript(
     const runtimeProps = genRuntimeProps(typeDeclaredProps)
     const runtimeEmits = genRuntimeEmits(typeDeclaredEmits)
     s.append(
-      `export default __defineComponent__({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
+      `export default defineComponent({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
     )
   } else {
     if (defaultExport) {

From 3cca6bc3a83b319dca6f4555b0659033e9a12ad0 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 30 Oct 2020 17:12:15 -0400
Subject: [PATCH 06/27] chore: fix snapshots

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 7865e20d..a91e3e65 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -7,7 +7,7 @@ declare function __emit__(e: 'foo' | 'bar'): void
       
 export function setup(_: {}, { emit: myEmit }: {
   emit: typeof __emit__,
-  slots: __Slots__,
+  slots: Slots,
   attrs: Record<string, any>
 }) {
 
@@ -15,7 +15,7 @@ export function setup(_: {}, { emit: myEmit }: {
 return {  }
 }
 
-export default __defineComponent__({
+export default defineComponent({
   emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
   setup
 })"
@@ -57,7 +57,7 @@ export function setup(myProps: {
 return {  }
 }
 
-export default __defineComponent__({
+export default defineComponent({
   props: {
     string: { type: String, required: true },
     number: { type: Number, required: true },
@@ -96,7 +96,7 @@ export function setup() {
 return {  }
 }
 
-export default __defineComponent__({
+export default defineComponent({
   setup
 })"
 `;

From 8cf0a40d5be709ef2b8e3ad58ea9b8e1928bcbb6 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 9 Nov 2020 17:00:50 -0500
Subject: [PATCH 07/27] chore: update warning and error messages

---
 packages/compiler-sfc/src/compileScript.ts | 63 ++++++++++++++--------
 1 file changed, 42 insertions(+), 21 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 7ba32b85..841c60ec 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -36,7 +36,14 @@ export interface SFCScriptCompileOptions {
   refSugar?: boolean
 }
 
-let hasWarned = false
+const hasWarned: Record<string, boolean> = {}
+
+function warnOnce(msg: string) {
+  if (!hasWarned[msg]) {
+    hasWarned[msg] = true
+    console.log(`\n\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
+  }
+}
 
 /**
  * Compile `<script setup>`
@@ -49,12 +56,10 @@ export function compileScript(
 ): SFCScriptBlock {
   const { script, scriptSetup, styles, source, filename } = sfc
 
-  if (__DEV__ && !__TEST__ && !hasWarned && scriptSetup) {
-    hasWarned = true
-    // @ts-ignore `console.info` cannot be null error
-    console[console.info ? 'info' : 'log'](
-      `\n[@vue/compiler-sfc] <script setup> is still an experimental proposal.\n` +
-        `Follow https://github.com/vuejs/rfcs/pull/182 for its status.\n`
+  if (__DEV__ && !__TEST__ && scriptSetup) {
+    warnOnce(
+      `<script setup> is still an experimental proposal.\n` +
+        `Follow https://github.com/vuejs/rfcs/pull/227 for its status.`
     )
   }
 
@@ -450,17 +455,30 @@ export function compileScript(
 
     // process `ref: x` bindings (convert to refs)
     if (
-      enableRefSugar &&
       node.type === 'LabeledStatement' &&
       node.label.name === 'ref' &&
       node.body.type === 'ExpressionStatement'
     ) {
-      s.overwrite(
-        node.label.start! + startOffset,
-        node.body.start! + startOffset,
-        'const '
-      )
-      processRefExpression(node.body.expression, node)
+      if (enableRefSugar) {
+        warnOnce(
+          `ref: sugar is still an experimental proposal and is not\n` +
+            `guaranteed to be a part of <script setup>.\n` +
+            `Follow its status at https://github.com/vuejs/rfcs/pull/228`
+        )
+        s.overwrite(
+          node.label.start! + startOffset,
+          node.body.start! + startOffset,
+          'const '
+        )
+        processRefExpression(node.body.expression, node)
+      } else {
+        // TODO if we end up shipping ref: sugar as an opt-in feature,
+        // need to proxy the option in vite, vue-loader and rollup-plugin-vue.
+        error(
+          `ref: sugar needs to be explicitly enabled via vite or vue-loader options.`,
+          node
+        )
+      }
     }
 
     if (node.type === 'ImportDeclaration') {
@@ -487,13 +505,16 @@ export function compileScript(
       }
     }
 
-    if (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') {
-      // TODO warn
-      error(`<script setup> cannot contain non-type named exports.`, node)
-    }
-
-    if (node.type === 'ExportAllDeclaration') {
-      // TODO warn
+    if (
+      (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') ||
+      node.type === 'ExportAllDeclaration'
+    ) {
+      error(
+        `<script setup> cannot contain non-type named or * exports. ` +
+          `If you are using a previous version of <script setup>, please ` +
+          `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
+        node
+      )
     }
 
     if (node.type === 'ExportDefaultDeclaration') {

From 3f99e239e03a8861c462d4ee91feb82066ab3e28 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 9 Nov 2020 17:22:58 -0500
Subject: [PATCH 08/27] feat(compiler-sfc): support kebab-case components in
 `<script setup>` sfc template

---
 packages/compiler-core/src/transform.ts          |  5 +++--
 .../src/transforms/transformElement.ts           | 16 +++++++++++++---
 packages/compiler-sfc/src/compileScript.ts       |  8 ++++----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4650c368..fc56ddf5 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -22,7 +22,8 @@ import {
   isArray,
   NOOP,
   PatchFlags,
-  PatchFlagNames
+  PatchFlagNames,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { defaultOnError } from './errors'
 import {
@@ -122,7 +123,7 @@ export function createTransformContext(
     scopeId = null,
     ssr = false,
     ssrCssVars = ``,
-    bindingMetadata = {},
+    bindingMetadata = EMPTY_OBJ,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 8a6d39a3..53b591fc 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -26,7 +26,10 @@ import {
   isSymbol,
   isOn,
   isObject,
-  isReservedProp
+  isReservedProp,
+  capitalize,
+  camelize,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -246,8 +249,15 @@ export function resolveComponentType(
   }
 
   // 3. user component (from setup bindings)
-  if (context.bindingMetadata[tag] === 'setup') {
-    return `$setup[${JSON.stringify(tag)}]`
+  let tagFromSetup = tag
+  const bindings = context.bindingMetadata
+  if (
+    bindings !== EMPTY_OBJ &&
+    (bindings[tagFromSetup] === 'setup' ||
+      bindings[(tagFromSetup = camelize(tag))] === 'setup' ||
+      bindings[(tagFromSetup = capitalize(camelize(tag)))] === 'setup')
+  ) {
+    return `$setup[${JSON.stringify(tagFromSetup)}]`
   }
 
   // 4. user component (resolve)
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 841c60ec..45cdea72 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -41,7 +41,7 @@ const hasWarned: Record<string, boolean> = {}
 function warnOnce(msg: string) {
   if (!hasWarned[msg]) {
     hasWarned[msg] = true
-    console.log(`\n\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
+    console.log(`\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
   }
 }
 
@@ -59,7 +59,7 @@ export function compileScript(
   if (__DEV__ && !__TEST__ && scriptSetup) {
     warnOnce(
       `<script setup> is still an experimental proposal.\n` +
-        `Follow https://github.com/vuejs/rfcs/pull/227 for its status.`
+        `Follow its status at https://github.com/vuejs/rfcs/pull/227.`
     )
   }
 
@@ -461,9 +461,9 @@ export function compileScript(
     ) {
       if (enableRefSugar) {
         warnOnce(
-          `ref: sugar is still an experimental proposal and is not\n` +
+          `ref: sugar is still an experimental proposal and is not ` +
             `guaranteed to be a part of <script setup>.\n` +
-            `Follow its status at https://github.com/vuejs/rfcs/pull/228`
+            `Follow its status at https://github.com/vuejs/rfcs/pull/228.`
         )
         s.overwrite(
           node.label.start! + startOffset,

From 886ed7681dd203c07ff3b504538328f43e14d9b0 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 10 Nov 2020 16:28:34 -0500
Subject: [PATCH 09/27] feat(compiler-sfc): compileScript inline render
 function mode

---
 packages/compiler-core/src/codegen.ts         |  38 +++--
 packages/compiler-core/src/options.ts         |  52 ++++---
 packages/compiler-core/src/runtimeHelpers.ts  |   4 +-
 packages/compiler-core/src/transform.ts       |   4 +
 .../src/transforms/transformExpression.ts     |  20 ++-
 .../__tests__/compileScript.spec.ts           |  10 +-
 packages/compiler-sfc/src/compileScript.ts    | 136 ++++++++++++------
 packages/compiler-sfc/src/compileTemplate.ts  |   5 +-
 8 files changed, 192 insertions(+), 77 deletions(-)

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 31fe534c..0ab78993 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -60,12 +60,16 @@ type CodegenNode = TemplateChildNode | JSChildNode | SSRCodegenNode
 
 export interface CodegenResult {
   code: string
+  preamble: string
   ast: RootNode
   map?: RawSourceMap
 }
 
 export interface CodegenContext
-  extends Omit<Required<CodegenOptions>, 'bindingMetadata'> {
+  extends Omit<
+      Required<CodegenOptions>,
+      'bindingMetadata' | 'inline' | 'inlinePropsIdentifier'
+    > {
   source: string
   code: string
   line: number
@@ -199,12 +203,18 @@ export function generate(
   const hasHelpers = ast.helpers.length > 0
   const useWithBlock = !prefixIdentifiers && mode !== 'module'
   const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
+  const isSetupInlined = !!options.inline
 
   // preambles
+  // in setup() inline mode, the preamble is generated in a sub context
+  // and returned separately.
+  const preambleContext = isSetupInlined
+    ? createCodegenContext(ast, options)
+    : context
   if (!__BROWSER__ && mode === 'module') {
-    genModulePreamble(ast, context, genScopeId)
+    genModulePreamble(ast, preambleContext, genScopeId, isSetupInlined)
   } else {
-    genFunctionPreamble(ast, context)
+    genFunctionPreamble(ast, preambleContext)
   }
 
   // binding optimizations
@@ -213,10 +223,17 @@ export function generate(
     : ``
   // enter render function
   if (!ssr) {
-    if (genScopeId) {
-      push(`const render = ${PURE_ANNOTATION}_withId(`)
+    if (isSetupInlined) {
+      if (genScopeId) {
+        push(`${PURE_ANNOTATION}_withId(`)
+      }
+      push(`() => {`)
+    } else {
+      if (genScopeId) {
+        push(`const render = ${PURE_ANNOTATION}_withId(`)
+      }
+      push(`function render(_ctx, _cache${optimizeSources}) {`)
     }
-    push(`function render(_ctx, _cache${optimizeSources}) {`)
   } else {
     if (genScopeId) {
       push(`const ssrRender = ${PURE_ANNOTATION}_withId(`)
@@ -290,6 +307,7 @@ export function generate(
   return {
     ast,
     code: context.code,
+    preamble: isSetupInlined ? preambleContext.code : ``,
     // SourceMapGenerator does have toJSON() method but it's not in the types
     map: context.map ? (context.map as any).toJSON() : undefined
   }
@@ -356,7 +374,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
 function genModulePreamble(
   ast: RootNode,
   context: CodegenContext,
-  genScopeId: boolean
+  genScopeId: boolean,
+  inline?: boolean
 ) {
   const {
     push,
@@ -423,7 +442,10 @@ function genModulePreamble(
 
   genHoists(ast.hoists, context)
   newline()
-  push(`export `)
+
+  if (!inline) {
+    push(`export `)
+  }
 }
 
 function genAssets(
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 22d8a086..b0af0cef 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -65,7 +65,39 @@ export interface BindingMetadata {
   [key: string]: 'data' | 'props' | 'setup' | 'options'
 }
 
-export interface TransformOptions {
+interface SharedTransformCodegenOptions {
+  /**
+   * Transform expressions like {{ foo }} to `_ctx.foo`.
+   * If this option is false, the generated code will be wrapped in a
+   * `with (this) { ... }` block.
+   * - This is force-enabled in module mode, since modules are by default strict
+   * and cannot use `with`
+   * @default mode === 'module'
+   */
+  prefixIdentifiers?: boolean
+  /**
+   * Generate SSR-optimized render functions instead.
+   * The resulting function must be attached to the component via the
+   * `ssrRender` option instead of `render`.
+   */
+  ssr?: boolean
+  /**
+   * Optional binding metadata analyzed from script - used to optimize
+   * binding access when `prefixIdentifiers` is enabled.
+   */
+  bindingMetadata?: BindingMetadata
+  /**
+   * Compile the function for inlining inside setup().
+   * This allows the function to directly access setup() local bindings.
+   */
+  inline?: boolean
+  /**
+   * Identifier for props in setup() inline mode.
+   */
+  inlinePropsIdentifier?: string
+}
+
+export interface TransformOptions extends SharedTransformCodegenOptions {
   /**
    * An array of node transforms to be applied to every AST node.
    */
@@ -128,26 +160,15 @@ export interface TransformOptions {
    * SFC scoped styles ID
    */
   scopeId?: string | null
-  /**
-   * Generate SSR-optimized render functions instead.
-   * The resulting function must be attached to the component via the
-   * `ssrRender` option instead of `render`.
-   */
-  ssr?: boolean
   /**
    * SFC `<style vars>` injection string
    * needed to render inline CSS variables on component root
    */
   ssrCssVars?: string
-  /**
-   * Optional binding metadata analyzed from script - used to optimize
-   * binding access when `prefixIdentifiers` is enabled.
-   */
-  bindingMetadata?: BindingMetadata
   onError?: (error: CompilerError) => void
 }
 
-export interface CodegenOptions {
+export interface CodegenOptions extends SharedTransformCodegenOptions {
   /**
    * - `module` mode will generate ES module import statements for helpers
    * and export the render function as the default export.
@@ -189,11 +210,6 @@ export interface CodegenOptions {
    * @default 'Vue'
    */
   runtimeGlobalName?: string
-  // we need to know this during codegen to generate proper preambles
-  prefixIdentifiers?: boolean
-  bindingMetadata?: BindingMetadata
-  // generate ssr-specific code?
-  ssr?: boolean
 }
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index dea6f460..1cf8c7bf 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -29,6 +29,7 @@ export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
 export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``)
 export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
+export const UNREF = Symbol(__DEV__ ? `unref` : ``)
 
 // Name mapping for runtime helpers that need to be imported from 'vue' in
 // generated code. Make sure these are correctly exported in the runtime!
@@ -62,7 +63,8 @@ export const helperNameMap: any = {
   [PUSH_SCOPE_ID]: `pushScopeId`,
   [POP_SCOPE_ID]: `popScopeId`,
   [WITH_SCOPE_ID]: `withScopeId`,
-  [WITH_CTX]: `withCtx`
+  [WITH_CTX]: `withCtx`,
+  [UNREF]: `unref`
 }
 
 export function registerRuntimeHelpers(helpers: any) {
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index fc56ddf5..aab29d00 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -124,6 +124,8 @@ export function createTransformContext(
     ssr = false,
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
+    inline = false,
+    inlinePropsIdentifier = `$props`,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {
@@ -142,6 +144,8 @@ export function createTransformContext(
     ssr,
     ssrCssVars,
     bindingMetadata,
+    inline,
+    inlinePropsIdentifier,
     onError,
 
     // state
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index c2f00a4c..0f10d88f 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -28,6 +28,7 @@ import { Node, Function, Identifier, ObjectProperty } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
 import { parse } from '@babel/parser'
 import { walk } from 'estree-walker'
+import { UNREF } from '../runtimeHelpers'
 
 const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this')
 
@@ -97,12 +98,21 @@ export function processExpression(
     return node
   }
 
-  const { bindingMetadata } = context
+  const { inline, inlinePropsIdentifier, bindingMetadata } = context
   const prefix = (raw: string) => {
-    const source = hasOwn(bindingMetadata, raw)
-      ? `$` + bindingMetadata[raw]
-      : `_ctx`
-    return `${source}.${raw}`
+    if (inline) {
+      // setup inline mode, it's either props or setup
+      if (bindingMetadata[raw] !== 'setup') {
+        return `${inlinePropsIdentifier}.${raw}`
+      } else {
+        return `${context.helperString(UNREF)}(${raw})`
+      }
+    } else {
+      const source = hasOwn(bindingMetadata, raw)
+        ? `$` + bindingMetadata[raw]
+        : `_ctx`
+      return `${source}.${raw}`
+    }
   }
 
   // fast path if expression is a simple identifier.
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index e1f2c8ae..d9fffd2f 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -464,14 +464,20 @@ describe('SFC compile <script setup>', () => {
         compile(`<script setup>
         export const a = 1
         </script>`)
-      ).toThrow(`cannot contain non-type named exports`)
+      ).toThrow(`cannot contain non-type named or * exports`)
+
+      expect(() =>
+        compile(`<script setup>
+        export * from './foo'
+        </script>`)
+      ).toThrow(`cannot contain non-type named or * exports`)
 
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
         </script>`)
-      ).toThrow(`cannot contain non-type named exports`)
+      ).toThrow(`cannot contain non-type named or * exports`)
     })
 
     test('ref: non-assignment expressions', () => {
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 45cdea72..94eb0e56 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -27,13 +27,28 @@ import {
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
+import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 
 export interface SFCScriptCompileOptions {
   /**
    * https://babeljs.io/docs/en/babel-parser#plugins
    */
   babelParserPlugins?: ParserPlugin[]
+  /**
+   * Enable ref: label sugar
+   * https://github.com/vuejs/rfcs/pull/228
+   * @default true
+   */
   refSugar?: boolean
+  /**
+   * Compile the template and inline the resulting render function
+   * directly inside setup().
+   * - Only affects <script setup>
+   * - This should only be used in production because it prevents the template
+   * from being hot-reloaded separately from component state.
+   */
+  inlineTemplate?: boolean
+  templateOptions?: SFCTemplateCompileOptions
 }
 
 const hasWarned: Record<string, boolean> = {}
@@ -356,10 +371,10 @@ export function compileScript(
   const setupValue = scriptSetup.setup
   const hasExplicitSignature = typeof setupValue === 'string'
 
-  let propsVar: string | undefined
-  let emitVar: string | undefined
-  let slotsVar: string | undefined
-  let attrsVar: string | undefined
+  let propsIdentifier: string | undefined
+  let emitIdentifier: string | undefined
+  let slotsIdentifier: string | undefined
+  let attrsIdentifier: string | undefined
 
   let propsType = `{}`
   let emitType = `(e: string, ...args: any[]) => void`
@@ -390,16 +405,20 @@ export function compileScript(
       )
     }
 
+    // parse the signature to extract the identifiers users are assigning to
+    // the arguments. props identifier is always needed for inline mode
+    // template compilation
+    const params = ((signatureAST as ExpressionStatement)
+      .expression as ArrowFunctionExpression).params
+    if (params[0] && params[0].type === 'Identifier') {
+      propsASTNode = params[0]
+      propsIdentifier = propsASTNode.name
+    }
+
     if (isTS) {
       // <script setup="xxx" lang="ts">
-      // parse the signature to extract the props/emit variables the user wants
-      // we need them to find corresponding type declarations.
-      const params = ((signatureAST as ExpressionStatement)
-        .expression as ArrowFunctionExpression).params
-      if (params[0] && params[0].type === 'Identifier') {
-        propsASTNode = params[0]
-        propsVar = propsASTNode.name
-      }
+      // additional identifiers are needed for TS in order to match declared
+      // types
       if (params[1] && params[1].type === 'ObjectPattern') {
         setupCtxASTNode = params[1]
         for (const p of params[1].properties) {
@@ -409,11 +428,11 @@ export function compileScript(
             p.value.type === 'Identifier'
           ) {
             if (p.key.name === 'emit') {
-              emitVar = p.value.name
+              emitIdentifier = p.value.name
             } else if (p.key.name === 'slots') {
-              slotsVar = p.value.name
+              slotsIdentifier = p.value.name
             } else if (p.key.name === 'attrs') {
-              attrsVar = p.value.name
+              attrsIdentifier = p.value.name
             }
           }
         }
@@ -560,16 +579,16 @@ export function compileScript(
               typeNode.end! + startOffset
             )
             if (typeNode.type === 'TSTypeLiteral') {
-              if (id.name === propsVar) {
+              if (id.name === propsIdentifier) {
                 propsType = typeString
                 extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
-              } else if (id.name === slotsVar) {
+              } else if (id.name === slotsIdentifier) {
                 slotsType = typeString
-              } else if (id.name === attrsVar) {
+              } else if (id.name === attrsIdentifier) {
                 attrsType = typeString
               }
             } else if (
-              id.name === emitVar &&
+              id.name === emitIdentifier &&
               typeNode.type === 'TSFunctionType'
             ) {
               emitType = typeString
@@ -583,10 +602,10 @@ export function compileScript(
     if (
       node.type === 'TSDeclareFunction' &&
       node.id &&
-      node.id.name === emitVar
+      node.id.name === emitIdentifier
     ) {
       const index = node.id.start! + startOffset
-      s.overwrite(index, index + emitVar.length, '__emit__')
+      s.overwrite(index, index + emitIdentifier.length, '__emit__')
       emitType = `typeof __emit__`
       extractRuntimeEmits(node, typeDeclaredEmits)
     }
@@ -681,7 +700,7 @@ export function compileScript(
   }
 
   // 7. finalize setup argument signature.
-  let args = ``
+  let args = options.inlineTemplate ? `$props` : ``
   if (isTS) {
     if (slotsType === 'Slots') {
       helperImports.add('Slots')
@@ -704,8 +723,8 @@ export function compileScript(
       }
       args = ss.toString()
     }
-  } else {
-    args = hasExplicitSignature ? (setupValue as string) : ``
+  } else if (hasExplicitSignature) {
+    args = setupValue as string
   }
 
   // 8. wrap setup code with function.
@@ -716,11 +735,9 @@ export function compileScript(
     `\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
   )
 
-  // generate return statement
   const exposedBindings = { ...userImports, ...setupBindings }
-  let returned = `{ ${Object.keys(exposedBindings).join(', ')} }`
 
-  // inject `useCssVars` calls
+  // 9. inject `useCssVars` calls
   if (hasCssVars) {
     helperImports.add(`useCssVars`)
     for (const style of styles) {
@@ -734,9 +751,58 @@ export function compileScript(
     }
   }
 
+  // 10. analyze binding metadata
+  if (scriptAst) {
+    Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
+  }
+  Object.keys(exposedBindings).forEach(key => {
+    bindingMetadata[key] = 'setup'
+  })
+  Object.keys(typeDeclaredProps).forEach(key => {
+    bindingMetadata[key] = 'props'
+  })
+  Object.assign(bindingMetadata, analyzeScriptBindings(scriptSetupAst))
+
+  // 11. generate return statement
+  let returned
+  if (options.inlineTemplate) {
+    if (sfc.template) {
+      // inline render function mode - we are going to compile the template and
+      // inline it right here
+      const { code, preamble, tips, errors } = compileTemplate({
+        ...options.templateOptions,
+        filename,
+        source: sfc.template.content,
+        compilerOptions: {
+          inline: true,
+          inlinePropsIdentifier: propsIdentifier,
+          bindingMetadata
+        }
+        // TODO source map
+      })
+      if (tips.length) {
+        tips.forEach(warnOnce)
+      }
+      const err = errors[0]
+      if (typeof err === 'string') {
+        throw new Error(err)
+      } else if (err) {
+        throw err
+      }
+      if (preamble) {
+        s.prepend(preamble)
+      }
+      returned = code
+    } else {
+      returned = `() => {}`
+    }
+  } else {
+    // return bindings from setup
+    returned = `{ ${Object.keys(exposedBindings).join(', ')} }`
+  }
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
-  // 9. finalize default export
+  // 12. finalize default export
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
@@ -759,24 +825,12 @@ export function compileScript(
     }
   }
 
-  // 10. finalize Vue helper imports
+  // 13. finalize Vue helper imports
   const helpers = [...helperImports].filter(i => userImports[i] !== 'vue')
   if (helpers.length) {
     s.prepend(`import { ${helpers.join(', ')} } from 'vue'\n`)
   }
 
-  // 11. expose bindings for template compiler optimization
-  if (scriptAst) {
-    Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
-  }
-  Object.keys(exposedBindings).forEach(key => {
-    bindingMetadata[key] = 'setup'
-  })
-  Object.keys(typeDeclaredProps).forEach(key => {
-    bindingMetadata[key] = 'props'
-  })
-  Object.assign(bindingMetadata, analyzeScriptBindings(scriptSetupAst))
-
   s.trim()
   return {
     ...scriptSetup,
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index 5d72cf75..85c26eae 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -30,6 +30,7 @@ export interface TemplateCompiler {
 
 export interface SFCTemplateCompileResults {
   code: string
+  preamble?: string
   source: string
   tips: string[]
   errors: (string | CompilerError)[]
@@ -168,7 +169,7 @@ function doCompileTemplate({
     nodeTransforms = [transformAssetUrl, transformSrcset]
   }
 
-  let { code, map } = compiler.compile(source, {
+  let { code, preamble, map } = compiler.compile(source, {
     mode: 'module',
     prefixIdentifiers: true,
     hoistStatic: true,
@@ -192,7 +193,7 @@ function doCompileTemplate({
     }
   }
 
-  return { code, source, errors, tips: [], map }
+  return { code, preamble, source, errors, tips: [], map }
 }
 
 function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {

From 3019508e75334e4f1a37951201464d50b89b1ca3 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 10 Nov 2020 17:31:09 -0500
Subject: [PATCH 10/27] wip: fix binding type fallback

---
 packages/compiler-core/src/codegen.ts              |  2 +-
 .../src/transforms/transformExpression.ts          | 14 ++++++--------
 packages/compiler-sfc/src/compileScript.ts         |  1 +
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 0ab78993..299106fd 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -227,7 +227,7 @@ export function generate(
       if (genScopeId) {
         push(`${PURE_ANNOTATION}_withId(`)
       }
-      push(`() => {`)
+      push(`(_ctx, _cache${optimizeSources}) => {`)
     } else {
       if (genScopeId) {
         push(`const render = ${PURE_ANNOTATION}_withId(`)
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 0f10d88f..7552177c 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -100,19 +100,17 @@ export function processExpression(
 
   const { inline, inlinePropsIdentifier, bindingMetadata } = context
   const prefix = (raw: string) => {
+    const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
     if (inline) {
-      // setup inline mode, it's either props or setup
-      if (bindingMetadata[raw] !== 'setup') {
+      // setup inline mode
+      if (type === 'props') {
         return `${inlinePropsIdentifier}.${raw}`
-      } else {
+      } else if (type === 'setup') {
         return `${context.helperString(UNREF)}(${raw})`
       }
-    } else {
-      const source = hasOwn(bindingMetadata, raw)
-        ? `$` + bindingMetadata[raw]
-        : `_ctx`
-      return `${source}.${raw}`
     }
+    // fallback to normal
+    return `${type ? `$${type}` : `_ctx`}.${raw}`
   }
 
   // fast path if expression is a simple identifier.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 94eb0e56..ab5aa43a 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -685,6 +685,7 @@ export function compileScript(
   if (script) {
     if (startOffset < scriptStartOffset!) {
       // <script setup> before <script>
+      s.remove(0, startOffset)
       s.remove(endOffset, scriptStartOffset!)
       s.remove(scriptEndOffset!, source.length)
     } else {

From 4977526a2be8c39f7be1c236a35511e3f098db4a Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 10 Nov 2020 17:36:06 -0500
Subject: [PATCH 11/27] wip: correctly resolve component in setup inline mode

---
 packages/compiler-core/src/transforms/transformElement.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 53b591fc..f0e8d7cb 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -257,10 +257,12 @@ export function resolveComponentType(
       bindings[(tagFromSetup = camelize(tag))] === 'setup' ||
       bindings[(tagFromSetup = capitalize(camelize(tag)))] === 'setup')
   ) {
-    return `$setup[${JSON.stringify(tagFromSetup)}]`
+    return context.inline
+      ? tagFromSetup
+      : `$setup[${JSON.stringify(tagFromSetup)}]`
   }
 
-  // 4. user component (resolve)
+  // 5. user component (resolve)
   context.helper(RESOLVE_COMPONENT)
   context.components.add(tag)
   return toValidAssetId(tag, `component`)

From 4e8ef552371997cd0545c782b42a03fac263c3b6 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 10 Nov 2020 18:06:38 -0500
Subject: [PATCH 12/27] wip: optimize binding access to known imported
 components

---
 packages/compiler-core/src/options.ts         |  2 +-
 .../src/transforms/transformElement.ts        | 39 +++++++++++++------
 .../src/transforms/transformExpression.ts     |  2 +
 packages/compiler-sfc/src/compileScript.ts    | 27 +++++++++----
 4 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index b0af0cef..5f0f06db 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -62,7 +62,7 @@ export type HoistTransform = (
 ) => void
 
 export interface BindingMetadata {
-  [key: string]: 'data' | 'props' | 'setup' | 'options'
+  [key: string]: 'data' | 'props' | 'setup' | 'options' | 'component-import'
 }
 
 interface SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index f0e8d7cb..1025e602 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -40,7 +40,8 @@ import {
   TO_HANDLERS,
   TELEPORT,
   KEEP_ALIVE,
-  SUSPENSE
+  SUSPENSE,
+  UNREF
 } from '../runtimeHelpers'
 import {
   getInnerRange,
@@ -53,6 +54,7 @@ import {
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getStaticType } from './hoistStatic'
+import { BindingMetadata } from '../options'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
 // import, which should be used instead of a resolveDirective call.
@@ -249,20 +251,33 @@ export function resolveComponentType(
   }
 
   // 3. user component (from setup bindings)
-  let tagFromSetup = tag
   const bindings = context.bindingMetadata
-  if (
-    bindings !== EMPTY_OBJ &&
-    (bindings[tagFromSetup] === 'setup' ||
-      bindings[(tagFromSetup = camelize(tag))] === 'setup' ||
-      bindings[(tagFromSetup = capitalize(camelize(tag)))] === 'setup')
-  ) {
-    return context.inline
-      ? tagFromSetup
-      : `$setup[${JSON.stringify(tagFromSetup)}]`
+  if (bindings !== EMPTY_OBJ) {
+    const checkType = (type: BindingMetadata[string]) => {
+      let resolvedTag = tag
+      if (
+        bindings[resolvedTag] === type ||
+        bindings[(resolvedTag = camelize(tag))] === type ||
+        bindings[(resolvedTag = capitalize(camelize(tag)))] === type
+      ) {
+        return resolvedTag
+      }
+    }
+    const tagFromSetup = checkType('setup')
+    if (tagFromSetup) {
+      return context.inline
+        ? // setup scope bindings may be refs so they need to be unrefed
+          `${context.helperString(UNREF)}(${tagFromSetup})`
+        : `$setup[${JSON.stringify(tagFromSetup)}]`
+    }
+    const tagFromImport = checkType('component-import')
+    if (tagFromImport) {
+      // imports can be used as-is
+      return tagFromImport
+    }
   }
 
-  // 5. user component (resolve)
+  // 4. user component (resolve)
   context.helper(RESOLVE_COMPONENT)
   context.components.add(tag)
   return toValidAssetId(tag, `component`)
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 7552177c..52a35538 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -107,6 +107,8 @@ export function processExpression(
         return `${inlinePropsIdentifier}.${raw}`
       } else if (type === 'setup') {
         return `${context.helperString(UNREF)}(${raw})`
+      } else if (type === 'component-import') {
+        return raw
       }
     }
     // fallback to normal
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index ab5aa43a..08583941 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -736,7 +736,7 @@ export function compileScript(
     `\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
   )
 
-  const exposedBindings = { ...userImports, ...setupBindings }
+  const allBindings = { ...userImports, ...setupBindings }
 
   // 9. inject `useCssVars` calls
   if (hasCssVars) {
@@ -746,7 +746,7 @@ export function compileScript(
       if (typeof vars === 'string') {
         s.prependRight(
           endOffset,
-          `\n${genCssVarsCode(vars, !!style.scoped, exposedBindings)}`
+          `\n${genCssVarsCode(vars, !!style.scoped, allBindings)}`
         )
       }
     }
@@ -756,12 +756,23 @@ export function compileScript(
   if (scriptAst) {
     Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
   }
-  Object.keys(exposedBindings).forEach(key => {
-    bindingMetadata[key] = 'setup'
-  })
-  Object.keys(typeDeclaredProps).forEach(key => {
+  if (options.inlineTemplate) {
+    for (const [key, value] of Object.entries(userImports)) {
+      bindingMetadata[key] = value.endsWith('.vue')
+        ? 'component-import'
+        : 'setup'
+    }
+    for (const key in setupBindings) {
+      bindingMetadata[key] = 'setup'
+    }
+  } else {
+    for (const key in allBindings) {
+      bindingMetadata[key] = 'setup'
+    }
+  }
+  for (const key in typeDeclaredProps) {
     bindingMetadata[key] = 'props'
-  })
+  }
   Object.assign(bindingMetadata, analyzeScriptBindings(scriptSetupAst))
 
   // 11. generate return statement
@@ -799,7 +810,7 @@ export function compileScript(
     }
   } else {
     // return bindings from setup
-    returned = `{ ${Object.keys(exposedBindings).join(', ')} }`
+    returned = `{ ${Object.keys(allBindings).join(', ')} }`
   }
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 

From 2a4fc32d1561125582a7fe3b9bf2815d6974c814 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 11 Nov 2020 10:36:59 -0500
Subject: [PATCH 13/27] wip: remove unnecessary inlinePropsIdentifier option

---
 packages/compiler-core/src/codegen.ts         |  5 +---
 packages/compiler-core/src/options.ts         |  4 ----
 packages/compiler-core/src/transform.ts       |  2 --
 .../src/transforms/transformExpression.ts     |  6 ++---
 packages/compiler-sfc/src/compileScript.ts    | 23 ++++++++-----------
 5 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 299106fd..9e58d751 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -66,10 +66,7 @@ export interface CodegenResult {
 }
 
 export interface CodegenContext
-  extends Omit<
-      Required<CodegenOptions>,
-      'bindingMetadata' | 'inline' | 'inlinePropsIdentifier'
-    > {
+  extends Omit<Required<CodegenOptions>, 'bindingMetadata' | 'inline'> {
   source: string
   code: string
   line: number
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 5f0f06db..37641a45 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -91,10 +91,6 @@ interface SharedTransformCodegenOptions {
    * This allows the function to directly access setup() local bindings.
    */
   inline?: boolean
-  /**
-   * Identifier for props in setup() inline mode.
-   */
-  inlinePropsIdentifier?: string
 }
 
 export interface TransformOptions extends SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index aab29d00..c3a37c9f 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -125,7 +125,6 @@ export function createTransformContext(
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
     inline = false,
-    inlinePropsIdentifier = `$props`,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {
@@ -145,7 +144,6 @@ export function createTransformContext(
     ssrCssVars,
     bindingMetadata,
     inline,
-    inlinePropsIdentifier,
     onError,
 
     // state
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 52a35538..924d217a 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -98,14 +98,12 @@ export function processExpression(
     return node
   }
 
-  const { inline, inlinePropsIdentifier, bindingMetadata } = context
+  const { inline, bindingMetadata } = context
   const prefix = (raw: string) => {
     const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
     if (inline) {
       // setup inline mode
-      if (type === 'props') {
-        return `${inlinePropsIdentifier}.${raw}`
-      } else if (type === 'setup') {
+      if (type === 'setup') {
         return `${context.helperString(UNREF)}(${raw})`
       } else if (type === 'component-import') {
         return raw
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 08583941..89781961 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -405,20 +405,16 @@ export function compileScript(
       )
     }
 
-    // parse the signature to extract the identifiers users are assigning to
-    // the arguments. props identifier is always needed for inline mode
-    // template compilation
-    const params = ((signatureAST as ExpressionStatement)
-      .expression as ArrowFunctionExpression).params
-    if (params[0] && params[0].type === 'Identifier') {
-      propsASTNode = params[0]
-      propsIdentifier = propsASTNode.name
-    }
-
     if (isTS) {
       // <script setup="xxx" lang="ts">
-      // additional identifiers are needed for TS in order to match declared
-      // types
+      // parse the signature to extract the identifiers users are assigning to
+      // the arguments. They are needed for matching type delcarations.
+      const params = ((signatureAST as ExpressionStatement)
+        .expression as ArrowFunctionExpression).params
+      if (params[0] && params[0].type === 'Identifier') {
+        propsASTNode = params[0]
+        propsIdentifier = propsASTNode.name
+      }
       if (params[1] && params[1].type === 'ObjectPattern') {
         setupCtxASTNode = params[1]
         for (const p of params[1].properties) {
@@ -701,7 +697,7 @@ export function compileScript(
   }
 
   // 7. finalize setup argument signature.
-  let args = options.inlineTemplate ? `$props` : ``
+  let args = ``
   if (isTS) {
     if (slotsType === 'Slots') {
       helperImports.add('Slots')
@@ -787,7 +783,6 @@ export function compileScript(
         source: sfc.template.content,
         compilerOptions: {
           inline: true,
-          inlinePropsIdentifier: propsIdentifier,
           bindingMetadata
         }
         // TODO source map

From dc098c7f817cd2e6abc30cbcdf5ba2100c719908 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 11 Nov 2020 19:40:27 -0500
Subject: [PATCH 14/27] wip: defineContext

---
 packages/compiler-sfc/src/compileScript.ts    | 318 +++++++++---------
 .../src/helpers/useSetupContext.ts            |  15 +
 packages/runtime-core/src/index.ts            |   2 +
 3 files changed, 171 insertions(+), 164 deletions(-)
 create mode 100644 packages/runtime-core/src/helpers/useSetupContext.ts

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 89781961..ebb60a29 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -10,8 +10,6 @@ import {
   ObjectExpression,
   ArrayPattern,
   Identifier,
-  ExpressionStatement,
-  ArrowFunctionExpression,
   ExportSpecifier,
   Function as FunctionNode,
   TSType,
@@ -29,6 +27,8 @@ import { RawSourceMap } from 'source-map'
 import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 
+const CTX_FN_NAME = 'defineContext'
+
 export interface SFCScriptCompileOptions {
   /**
    * https://babeljs.io/docs/en/babel-parser#plugins
@@ -127,13 +127,21 @@ export function compileScript(
   const defaultTempVar = `__default__`
   const bindingMetadata: BindingMetadata = {}
   const helperImports: Set<string> = new Set()
-  const userImports: Record<string, string> = Object.create(null)
+  const userImports: Record<
+    string,
+    {
+      imported: string | null
+      source: string
+    }
+  > = Object.create(null)
   const setupBindings: Record<string, boolean> = Object.create(null)
   const refBindings: Record<string, boolean> = Object.create(null)
   const refIdentifiers: Set<Identifier> = new Set()
   const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
-  let needDefaultExportRefCheck = false
+  let setupContextExp: string | undefined
+  let setupContextArg: Node | undefined
+  let setupContextType: TSTypeLiteral | undefined
   let hasAwait = false
 
   const s = new MagicString(source)
@@ -314,10 +322,16 @@ export function compileScript(
     for (const node of scriptAst) {
       if (node.type === 'ImportDeclaration') {
         // record imports for dedupe
-        for (const {
-          local: { name }
-        } of node.specifiers) {
-          userImports[name] = node.source.value
+        for (const specifier of node.specifiers) {
+          const name = specifier.local.name
+          const imported =
+            specifier.type === 'ImportSpecifier' &&
+            specifier.imported.type === 'Identifier' &&
+            specifier.imported.name
+          userImports[name] = {
+            imported: imported || null,
+            source: node.source.value
+          }
         }
       } else if (node.type === 'ExportDefaultDeclaration') {
         // export default
@@ -367,75 +381,17 @@ export function compileScript(
     }
   }
 
-  // 2. check <script setup="xxx"> function signature
-  const setupValue = scriptSetup.setup
-  const hasExplicitSignature = typeof setupValue === 'string'
-
-  let propsIdentifier: string | undefined
-  let emitIdentifier: string | undefined
-  let slotsIdentifier: string | undefined
-  let attrsIdentifier: string | undefined
-
   let propsType = `{}`
   let emitType = `(e: string, ...args: any[]) => void`
   let slotsType = `Slots`
   let attrsType = `Record<string, any>`
 
-  let propsASTNode
-  let setupCtxASTNode
-
   // props/emits declared via types
   const typeDeclaredProps: Record<string, PropTypeData> = {}
   const typeDeclaredEmits: Set<string> = new Set()
   // record declared types for runtime props type generation
   const declaredTypes: Record<string, string[]> = {}
 
-  // <script setup="xxx">
-  if (hasExplicitSignature) {
-    let signatureAST
-    try {
-      signatureAST = _parse(`(${setupValue})=>{}`, { plugins }).program.body[0]
-    } catch (e) {
-      throw new Error(
-        `[@vue/compiler-sfc] Invalid <script setup> signature: ${setupValue}\n\n${generateCodeFrame(
-          source,
-          startOffset - 1,
-          startOffset
-        )}`
-      )
-    }
-
-    if (isTS) {
-      // <script setup="xxx" lang="ts">
-      // parse the signature to extract the identifiers users are assigning to
-      // the arguments. They are needed for matching type delcarations.
-      const params = ((signatureAST as ExpressionStatement)
-        .expression as ArrowFunctionExpression).params
-      if (params[0] && params[0].type === 'Identifier') {
-        propsASTNode = params[0]
-        propsIdentifier = propsASTNode.name
-      }
-      if (params[1] && params[1].type === 'ObjectPattern') {
-        setupCtxASTNode = params[1]
-        for (const p of params[1].properties) {
-          if (
-            p.type === 'ObjectProperty' &&
-            p.key.type === 'Identifier' &&
-            p.value.type === 'Identifier'
-          ) {
-            if (p.key.name === 'emit') {
-              emitIdentifier = p.value.name
-            } else if (p.key.name === 'slots') {
-              slotsIdentifier = p.value.name
-            } else if (p.key.name === 'attrs') {
-              attrsIdentifier = p.value.name
-            }
-          }
-        }
-      }
-    }
-  }
-
   // 3. parse <script setup> and  walk over top level statements
   const scriptSetupAst = parse(
     scriptSetup.content,
@@ -503,15 +459,35 @@ export function compileScript(
       let prev
       let removed = 0
       for (const specifier of node.specifiers) {
-        if (userImports[specifier.local.name]) {
-          // already imported in <script setup>, dedupe
+        const local = specifier.local.name
+        const imported =
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.type === 'Identifier' &&
+          specifier.imported.name
+        const source = node.source.value
+        const existing = userImports[local]
+        if (source === 'vue' && imported === CTX_FN_NAME) {
           removed++
           s.remove(
             prev ? prev.end! + startOffset : specifier.start! + startOffset,
             specifier.end! + startOffset
           )
+        } else if (existing) {
+          if (existing.source === source && existing.imported === imported) {
+            // already imported in <script setup>, dedupe
+            removed++
+            s.remove(
+              prev ? prev.end! + startOffset : specifier.start! + startOffset,
+              specifier.end! + startOffset
+            )
+          } else {
+            error(`different imports aliased to same local name.`, specifier)
+          }
         } else {
-          userImports[specifier.local.name] = node.source.value
+          userImports[local] = {
+            imported: imported || null,
+            source: node.source.value
+          }
         }
         prev = specifier
       }
@@ -520,37 +496,42 @@ export function compileScript(
       }
     }
 
-    if (
-      (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') ||
-      node.type === 'ExportAllDeclaration'
-    ) {
-      error(
-        `<script setup> cannot contain non-type named or * exports. ` +
-          `If you are using a previous version of <script setup>, please ` +
-          `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
-        node
-      )
-    }
+    if (node.type === 'VariableDeclaration' && !node.declare) {
+      for (const decl of node.declarations) {
+        if (
+          decl.init &&
+          decl.init.type === 'CallExpression' &&
+          decl.init.callee.type === 'Identifier' &&
+          decl.init.callee.name === CTX_FN_NAME
+        ) {
+          if (node.declarations.length === 1) {
+            s.remove(node.start! + startOffset, node.end! + startOffset)
+          } else {
+            s.remove(decl.start! + startOffset, decl.end! + startOffset)
+          }
+          setupContextExp = scriptSetup.content.slice(
+            decl.id.start!,
+            decl.id.end!
+          )
+          setupContextArg = decl.init.arguments[0]
 
-    if (node.type === 'ExportDefaultDeclaration') {
-      if (defaultExport) {
-        // <script> already has export default
-        error(
-          `Default export is already declared in normal <script>.`,
-          node,
-          node.start! + startOffset + `export default`.length
-        )
+          // useSetupContext() has type parameters - infer runtime types from it
+          if (decl.init.typeParameters) {
+            const typeArg = decl.init.typeParameters.params[0]
+            if (typeArg.type === 'TSTypeLiteral') {
+              setupContextType = typeArg
+            } else {
+              error(
+                `type argument passed to ${CTX_FN_NAME}() must be a literal type.`,
+                typeArg
+              )
+            }
+          }
+        }
       }
-      // export default {} inside <script setup>
-      // this should be kept in module scope - move it to the end
-      s.move(start, end, source.length)
-      s.overwrite(start, start + `export default`.length, `const __default__ =`)
-      // save it for analysis when all imports and variable declarations have
-      // been recorded
-      defaultExport = node
-      needDefaultExportRefCheck = true
     }
 
+    // walk decalrations to record declared bindings
     if (
       (node.type === 'VariableDeclaration' ||
         node.type === 'FunctionDeclaration' ||
@@ -563,47 +544,6 @@ export function compileScript(
     // Type declarations
     if (node.type === 'VariableDeclaration' && node.declare) {
       s.remove(start, end)
-      for (const { id } of node.declarations) {
-        if (id.type === 'Identifier') {
-          if (
-            id.typeAnnotation &&
-            id.typeAnnotation.type === 'TSTypeAnnotation'
-          ) {
-            const typeNode = id.typeAnnotation.typeAnnotation
-            const typeString = source.slice(
-              typeNode.start! + startOffset,
-              typeNode.end! + startOffset
-            )
-            if (typeNode.type === 'TSTypeLiteral') {
-              if (id.name === propsIdentifier) {
-                propsType = typeString
-                extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
-              } else if (id.name === slotsIdentifier) {
-                slotsType = typeString
-              } else if (id.name === attrsIdentifier) {
-                attrsType = typeString
-              }
-            } else if (
-              id.name === emitIdentifier &&
-              typeNode.type === 'TSFunctionType'
-            ) {
-              emitType = typeString
-              extractRuntimeEmits(typeNode, typeDeclaredEmits)
-            }
-          }
-        }
-      }
-    }
-
-    if (
-      node.type === 'TSDeclareFunction' &&
-      node.id &&
-      node.id.name === emitIdentifier
-    ) {
-      const index = node.id.start! + startOffset
-      s.overwrite(index, index + emitIdentifier.length, '__emit__')
-      emitType = `typeof __emit__`
-      extractRuntimeEmits(node, typeDeclaredEmits)
     }
 
     // move all type declarations to outer scope
@@ -618,7 +558,7 @@ export function compileScript(
     // walk statements & named exports / variable declarations for top level
     // await
     if (
-      node.type === 'VariableDeclaration' ||
+      (node.type === 'VariableDeclaration' && !node.declare) ||
       node.type.endsWith('Statement')
     ) {
       ;(walk as any)(node, {
@@ -632,6 +572,19 @@ export function compileScript(
         }
       })
     }
+
+    if (
+      (node.type === 'ExportNamedDeclaration' && node.exportKind !== 'type') ||
+      node.type === 'ExportAllDeclaration' ||
+      node.type === 'ExportDefaultDeclaration'
+    ) {
+      error(
+        `<script setup> cannot contain ES module exports. ` +
+          `If you are using a previous version of <script setup>, please ` +
+          `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
+        node
+      )
+    }
   }
 
   // 4. Do a full walk to rewrite identifiers referencing let exports with ref
@@ -660,13 +613,47 @@ export function compileScript(
     }
   }
 
-  // 5. check default export to make sure it doesn't reference setup scope
+  // 5. extract runtime props/emits code from setup context type
+  if (setupContextType) {
+    for (const m of setupContextType.members) {
+      if (m.type === 'TSPropertySignature' && m.key.type === 'Identifier') {
+        const typeNode = m.typeAnnotation!.typeAnnotation
+        const typeString = scriptSetup.content.slice(
+          typeNode.start!,
+          typeNode.end!
+        )
+        if (m.key.name === 'props') {
+          propsType = typeString
+          if (typeNode.type === 'TSTypeLiteral') {
+            extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
+          } else {
+            // TODO be able to trace references
+            error(`props type must be an object literal type`, typeNode)
+          }
+        } else if (m.key.name === 'emit') {
+          emitType = typeString
+          if (typeNode.type === 'TSFunctionType') {
+            extractRuntimeEmits(typeNode, typeDeclaredEmits)
+          } else {
+            // TODO be able to trace references
+            error(`emit type must be a function type`, typeNode)
+          }
+        } else if (m.key.name === 'attrs') {
+          attrsType = typeString
+        } else if (m.key.name === 'slots') {
+          slotsType = typeString
+        }
+      }
+    }
+  }
+
+  // 5. check useSetupContext args to make sure it doesn't reference setup scope
   // variables
-  if (needDefaultExportRefCheck) {
-    walkIdentifiers(defaultExport!, id => {
+  if (setupContextArg) {
+    walkIdentifiers(setupContextArg, id => {
       if (setupBindings[id.name]) {
         error(
-          `\`export default\` in <script setup> cannot reference locally ` +
+          `\`${CTX_FN_NAME}()\` in <script setup> cannot reference locally ` +
             `declared variables because it will be hoisted outside of the ` +
             `setup() function. If your component options requires initialization ` +
             `in the module scope, use a separate normal <script> to export ` +
@@ -697,31 +684,30 @@ export function compileScript(
   }
 
   // 7. finalize setup argument signature.
-  let args = ``
+  let args = setupContextExp ? `__props, ${setupContextExp}` : ``
   if (isTS) {
     if (slotsType === 'Slots') {
       helperImports.add('Slots')
     }
-    const ctxType = `{
+    args += `: {
+  props: ${propsType},
   emit: ${emitType},
   slots: ${slotsType},
   attrs: ${attrsType}
 }`
-    if (hasExplicitSignature) {
-      // inject types to user signature
-      args = setupValue as string
-      const ss = new MagicString(args)
-      if (propsASTNode) {
-        // compensate for () wraper offset
-        ss.appendRight(propsASTNode.end! - 1, `: ${propsType}`)
-      }
-      if (setupCtxASTNode) {
-        ss.appendRight(setupCtxASTNode.end! - 1!, `: ${ctxType}`)
-      }
-      args = ss.toString()
-    }
-  } else if (hasExplicitSignature) {
-    args = setupValue as string
+    // if (hasExplicitSignature) {
+    //   // inject types to user signature
+    //   args = setupValue as string
+    //   const ss = new MagicString(args)
+    //   if (propsASTNode) {
+    //     // compensate for () wraper offset
+    //     ss.appendRight(propsASTNode.end! - 1, `: ${propsType}`)
+    //   }
+    //   if (setupCtxASTNode) {
+    //     ss.appendRight(setupCtxASTNode.end! - 1!, `: ${ctxType}`)
+    //   }
+    //   args = ss.toString()
+    // }
   }
 
   // 8. wrap setup code with function.
@@ -732,7 +718,10 @@ export function compileScript(
     `\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
   )
 
-  const allBindings = { ...userImports, ...setupBindings }
+  const allBindings = { ...setupBindings }
+  for (const key in userImports) {
+    allBindings[key] = true
+  }
 
   // 9. inject `useCssVars` calls
   if (hasCssVars) {
@@ -753,8 +742,8 @@ export function compileScript(
     Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
   }
   if (options.inlineTemplate) {
-    for (const [key, value] of Object.entries(userImports)) {
-      bindingMetadata[key] = value.endsWith('.vue')
+    for (const [key, { source }] of Object.entries(userImports)) {
+      bindingMetadata[key] = source.endsWith('.vue')
         ? 'component-import'
         : 'setup'
     }
@@ -769,7 +758,6 @@ export function compileScript(
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = 'props'
   }
-  Object.assign(bindingMetadata, analyzeScriptBindings(scriptSetupAst))
 
   // 11. generate return statement
   let returned
@@ -833,7 +821,9 @@ export function compileScript(
   }
 
   // 13. finalize Vue helper imports
-  const helpers = [...helperImports].filter(i => userImports[i] !== 'vue')
+  // TODO account for cases where user imports a helper with the same name
+  // from a non-vue source
+  const helpers = [...helperImports].filter(i => !userImports[i])
   if (helpers.length) {
     s.prepend(`import { ${helpers.join(', ')} } from 'vue'\n`)
   }
diff --git a/packages/runtime-core/src/helpers/useSetupContext.ts b/packages/runtime-core/src/helpers/useSetupContext.ts
new file mode 100644
index 00000000..82fea434
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useSetupContext.ts
@@ -0,0 +1,15 @@
+import { EMPTY_OBJ } from '@vue/shared'
+import { Slots } from '../componentSlots'
+
+interface DefaultContext {
+  props: Record<string, unknown>
+  attrs: Record<string, unknown>
+  emit: (...args: any[]) => void
+  slots: Slots
+}
+
+export function useSetupContext<T extends Partial<DefaultContext> = {}>(
+  opts?: any // TODO infer
+): { [K in keyof DefaultContext]: T[K] extends {} ? T[K] : DefaultContext[K] } {
+  return EMPTY_OBJ as any
+}
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b711f889..236a1d6d 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -261,6 +261,8 @@ import {
   setCurrentRenderingInstance
 } from './componentRenderUtils'
 import { isVNode, normalizeVNode } from './vnode'
+import { Slots } from './componentSlots'
+import { EMPTY_OBJ } from '@vue/shared/src'
 
 const _ssrUtils = {
   createComponentInstance,

From 6a9b56ca60f903c4c55d59fafac9d4b6bbe977f5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Nov 2020 14:10:39 -0500
Subject: [PATCH 15/27] wip: defineContext()

---
 packages/compiler-core/src/options.ts         |   2 +-
 .../src/transforms/transformElement.ts        |   4 +-
 .../src/transforms/transformExpression.ts     |   6 +-
 packages/compiler-sfc/src/compileScript.ts    | 276 ++++++++++--------
 packages/runtime-core/src/apiDefineContext.ts |  22 ++
 packages/runtime-core/src/component.ts        |   9 +-
 packages/runtime-core/src/componentOptions.ts |   2 +-
 .../runtime-core/src/componentRenderUtils.ts  |   3 +-
 .../src/helpers/useSetupContext.ts            |  15 -
 packages/runtime-core/src/index.ts            |   3 +-
 10 files changed, 200 insertions(+), 142 deletions(-)
 create mode 100644 packages/runtime-core/src/apiDefineContext.ts
 delete mode 100644 packages/runtime-core/src/helpers/useSetupContext.ts

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 37641a45..05c3d2cd 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -62,7 +62,7 @@ export type HoistTransform = (
 ) => void
 
 export interface BindingMetadata {
-  [key: string]: 'data' | 'props' | 'setup' | 'options' | 'component-import'
+  [key: string]: 'data' | 'props' | 'setup' | 'options' | 'setup-raw'
 }
 
 interface SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 1025e602..937e3a71 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -270,9 +270,9 @@ export function resolveComponentType(
           `${context.helperString(UNREF)}(${tagFromSetup})`
         : `$setup[${JSON.stringify(tagFromSetup)}]`
     }
-    const tagFromImport = checkType('component-import')
+    const tagFromImport = checkType('setup-raw')
     if (tagFromImport) {
-      // imports can be used as-is
+      // raw setup bindings (e.g. imports) can be used as-is
       return tagFromImport
     }
   }
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 924d217a..87c6c65b 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -105,7 +105,11 @@ export function processExpression(
       // setup inline mode
       if (type === 'setup') {
         return `${context.helperString(UNREF)}(${raw})`
-      } else if (type === 'component-import') {
+      } else if (type === 'props') {
+        // use __props which is generated by compileScript so in ts mode
+        // it gets correct type
+        return `__props.${raw}`
+      } else if (type === 'setup-raw') {
         return raw
       }
     }
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index ebb60a29..4306fa37 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -134,13 +134,13 @@ export function compileScript(
       source: string
     }
   > = Object.create(null)
-  const setupBindings: Record<string, boolean> = Object.create(null)
-  const refBindings: Record<string, boolean> = Object.create(null)
+  const setupBindings: Record<string, 'var' | 'const'> = Object.create(null)
+  const refBindings: Record<string, 'var'> = Object.create(null)
   const refIdentifiers: Set<Identifier> = new Set()
   const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
   let setupContextExp: string | undefined
-  let setupContextArg: Node | undefined
+  let setupContextArg: ObjectExpression | undefined
   let setupContextType: TSTypeLiteral | undefined
   let hasAwait = false
 
@@ -222,7 +222,7 @@ export function compileScript(
     if (id.name[0] === '$') {
       error(`ref variable identifiers cannot start with $.`, id)
     }
-    refBindings[id.name] = setupBindings[id.name] = true
+    refBindings[id.name] = setupBindings[id.name] = 'var'
     refIdentifiers.add(id)
   }
 
@@ -513,10 +513,25 @@ export function compileScript(
             decl.id.start!,
             decl.id.end!
           )
-          setupContextArg = decl.init.arguments[0]
+          const optsArg = decl.init.arguments[0]
+          if (optsArg.type === 'ObjectExpression') {
+            setupContextArg = optsArg
+          } else {
+            error(
+              `${CTX_FN_NAME}() argument must be an object literal.`,
+              optsArg
+            )
+          }
 
           // useSetupContext() has type parameters - infer runtime types from it
           if (decl.init.typeParameters) {
+            if (setupContextArg) {
+              error(
+                `${CTX_FN_NAME}() cannot accept both type and non-type arguments ` +
+                  `at the same time. Use one or the other.`,
+                decl.init
+              )
+            }
             const typeArg = decl.init.typeParameters.params[0]
             if (typeArg.type === 'TSTypeLiteral') {
               setupContextType = typeArg
@@ -685,7 +700,7 @@ export function compileScript(
 
   // 7. finalize setup argument signature.
   let args = setupContextExp ? `__props, ${setupContextExp}` : ``
-  if (isTS) {
+  if (setupContextExp && setupContextType) {
     if (slotsType === 'Slots') {
       helperImports.add('Slots')
     }
@@ -695,32 +710,11 @@ export function compileScript(
   slots: ${slotsType},
   attrs: ${attrsType}
 }`
-    // if (hasExplicitSignature) {
-    //   // inject types to user signature
-    //   args = setupValue as string
-    //   const ss = new MagicString(args)
-    //   if (propsASTNode) {
-    //     // compensate for () wraper offset
-    //     ss.appendRight(propsASTNode.end! - 1, `: ${propsType}`)
-    //   }
-    //   if (setupCtxASTNode) {
-    //     ss.appendRight(setupCtxASTNode.end! - 1!, `: ${ctxType}`)
-    //   }
-    //   args = ss.toString()
-    // }
   }
 
-  // 8. wrap setup code with function.
-  // export the content of <script setup> as a named export, `setup`.
-  // this allows `import { setup } from '*.vue'` for testing purposes.
-  s.prependLeft(
-    startOffset,
-    `\nexport ${hasAwait ? `async ` : ``}function setup(${args}) {\n`
-  )
-
   const allBindings = { ...setupBindings }
   for (const key in userImports) {
-    allBindings[key] = true
+    allBindings[key] = 'var'
   }
 
   // 9. inject `useCssVars` calls
@@ -741,23 +735,27 @@ export function compileScript(
   if (scriptAst) {
     Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
   }
+  if (setupContextType) {
+    for (const key in typeDeclaredProps) {
+      bindingMetadata[key] = 'props'
+    }
+  }
+  if (setupContextArg) {
+    Object.assign(bindingMetadata, analyzeBindingsFromOptions(setupContextArg))
+  }
   if (options.inlineTemplate) {
     for (const [key, { source }] of Object.entries(userImports)) {
-      bindingMetadata[key] = source.endsWith('.vue')
-        ? 'component-import'
-        : 'setup'
+      bindingMetadata[key] = source.endsWith('.vue') ? 'setup-raw' : 'setup'
     }
     for (const key in setupBindings) {
-      bindingMetadata[key] = 'setup'
+      bindingMetadata[key] =
+        setupBindings[key] === 'var' ? 'setup' : 'setup-raw'
     }
   } else {
     for (const key in allBindings) {
       bindingMetadata[key] = 'setup'
     }
   }
-  for (const key in typeDeclaredProps) {
-    bindingMetadata[key] = 'props'
-  }
 
   // 11. generate return statement
   let returned
@@ -798,6 +796,16 @@ export function compileScript(
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
   // 12. finalize default export
+  let runtimeOptions = ``
+  if (setupContextArg) {
+    runtimeOptions = `\n  ${scriptSetup.content
+      .slice(setupContextArg.start! + 1, setupContextArg.end! - 1)
+      .trim()},`
+  } else if (setupContextType) {
+    runtimeOptions =
+      genRuntimeProps(typeDeclaredProps) + genRuntimeEmits(typeDeclaredEmits)
+  }
+
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
@@ -805,18 +813,34 @@ export function compileScript(
     // we have to use object spread for types to be merged properly
     // user's TS setting should compile it down to proper targets
     const def = defaultExport ? `\n  ...${defaultTempVar},` : ``
-    const runtimeProps = genRuntimeProps(typeDeclaredProps)
-    const runtimeEmits = genRuntimeEmits(typeDeclaredEmits)
-    s.append(
-      `export default defineComponent({${def}${runtimeProps}${runtimeEmits}\n  setup\n})`
+    // wrap setup code with function.
+    // export the content of <script setup> as a named export, `setup`.
+    // this allows `import { setup } from '*.vue'` for testing purposes.
+    s.prependLeft(
+      startOffset,
+      `\nexport default defineComponent({${def}${runtimeOptions}\n  ${
+        hasAwait ? `async ` : ``
+      }setup(${args}) {\n`
     )
+    s.append(`})`)
   } else {
     if (defaultExport) {
+      // can't rely on spread operator in non ts mode
+      s.prependLeft(
+        startOffset,
+        `\n${hasAwait ? `async ` : ``}function setup(${args}) {\n`
+      )
       s.append(
-        `${defaultTempVar}.setup = setup\nexport default ${defaultTempVar}`
+        `/*#__PURE__*/ Object.assign(${defaultTempVar}, {${runtimeOptions}\n  setup\n})\n` +
+          `export default ${defaultTempVar}`
       )
     } else {
-      s.append(`export default { setup }`)
+      s.prependLeft(
+        startOffset,
+        `\nexport default {${runtimeOptions}\n  ` +
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n`
+      )
+      s.append(`}`)
     }
   }
 
@@ -843,16 +867,25 @@ export function compileScript(
   }
 }
 
-function walkDeclaration(node: Declaration, bindings: Record<string, boolean>) {
+function walkDeclaration(node: Declaration, bindings: Record<string, string>) {
   if (node.type === 'VariableDeclaration') {
+    const isConst = node.kind === 'const'
     // export const foo = ...
-    for (const { id } of node.declarations) {
+    for (const { id, init } of node.declarations) {
       if (id.type === 'Identifier') {
-        bindings[id.name] = true
+        bindings[id.name] =
+          // if a declaration is a const literal, we can mark it so that
+          // the generated render fn code doesn't need to unref() it
+          isConst &&
+          init!.type !== 'Identifier' && // const a = b
+          init!.type !== 'CallExpression' && // const a = ref()
+          init!.type !== 'MemberExpression' // const a = b.c
+            ? 'const'
+            : 'var'
       } else if (id.type === 'ObjectPattern') {
-        walkObjectPattern(id, bindings)
+        walkObjectPattern(id, bindings, isConst)
       } else if (id.type === 'ArrayPattern') {
-        walkArrayPattern(id, bindings)
+        walkArrayPattern(id, bindings, isConst)
       }
     }
   } else if (
@@ -861,13 +894,14 @@ function walkDeclaration(node: Declaration, bindings: Record<string, boolean>) {
   ) {
     // export function foo() {} / export class Foo {}
     // export declarations must be named.
-    bindings[node.id!.name] = true
+    bindings[node.id!.name] = 'const'
   }
 }
 
 function walkObjectPattern(
   node: ObjectPattern,
-  bindings: Record<string, boolean>
+  bindings: Record<string, string>,
+  isConst: boolean
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -875,43 +909,48 @@ function walkObjectPattern(
       if (p.key.type === 'Identifier') {
         if (p.key === p.value) {
           // const { x } = ...
-          bindings[p.key.name] = true
+          bindings[p.key.name] = 'var'
         } else {
-          walkPattern(p.value, bindings)
+          walkPattern(p.value, bindings, isConst)
         }
       }
     } else {
       // ...rest
       // argument can only be identifer when destructuring
-      bindings[(p.argument as Identifier).name] = true
+      bindings[(p.argument as Identifier).name] = isConst ? 'const' : 'var'
     }
   }
 }
 
 function walkArrayPattern(
   node: ArrayPattern,
-  bindings: Record<string, boolean>
+  bindings: Record<string, string>,
+  isConst: boolean
 ) {
   for (const e of node.elements) {
-    e && walkPattern(e, bindings)
+    e && walkPattern(e, bindings, isConst)
   }
 }
 
-function walkPattern(node: Node, bindings: Record<string, boolean>) {
+function walkPattern(
+  node: Node,
+  bindings: Record<string, string>,
+  isConst: boolean
+) {
   if (node.type === 'Identifier') {
-    bindings[node.name] = true
+    bindings[node.name] = 'var'
   } else if (node.type === 'RestElement') {
     // argument can only be identifer when destructuring
-    bindings[(node.argument as Identifier).name] = true
+    bindings[(node.argument as Identifier).name] = isConst ? 'const' : 'var'
   } else if (node.type === 'ObjectPattern') {
-    walkObjectPattern(node, bindings)
+    walkObjectPattern(node, bindings, isConst)
   } else if (node.type === 'ArrayPattern') {
-    walkArrayPattern(node, bindings)
+    walkArrayPattern(node, bindings, isConst)
   } else if (node.type === 'AssignmentPattern') {
     if (node.left.type === 'Identifier') {
-      bindings[node.left.name] = true
+      bindings[node.left.name] = 'var'
     } else {
-      walkPattern(node.left, bindings)
+      walkPattern(node.left, bindings, isConst)
     }
   }
 }
@@ -1273,72 +1312,75 @@ function getObjectOrArrayExpressionKeys(property: ObjectProperty): string[] {
  * compilation process so this should only be used on single `<script>` SFCs.
  */
 function analyzeScriptBindings(ast: Statement[]): BindingMetadata {
-  const bindings: BindingMetadata = {}
-
   for (const node of ast) {
     if (
       node.type === 'ExportDefaultDeclaration' &&
       node.declaration.type === 'ObjectExpression'
     ) {
-      for (const property of node.declaration.properties) {
-        if (
-          property.type === 'ObjectProperty' &&
-          !property.computed &&
-          property.key.type === 'Identifier'
-        ) {
-          // props
-          if (property.key.name === 'props') {
-            // props: ['foo']
-            // props: { foo: ... }
-            for (const key of getObjectOrArrayExpressionKeys(property)) {
-              bindings[key] = 'props'
-            }
-          }
+      return analyzeBindingsFromOptions(node.declaration)
+    }
+  }
+  return {}
+}
 
-          // inject
-          else if (property.key.name === 'inject') {
-            // inject: ['foo']
-            // inject: { foo: {} }
-            for (const key of getObjectOrArrayExpressionKeys(property)) {
-              bindings[key] = 'options'
-            }
-          }
-
-          // computed & methods
-          else if (
-            property.value.type === 'ObjectExpression' &&
-            (property.key.name === 'computed' ||
-              property.key.name === 'methods')
-          ) {
-            // methods: { foo() {} }
-            // computed: { foo() {} }
-            for (const key of getObjectExpressionKeys(property.value)) {
-              bindings[key] = 'options'
-            }
-          }
+function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
+  const bindings: BindingMetadata = {}
+  for (const property of node.properties) {
+    if (
+      property.type === 'ObjectProperty' &&
+      !property.computed &&
+      property.key.type === 'Identifier'
+    ) {
+      // props
+      if (property.key.name === 'props') {
+        // props: ['foo']
+        // props: { foo: ... }
+        for (const key of getObjectOrArrayExpressionKeys(property)) {
+          bindings[key] = 'props'
         }
+      }
 
-        // setup & data
-        else if (
-          property.type === 'ObjectMethod' &&
-          property.key.type === 'Identifier' &&
-          (property.key.name === 'setup' || property.key.name === 'data')
+      // inject
+      else if (property.key.name === 'inject') {
+        // inject: ['foo']
+        // inject: { foo: {} }
+        for (const key of getObjectOrArrayExpressionKeys(property)) {
+          bindings[key] = 'options'
+        }
+      }
+
+      // computed & methods
+      else if (
+        property.value.type === 'ObjectExpression' &&
+        (property.key.name === 'computed' || property.key.name === 'methods')
+      ) {
+        // methods: { foo() {} }
+        // computed: { foo() {} }
+        for (const key of getObjectExpressionKeys(property.value)) {
+          bindings[key] = 'options'
+        }
+      }
+    }
+
+    // setup & data
+    else if (
+      property.type === 'ObjectMethod' &&
+      property.key.type === 'Identifier' &&
+      (property.key.name === 'setup' || property.key.name === 'data')
+    ) {
+      for (const bodyItem of property.body.body) {
+        // setup() {
+        //   return {
+        //     foo: null
+        //   }
+        // }
+        if (
+          bodyItem.type === 'ReturnStatement' &&
+          bodyItem.argument &&
+          bodyItem.argument.type === 'ObjectExpression'
         ) {
-          for (const bodyItem of property.body.body) {
-            // setup() {
-            //   return {
-            //     foo: null
-            //   }
-            // }
-            if (
-              bodyItem.type === 'ReturnStatement' &&
-              bodyItem.argument &&
-              bodyItem.argument.type === 'ObjectExpression'
-            ) {
-              for (const key of getObjectExpressionKeys(bodyItem.argument)) {
-                bindings[key] = property.key.name
-              }
-            }
+          for (const key of getObjectExpressionKeys(bodyItem.argument)) {
+            bindings[key] = property.key.name
           }
         }
       }
diff --git a/packages/runtime-core/src/apiDefineContext.ts b/packages/runtime-core/src/apiDefineContext.ts
new file mode 100644
index 00000000..25d4bd95
--- /dev/null
+++ b/packages/runtime-core/src/apiDefineContext.ts
@@ -0,0 +1,22 @@
+import { Slots } from './componentSlots'
+import { warn } from './warning'
+
+interface DefaultContext {
+  props: Record<string, unknown>
+  attrs: Record<string, unknown>
+  emit: (...args: any[]) => void
+  slots: Slots
+}
+
+export function defineContext<T extends Partial<DefaultContext> = {}>(
+  opts?: any // TODO infer
+): { [K in keyof DefaultContext]: T[K] extends {} ? T[K] : DefaultContext[K] } {
+  if (__DEV__) {
+    warn(
+      `defineContext() is a compiler-hint helper that is only usable inside ` +
+        `<script setup> of a single file component. It will be compiled away ` +
+        `and should not be used in final distributed code.`
+    )
+  }
+  return null as any
+}
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 8f089eb4..8a7bd69f 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -105,7 +105,7 @@ export interface ComponentInternalOptions {
 export interface FunctionalComponent<P = {}, E extends EmitsOptions = {}>
   extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: SetupContext<E>): any
+  (props: P, ctx: SetupContext<E, P>): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
@@ -167,7 +167,8 @@ export const enum LifecycleHooks {
   ERROR_CAPTURED = 'ec'
 }
 
-export interface SetupContext<E = EmitsOptions> {
+export interface SetupContext<E = EmitsOptions, P = Data> {
+  props: P
   attrs: Data
   slots: Slots
   emit: EmitFn<E>
@@ -735,6 +736,9 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
     // We use getters in dev in case libs like test-utils overwrite instance
     // properties (overwrites should not be done in prod)
     return Object.freeze({
+      get props() {
+        return instance.props
+      },
       get attrs() {
         return new Proxy(instance.attrs, attrHandlers)
       },
@@ -747,6 +751,7 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
     })
   } else {
     return {
+      props: instance.props,
       attrs: instance.attrs,
       slots: instance.slots,
       emit: instance.emit
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index ee4062ba..a5541579 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -96,7 +96,7 @@ export interface ComponentOptionsBase<
   setup?: (
     this: void,
     props: Props,
-    ctx: SetupContext<E>
+    ctx: SetupContext<E, Props>
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index 9c5ecaf5..bd852141 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -95,6 +95,7 @@ export function renderComponentRoot(
               props,
               __DEV__
                 ? {
+                    props,
                     get attrs() {
                       markAttrsAccessed()
                       return attrs
@@ -102,7 +103,7 @@ export function renderComponentRoot(
                     slots,
                     emit
                   }
-                : { attrs, slots, emit }
+                : { props, attrs, slots, emit }
             )
           : render(props, null as any /* we know it doesn't need it */)
       )
diff --git a/packages/runtime-core/src/helpers/useSetupContext.ts b/packages/runtime-core/src/helpers/useSetupContext.ts
deleted file mode 100644
index 82fea434..00000000
--- a/packages/runtime-core/src/helpers/useSetupContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { EMPTY_OBJ } from '@vue/shared'
-import { Slots } from '../componentSlots'
-
-interface DefaultContext {
-  props: Record<string, unknown>
-  attrs: Record<string, unknown>
-  emit: (...args: any[]) => void
-  slots: Slots
-}
-
-export function useSetupContext<T extends Partial<DefaultContext> = {}>(
-  opts?: any // TODO infer
-): { [K in keyof DefaultContext]: T[K] extends {} ? T[K] : DefaultContext[K] } {
-  return EMPTY_OBJ as any
-}
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 236a1d6d..0c4879e1 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -43,6 +43,7 @@ export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
+export { defineContext } from './apiDefineContext'
 
 // Advanced API ----------------------------------------------------------------
 
@@ -261,8 +262,6 @@ import {
   setCurrentRenderingInstance
 } from './componentRenderUtils'
 import { isVNode, normalizeVNode } from './vnode'
-import { Slots } from './componentSlots'
-import { EMPTY_OBJ } from '@vue/shared/src'
 
 const _ssrUtils = {
   createComponentInstance,

From 128621d6a056d4f73e8fc642c5571da4311742b6 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Nov 2020 16:11:14 -0500
Subject: [PATCH 16/27] wip: further optimize bindings

---
 packages/compiler-core/src/options.ts         |  10 +-
 .../src/transforms/hoistStatic.ts             |  10 +-
 .../src/transforms/transformElement.ts        |  14 +--
 .../src/transforms/transformExpression.ts     |  17 ++-
 packages/compiler-core/src/transforms/vOn.ts  |  13 ++-
 packages/compiler-sfc/src/compileScript.ts    | 102 ++++++++++++------
 packages/compiler-sfc/src/genCssVars.ts       |   2 +-
 7 files changed, 110 insertions(+), 58 deletions(-)

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 05c3d2cd..2a6b79c1 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -61,8 +61,16 @@ export type HoistTransform = (
   parent: ParentNode
 ) => void
 
+export const enum BindingTypes {
+  DATA = 'data',
+  PROPS = 'props',
+  SETUP = 'setup',
+  CONST = 'const',
+  OPTIONS = 'options'
+}
+
 export interface BindingMetadata {
-  [key: string]: 'data' | 'props' | 'setup' | 'options' | 'setup-raw'
+  [key: string]: BindingTypes
 }
 
 interface SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 240f9bac..a4131c6d 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -207,11 +207,11 @@ export function getStaticType(
     case NodeTypes.TEXT_CALL:
       return getStaticType(node.content, resultCache)
     case NodeTypes.SIMPLE_EXPRESSION:
-      return node.isConstant
-        ? node.isRuntimeConstant
-          ? StaticType.HAS_RUNTIME_CONSTANT
-          : StaticType.FULL_STATIC
-        : StaticType.NOT_STATIC
+      return node.isRuntimeConstant
+        ? StaticType.HAS_RUNTIME_CONSTANT
+        : node.isConstant
+          ? StaticType.FULL_STATIC
+          : StaticType.NOT_STATIC
     case NodeTypes.COMPOUND_EXPRESSION:
       let returnType = StaticType.FULL_STATIC
       for (let i = 0; i < node.children.length; i++) {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 937e3a71..f1e0fd2b 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -54,7 +54,7 @@ import {
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getStaticType } from './hoistStatic'
-import { BindingMetadata } from '../options'
+import { BindingTypes } from '../options'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
 // import, which should be used instead of a resolveDirective call.
@@ -253,7 +253,7 @@ export function resolveComponentType(
   // 3. user component (from setup bindings)
   const bindings = context.bindingMetadata
   if (bindings !== EMPTY_OBJ) {
-    const checkType = (type: BindingMetadata[string]) => {
+    const checkType = (type: BindingTypes) => {
       let resolvedTag = tag
       if (
         bindings[resolvedTag] === type ||
@@ -263,17 +263,17 @@ export function resolveComponentType(
         return resolvedTag
       }
     }
-    const tagFromSetup = checkType('setup')
+    const tagFromSetup = checkType(BindingTypes.SETUP)
     if (tagFromSetup) {
       return context.inline
         ? // setup scope bindings may be refs so they need to be unrefed
           `${context.helperString(UNREF)}(${tagFromSetup})`
         : `$setup[${JSON.stringify(tagFromSetup)}]`
     }
-    const tagFromImport = checkType('setup-raw')
-    if (tagFromImport) {
-      // raw setup bindings (e.g. imports) can be used as-is
-      return tagFromImport
+    const tagFromConst = checkType(BindingTypes.CONST)
+    if (tagFromConst) {
+      // constant setup bindings (e.g. imports) can be used as-is
+      return tagFromConst
     }
   }
 
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 87c6c65b..57039c05 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -29,6 +29,7 @@ import { validateBrowserExpression } from '../validateExpression'
 import { parse } from '@babel/parser'
 import { walk } from 'estree-walker'
 import { UNREF } from '../runtimeHelpers'
+import { BindingTypes } from '../options'
 
 const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this')
 
@@ -99,18 +100,26 @@ export function processExpression(
   }
 
   const { inline, bindingMetadata } = context
+
+  // const bindings exposed from setup - we know they never change
+  if (inline && bindingMetadata[node.content] === BindingTypes.CONST) {
+    node.isRuntimeConstant = true
+    return node
+  }
+
   const prefix = (raw: string) => {
     const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
+    if (type === BindingTypes.CONST) {
+      return raw
+    }
     if (inline) {
       // setup inline mode
-      if (type === 'setup') {
+      if (type === BindingTypes.SETUP) {
         return `${context.helperString(UNREF)}(${raw})`
-      } else if (type === 'props') {
+      } else if (type === BindingTypes.PROPS) {
         // use __props which is generated by compileScript so in ts mode
         // it gets correct type
         return `__props.${raw}`
-      } else if (type === 'setup-raw') {
-        return raw
       }
     }
     // fallback to normal
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 441e6fd1..546f669e 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -70,7 +70,7 @@ export const transformOn: DirectiveTransform = (
   if (exp && !exp.content.trim()) {
     exp = undefined
   }
-  let isCacheable: boolean = context.cacheHandlers && !exp
+  let shouldCache: boolean = context.cacheHandlers && !exp
   if (exp) {
     const isMemberExp = isMemberExpression(exp.content)
     const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content))
@@ -83,8 +83,11 @@ export const transformOn: DirectiveTransform = (
       isInlineStatement && context.removeIdentifiers(`$event`)
       // with scope analysis, the function is hoistable if it has no reference
       // to scope variables.
-      isCacheable =
+      shouldCache =
         context.cacheHandlers &&
+        // runtime constants don't need to be cached
+        // (this is analyzed by compileScript in SFC <script setup>)
+        !(exp.type === NodeTypes.SIMPLE_EXPRESSION && exp.isRuntimeConstant) &&
         // #1541 bail if this is a member exp handler passed to a component -
         // we need to use the original function to preserve arity,
         // e.g. <transition> relies on checking cb.length to determine
@@ -98,7 +101,7 @@ export const transformOn: DirectiveTransform = (
       // to a function, turn it into invocation (and wrap in an arrow function
       // below) so that it always accesses the latest value when called - thus
       // avoiding the need to be patched.
-      if (isCacheable && isMemberExp) {
+      if (shouldCache && isMemberExp) {
         if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
           exp.content += `(...args)`
         } else {
@@ -116,7 +119,7 @@ export const transformOn: DirectiveTransform = (
       )
     }
 
-    if (isInlineStatement || (isCacheable && isMemberExp)) {
+    if (isInlineStatement || (shouldCache && isMemberExp)) {
       // wrap inline statement in a function expression
       exp = createCompoundExpression([
         `${isInlineStatement ? `$event` : `(...args)`} => ${
@@ -142,7 +145,7 @@ export const transformOn: DirectiveTransform = (
     ret = augmentor(ret)
   }
 
-  if (isCacheable) {
+  if (shouldCache) {
     // cache handlers so that it's always the same handler being passed down.
     // this avoids unnecessary re-renders when users use inline handlers on
     // components.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 4306fa37..ea5bf95f 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -26,6 +26,7 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+import { BindingTypes } from 'packages/compiler-core/src/options'
 
 const CTX_FN_NAME = 'defineContext'
 
@@ -134,8 +135,11 @@ export function compileScript(
       source: string
     }
   > = Object.create(null)
-  const setupBindings: Record<string, 'var' | 'const'> = Object.create(null)
-  const refBindings: Record<string, 'var'> = Object.create(null)
+  const setupBindings: Record<
+    string,
+    BindingTypes.SETUP | BindingTypes.CONST
+  > = Object.create(null)
+  const refBindings: Record<string, BindingTypes.SETUP> = Object.create(null)
   const refIdentifiers: Set<Identifier> = new Set()
   const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
@@ -222,7 +226,7 @@ export function compileScript(
     if (id.name[0] === '$') {
       error(`ref variable identifiers cannot start with $.`, id)
     }
-    refBindings[id.name] = setupBindings[id.name] = 'var'
+    refBindings[id.name] = setupBindings[id.name] = BindingTypes.SETUP
     refIdentifiers.add(id)
   }
 
@@ -712,9 +716,9 @@ export function compileScript(
 }`
   }
 
-  const allBindings = { ...setupBindings }
+  const allBindings: Record<string, any> = { ...setupBindings }
   for (const key in userImports) {
-    allBindings[key] = 'var'
+    allBindings[key] = true
   }
 
   // 9. inject `useCssVars` calls
@@ -737,7 +741,7 @@ export function compileScript(
   }
   if (setupContextType) {
     for (const key in typeDeclaredProps) {
-      bindingMetadata[key] = 'props'
+      bindingMetadata[key] = BindingTypes.PROPS
     }
   }
   if (setupContextArg) {
@@ -745,15 +749,16 @@ export function compileScript(
   }
   if (options.inlineTemplate) {
     for (const [key, { source }] of Object.entries(userImports)) {
-      bindingMetadata[key] = source.endsWith('.vue') ? 'setup-raw' : 'setup'
+      bindingMetadata[key] = source.endsWith('.vue')
+        ? BindingTypes.CONST
+        : BindingTypes.SETUP
     }
     for (const key in setupBindings) {
-      bindingMetadata[key] =
-        setupBindings[key] === 'var' ? 'setup' : 'setup-raw'
+      bindingMetadata[key] = setupBindings[key]
     }
   } else {
     for (const key in allBindings) {
-      bindingMetadata[key] = 'setup'
+      bindingMetadata[key] = BindingTypes.SETUP
     }
   }
 
@@ -867,25 +872,36 @@ export function compileScript(
   }
 }
 
-function walkDeclaration(node: Declaration, bindings: Record<string, string>) {
+function walkDeclaration(
+  node: Declaration,
+  bindings: Record<string, BindingTypes>
+) {
   if (node.type === 'VariableDeclaration') {
     const isConst = node.kind === 'const'
     // export const foo = ...
     for (const { id, init } of node.declarations) {
+      const isContextCall = !!(
+        isConst &&
+        init &&
+        init.type === 'CallExpression' &&
+        init.callee.type === 'Identifier' &&
+        init.callee.name === CTX_FN_NAME
+      )
       if (id.type === 'Identifier') {
         bindings[id.name] =
           // if a declaration is a const literal, we can mark it so that
           // the generated render fn code doesn't need to unref() it
-          isConst &&
+          isContextCall ||
+          (isConst &&
           init!.type !== 'Identifier' && // const a = b
           init!.type !== 'CallExpression' && // const a = ref()
-          init!.type !== 'MemberExpression' // const a = b.c
-            ? 'const'
-            : 'var'
+            init!.type !== 'MemberExpression') // const a = b.c
+            ? BindingTypes.CONST
+            : BindingTypes.SETUP
       } else if (id.type === 'ObjectPattern') {
-        walkObjectPattern(id, bindings, isConst)
+        walkObjectPattern(id, bindings, isConst, isContextCall)
       } else if (id.type === 'ArrayPattern') {
-        walkArrayPattern(id, bindings, isConst)
+        walkArrayPattern(id, bindings, isConst, isContextCall)
       }
     }
   } else if (
@@ -894,14 +910,15 @@ function walkDeclaration(node: Declaration, bindings: Record<string, string>) {
   ) {
     // export function foo() {} / export class Foo {}
     // export declarations must be named.
-    bindings[node.id!.name] = 'const'
+    bindings[node.id!.name] = BindingTypes.CONST
   }
 }
 
 function walkObjectPattern(
   node: ObjectPattern,
-  bindings: Record<string, string>,
-  isConst: boolean
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isContextCall = false
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -909,46 +926,58 @@ function walkObjectPattern(
       if (p.key.type === 'Identifier') {
         if (p.key === p.value) {
           // const { x } = ...
-          bindings[p.key.name] = 'var'
+          bindings[p.key.name] = isContextCall
+            ? BindingTypes.CONST
+            : BindingTypes.SETUP
         } else {
-          walkPattern(p.value, bindings, isConst)
+          walkPattern(p.value, bindings, isConst, isContextCall)
         }
       }
     } else {
       // ...rest
       // argument can only be identifer when destructuring
-      bindings[(p.argument as Identifier).name] = isConst ? 'const' : 'var'
+      bindings[(p.argument as Identifier).name] = isConst
+        ? BindingTypes.CONST
+        : BindingTypes.SETUP
     }
   }
 }
 
 function walkArrayPattern(
   node: ArrayPattern,
-  bindings: Record<string, string>,
-  isConst: boolean
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isContextCall = false
 ) {
   for (const e of node.elements) {
-    e && walkPattern(e, bindings, isConst)
+    e && walkPattern(e, bindings, isConst, isContextCall)
   }
 }
 
 function walkPattern(
   node: Node,
-  bindings: Record<string, string>,
-  isConst: boolean
+  bindings: Record<string, BindingTypes>,
+  isConst: boolean,
+  isContextCall = false
 ) {
   if (node.type === 'Identifier') {
-    bindings[node.name] = 'var'
+    bindings[node.name] = isContextCall
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
   } else if (node.type === 'RestElement') {
     // argument can only be identifer when destructuring
-    bindings[(node.argument as Identifier).name] = isConst ? 'const' : 'var'
+    bindings[(node.argument as Identifier).name] = isConst
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
   } else if (node.type === 'ObjectPattern') {
     walkObjectPattern(node, bindings, isConst)
   } else if (node.type === 'ArrayPattern') {
     walkArrayPattern(node, bindings, isConst)
   } else if (node.type === 'AssignmentPattern') {
     if (node.left.type === 'Identifier') {
-      bindings[node.left.name] = 'var'
+      bindings[node.left.name] = isContextCall
+        ? BindingTypes.CONST
+        : BindingTypes.SETUP
     } else {
       walkPattern(node.left, bindings, isConst)
     }
@@ -1336,7 +1365,7 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
         // props: ['foo']
         // props: { foo: ... }
         for (const key of getObjectOrArrayExpressionKeys(property)) {
-          bindings[key] = 'props'
+          bindings[key] = BindingTypes.PROPS
         }
       }
 
@@ -1345,7 +1374,7 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
         // inject: ['foo']
         // inject: { foo: {} }
         for (const key of getObjectOrArrayExpressionKeys(property)) {
-          bindings[key] = 'options'
+          bindings[key] = BindingTypes.OPTIONS
         }
       }
 
@@ -1357,7 +1386,7 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
         // methods: { foo() {} }
         // computed: { foo() {} }
         for (const key of getObjectExpressionKeys(property.value)) {
-          bindings[key] = 'options'
+          bindings[key] = BindingTypes.OPTIONS
         }
       }
     }
@@ -1380,7 +1409,10 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
           bodyItem.argument.type === 'ObjectExpression'
         ) {
           for (const key of getObjectExpressionKeys(bodyItem.argument)) {
-            bindings[key] = property.key.name
+            bindings[key] =
+              property.key.name === 'setup'
+                ? BindingTypes.SETUP
+                : BindingTypes.DATA
           }
         }
       }
diff --git a/packages/compiler-sfc/src/genCssVars.ts b/packages/compiler-sfc/src/genCssVars.ts
index d18afe60..3d926cf5 100644
--- a/packages/compiler-sfc/src/genCssVars.ts
+++ b/packages/compiler-sfc/src/genCssVars.ts
@@ -13,7 +13,7 @@ import { ParserPlugin } from '@babel/parser'
 export function genCssVarsCode(
   varsExp: string,
   scoped: boolean,
-  knownBindings?: Record<string, string | boolean>
+  knownBindings?: Record<string, any>
 ) {
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {

From 0ca91371887dfd0b5f0196bf70e61022a2fdd8ae Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Nov 2020 18:11:25 -0500
Subject: [PATCH 17/27] wip: tests for defineContext()

---
 .../src/transforms/transformElement.ts        |   6 +-
 .../src/transforms/transformExpression.ts     |  21 +-
 .../__snapshots__/compileScript.spec.ts.snap  | 421 +++++++++++-------
 .../__tests__/compileScript.spec.ts           | 347 ++++++++++-----
 packages/compiler-sfc/src/compileScript.ts    | 147 +++---
 5 files changed, 592 insertions(+), 350 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index f1e0fd2b..905eded2 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -272,8 +272,10 @@ export function resolveComponentType(
     }
     const tagFromConst = checkType(BindingTypes.CONST)
     if (tagFromConst) {
-      // constant setup bindings (e.g. imports) can be used as-is
-      return tagFromConst
+      return context.inline
+        ? // in inline mode, const setup bindings (e.g. imports) can be used as-is
+          tagFromConst
+        : `$setup[${JSON.stringify(tagFromConst)}]`
     }
   }
 
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 57039c05..276c8cb1 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -102,19 +102,18 @@ export function processExpression(
   const { inline, bindingMetadata } = context
 
   // const bindings exposed from setup - we know they never change
-  if (inline && bindingMetadata[node.content] === BindingTypes.CONST) {
+  if (bindingMetadata[node.content] === BindingTypes.CONST) {
     node.isRuntimeConstant = true
     return node
   }
 
   const prefix = (raw: string) => {
     const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
-    if (type === BindingTypes.CONST) {
-      return raw
-    }
     if (inline) {
       // setup inline mode
-      if (type === BindingTypes.SETUP) {
+      if (type === BindingTypes.CONST) {
+        return raw
+      } else if (type === BindingTypes.SETUP) {
         return `${context.helperString(UNREF)}(${raw})`
       } else if (type === BindingTypes.PROPS) {
         // use __props which is generated by compileScript so in ts mode
@@ -122,8 +121,16 @@ export function processExpression(
         return `__props.${raw}`
       }
     }
-    // fallback to normal
-    return `${type ? `$${type}` : `_ctx`}.${raw}`
+
+    if (type === BindingTypes.CONST) {
+      // setup const binding in non-inline mode
+      return `$setup.${raw}`
+    } else if (type) {
+      return `$${type}.${raw}`
+    } else {
+      // fallback to ctx
+      return `_ctx.${raw}`
+    }
   }
 
   // fast path if expression is a simple identifier.
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index a91e3e65..6b95ef42 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1,106 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SFC compile <script setup> <script setup lang="ts"> extract emits 1`] = `
-"import { Slots, defineComponent } from 'vue'
-declare function __emit__(e: 'foo' | 'bar'): void
-      declare function __emit__(e: 'baz', id: number): void
-      
-export function setup(_: {}, { emit: myEmit }: {
-  emit: typeof __emit__,
-  slots: Slots,
-  attrs: Record<string, any>
-}) {
-
-      
-return {  }
-}
-
-export default defineComponent({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
-  setup
-})"
-`;
-
-exports[`SFC compile <script setup> <script setup lang="ts"> extract props 1`] = `
-"import { Slots, defineComponent } from 'vue'
-interface Test {}
-
-      type Alias = number[]
-
-      
-export function setup(myProps: {
-        string: string
-        number: number
-        boolean: boolean
-        object: object
-        objectLiteral: { a: number }
-        fn: (n: number) => void
-        functionRef: Function
-        objectRef: Object
-        array: string[]
-        arrayRef: Array<any>
-        tuple: [number, number]
-        set: Set<string>
-        literal: 'foo'
-        optional?: any
-        recordRef: Record<string, null>
-        interface: Test
-        alias: Alias
-
-        union: string | number
-        literalUnion: 'foo' | 'bar'
-        literalUnionMixed: 'foo' | 1 | boolean
-        intersection: Test & {}
-      }) {
-
-      
-return {  }
-}
-
-export default defineComponent({
-  props: {
-    string: { type: String, required: true },
-    number: { type: Number, required: true },
-    boolean: { type: Boolean, required: true },
-    object: { type: Object, required: true },
-    objectLiteral: { type: Object, required: true },
-    fn: { type: Function, required: true },
-    functionRef: { type: Function, required: true },
-    objectRef: { type: Object, required: true },
-    array: { type: Array, required: true },
-    arrayRef: { type: Array, required: true },
-    tuple: { type: Array, required: true },
-    set: { type: Set, required: true },
-    literal: { type: String, required: true },
-    optional: { type: null, required: false },
-    recordRef: { type: Object, required: true },
-    interface: { type: Object, required: true },
-    alias: { type: Array, required: true },
-    union: { type: [String, Number], required: true },
-    literalUnion: { type: [String, String], required: true },
-    literalUnionMixed: { type: [String, Number, Boolean], required: true },
-    intersection: { type: Object, required: true }
-  } as unknown as undefined,
-  setup
-})"
-`;
-
-exports[`SFC compile <script setup> <script setup lang="ts"> hoist type declarations 1`] = `
-"import { Slots, defineComponent } from 'vue'
-export interface Foo {}
-        type Bar = {}
-      
-export function setup() {
-
-        
-return {  }
-}
-
-export default defineComponent({
-  setup
-})"
-`;
-
 exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
 "const __default__ = { setup() {} }
 import { useCssVars as __useCssVars__ } from 'vue'
@@ -147,116 +46,177 @@ export default __default__"
 exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
 "import { useCssVars } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 const color = 'red'
 __useCssVars__(_ctx => ({ color }))
 return { color }
 }
 
-export default { setup }"
+}"
 `;
 
-exports[`SFC compile <script setup> errors should allow export default referencing imported binding 1`] = `
-"import { bar } from './bar'
-          
-export function setup() {
+exports[`SFC compile <script setup> defineContext() 1`] = `
+"export default {
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],
+  setup(__props, { props, emit }) {
 
-          
-return { bar }
+
+
+const bar = 1
+
+return { props, emit, bar }
 }
 
-const __default__ = {
-            props: {
+}"
+`;
+
+exports[`SFC compile <script setup> errors should allow defineContext() referencing imported binding 1`] = `
+"import { bar } from './bar'
+          
+export default {
+  props: {
               foo: {
                 default: () => bar
               }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
-`;
+            },
+  setup() {
 
-exports[`SFC compile <script setup> errors should allow export default referencing scope var 1`] = `
-"export function setup() {
-
-          const bar = 1
           
+        
 return { bar }
 }
 
-const __default__ = {
-            props: {
+}"
+`;
+
+exports[`SFC compile <script setup> errors should allow defineContext() referencing scope var 1`] = `
+"export default {
+  props: {
               foo: {
                 default: bar => bar + 1
               }
-            }
-          }
-        __default__.setup = setup
-export default __default__"
-`;
+            },
+  setup() {
 
-exports[`SFC compile <script setup> explicit setup signature 1`] = `
-"export function setup(props, { emit }) {
-emit('foo')
-return {  }
+          const bar = 1
+          
+        
+return { bar }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
 "import { ref } from 'vue'
-  
-export function setup() {
+      
+export default {
+  setup() {
 
-  const foo = ref(1)
-  
-return { ref, foo }
+      const foo = ref(1)
+      
+return { foo, ref }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> imports import dedupe between <script> and <script setup> 1`] = `
 "import { x } from './x'
         
-export function setup() {
+export default {
+  setup() {
 
         x()
         
 return { x }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> imports should extract comment for import or type declarations 1`] = `
 "import a from 'a' // comment
-  import b from 'b'
-  
-export function setup() {
+        import b from 'b'
+        
+export default {
+  setup() {
 
-  
+        
 return { a, b }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
 "import { ref } from 'vue'
-export function setup() {
+export default {
+  setup() {
 
 return { ref }
 }
 
-export default { setup }"
+}"
+`;
+
+exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
+"import { createVNode as _createVNode, unref as _unref, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+import { ref } from 'vue'
+        import Foo from './Foo.vue'
+        import other from './util'
+        
+export default {
+  setup() {
+
+        const count = ref(0)
+        const constant = {}
+        function fn() {}
+        
+return (_ctx, _cache, $props, $setup, $data, $options) => {
+  return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(Foo),
+    _createVNode(\\"div\\", { onClick: fn }, _toDisplayString(_unref(count)) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
+
+import { ref } from 'vue'
+        
+export default {
+  setup() {
+
+        const count = ref(0)
+        
+return (_ctx, _cache, $props, $setup, $data, $options) => {
+  return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(\\"div\\", null, _toDisplayString(_unref(count)), 1 /* TEXT */),
+    _hoisted_1
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const a = ref(1)
       console.log(a.value)
@@ -267,13 +227,14 @@ export function setup() {
 return { a, get }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const n = ref(1), [__a, __b = 1, ...__c] = useFoo()
 const a = ref(__a);
@@ -284,13 +245,14 @@ const c = ref(__c);
 return { n, a, b, c }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const foo = ref()
       const a = ref(1)
@@ -303,13 +265,14 @@ export function setup() {
 return { foo, a, b, c, d }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const a = ref(1), b = ref(2), c = ref({
         count: 0
@@ -318,13 +281,14 @@ export function setup() {
 return { a, b, c }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const a = ref(1)
       const b = ref({ count: 0 })
@@ -338,13 +302,14 @@ export function setup() {
 return { a, b, inc }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const [{ a: { b: __b }}] = useFoo()
 const b = ref(__b);
@@ -356,13 +321,14 @@ const e = ref(__e);
 return { b, d, e }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const n = ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
 const a = ref(__a);
@@ -375,11 +341,12 @@ const g = ref(__g);
 return { n, a, c, d, f, g }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
-"export function setup() {
+"export default {
+  setup() {
 
       foo: a = 1, b = 2, c = {
         count: 0
@@ -388,13 +355,14 @@ exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref
 return {  }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = `
 "import { ref } from 'vue'
 
-export function setup() {
+export default {
+  setup() {
 
       const a = ref(1)
       const b = { a: a.value }
@@ -405,21 +373,138 @@ export function setup() {
 return { a, b, test }
 }
 
-export default { setup }"
+}"
 `;
 
 exports[`SFC compile <script setup> should expose top level declarations 1`] = `
 "import { x } from './x'
       
-export function setup() {
+export default {
+  setup() {
 
       let a = 1
       const b = 2
       function c() {}
       class d {}
       
-return { x, a, b, c, d }
+return { a, b, c, d, x }
 }
 
-export default { setup }"
+}"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineContext w/ runtime options 1`] = `
+"import { defineComponent } from 'vue'
+
+
+export default defineComponent({
+  props: { foo: String },
+  emits: ['a', 'b'],
+  setup(__props, { props, emit }) {
+
+
+
+return { props, emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract emits (union) 1`] = `
+"import { Slots, defineComponent } from 'vue'
+
+      
+export default defineComponent({
+  emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
+  setup(__props, { emit }: {
+  props: {},
+  emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void),
+  slots: Slots,
+  attrs: Record<string, any>
+}) {
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract emits 1`] = `
+"import { Slots, defineComponent } from 'vue'
+
+      
+export default defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { emit }: {
+  props: {},
+  emit: (e: 'foo' | 'bar') => void,
+  slots: Slots,
+  attrs: Record<string, any>
+}) {
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract props 1`] = `
+"import { defineComponent } from 'vue'
+
+      interface Test {}
+
+      type Alias = number[]
+
+      
+export default defineComponent({
+  props: {
+    string: { type: String, required: true },
+    number: { type: Number, required: true },
+    boolean: { type: Boolean, required: true },
+    object: { type: Object, required: true },
+    objectLiteral: { type: Object, required: true },
+    fn: { type: Function, required: true },
+    functionRef: { type: Function, required: true },
+    objectRef: { type: Object, required: true },
+    array: { type: Array, required: true },
+    arrayRef: { type: Array, required: true },
+    tuple: { type: Array, required: true },
+    set: { type: Set, required: true },
+    literal: { type: String, required: true },
+    optional: { type: null, required: false },
+    recordRef: { type: Object, required: true },
+    interface: { type: Object, required: true },
+    alias: { type: Array, required: true },
+    union: { type: [String, Number], required: true },
+    literalUnion: { type: [String, String], required: true },
+    literalUnionMixed: { type: [String, Number, Boolean], required: true },
+    intersection: { type: Object, required: true }
+  } as unknown as undefined,
+  setup() {
+
+      
+      
+return {  }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
+"import { defineComponent } from 'vue'
+export interface Foo {}
+        type Bar = {}
+      
+export default defineComponent({
+  setup() {
+
+        
+return {  }
+}
+
+})"
 `;
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index d9fffd2f..67882f71 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -22,12 +22,6 @@ function assertCode(code: string) {
 }
 
 describe('SFC compile <script setup>', () => {
-  test('explicit setup signature', () => {
-    assertCode(
-      compile(`<script setup="props, { emit }">emit('foo')</script>`).content
-    )
-  })
-
   test('should expose top level declarations', () => {
     const { content } = compile(`
       <script setup>
@@ -39,7 +33,43 @@ describe('SFC compile <script setup>', () => {
       </script>
       `)
     assertCode(content)
-    expect(content).toMatch('return { x, a, b, c, d }')
+    expect(content).toMatch('return { a, b, c, d, x }')
+  })
+
+  test('defineContext()', () => {
+    const { content, bindings } = compile(`
+<script setup>
+import { defineContext } from 'vue'
+const { props, emit } = defineContext({
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b']
+})
+
+const bar = 1
+</script>
+  `)
+    // should generate working code
+    assertCode(content)
+    // should anayze bindings
+    expect(bindings).toStrictEqual({
+      foo: 'props',
+      bar: 'const',
+      props: 'const',
+      emit: 'const'
+    })
+
+    // should remove defineContext import and call
+    expect(content).not.toMatch('defineContext')
+    // should generate correct setup signature
+    expect(content).toMatch(`setup(__props, { props, emit }) {`)
+    // should include context options in default export
+    expect(content).toMatch(`export default {
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],`)
   })
 
   describe('imports', () => {
@@ -51,18 +81,22 @@ describe('SFC compile <script 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
+        compile(`
+        <script setup>
+        import a from 'a' // comment
+        import b from 'b'
+        </script>
+        `).content
       )
     })
 
     test('dedupe between user & helper', () => {
-      const { content } = compile(`<script setup>
-  import { ref } from 'vue'
-  ref: foo = 1
-  </script>`)
+      const { content } = compile(`
+      <script setup>
+      import { ref } from 'vue'
+      ref: foo = 1
+      </script>
+      `)
       assertCode(content)
       expect(content).toMatch(`import { ref } from 'vue'`)
     })
@@ -84,7 +118,62 @@ describe('SFC compile <script setup>', () => {
     })
   })
 
-  describe('<script setup lang="ts">', () => {
+  describe('inlineTemplate mode', () => {
+    test('should work', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import { ref } from 'vue'
+        const count = ref(0)
+        </script>
+        <template>
+          <div>{{ count }}</div>
+          <div>static</div>
+        </template>
+        `,
+        { inlineTemplate: true }
+      )
+      // check snapshot and make sure helper imports and
+      // hoists are placed correctly.
+      assertCode(content)
+    })
+
+    test('avoid unref() when necessary', () => {
+      // function, const, component import
+      const { content } = compile(
+        `
+        <script setup>
+        import { ref, defineContext } from 'vue'
+        import Foo from './Foo.vue'
+        import other from './util'
+        const count = ref(0)
+        const constant = {}
+        function fn() {}
+        </script>
+        <template>
+          <Foo/>
+          <div @click="fn">{{ count }} {{ constant }} {{ other }}</div>
+        </template>
+        `,
+        { inlineTemplate: true }
+      )
+      assertCode(content)
+      // no need to unref vue component import
+      expect(content).toMatch(`createVNode(Foo)`)
+      // should unref other imports
+      expect(content).toMatch(`unref(other)`)
+      // no need to unref constant literals
+      expect(content).not.toMatch(`unref(constant)`)
+      // should unref const w/ call init (e.g. ref())
+      expect(content).toMatch(`unref(count)`)
+      // no need to unref function declarations
+      expect(content).toMatch(`{ onClick: fn }`)
+      // no need to mark constant fns in patch flag
+      expect(content).not.toMatch(`PROPS`)
+    })
+  })
+
+  describe('with TypeScript', () => {
     test('hoist type declarations', () => {
       const { content } = compile(`
       <script setup lang="ts">
@@ -94,37 +183,57 @@ describe('SFC compile <script setup>', () => {
       assertCode(content)
     })
 
-    test('extract props', () => {
+    test('defineContext w/ runtime options', () => {
       const { content } = compile(`
-      <script setup="myProps" lang="ts">
+<script setup lang="ts">
+import { defineContext } from 'vue'
+const { props, emit } = defineContext({
+  props: { foo: String },
+  emits: ['a', 'b']
+})
+</script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`export default defineComponent({
+  props: { foo: String },
+  emits: ['a', 'b'],
+  setup(__props, { props, emit }) {`)
+    })
+
+    test('defineContext w/ type / extract props', () => {
+      const { content, bindings } = compile(`
+      <script setup lang="ts">
+      import { defineContext } from 'vue'
       interface Test {}
 
       type Alias = number[]
 
-      declare const myProps: {
-        string: string
-        number: number
-        boolean: boolean
-        object: object
-        objectLiteral: { a: number }
-        fn: (n: number) => void
-        functionRef: Function
-        objectRef: Object
-        array: string[]
-        arrayRef: Array<any>
-        tuple: [number, number]
-        set: Set<string>
-        literal: 'foo'
-        optional?: any
-        recordRef: Record<string, null>
-        interface: Test
-        alias: Alias
+      defineContext<{
+        props: {
+          string: string
+          number: number
+          boolean: boolean
+          object: object
+          objectLiteral: { a: number }
+          fn: (n: number) => void
+          functionRef: Function
+          objectRef: Object
+          array: string[]
+          arrayRef: Array<any>
+          tuple: [number, number]
+          set: Set<string>
+          literal: 'foo'
+          optional?: any
+          recordRef: Record<string, null>
+          interface: Test
+          alias: Alias
 
-        union: string | number
-        literalUnion: 'foo' | 'bar'
-        literalUnionMixed: 'foo' | 1 | boolean
-        intersection: Test & {}
-      }
+          union: string | number
+          literalUnion: 'foo' | 'bar'
+          literalUnionMixed: 'foo' | 1 | boolean
+          intersection: Test & {}
+        }
+      }>()
       </script>`)
       assertCode(content)
       expect(content).toMatch(`string: { type: String, required: true }`)
@@ -154,21 +263,57 @@ describe('SFC compile <script setup>', () => {
         `literalUnionMixed: { type: [String, Number, Boolean], required: true }`
       )
       expect(content).toMatch(`intersection: { type: Object, required: true }`)
+      expect(bindings).toStrictEqual({
+        string: 'props',
+        number: 'props',
+        boolean: 'props',
+        object: 'props',
+        objectLiteral: 'props',
+        fn: 'props',
+        functionRef: 'props',
+        objectRef: 'props',
+        array: 'props',
+        arrayRef: 'props',
+        tuple: 'props',
+        set: 'props',
+        literal: 'props',
+        optional: 'props',
+        recordRef: 'props',
+        interface: 'props',
+        alias: 'props',
+        union: 'props',
+        literalUnion: 'props',
+        literalUnionMixed: 'props',
+        intersection: 'props'
+      })
     })
 
-    test('extract emits', () => {
+    test('defineContext w/ type / extract emits', () => {
       const { content } = compile(`
-      <script setup="_, { emit: myEmit }" lang="ts">
-      declare function myEmit(e: 'foo' | 'bar'): void
-      declare function myEmit(e: 'baz', id: number): void
+      <script setup lang="ts">
+      import { defineContext } from 'vue'
+      const { emit } = defineContext<{
+        emit: (e: 'foo' | 'bar') => void
+      }>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`props: {},\n  emit: (e: 'foo' | 'bar') => void,`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineContext w/ type / extract emits (union)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      import { defineContext } from 'vue'
+      const { emit } = defineContext<{
+        emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)
+      }>()
       </script>
       `)
       assertCode(content)
       expect(content).toMatch(
-        `declare function __emit__(e: 'foo' | 'bar'): void`
-      )
-      expect(content).toMatch(
-        `declare function __emit__(e: 'baz', id: number): void`
+        `props: {},\n  emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void),`
       )
       expect(content).toMatch(
         `emits: ["foo", "bar", "baz"] as unknown as undefined`
@@ -220,9 +365,7 @@ describe('SFC compile <script setup>', () => {
   describe('async/await detection', () => {
     function assertAwaitDetection(code: string, shouldAsync = true) {
       const { content } = compile(`<script setup>${code}</script>`)
-      expect(content).toMatch(
-        `export ${shouldAsync ? `async ` : ``}function setup`
-      )
+      expect(content).toMatch(`${shouldAsync ? `async ` : ``}setup()`)
     }
 
     test('expression statement', () => {
@@ -459,25 +602,27 @@ describe('SFC compile <script setup>', () => {
       ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
+    const moduleErrorMsg = `cannot contain ES module exports`
+
     test('non-type named exports', () => {
       expect(() =>
         compile(`<script setup>
         export const a = 1
         </script>`)
-      ).toThrow(`cannot contain non-type named or * exports`)
+      ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
         export * from './foo'
         </script>`)
-      ).toThrow(`cannot contain non-type named or * exports`)
+      ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
         </script>`)
-      ).toThrow(`cannot contain non-type named or * exports`)
+      ).toThrow(moduleErrorMsg)
     })
 
     test('ref: non-assignment expressions', () => {
@@ -488,97 +633,74 @@ describe('SFC compile <script setup>', () => {
       ).toThrow(`ref: statements can only contain assignment expressions`)
     })
 
-    test('export default referencing local var', () => {
+    test('defineContext() w/ both type and non-type args', () => {
+      expect(() => {
+        compile(`<script setup lang="ts">
+        import { defineContext } from 'vue'
+        defineContext<{}>({})
+        </script>`)
+      }).toThrow(`cannot accept both type and non-type arguments`)
+    })
+
+    test('defineContext() referencing local var', () => {
       expect(() =>
         compile(`<script setup>
-          const bar = 1
-          export default {
-            props: {
-              foo: {
-                default: () => bar
-              }
+        import { defineContext } from 'vue'
+        const bar = 1
+        defineContext({
+          props: {
+            foo: {
+              default: () => bar
             }
           }
+        })
         </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('export default referencing ref declarations', () => {
+    test('defineContext() referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
+        import { defineContext } from 'vue'
         ref: bar = 1
-        export default {
-          props: bar
-        }
+        defineContext({
+          props: { bar }
+        })
       </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('should allow export default referencing scope var', () => {
+    test('should allow defineContext() referencing scope var', () => {
       assertCode(
         compile(`<script setup>
+          import { defineContext } from 'vue'
           const bar = 1
-          export default {
+          defineContext({
             props: {
               foo: {
                 default: bar => bar + 1
               }
             }
-          }
+          })
         </script>`).content
       )
     })
 
-    test('should allow export default referencing imported binding', () => {
+    test('should allow defineContext() referencing imported binding', () => {
       assertCode(
         compile(`<script setup>
+          import { defineContext } from 'vue'
           import { bar } from './bar'
-          export default {
+          defineContext({
             props: {
               foo: {
                 default: () => bar
               }
             }
-          }
+          })
         </script>`).content
       )
     })
-
-    test('error on duplicated default export', () => {
-      expect(() =>
-        compile(`
-      <script>
-      export default {}
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      export { x as default } from './y'
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-
-      expect(() =>
-        compile(`
-      <script>
-      const x = {}
-      export { x as default }
-      </script>
-      <script setup>
-      export default {}
-      </script>
-      `)
-      ).toThrow(`Default export is already declared`)
-    })
   })
 })
 
@@ -779,11 +901,12 @@ describe('SFC analyze <script> bindings', () => {
   it('works for script setup', () => {
     const { bindings } = compile(`
       <script setup>
-        export default {
-          props: {
-            foo: String,
-          },
+      import { defineContext } from 'vue'
+      defineContext({
+        props: {
+          foo: String,
         }
+      })
       </script>
     `)
     expect(bindings).toStrictEqual({
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index ea5bf95f..b90b677f 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -15,12 +15,12 @@ import {
   TSType,
   TSTypeLiteral,
   TSFunctionType,
-  TSDeclareFunction,
   ObjectProperty,
   ArrayExpression,
   Statement,
   Expression,
-  LabeledStatement
+  LabeledStatement,
+  TSUnionType
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
@@ -143,6 +143,7 @@ export function compileScript(
   const refIdentifiers: Set<Identifier> = new Set()
   const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
+  let hasContextCall = false
   let setupContextExp: string | undefined
   let setupContextArg: ObjectExpression | undefined
   let setupContextType: TSTypeLiteral | undefined
@@ -182,6 +183,48 @@ export function compileScript(
     )
   }
 
+  function processContextCall(node: Node): boolean {
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === CTX_FN_NAME
+    ) {
+      if (hasContextCall) {
+        error('duplicate defineContext() call', node)
+      }
+      hasContextCall = true
+      const optsArg = node.arguments[0]
+      if (optsArg) {
+        if (optsArg.type === 'ObjectExpression') {
+          setupContextArg = optsArg
+        } else {
+          error(`${CTX_FN_NAME}() argument must be an object literal.`, optsArg)
+        }
+      }
+      // context call has type parameters - infer runtime types from it
+      if (node.typeParameters) {
+        if (setupContextArg) {
+          error(
+            `${CTX_FN_NAME}() cannot accept both type and non-type arguments ` +
+              `at the same time. Use one or the other.`,
+            node
+          )
+        }
+        const typeArg = node.typeParameters.params[0]
+        if (typeArg.type === 'TSTypeLiteral') {
+          setupContextType = typeArg
+        } else {
+          error(
+            `type argument passed to ${CTX_FN_NAME}() must be a literal type.`,
+            typeArg
+          )
+        }
+      }
+      return true
+    }
+    return false
+  }
+
   function processRefExpression(exp: Expression, statement: LabeledStatement) {
     if (exp.type === 'AssignmentExpression') {
       helperImports.add('ref')
@@ -500,51 +543,24 @@ export function compileScript(
       }
     }
 
+    if (
+      node.type === 'ExpressionStatement' &&
+      processContextCall(node.expression)
+    ) {
+      s.remove(node.start! + startOffset, node.end! + startOffset)
+    }
+
     if (node.type === 'VariableDeclaration' && !node.declare) {
       for (const decl of node.declarations) {
-        if (
-          decl.init &&
-          decl.init.type === 'CallExpression' &&
-          decl.init.callee.type === 'Identifier' &&
-          decl.init.callee.name === CTX_FN_NAME
-        ) {
-          if (node.declarations.length === 1) {
-            s.remove(node.start! + startOffset, node.end! + startOffset)
-          } else {
-            s.remove(decl.start! + startOffset, decl.end! + startOffset)
-          }
+        if (decl.init && processContextCall(decl.init)) {
           setupContextExp = scriptSetup.content.slice(
             decl.id.start!,
             decl.id.end!
           )
-          const optsArg = decl.init.arguments[0]
-          if (optsArg.type === 'ObjectExpression') {
-            setupContextArg = optsArg
+          if (node.declarations.length === 1) {
+            s.remove(node.start! + startOffset, node.end! + startOffset)
           } else {
-            error(
-              `${CTX_FN_NAME}() argument must be an object literal.`,
-              optsArg
-            )
-          }
-
-          // useSetupContext() has type parameters - infer runtime types from it
-          if (decl.init.typeParameters) {
-            if (setupContextArg) {
-              error(
-                `${CTX_FN_NAME}() cannot accept both type and non-type arguments ` +
-                  `at the same time. Use one or the other.`,
-                decl.init
-              )
-            }
-            const typeArg = decl.init.typeParameters.params[0]
-            if (typeArg.type === 'TSTypeLiteral') {
-              setupContextType = typeArg
-            } else {
-              error(
-                `type argument passed to ${CTX_FN_NAME}() must be a literal type.`,
-                typeArg
-              )
-            }
+            s.remove(decl.start! + startOffset, decl.end! + startOffset)
           }
         }
       }
@@ -641,7 +657,8 @@ export function compileScript(
           typeNode.start!,
           typeNode.end!
         )
-        if (m.key.name === 'props') {
+        const key = m.key.name
+        if (key === 'props') {
           propsType = typeString
           if (typeNode.type === 'TSTypeLiteral') {
             extractRuntimeProps(typeNode, typeDeclaredProps, declaredTypes)
@@ -649,18 +666,23 @@ export function compileScript(
             // TODO be able to trace references
             error(`props type must be an object literal type`, typeNode)
           }
-        } else if (m.key.name === 'emit') {
+        } else if (key === 'emit') {
           emitType = typeString
-          if (typeNode.type === 'TSFunctionType') {
+          if (
+            typeNode.type === 'TSFunctionType' ||
+            typeNode.type === 'TSUnionType'
+          ) {
             extractRuntimeEmits(typeNode, typeDeclaredEmits)
           } else {
             // TODO be able to trace references
             error(`emit type must be a function type`, typeNode)
           }
-        } else if (m.key.name === 'attrs') {
+        } else if (key === 'attrs') {
           attrsType = typeString
-        } else if (m.key.name === 'slots') {
+        } else if (key === 'slots') {
           slotsType = typeString
+        } else {
+          error(`invalid setup context property: "${key}"`, m.key)
         }
       }
     }
@@ -747,19 +769,13 @@ export function compileScript(
   if (setupContextArg) {
     Object.assign(bindingMetadata, analyzeBindingsFromOptions(setupContextArg))
   }
-  if (options.inlineTemplate) {
-    for (const [key, { source }] of Object.entries(userImports)) {
-      bindingMetadata[key] = source.endsWith('.vue')
-        ? BindingTypes.CONST
-        : BindingTypes.SETUP
-    }
-    for (const key in setupBindings) {
-      bindingMetadata[key] = setupBindings[key]
-    }
-  } else {
-    for (const key in allBindings) {
-      bindingMetadata[key] = BindingTypes.SETUP
-    }
+  for (const [key, { source }] of Object.entries(userImports)) {
+    bindingMetadata[key] = source.endsWith('.vue')
+      ? BindingTypes.CONST
+      : BindingTypes.SETUP
+  }
+  for (const key in setupBindings) {
+    bindingMetadata[key] = setupBindings[key]
   }
 
   // 11. generate return statement
@@ -1135,11 +1151,20 @@ function toRuntimeTypeString(types: string[]) {
 }
 
 function extractRuntimeEmits(
-  node: TSFunctionType | TSDeclareFunction,
+  node: TSFunctionType | TSUnionType,
   emits: Set<string>
 ) {
-  const eventName =
-    node.type === 'TSDeclareFunction' ? node.params[0] : node.parameters[0]
+  if (node.type === 'TSUnionType') {
+    for (let t of node.types) {
+      if (t.type === 'TSParenthesizedType') t = t.typeAnnotation
+      if (t.type === 'TSFunctionType') {
+        extractRuntimeEmits(t, emits)
+      }
+    }
+    return
+  }
+
+  const eventName = node.parameters[0]
   if (
     eventName.type === 'Identifier' &&
     eventName.typeAnnotation &&

From 292a657861e5799ec14dab1b6e4d5def003f49d0 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Nov 2020 22:44:18 -0500
Subject: [PATCH 18/27] wip: fix runtimeConstant marking

---
 .../src/transforms/transformExpression.ts             | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 276c8cb1..f72bd16b 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -100,13 +100,6 @@ export function processExpression(
   }
 
   const { inline, bindingMetadata } = context
-
-  // const bindings exposed from setup - we know they never change
-  if (bindingMetadata[node.content] === BindingTypes.CONST) {
-    node.isRuntimeConstant = true
-    return node
-  }
-
   const prefix = (raw: string) => {
     const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
     if (inline) {
@@ -138,6 +131,10 @@ export function processExpression(
   // bail on parens to prevent any possible function invocations.
   const bailConstant = rawExp.indexOf(`(`) > -1
   if (isSimpleIdentifier(rawExp)) {
+    // const bindings exposed from setup - we know they never change
+    if (bindingMetadata[node.content] === BindingTypes.CONST) {
+      node.isRuntimeConstant = true
+    }
     if (
       !asParams &&
       !context.identifiers[rawExp] &&

From 001f8ce99386054c2bea0e3d248f50e1fb4c38bc Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Nov 2020 22:51:40 -0500
Subject: [PATCH 19/27] wip: defineContext -> useOptions

---
 .../__snapshots__/compileScript.spec.ts.snap  | 78 +++++++--------
 .../__tests__/compileScript.spec.ts           | 70 ++++++-------
 packages/compiler-sfc/src/compileScript.ts    | 97 +++++++++----------
 .../useOptions.ts}                            | 12 ++-
 packages/runtime-core/src/index.ts            |  2 +-
 5 files changed, 131 insertions(+), 128 deletions(-)
 rename packages/runtime-core/src/{apiDefineContext.ts => helpers/useOptions.ts} (58%)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 6b95ef42..c48e1ff4 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -56,25 +56,7 @@ return { color }
 }"
 `;
 
-exports[`SFC compile <script setup> defineContext() 1`] = `
-"export default {
-  props: {
-    foo: String
-  },
-  emit: ['a', 'b'],
-  setup(__props, { props, emit }) {
-
-
-
-const bar = 1
-
-return { props, emit, bar }
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> errors should allow defineContext() referencing imported binding 1`] = `
+exports[`SFC compile <script setup> errors should allow useOptions() referencing imported binding 1`] = `
 "import { bar } from './bar'
           
 export default {
@@ -93,7 +75,7 @@ return { bar }
 }"
 `;
 
-exports[`SFC compile <script setup> errors should allow defineContext() referencing scope var 1`] = `
+exports[`SFC compile <script setup> errors should allow useOptions() referencing scope var 1`] = `
 "export default {
   props: {
               foo: {
@@ -393,7 +375,40 @@ return { a, b, c, d, x }
 }"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineContext w/ runtime options 1`] = `
+exports[`SFC compile <script setup> useOptions() 1`] = `
+"export default {
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],
+  setup(__props, { props, emit }) {
+
+
+
+const bar = 1
+
+return { props, emit, bar }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
+"import { defineComponent } from 'vue'
+export interface Foo {}
+        type Bar = {}
+      
+export default defineComponent({
+  setup() {
+
+        
+return {  }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript useOptions w/ runtime options 1`] = `
 "import { defineComponent } from 'vue'
 
 
@@ -410,7 +425,7 @@ return { props, emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract emits (union) 1`] = `
+exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract emits (union) 1`] = `
 "import { Slots, defineComponent } from 'vue'
 
       
@@ -431,7 +446,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract emits 1`] = `
+exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract emits 1`] = `
 "import { Slots, defineComponent } from 'vue'
 
       
@@ -452,7 +467,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineContext w/ type / extract props 1`] = `
+exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract props 1`] = `
 "import { defineComponent } from 'vue'
 
       interface Test {}
@@ -488,21 +503,6 @@ export default defineComponent({
 
       
       
-return {  }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
-"import { defineComponent } from 'vue'
-export interface Foo {}
-        type Bar = {}
-      
-export default defineComponent({
-  setup() {
-
-        
 return {  }
 }
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 67882f71..b1723687 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -36,11 +36,11 @@ describe('SFC compile <script setup>', () => {
     expect(content).toMatch('return { a, b, c, d, x }')
   })
 
-  test('defineContext()', () => {
+  test('useOptions()', () => {
     const { content, bindings } = compile(`
 <script setup>
-import { defineContext } from 'vue'
-const { props, emit } = defineContext({
+import { useOptions } from 'vue'
+const { props, emit } = useOptions({
   props: {
     foo: String
   },
@@ -60,8 +60,8 @@ const bar = 1
       emit: 'const'
     })
 
-    // should remove defineContext import and call
-    expect(content).not.toMatch('defineContext')
+    // should remove useOptions import and call
+    expect(content).not.toMatch('useOptions')
     // should generate correct setup signature
     expect(content).toMatch(`setup(__props, { props, emit }) {`)
     // should include context options in default export
@@ -143,7 +143,7 @@ const bar = 1
       const { content } = compile(
         `
         <script setup>
-        import { ref, defineContext } from 'vue'
+        import { ref, useOptions } from 'vue'
         import Foo from './Foo.vue'
         import other from './util'
         const count = ref(0)
@@ -183,11 +183,11 @@ const bar = 1
       assertCode(content)
     })
 
-    test('defineContext w/ runtime options', () => {
+    test('useOptions w/ runtime options', () => {
       const { content } = compile(`
 <script setup lang="ts">
-import { defineContext } from 'vue'
-const { props, emit } = defineContext({
+import { useOptions } from 'vue'
+const { props, emit } = useOptions({
   props: { foo: String },
   emits: ['a', 'b']
 })
@@ -200,15 +200,15 @@ const { props, emit } = defineContext({
   setup(__props, { props, emit }) {`)
     })
 
-    test('defineContext w/ type / extract props', () => {
+    test('useOptions w/ type / extract props', () => {
       const { content, bindings } = compile(`
       <script setup lang="ts">
-      import { defineContext } from 'vue'
+      import { useOptions } from 'vue'
       interface Test {}
 
       type Alias = number[]
 
-      defineContext<{
+      useOptions<{
         props: {
           string: string
           number: number
@@ -288,11 +288,11 @@ const { props, emit } = defineContext({
       })
     })
 
-    test('defineContext w/ type / extract emits', () => {
+    test('useOptions w/ type / extract emits', () => {
       const { content } = compile(`
       <script setup lang="ts">
-      import { defineContext } from 'vue'
-      const { emit } = defineContext<{
+      import { useOptions } from 'vue'
+      const { emit } = useOptions<{
         emit: (e: 'foo' | 'bar') => void
       }>()
       </script>
@@ -302,11 +302,11 @@ const { props, emit } = defineContext({
       expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
     })
 
-    test('defineContext w/ type / extract emits (union)', () => {
+    test('useOptions w/ type / extract emits (union)', () => {
       const { content } = compile(`
       <script setup lang="ts">
-      import { defineContext } from 'vue'
-      const { emit } = defineContext<{
+      import { useOptions } from 'vue'
+      const { emit } = useOptions<{
         emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)
       }>()
       </script>
@@ -633,21 +633,21 @@ const { props, emit } = defineContext({
       ).toThrow(`ref: statements can only contain assignment expressions`)
     })
 
-    test('defineContext() w/ both type and non-type args', () => {
+    test('useOptions() w/ both type and non-type args', () => {
       expect(() => {
         compile(`<script setup lang="ts">
-        import { defineContext } from 'vue'
-        defineContext<{}>({})
+        import { useOptions } from 'vue'
+        useOptions<{}>({})
         </script>`)
       }).toThrow(`cannot accept both type and non-type arguments`)
     })
 
-    test('defineContext() referencing local var', () => {
+    test('useOptions() referencing local var', () => {
       expect(() =>
         compile(`<script setup>
-        import { defineContext } from 'vue'
+        import { useOptions } from 'vue'
         const bar = 1
-        defineContext({
+        useOptions({
           props: {
             foo: {
               default: () => bar
@@ -658,24 +658,24 @@ const { props, emit } = defineContext({
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('defineContext() referencing ref declarations', () => {
+    test('useOptions() referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
-        import { defineContext } from 'vue'
+        import { useOptions } from 'vue'
         ref: bar = 1
-        defineContext({
+        useOptions({
           props: { bar }
         })
       </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('should allow defineContext() referencing scope var', () => {
+    test('should allow useOptions() referencing scope var', () => {
       assertCode(
         compile(`<script setup>
-          import { defineContext } from 'vue'
+          import { useOptions } from 'vue'
           const bar = 1
-          defineContext({
+          useOptions({
             props: {
               foo: {
                 default: bar => bar + 1
@@ -686,12 +686,12 @@ const { props, emit } = defineContext({
       )
     })
 
-    test('should allow defineContext() referencing imported binding', () => {
+    test('should allow useOptions() referencing imported binding', () => {
       assertCode(
         compile(`<script setup>
-          import { defineContext } from 'vue'
+          import { useOptions } from 'vue'
           import { bar } from './bar'
-          defineContext({
+          useOptions({
             props: {
               foo: {
                 default: () => bar
@@ -901,8 +901,8 @@ describe('SFC analyze <script> bindings', () => {
   it('works for script setup', () => {
     const { bindings } = compile(`
       <script setup>
-      import { defineContext } from 'vue'
-      defineContext({
+      import { useOptions } from 'vue'
+      useOptions({
         props: {
           foo: String,
         }
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index b90b677f..70b502d5 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -28,7 +28,7 @@ import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 import { BindingTypes } from 'packages/compiler-core/src/options'
 
-const CTX_FN_NAME = 'defineContext'
+const USE_OPTIONS = 'useOptions'
 
 export interface SFCScriptCompileOptions {
   /**
@@ -143,10 +143,10 @@ export function compileScript(
   const refIdentifiers: Set<Identifier> = new Set()
   const enableRefSugar = options.refSugar !== false
   let defaultExport: Node | undefined
-  let hasContextCall = false
-  let setupContextExp: string | undefined
-  let setupContextArg: ObjectExpression | undefined
-  let setupContextType: TSTypeLiteral | undefined
+  let hasOptionsCall = false
+  let optionsExp: string | undefined
+  let optionsArg: ObjectExpression | undefined
+  let optionsType: TSTypeLiteral | undefined
   let hasAwait = false
 
   const s = new MagicString(source)
@@ -183,39 +183,39 @@ export function compileScript(
     )
   }
 
-  function processContextCall(node: Node): boolean {
+  function processUseOptions(node: Node): boolean {
     if (
       node.type === 'CallExpression' &&
       node.callee.type === 'Identifier' &&
-      node.callee.name === CTX_FN_NAME
+      node.callee.name === USE_OPTIONS
     ) {
-      if (hasContextCall) {
-        error('duplicate defineContext() call', node)
+      if (hasOptionsCall) {
+        error(`duplicate ${USE_OPTIONS}() call`, node)
       }
-      hasContextCall = true
+      hasOptionsCall = true
       const optsArg = node.arguments[0]
       if (optsArg) {
         if (optsArg.type === 'ObjectExpression') {
-          setupContextArg = optsArg
+          optionsArg = optsArg
         } else {
-          error(`${CTX_FN_NAME}() argument must be an object literal.`, optsArg)
+          error(`${USE_OPTIONS}() argument must be an object literal.`, optsArg)
         }
       }
       // context call has type parameters - infer runtime types from it
       if (node.typeParameters) {
-        if (setupContextArg) {
+        if (optionsArg) {
           error(
-            `${CTX_FN_NAME}() cannot accept both type and non-type arguments ` +
+            `${USE_OPTIONS}() cannot accept both type and non-type arguments ` +
               `at the same time. Use one or the other.`,
             node
           )
         }
         const typeArg = node.typeParameters.params[0]
         if (typeArg.type === 'TSTypeLiteral') {
-          setupContextType = typeArg
+          optionsType = typeArg
         } else {
           error(
-            `type argument passed to ${CTX_FN_NAME}() must be a literal type.`,
+            `type argument passed to ${USE_OPTIONS}() must be a literal type.`,
             typeArg
           )
         }
@@ -513,7 +513,7 @@ export function compileScript(
           specifier.imported.name
         const source = node.source.value
         const existing = userImports[local]
-        if (source === 'vue' && imported === CTX_FN_NAME) {
+        if (source === 'vue' && imported === USE_OPTIONS) {
           removed++
           s.remove(
             prev ? prev.end! + startOffset : specifier.start! + startOffset,
@@ -545,18 +545,15 @@ export function compileScript(
 
     if (
       node.type === 'ExpressionStatement' &&
-      processContextCall(node.expression)
+      processUseOptions(node.expression)
     ) {
       s.remove(node.start! + startOffset, node.end! + startOffset)
     }
 
     if (node.type === 'VariableDeclaration' && !node.declare) {
       for (const decl of node.declarations) {
-        if (decl.init && processContextCall(decl.init)) {
-          setupContextExp = scriptSetup.content.slice(
-            decl.id.start!,
-            decl.id.end!
-          )
+        if (decl.init && processUseOptions(decl.init)) {
+          optionsExp = scriptSetup.content.slice(decl.id.start!, decl.id.end!)
           if (node.declarations.length === 1) {
             s.remove(node.start! + startOffset, node.end! + startOffset)
           } else {
@@ -649,8 +646,8 @@ export function compileScript(
   }
 
   // 5. extract runtime props/emits code from setup context type
-  if (setupContextType) {
-    for (const m of setupContextType.members) {
+  if (optionsType) {
+    for (const m of optionsType.members) {
       if (m.type === 'TSPropertySignature' && m.key.type === 'Identifier') {
         const typeNode = m.typeAnnotation!.typeAnnotation
         const typeString = scriptSetup.content.slice(
@@ -688,13 +685,13 @@ export function compileScript(
     }
   }
 
-  // 5. check useSetupContext args to make sure it doesn't reference setup scope
+  // 5. check useOptions args to make sure it doesn't reference setup scope
   // variables
-  if (setupContextArg) {
-    walkIdentifiers(setupContextArg, id => {
+  if (optionsArg) {
+    walkIdentifiers(optionsArg, id => {
       if (setupBindings[id.name]) {
         error(
-          `\`${CTX_FN_NAME}()\` in <script setup> cannot reference locally ` +
+          `\`${USE_OPTIONS}()\` in <script setup> cannot reference locally ` +
             `declared variables because it will be hoisted outside of the ` +
             `setup() function. If your component options requires initialization ` +
             `in the module scope, use a separate normal <script> to export ` +
@@ -725,8 +722,8 @@ export function compileScript(
   }
 
   // 7. finalize setup argument signature.
-  let args = setupContextExp ? `__props, ${setupContextExp}` : ``
-  if (setupContextExp && setupContextType) {
+  let args = optionsExp ? `__props, ${optionsExp}` : ``
+  if (optionsExp && optionsType) {
     if (slotsType === 'Slots') {
       helperImports.add('Slots')
     }
@@ -761,13 +758,13 @@ export function compileScript(
   if (scriptAst) {
     Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
   }
-  if (setupContextType) {
+  if (optionsType) {
     for (const key in typeDeclaredProps) {
       bindingMetadata[key] = BindingTypes.PROPS
     }
   }
-  if (setupContextArg) {
-    Object.assign(bindingMetadata, analyzeBindingsFromOptions(setupContextArg))
+  if (optionsArg) {
+    Object.assign(bindingMetadata, analyzeBindingsFromOptions(optionsArg))
   }
   for (const [key, { source }] of Object.entries(userImports)) {
     bindingMetadata[key] = source.endsWith('.vue')
@@ -818,11 +815,11 @@ export function compileScript(
 
   // 12. finalize default export
   let runtimeOptions = ``
-  if (setupContextArg) {
+  if (optionsArg) {
     runtimeOptions = `\n  ${scriptSetup.content
-      .slice(setupContextArg.start! + 1, setupContextArg.end! - 1)
+      .slice(optionsArg.start! + 1, optionsArg.end! - 1)
       .trim()},`
-  } else if (setupContextType) {
+  } else if (optionsType) {
     runtimeOptions =
       genRuntimeProps(typeDeclaredProps) + genRuntimeEmits(typeDeclaredEmits)
   }
@@ -896,18 +893,18 @@ function walkDeclaration(
     const isConst = node.kind === 'const'
     // export const foo = ...
     for (const { id, init } of node.declarations) {
-      const isContextCall = !!(
+      const isUseOptionsCall = !!(
         isConst &&
         init &&
         init.type === 'CallExpression' &&
         init.callee.type === 'Identifier' &&
-        init.callee.name === CTX_FN_NAME
+        init.callee.name === USE_OPTIONS
       )
       if (id.type === 'Identifier') {
         bindings[id.name] =
           // if a declaration is a const literal, we can mark it so that
           // the generated render fn code doesn't need to unref() it
-          isContextCall ||
+          isUseOptionsCall ||
           (isConst &&
           init!.type !== 'Identifier' && // const a = b
           init!.type !== 'CallExpression' && // const a = ref()
@@ -915,9 +912,9 @@ function walkDeclaration(
             ? BindingTypes.CONST
             : BindingTypes.SETUP
       } else if (id.type === 'ObjectPattern') {
-        walkObjectPattern(id, bindings, isConst, isContextCall)
+        walkObjectPattern(id, bindings, isConst, isUseOptionsCall)
       } else if (id.type === 'ArrayPattern') {
-        walkArrayPattern(id, bindings, isConst, isContextCall)
+        walkArrayPattern(id, bindings, isConst, isUseOptionsCall)
       }
     }
   } else if (
@@ -934,7 +931,7 @@ function walkObjectPattern(
   node: ObjectPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isContextCall = false
+  isUseOptionsCall = false
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -942,11 +939,11 @@ function walkObjectPattern(
       if (p.key.type === 'Identifier') {
         if (p.key === p.value) {
           // const { x } = ...
-          bindings[p.key.name] = isContextCall
+          bindings[p.key.name] = isUseOptionsCall
             ? BindingTypes.CONST
             : BindingTypes.SETUP
         } else {
-          walkPattern(p.value, bindings, isConst, isContextCall)
+          walkPattern(p.value, bindings, isConst, isUseOptionsCall)
         }
       }
     } else {
@@ -963,10 +960,10 @@ function walkArrayPattern(
   node: ArrayPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isContextCall = false
+  isUseOptionsCall = false
 ) {
   for (const e of node.elements) {
-    e && walkPattern(e, bindings, isConst, isContextCall)
+    e && walkPattern(e, bindings, isConst, isUseOptionsCall)
   }
 }
 
@@ -974,10 +971,10 @@ function walkPattern(
   node: Node,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isContextCall = false
+  isUseOptionsCall = false
 ) {
   if (node.type === 'Identifier') {
-    bindings[node.name] = isContextCall
+    bindings[node.name] = isUseOptionsCall
       ? BindingTypes.CONST
       : BindingTypes.SETUP
   } else if (node.type === 'RestElement') {
@@ -991,7 +988,7 @@ function walkPattern(
     walkArrayPattern(node, bindings, isConst)
   } else if (node.type === 'AssignmentPattern') {
     if (node.left.type === 'Identifier') {
-      bindings[node.left.name] = isContextCall
+      bindings[node.left.name] = isUseOptionsCall
         ? BindingTypes.CONST
         : BindingTypes.SETUP
     } else {
diff --git a/packages/runtime-core/src/apiDefineContext.ts b/packages/runtime-core/src/helpers/useOptions.ts
similarity index 58%
rename from packages/runtime-core/src/apiDefineContext.ts
rename to packages/runtime-core/src/helpers/useOptions.ts
index 25d4bd95..172b2aaa 100644
--- a/packages/runtime-core/src/apiDefineContext.ts
+++ b/packages/runtime-core/src/helpers/useOptions.ts
@@ -1,5 +1,5 @@
-import { Slots } from './componentSlots'
-import { warn } from './warning'
+import { Slots } from '../componentSlots'
+import { warn } from '../warning'
 
 interface DefaultContext {
   props: Record<string, unknown>
@@ -8,7 +8,13 @@ interface DefaultContext {
   slots: Slots
 }
 
-export function defineContext<T extends Partial<DefaultContext> = {}>(
+/**
+ * Compile-time-only helper used for declaring options and retrieving props
+ * and the setup context inside <script setup>.
+ * This is stripped away in the compiled code and should never be actually
+ * called at runtime.
+ */
+export function useOptions<T extends Partial<DefaultContext> = {}>(
   opts?: any // TODO infer
 ): { [K in keyof DefaultContext]: T[K] extends {} ? T[K] : DefaultContext[K] } {
   if (__DEV__) {
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 0c4879e1..22bf9f2e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -43,7 +43,7 @@ export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
-export { defineContext } from './apiDefineContext'
+export { useOptions } from './helpers/useOptions'
 
 // Advanced API ----------------------------------------------------------------
 

From 6fc8d5d0ba79691b7814ecb472bd89c8a15a3d10 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 13 Nov 2020 00:01:44 -0500
Subject: [PATCH 20/27] wip: type inference for useOptions

---
 .../runtime-core/src/helpers/useOptions.ts    | 78 +++++++++++++--
 test-dts/useOptions.test-d.ts                 | 96 +++++++++++++++++++
 2 files changed, 168 insertions(+), 6 deletions(-)
 create mode 100644 test-dts/useOptions.test-d.ts

diff --git a/packages/runtime-core/src/helpers/useOptions.ts b/packages/runtime-core/src/helpers/useOptions.ts
index 172b2aaa..055f2807 100644
--- a/packages/runtime-core/src/helpers/useOptions.ts
+++ b/packages/runtime-core/src/helpers/useOptions.ts
@@ -1,22 +1,88 @@
+import { EmitFn, EmitsOptions } from '../componentEmits'
+import {
+  ComponentObjectPropsOptions,
+  ExtractPropTypes
+} from '../componentProps'
 import { Slots } from '../componentSlots'
+import { Directive } from '../directives'
 import { warn } from '../warning'
 
 interface DefaultContext {
-  props: Record<string, unknown>
+  props: {}
   attrs: Record<string, unknown>
   emit: (...args: any[]) => void
   slots: Slots
 }
 
+interface InferredContext<P, E> {
+  props: Readonly<P>
+  attrs: Record<string, unknown>
+  emit: EmitFn<E>
+  slots: Slots
+}
+
+type InferContext<T extends Partial<DefaultContext>, P, E> = {
+  [K in keyof DefaultContext]: T[K] extends {} ? T[K] : InferredContext<P, E>[K]
+}
+
+/**
+ * This is a subset of full options that are still useful in the context of
+ * <script setup>. Technically, other options can be used too, but are
+ * discouraged - if using TypeScript, we nudge users away from doing so by
+ * disallowing them in types.
+ */
+interface Options<E extends EmitsOptions, EE extends string> {
+  emits?: E | EE[]
+  name?: string
+  inhertiAttrs?: boolean
+  directives?: Record<string, Directive>
+}
+
 /**
  * Compile-time-only helper used for declaring options and retrieving props
- * and the setup context inside <script setup>.
+ * and the setup context inside `<script setup>`.
  * This is stripped away in the compiled code and should never be actually
  * called at runtime.
  */
-export function useOptions<T extends Partial<DefaultContext> = {}>(
-  opts?: any // TODO infer
-): { [K in keyof DefaultContext]: T[K] extends {} ? T[K] : DefaultContext[K] } {
+// overload 1: no props
+export function useOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string
+>(
+  options?: Options<E, EE> & {
+    props?: undefined
+  }
+): InferContext<T, {}, E>
+
+// overload 2: object props
+export function useOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  PP extends string = string,
+  P = Readonly<{ [key in PP]?: any }>
+>(
+  options?: Options<E, EE> & {
+    props?: PP[]
+  }
+): InferContext<T, P, E>
+
+// overload 3: object props
+export function useOptions<
+  T extends Partial<DefaultContext> = {},
+  E extends EmitsOptions = EmitsOptions,
+  EE extends string = string,
+  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions,
+  P = ExtractPropTypes<PP>
+>(
+  options?: Options<E, EE> & {
+    props?: PP
+  }
+): InferContext<T, P, E>
+
+// implementation
+export function useOptions() {
   if (__DEV__) {
     warn(
       `defineContext() is a compiler-hint helper that is only usable inside ` +
@@ -24,5 +90,5 @@ export function useOptions<T extends Partial<DefaultContext> = {}>(
         `and should not be used in final distributed code.`
     )
   }
-  return null as any
+  return 0 as any
 }
diff --git a/test-dts/useOptions.test-d.ts b/test-dts/useOptions.test-d.ts
new file mode 100644
index 00000000..8330c532
--- /dev/null
+++ b/test-dts/useOptions.test-d.ts
@@ -0,0 +1,96 @@
+import { expectType, useOptions, Slots, describe } from './index'
+
+describe('no args', () => {
+  const { props, attrs, emit, slots } = useOptions()
+  expectType<{}>(props)
+  expectType<Record<string, unknown>>(attrs)
+  expectType<(...args: any[]) => void>(emit)
+  expectType<Slots>(slots)
+
+  // @ts-expect-error
+  props.foo
+  // should be able to emit anything
+  emit('foo')
+  emit('bar')
+})
+
+describe('with type arg', () => {
+  const { props, attrs, emit, slots } = useOptions<{
+    props: {
+      foo: string
+    }
+    emit: (e: 'change') => void
+  }>()
+
+  // explicitly declared type should be refined
+  expectType<string>(props.foo)
+  // @ts-expect-error
+  props.bar
+
+  emit('change')
+  // @ts-expect-error
+  emit()
+  // @ts-expect-error
+  emit('bar')
+
+  // non explicitly declared type should fallback to default type
+  expectType<Record<string, unknown>>(attrs)
+  expectType<Slots>(slots)
+})
+
+// with runtime arg
+describe('with runtime arg (array syntax)', () => {
+  const { props, emit } = useOptions({
+    props: ['foo', 'bar'],
+    emits: ['foo', 'bar']
+  })
+
+  expectType<{
+    foo?: any
+    bar?: any
+  }>(props)
+  // @ts-expect-error
+  props.baz
+
+  emit('foo')
+  emit('bar', 123)
+  // @ts-expect-error
+  emit('baz')
+})
+
+describe('with runtime arg (object syntax)', () => {
+  const { props, emit } = useOptions({
+    props: {
+      foo: String,
+      bar: {
+        type: Number,
+        default: 1
+      },
+      baz: {
+        type: Array,
+        required: true
+      }
+    },
+    emits: {
+      foo: () => {},
+      bar: null
+    }
+  })
+
+  expectType<{
+    foo?: string
+    bar: number
+    baz: unknown[]
+  }>(props)
+
+  props.foo && props.foo + 'bar'
+  props.bar + 1
+  // @ts-expect-error should be readonly
+  props.bar++
+  props.baz.push(1)
+
+  emit('foo')
+  emit('bar')
+  // @ts-expect-error
+  emit('baz')
+})

From 8ba3a7de401bb0d79e281a5556ac92bfcd4b0231 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 13 Nov 2020 00:12:04 -0500
Subject: [PATCH 21/27] wip: fix dts tests

---
 packages/compiler-core/src/index.ts        | 3 ++-
 packages/compiler-sfc/src/compileScript.ts | 3 +--
 packages/template-explorer/src/options.ts  | 7 ++++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 7cc6219c..03388b1f 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -7,7 +7,8 @@ export {
   TransformOptions,
   CodegenOptions,
   HoistTransform,
-  BindingMetadata
+  BindingMetadata,
+  BindingTypes
 } from './options'
 export { baseParse, TextModes } from './parse'
 export {
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 70b502d5..a82db356 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1,5 +1,5 @@
 import MagicString from 'magic-string'
-import { BindingMetadata } from '@vue/compiler-core'
+import { BindingMetadata, BindingTypes } from '@vue/compiler-core'
 import { SFCDescriptor, SFCScriptBlock } from './parse'
 import { parse as _parse, ParserOptions, ParserPlugin } from '@babel/parser'
 import { babelParserDefaultPlugins, generateCodeFrame } from '@vue/shared'
@@ -26,7 +26,6 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
-import { BindingTypes } from 'packages/compiler-core/src/options'
 
 const USE_OPTIONS = 'useOptions'
 
diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index b94bee72..3428aace 100644
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -1,5 +1,6 @@
 import { h, reactive, createApp, ref } from 'vue'
 import { CompilerOptions } from '@vue/compiler-dom'
+import { BindingTypes } from '@vue/compiler-core'
 
 export const ssrMode = ref(false)
 
@@ -12,9 +13,9 @@ export const compilerOptions: CompilerOptions = reactive({
   scopeId: null,
   ssrCssVars: `{ color }`,
   bindingMetadata: {
-    TestComponent: 'setup',
-    foo: 'setup',
-    bar: 'props'
+    TestComponent: BindingTypes.SETUP,
+    foo: BindingTypes.SETUP,
+    bar: BindingTypes.PROPS
   }
 })
 

From 91d990d45a657ec2975f5863b8d3dc46fd5bf6ff Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 13 Nov 2020 00:14:52 -0500
Subject: [PATCH 22/27] chore: ignore template-explorer in dts tests

---
 test-dts/tsconfig.build.json | 6 +++++-
 test-dts/tsconfig.json       | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/test-dts/tsconfig.build.json b/test-dts/tsconfig.build.json
index 6747eb10..b41ea174 100644
--- a/test-dts/tsconfig.build.json
+++ b/test-dts/tsconfig.build.json
@@ -7,7 +7,11 @@
       "vue": ["../packages/vue/dist"]
     }
   },
-  "exclude": ["../packages/*/__tests__", "../packages/*/src"],
+  "exclude": [
+    "../packages/*/__tests__",
+    "../packages/*/src",
+    "../packages/template-explorer"
+  ],
   "include": [
     "../packages/global.d.ts",
     "../packages/*/dist",
diff --git a/test-dts/tsconfig.json b/test-dts/tsconfig.json
index 01732c5e..433de219 100644
--- a/test-dts/tsconfig.json
+++ b/test-dts/tsconfig.json
@@ -4,5 +4,5 @@
     "noEmit": true,
     "declaration": true
   },
-  "exclude": ["../packages/*/__tests__"]
+  "exclude": ["../packages/*/__tests__", "../packages/template-explorer"]
 }

From 1ff5960971a0a9bb75449d48a7c361d2f98ee401 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 13 Nov 2020 17:38:28 -0500
Subject: [PATCH 23/27] wip: useOptions -> defineOptions

---
 .../__snapshots__/compileScript.spec.ts.snap  | 78 +++++++++----------
 .../__tests__/compileScript.spec.ts           | 70 ++++++++---------
 packages/compiler-sfc/src/compileScript.ts    | 66 ++++++++--------
 .../useOptions.ts => apiDefineOptions.ts}     | 21 +++--
 packages/runtime-core/src/index.ts            |  2 +-
 ...ions.test-d.ts => defineOptions.test-d.ts} | 10 +--
 6 files changed, 123 insertions(+), 124 deletions(-)
 rename packages/runtime-core/src/{helpers/useOptions.ts => apiDefineOptions.ts} (85%)
 rename test-dts/{useOptions.test-d.ts => defineOptions.test-d.ts} (85%)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index c48e1ff4..a6db4207 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -56,7 +56,25 @@ return { color }
 }"
 `;
 
-exports[`SFC compile <script setup> errors should allow useOptions() referencing imported binding 1`] = `
+exports[`SFC compile <script setup> defineOptions() 1`] = `
+"export default {
+  props: {
+    foo: String
+  },
+  emit: ['a', 'b'],
+  setup(__props, { props, emit }) {
+
+
+
+const bar = 1
+
+return { props, emit, bar }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> errors should allow defineOptions() referencing imported binding 1`] = `
 "import { bar } from './bar'
           
 export default {
@@ -75,7 +93,7 @@ return { bar }
 }"
 `;
 
-exports[`SFC compile <script setup> errors should allow useOptions() referencing scope var 1`] = `
+exports[`SFC compile <script setup> errors should allow defineOptions() referencing scope var 1`] = `
 "export default {
   props: {
               foo: {
@@ -375,40 +393,7 @@ return { a, b, c, d, x }
 }"
 `;
 
-exports[`SFC compile <script setup> useOptions() 1`] = `
-"export default {
-  props: {
-    foo: String
-  },
-  emit: ['a', 'b'],
-  setup(__props, { props, emit }) {
-
-
-
-const bar = 1
-
-return { props, emit, bar }
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
-"import { defineComponent } from 'vue'
-export interface Foo {}
-        type Bar = {}
-      
-export default defineComponent({
-  setup() {
-
-        
-return {  }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> with TypeScript useOptions w/ runtime options 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ runtime options 1`] = `
 "import { defineComponent } from 'vue'
 
 
@@ -425,7 +410,7 @@ return { props, emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract emits (union) 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits (union) 1`] = `
 "import { Slots, defineComponent } from 'vue'
 
       
@@ -446,7 +431,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract emits 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits 1`] = `
 "import { Slots, defineComponent } from 'vue'
 
       
@@ -467,7 +452,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript useOptions w/ type / extract props 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract props 1`] = `
 "import { defineComponent } from 'vue'
 
       interface Test {}
@@ -503,6 +488,21 @@ export default defineComponent({
 
       
       
+return {  }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
+"import { defineComponent } from 'vue'
+export interface Foo {}
+        type Bar = {}
+      
+export default defineComponent({
+  setup() {
+
+        
 return {  }
 }
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index b1723687..958e81ec 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -36,11 +36,11 @@ describe('SFC compile <script setup>', () => {
     expect(content).toMatch('return { a, b, c, d, x }')
   })
 
-  test('useOptions()', () => {
+  test('defineOptions()', () => {
     const { content, bindings } = compile(`
 <script setup>
-import { useOptions } from 'vue'
-const { props, emit } = useOptions({
+import { defineOptions } from 'vue'
+const { props, emit } = defineOptions({
   props: {
     foo: String
   },
@@ -60,8 +60,8 @@ const bar = 1
       emit: 'const'
     })
 
-    // should remove useOptions import and call
-    expect(content).not.toMatch('useOptions')
+    // should remove defineOptions import and call
+    expect(content).not.toMatch('defineOptions')
     // should generate correct setup signature
     expect(content).toMatch(`setup(__props, { props, emit }) {`)
     // should include context options in default export
@@ -143,7 +143,7 @@ const bar = 1
       const { content } = compile(
         `
         <script setup>
-        import { ref, useOptions } from 'vue'
+        import { ref, defineOptions } from 'vue'
         import Foo from './Foo.vue'
         import other from './util'
         const count = ref(0)
@@ -183,11 +183,11 @@ const bar = 1
       assertCode(content)
     })
 
-    test('useOptions w/ runtime options', () => {
+    test('defineOptions w/ runtime options', () => {
       const { content } = compile(`
 <script setup lang="ts">
-import { useOptions } from 'vue'
-const { props, emit } = useOptions({
+import { defineOptions } from 'vue'
+const { props, emit } = defineOptions({
   props: { foo: String },
   emits: ['a', 'b']
 })
@@ -200,15 +200,15 @@ const { props, emit } = useOptions({
   setup(__props, { props, emit }) {`)
     })
 
-    test('useOptions w/ type / extract props', () => {
+    test('defineOptions w/ type / extract props', () => {
       const { content, bindings } = compile(`
       <script setup lang="ts">
-      import { useOptions } from 'vue'
+      import { defineOptions } from 'vue'
       interface Test {}
 
       type Alias = number[]
 
-      useOptions<{
+      defineOptions<{
         props: {
           string: string
           number: number
@@ -288,11 +288,11 @@ const { props, emit } = useOptions({
       })
     })
 
-    test('useOptions w/ type / extract emits', () => {
+    test('defineOptions w/ type / extract emits', () => {
       const { content } = compile(`
       <script setup lang="ts">
-      import { useOptions } from 'vue'
-      const { emit } = useOptions<{
+      import { defineOptions } from 'vue'
+      const { emit } = defineOptions<{
         emit: (e: 'foo' | 'bar') => void
       }>()
       </script>
@@ -302,11 +302,11 @@ const { props, emit } = useOptions({
       expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
     })
 
-    test('useOptions w/ type / extract emits (union)', () => {
+    test('defineOptions w/ type / extract emits (union)', () => {
       const { content } = compile(`
       <script setup lang="ts">
-      import { useOptions } from 'vue'
-      const { emit } = useOptions<{
+      import { defineOptions } from 'vue'
+      const { emit } = defineOptions<{
         emit: ((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)
       }>()
       </script>
@@ -633,21 +633,21 @@ const { props, emit } = useOptions({
       ).toThrow(`ref: statements can only contain assignment expressions`)
     })
 
-    test('useOptions() w/ both type and non-type args', () => {
+    test('defineOptions() w/ both type and non-type args', () => {
       expect(() => {
         compile(`<script setup lang="ts">
-        import { useOptions } from 'vue'
-        useOptions<{}>({})
+        import { defineOptions } from 'vue'
+        defineOptions<{}>({})
         </script>`)
       }).toThrow(`cannot accept both type and non-type arguments`)
     })
 
-    test('useOptions() referencing local var', () => {
+    test('defineOptions() referencing local var', () => {
       expect(() =>
         compile(`<script setup>
-        import { useOptions } from 'vue'
+        import { defineOptions } from 'vue'
         const bar = 1
-        useOptions({
+        defineOptions({
           props: {
             foo: {
               default: () => bar
@@ -658,24 +658,24 @@ const { props, emit } = useOptions({
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('useOptions() referencing ref declarations', () => {
+    test('defineOptions() referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
-        import { useOptions } from 'vue'
+        import { defineOptions } from 'vue'
         ref: bar = 1
-        useOptions({
+        defineOptions({
           props: { bar }
         })
       </script>`)
       ).toThrow(`cannot reference locally declared variables`)
     })
 
-    test('should allow useOptions() referencing scope var', () => {
+    test('should allow defineOptions() referencing scope var', () => {
       assertCode(
         compile(`<script setup>
-          import { useOptions } from 'vue'
+          import { defineOptions } from 'vue'
           const bar = 1
-          useOptions({
+          defineOptions({
             props: {
               foo: {
                 default: bar => bar + 1
@@ -686,12 +686,12 @@ const { props, emit } = useOptions({
       )
     })
 
-    test('should allow useOptions() referencing imported binding', () => {
+    test('should allow defineOptions() referencing imported binding', () => {
       assertCode(
         compile(`<script setup>
-          import { useOptions } from 'vue'
+          import { defineOptions } from 'vue'
           import { bar } from './bar'
-          useOptions({
+          defineOptions({
             props: {
               foo: {
                 default: () => bar
@@ -901,8 +901,8 @@ describe('SFC analyze <script> bindings', () => {
   it('works for script setup', () => {
     const { bindings } = compile(`
       <script setup>
-      import { useOptions } from 'vue'
-      useOptions({
+      import { defineOptions } from 'vue'
+      defineOptions({
         props: {
           foo: String,
         }
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index a82db356..5829e715 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -27,7 +27,7 @@ import { RawSourceMap } from 'source-map'
 import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 
-const USE_OPTIONS = 'useOptions'
+const DEFINE_OPTIONS = 'defineOptions'
 
 export interface SFCScriptCompileOptions {
   /**
@@ -147,7 +147,18 @@ export function compileScript(
   let optionsArg: ObjectExpression | undefined
   let optionsType: TSTypeLiteral | undefined
   let hasAwait = false
+  // context types to generate
+  let propsType = `{}`
+  let emitType = `(e: string, ...args: any[]) => void`
+  let slotsType = `Slots`
+  let attrsType = `Record<string, any>`
+  // props/emits declared via types
+  const typeDeclaredProps: Record<string, PropTypeData> = {}
+  const typeDeclaredEmits: Set<string> = new Set()
+  // record declared types for runtime props type generation
+  const declaredTypes: Record<string, string[]> = {}
 
+  // magic-string state
   const s = new MagicString(source)
   const startOffset = scriptSetup.loc.start.offset
   const endOffset = scriptSetup.loc.end.offset
@@ -182,14 +193,14 @@ export function compileScript(
     )
   }
 
-  function processUseOptions(node: Node): boolean {
+  function processDefineOptions(node: Node): boolean {
     if (
       node.type === 'CallExpression' &&
       node.callee.type === 'Identifier' &&
-      node.callee.name === USE_OPTIONS
+      node.callee.name === DEFINE_OPTIONS
     ) {
       if (hasOptionsCall) {
-        error(`duplicate ${USE_OPTIONS}() call`, node)
+        error(`duplicate ${DEFINE_OPTIONS}() call`, node)
       }
       hasOptionsCall = true
       const optsArg = node.arguments[0]
@@ -197,14 +208,17 @@ export function compileScript(
         if (optsArg.type === 'ObjectExpression') {
           optionsArg = optsArg
         } else {
-          error(`${USE_OPTIONS}() argument must be an object literal.`, optsArg)
+          error(
+            `${DEFINE_OPTIONS}() argument must be an object literal.`,
+            optsArg
+          )
         }
       }
       // context call has type parameters - infer runtime types from it
       if (node.typeParameters) {
         if (optionsArg) {
           error(
-            `${USE_OPTIONS}() cannot accept both type and non-type arguments ` +
+            `${DEFINE_OPTIONS}() cannot accept both type and non-type arguments ` +
               `at the same time. Use one or the other.`,
             node
           )
@@ -214,7 +228,7 @@ export function compileScript(
           optionsType = typeArg
         } else {
           error(
-            `type argument passed to ${USE_OPTIONS}() must be a literal type.`,
+            `type argument passed to ${DEFINE_OPTIONS}() must be a literal type.`,
             typeArg
           )
         }
@@ -427,18 +441,7 @@ export function compileScript(
     }
   }
 
-  let propsType = `{}`
-  let emitType = `(e: string, ...args: any[]) => void`
-  let slotsType = `Slots`
-  let attrsType = `Record<string, any>`
-
-  // props/emits declared via types
-  const typeDeclaredProps: Record<string, PropTypeData> = {}
-  const typeDeclaredEmits: Set<string> = new Set()
-  // record declared types for runtime props type generation
-  const declaredTypes: Record<string, string[]> = {}
-
-  // 3. parse <script setup> and  walk over top level statements
+  // 2. parse <script setup> and  walk over top level statements
   const scriptSetupAst = parse(
     scriptSetup.content,
     {
@@ -512,7 +515,7 @@ export function compileScript(
           specifier.imported.name
         const source = node.source.value
         const existing = userImports[local]
-        if (source === 'vue' && imported === USE_OPTIONS) {
+        if (source === 'vue' && imported === DEFINE_OPTIONS) {
           removed++
           s.remove(
             prev ? prev.end! + startOffset : specifier.start! + startOffset,
@@ -544,14 +547,14 @@ export function compileScript(
 
     if (
       node.type === 'ExpressionStatement' &&
-      processUseOptions(node.expression)
+      processDefineOptions(node.expression)
     ) {
       s.remove(node.start! + startOffset, node.end! + startOffset)
     }
 
     if (node.type === 'VariableDeclaration' && !node.declare) {
       for (const decl of node.declarations) {
-        if (decl.init && processUseOptions(decl.init)) {
+        if (decl.init && processDefineOptions(decl.init)) {
           optionsExp = scriptSetup.content.slice(decl.id.start!, decl.id.end!)
           if (node.declarations.length === 1) {
             s.remove(node.start! + startOffset, node.end! + startOffset)
@@ -618,7 +621,7 @@ export function compileScript(
     }
   }
 
-  // 4. Do a full walk to rewrite identifiers referencing let exports with ref
+  // 3. Do a full walk to rewrite identifiers referencing let exports with ref
   // value access
   if (enableRefSugar && Object.keys(refBindings).length) {
     for (const node of scriptSetupAst) {
@@ -644,7 +647,7 @@ export function compileScript(
     }
   }
 
-  // 5. extract runtime props/emits code from setup context type
+  // 4. extract runtime props/emits code from setup context type
   if (optionsType) {
     for (const m of optionsType.members) {
       if (m.type === 'TSPropertySignature' && m.key.type === 'Identifier') {
@@ -690,7 +693,7 @@ export function compileScript(
     walkIdentifiers(optionsArg, id => {
       if (setupBindings[id.name]) {
         error(
-          `\`${USE_OPTIONS}()\` in <script setup> cannot reference locally ` +
+          `\`${DEFINE_OPTIONS}()\` in <script setup> cannot reference locally ` +
             `declared variables because it will be hoisted outside of the ` +
             `setup() function. If your component options requires initialization ` +
             `in the module scope, use a separate normal <script> to export ` +
@@ -739,7 +742,7 @@ export function compileScript(
     allBindings[key] = true
   }
 
-  // 9. inject `useCssVars` calls
+  // 8. inject `useCssVars` calls
   if (hasCssVars) {
     helperImports.add(`useCssVars`)
     for (const style of styles) {
@@ -753,7 +756,7 @@ export function compileScript(
     }
   }
 
-  // 10. analyze binding metadata
+  // 9. analyze binding metadata
   if (scriptAst) {
     Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
   }
@@ -774,7 +777,7 @@ export function compileScript(
     bindingMetadata[key] = setupBindings[key]
   }
 
-  // 11. generate return statement
+  // 10. generate return statement
   let returned
   if (options.inlineTemplate) {
     if (sfc.template) {
@@ -812,7 +815,7 @@ export function compileScript(
   }
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
-  // 12. finalize default export
+  // 11. finalize default export
   let runtimeOptions = ``
   if (optionsArg) {
     runtimeOptions = `\n  ${scriptSetup.content
@@ -822,7 +825,6 @@ export function compileScript(
     runtimeOptions =
       genRuntimeProps(typeDeclaredProps) + genRuntimeEmits(typeDeclaredEmits)
   }
-
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
@@ -861,7 +863,7 @@ export function compileScript(
     }
   }
 
-  // 13. finalize Vue helper imports
+  // 12. finalize Vue helper imports
   // TODO account for cases where user imports a helper with the same name
   // from a non-vue source
   const helpers = [...helperImports].filter(i => !userImports[i])
@@ -897,7 +899,7 @@ function walkDeclaration(
         init &&
         init.type === 'CallExpression' &&
         init.callee.type === 'Identifier' &&
-        init.callee.name === USE_OPTIONS
+        init.callee.name === DEFINE_OPTIONS
       )
       if (id.type === 'Identifier') {
         bindings[id.name] =
diff --git a/packages/runtime-core/src/helpers/useOptions.ts b/packages/runtime-core/src/apiDefineOptions.ts
similarity index 85%
rename from packages/runtime-core/src/helpers/useOptions.ts
rename to packages/runtime-core/src/apiDefineOptions.ts
index 055f2807..624b1167 100644
--- a/packages/runtime-core/src/helpers/useOptions.ts
+++ b/packages/runtime-core/src/apiDefineOptions.ts
@@ -1,11 +1,8 @@
-import { EmitFn, EmitsOptions } from '../componentEmits'
-import {
-  ComponentObjectPropsOptions,
-  ExtractPropTypes
-} from '../componentProps'
-import { Slots } from '../componentSlots'
-import { Directive } from '../directives'
-import { warn } from '../warning'
+import { EmitFn, EmitsOptions } from './componentEmits'
+import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
+import { Slots } from './componentSlots'
+import { Directive } from './directives'
+import { warn } from './warning'
 
 interface DefaultContext {
   props: {}
@@ -45,7 +42,7 @@ interface Options<E extends EmitsOptions, EE extends string> {
  * called at runtime.
  */
 // overload 1: no props
-export function useOptions<
+export function defineOptions<
   T extends Partial<DefaultContext> = {},
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string
@@ -56,7 +53,7 @@ export function useOptions<
 ): InferContext<T, {}, E>
 
 // overload 2: object props
-export function useOptions<
+export function defineOptions<
   T extends Partial<DefaultContext> = {},
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string,
@@ -69,7 +66,7 @@ export function useOptions<
 ): InferContext<T, P, E>
 
 // overload 3: object props
-export function useOptions<
+export function defineOptions<
   T extends Partial<DefaultContext> = {},
   E extends EmitsOptions = EmitsOptions,
   EE extends string = string,
@@ -82,7 +79,7 @@ export function useOptions<
 ): InferContext<T, P, E>
 
 // implementation
-export function useOptions() {
+export function defineOptions() {
   if (__DEV__) {
     warn(
       `defineContext() is a compiler-hint helper that is only usable inside ` +
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 22bf9f2e..82885027 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -43,7 +43,7 @@ export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
-export { useOptions } from './helpers/useOptions'
+export { defineOptions } from './apiDefineOptions'
 
 // Advanced API ----------------------------------------------------------------
 
diff --git a/test-dts/useOptions.test-d.ts b/test-dts/defineOptions.test-d.ts
similarity index 85%
rename from test-dts/useOptions.test-d.ts
rename to test-dts/defineOptions.test-d.ts
index 8330c532..d1125db3 100644
--- a/test-dts/useOptions.test-d.ts
+++ b/test-dts/defineOptions.test-d.ts
@@ -1,7 +1,7 @@
-import { expectType, useOptions, Slots, describe } from './index'
+import { expectType, defineOptions, Slots, describe } from './index'
 
 describe('no args', () => {
-  const { props, attrs, emit, slots } = useOptions()
+  const { props, attrs, emit, slots } = defineOptions()
   expectType<{}>(props)
   expectType<Record<string, unknown>>(attrs)
   expectType<(...args: any[]) => void>(emit)
@@ -15,7 +15,7 @@ describe('no args', () => {
 })
 
 describe('with type arg', () => {
-  const { props, attrs, emit, slots } = useOptions<{
+  const { props, attrs, emit, slots } = defineOptions<{
     props: {
       foo: string
     }
@@ -40,7 +40,7 @@ describe('with type arg', () => {
 
 // with runtime arg
 describe('with runtime arg (array syntax)', () => {
-  const { props, emit } = useOptions({
+  const { props, emit } = defineOptions({
     props: ['foo', 'bar'],
     emits: ['foo', 'bar']
   })
@@ -59,7 +59,7 @@ describe('with runtime arg (array syntax)', () => {
 })
 
 describe('with runtime arg (object syntax)', () => {
-  const { props, emit } = useOptions({
+  const { props, emit } = defineOptions({
     props: {
       foo: String,
       bar: {

From 0e59770b9282992f6a5af4d8fef33dafb948fc8b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 14 Nov 2020 12:49:35 -0500
Subject: [PATCH 24/27] feat(runtime-core): explicit expose API

---
 .../runtime-core/__tests__/apiExpose.spec.ts  | 98 +++++++++++++++++++
 packages/runtime-core/src/component.ts        | 20 +++-
 packages/runtime-core/src/componentOptions.ts | 17 +++-
 packages/runtime-core/src/renderer.ts         |  4 +-
 4 files changed, 132 insertions(+), 7 deletions(-)
 create mode 100644 packages/runtime-core/__tests__/apiExpose.spec.ts

diff --git a/packages/runtime-core/__tests__/apiExpose.spec.ts b/packages/runtime-core/__tests__/apiExpose.spec.ts
new file mode 100644
index 00000000..febf3452
--- /dev/null
+++ b/packages/runtime-core/__tests__/apiExpose.spec.ts
@@ -0,0 +1,98 @@
+import { nodeOps, render } from '@vue/runtime-test'
+import { defineComponent, h, ref } from '../src'
+
+describe('api: expose', () => {
+  test('via setup context', () => {
+    const Child = defineComponent({
+      render() {},
+      setup(_, { expose }) {
+        expose({
+          foo: ref(1),
+          bar: ref(2)
+        })
+        return {
+          bar: ref(3),
+          baz: ref(4)
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('via options', () => {
+    const Child = defineComponent({
+      render() {},
+      data() {
+        return {
+          foo: 1
+        }
+      },
+      setup() {
+        return {
+          bar: ref(2),
+          baz: ref(3)
+        }
+      },
+      expose: ['foo', 'bar']
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('options + context', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: ['foo'],
+      data() {
+        return {
+          foo: 1
+        }
+      },
+      setup(_, { expose }) {
+        expose({
+          bar: ref(2)
+        })
+        return {
+          bar: ref(3),
+          baz: ref(4)
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+})
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 8f089eb4..af4c6b2f 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -105,7 +105,7 @@ export interface ComponentInternalOptions {
 export interface FunctionalComponent<P = {}, E extends EmitsOptions = {}>
   extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: SetupContext<E>): any
+  (props: P, ctx: Omit<SetupContext<E>, 'expose'>): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
@@ -171,6 +171,7 @@ export interface SetupContext<E = EmitsOptions> {
   attrs: Data
   slots: Slots
   emit: EmitFn<E>
+  expose: (exposed: Record<string, any>) => void
 }
 
 /**
@@ -270,6 +271,9 @@ export interface ComponentInternalInstance {
   // main proxy that serves as the public instance (`this`)
   proxy: ComponentPublicInstance | null
 
+  // exposed properties via expose()
+  exposed: Record<string, any> | null
+
   /**
    * alternative proxy used only for runtime-compiled render functions using
    * `with` block
@@ -415,6 +419,7 @@ export function createComponentInstance(
     update: null!, // will be set synchronously right after creation
     render: null,
     proxy: null,
+    exposed: null,
     withProxy: null,
     effects: null,
     provides: parent ? parent.provides : Object.create(appContext.provides),
@@ -731,6 +736,13 @@ const attrHandlers: ProxyHandler<Data> = {
 }
 
 function createSetupContext(instance: ComponentInternalInstance): SetupContext {
+  const expose: SetupContext['expose'] = exposed => {
+    if (__DEV__ && instance.exposed) {
+      warn(`expose() should be called only once per setup().`)
+    }
+    instance.exposed = proxyRefs(exposed)
+  }
+
   if (__DEV__) {
     // We use getters in dev in case libs like test-utils overwrite instance
     // properties (overwrites should not be done in prod)
@@ -743,13 +755,15 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
       },
       get emit() {
         return (event: string, ...args: any[]) => instance.emit(event, ...args)
-      }
+      },
+      expose
     })
   } else {
     return {
       attrs: instance.attrs,
       slots: instance.slots,
-      emit: instance.emit
+      emit: instance.emit,
+      expose
     }
   }
 }
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index ee4062ba..e3dacf7b 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -41,7 +41,9 @@ import {
   reactive,
   ComputedGetter,
   WritableComputedOptions,
-  toRaw
+  toRaw,
+  proxyRefs,
+  toRef
 } from '@vue/reactivity'
 import {
   ComponentObjectPropsOptions,
@@ -110,6 +112,8 @@ export interface ComponentOptionsBase<
   directives?: Record<string, Directive>
   inheritAttrs?: boolean
   emits?: (E | EE[]) & ThisType<void>
+  // TODO infer public instance type based on exposed keys
+  expose?: string[]
   serverPrefetch?(): Promise<any>
 
   // Internal ------------------------------------------------------------------
@@ -461,7 +465,9 @@ export function applyOptions(
     render,
     renderTracked,
     renderTriggered,
-    errorCaptured
+    errorCaptured,
+    // public API
+    expose
   } = options
 
   const publicThis = instance.proxy!
@@ -736,6 +742,13 @@ export function applyOptions(
   if (unmounted) {
     onUnmounted(unmounted.bind(publicThis))
   }
+
+  if (!asMixin && expose) {
+    const exposed = instance.exposed || (instance.exposed = proxyRefs({}))
+    expose.forEach(key => {
+      exposed[key] = toRef(publicThis, key as any)
+    })
+  }
 }
 
 function callSyncHook(
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index f0182c16..9c3b6eef 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -306,12 +306,12 @@ export const setRef = (
     return
   }
 
-  let value: ComponentPublicInstance | RendererNode | null
+  let value: ComponentPublicInstance | RendererNode | Record<string, any> | null
   if (!vnode) {
     value = null
   } else {
     if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-      value = vnode.component!.proxy
+      value = vnode.component!.exposed || vnode.component!.proxy
     } else {
       value = vnode.el
     }

From a603d56970bb57f0107f2ab1af32b485b1adb2b8 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 14 Nov 2020 12:55:21 -0500
Subject: [PATCH 25/27] wip: make `<script setup>` closed by default

---
 packages/compiler-sfc/src/compileScript.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 5829e715..47420ca3 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -816,13 +816,14 @@ export function compileScript(
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 
   // 11. finalize default export
-  let runtimeOptions = ``
+  // expose: [] makes <script setup> components "closed" by default.
+  let runtimeOptions = `\n  expose: [],`
   if (optionsArg) {
-    runtimeOptions = `\n  ${scriptSetup.content
+    runtimeOptions += `\n  ${scriptSetup.content
       .slice(optionsArg.start! + 1, optionsArg.end! - 1)
       .trim()},`
   } else if (optionsType) {
-    runtimeOptions =
+    runtimeOptions +=
       genRuntimeProps(typeDeclaredProps) + genRuntimeEmits(typeDeclaredEmits)
   }
   if (isTS) {

From b79a06c60598038714ddb0cc3293b5d9be3120f6 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 16 Nov 2020 11:28:37 -0500
Subject: [PATCH 26/27] wip: optimize expose

---
 .../runtime-core/__tests__/apiExpose.spec.ts  | 46 +++++++++++++++++++
 packages/runtime-core/src/componentOptions.ts | 18 ++++++--
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-core/__tests__/apiExpose.spec.ts b/packages/runtime-core/__tests__/apiExpose.spec.ts
index febf3452..7695360b 100644
--- a/packages/runtime-core/__tests__/apiExpose.spec.ts
+++ b/packages/runtime-core/__tests__/apiExpose.spec.ts
@@ -95,4 +95,50 @@ describe('api: expose', () => {
     expect(childRef.value.bar).toBe(2)
     expect(childRef.value.baz).toBeUndefined()
   })
+
+  test('options: empty', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: [],
+      data() {
+        return {
+          foo: 1
+        }
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect('foo' in childRef.value).toBe(false)
+  })
+
+  test('options: empty + setup context', () => {
+    const Child = defineComponent({
+      render() {},
+      expose: [],
+      setup(_, { expose }) {
+        expose({
+          foo: 1
+        })
+      }
+    })
+
+    const childRef = ref()
+    const Parent = {
+      setup() {
+        return () => h(Child, { ref: childRef })
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+  })
 })
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 8a158ee6..dd95e29a 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -743,11 +743,19 @@ export function applyOptions(
     onUnmounted(unmounted.bind(publicThis))
   }
 
-  if (!asMixin && expose) {
-    const exposed = instance.exposed || (instance.exposed = proxyRefs({}))
-    expose.forEach(key => {
-      exposed[key] = toRef(publicThis, key as any)
-    })
+  if (isArray(expose)) {
+    if (!asMixin) {
+      if (expose.length) {
+        const exposed = instance.exposed || (instance.exposed = proxyRefs({}))
+        expose.forEach(key => {
+          exposed[key] = toRef(publicThis, key as any)
+        })
+      } else if (!instance.exposed) {
+        instance.exposed = EMPTY_OBJ
+      }
+    } else if (__DEV__) {
+      warn(`The \`expose\` option is ignored when used in mixins.`)
+    }
   }
 }
 

From cea8b25fedae3e3aa4e67067de13188b3e7a448a Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 16 Nov 2020 11:35:30 -0500
Subject: [PATCH 27/27] wip: fix useCssVars helper call + tests

---
 .../__snapshots__/compileScript.spec.ts.snap  | 124 +++++++++++-------
 .../__tests__/compileScript.spec.ts           |  48 +++----
 packages/compiler-sfc/src/compileScript.ts    |  38 ++++--
 packages/compiler-sfc/src/genCssVars.ts       |   6 +-
 4 files changed, 128 insertions(+), 88 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index a6db4207..baac4d58 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
 "const __default__ = { setup() {} }
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -18,9 +18,9 @@ exports[`SFC compile <script setup> CSS vars injection <script> w/ default expor
           // export default {}
           const __default__ = {}
         
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -32,9 +32,9 @@ export default __default__"
 exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
 "const a = 1
 const __default__ = {}
-import { useCssVars as __useCssVars__ } from 'vue'
+import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
-__useCssVars__(_ctx => ({ color: _ctx.color }))
+_useCssVars(_ctx => ({ color: _ctx.color }))
 }
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -44,12 +44,13 @@ export default __default__"
 `;
 
 exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
-"import { useCssVars } from 'vue'
+"import { useCssVars as _useCssVars } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 const color = 'red'
-__useCssVars__(_ctx => ({ color }))
+_useCssVars(_ctx => ({ color }))
 return { color }
 }
 
@@ -58,6 +59,7 @@ return { color }
 
 exports[`SFC compile <script setup> defineOptions() 1`] = `
 "export default {
+  expose: [],
   props: {
     foo: String
   },
@@ -78,6 +80,7 @@ exports[`SFC compile <script setup> errors should allow defineOptions() referenc
 "import { bar } from './bar'
           
 export default {
+  expose: [],
   props: {
               foo: {
                 default: () => bar
@@ -95,6 +98,7 @@ return { bar }
 
 exports[`SFC compile <script setup> errors should allow defineOptions() referencing scope var 1`] = `
 "export default {
+  expose: [],
   props: {
               foo: {
                 default: bar => bar + 1
@@ -112,12 +116,14 @@ return { bar }
 `;
 
 exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
+import { ref } from 'vue'
       
 export default {
+  expose: [],
   setup() {
 
-      const foo = ref(1)
+      const foo = _ref(1)
       
 return { foo, ref }
 }
@@ -129,6 +135,7 @@ exports[`SFC compile <script setup> imports import dedupe between <script> and <
 "import { x } from './x'
         
 export default {
+  expose: [],
   setup() {
 
         x()
@@ -144,6 +151,7 @@ exports[`SFC compile <script setup> imports should extract comment for import or
         import b from 'b'
         
 export default {
+  expose: [],
   setup() {
 
         
@@ -156,6 +164,7 @@ return { a, b }
 exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
 "import { ref } from 'vue'
 export default {
+  expose: [],
   setup() {
 
 return { ref }
@@ -172,6 +181,7 @@ import { ref } from 'vue'
         import other from './util'
         
 export default {
+  expose: [],
   setup() {
 
         const count = ref(0)
@@ -197,6 +207,7 @@ const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /
 import { ref } from 'vue'
         
 export default {
+  expose: [],
   setup() {
 
         const count = ref(0)
@@ -213,12 +224,13 @@ return (_ctx, _cache, $props, $setup, $data, $options) => {
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const a = ref(1)
+      const a = _ref(1)
       console.log(a.value)
       function get() {
         return a.value + 1
@@ -231,15 +243,16 @@ return { a, get }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const n = ref(1), [__a, __b = 1, ...__c] = useFoo()
-const a = ref(__a);
-const b = ref(__b);
-const c = ref(__c);
+      const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
+const a = _ref(__a);
+const b = _ref(__b);
+const c = _ref(__c);
       console.log(n.value, a.value, b.value, c.value)
       
 return { n, a, b, c }
@@ -249,14 +262,15 @@ return { n, a, b, c }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const foo = ref()
-      const a = ref(1)
-      const b = ref({
+      const foo = _ref()
+      const a = _ref(1)
+      const b = _ref({
         count: 0
       })
       let c = () => {}
@@ -269,12 +283,13 @@ return { foo, a, b, c, d }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const a = ref(1), b = ref(2), c = ref({
+      const a = _ref(1), b = _ref(2), c = _ref({
         count: 0
       })
       
@@ -285,13 +300,14 @@ return { a, b, c }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const a = ref(1)
-      const b = ref({ count: 0 })
+      const a = _ref(1)
+      const b = _ref({ count: 0 })
       function inc() {
         a.value++
         a.value = a.value + 1
@@ -306,16 +322,17 @@ return { a, b, inc }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
       const [{ a: { b: __b }}] = useFoo()
-const b = ref(__b);
+const b = _ref(__b);
       const { c: [__d, __e] } = useBar()
-const d = ref(__d);
-const e = ref(__e);
+const d = _ref(__d);
+const e = _ref(__e);
       console.log(b.value, d.value, e.value)
       
 return { b, d, e }
@@ -325,17 +342,18 @@ return { b, d, e }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const 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 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);
       console.log(n.value, a.value, c.value, d.value, f.value, g.value)
       
 return { n, a, c, d, f, g }
@@ -346,6 +364,7 @@ return { n, a, c, d, f, g }
 
 exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
 "export default {
+  expose: [],
   setup() {
 
       foo: a = 1, b = 2, c = {
@@ -359,12 +378,13 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = `
-"import { ref } from 'vue'
+"import { ref as _ref } from 'vue'
 
 export default {
+  expose: [],
   setup() {
 
-      const a = ref(1)
+      const a = _ref(1)
       const b = { a: a.value }
       function test() {
         const { a } = b
@@ -380,6 +400,7 @@ exports[`SFC compile <script setup> should expose top level declarations 1`] = `
 "import { x } from './x'
       
 export default {
+  expose: [],
   setup() {
 
       let a = 1
@@ -394,10 +415,11 @@ return { a, b, c, d, x }
 `;
 
 exports[`SFC compile <script setup> with TypeScript defineOptions w/ runtime options 1`] = `
-"import { defineComponent } from 'vue'
+"import { defineComponent as _defineComponent } from 'vue'
 
 
-export default defineComponent({
+export default _defineComponent({
+  expose: [],
   props: { foo: String },
   emits: ['a', 'b'],
   setup(__props, { props, emit }) {
@@ -411,10 +433,11 @@ return { props, emit }
 `;
 
 exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits (union) 1`] = `
-"import { Slots, defineComponent } from 'vue'
+"import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
 
       
-export default defineComponent({
+export default _defineComponent({
+  expose: [],
   emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
   setup(__props, { emit }: {
   props: {},
@@ -432,10 +455,11 @@ return { emit }
 `;
 
 exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits 1`] = `
-"import { Slots, defineComponent } from 'vue'
+"import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
 
       
-export default defineComponent({
+export default _defineComponent({
+  expose: [],
   emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
   setup(__props, { emit }: {
   props: {},
@@ -453,14 +477,15 @@ return { emit }
 `;
 
 exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract props 1`] = `
-"import { defineComponent } from 'vue'
+"import { defineComponent as _defineComponent } from 'vue'
 
       interface Test {}
 
       type Alias = number[]
 
       
-export default defineComponent({
+export default _defineComponent({
+  expose: [],
   props: {
     string: { type: String, required: true },
     number: { type: Number, required: true },
@@ -495,11 +520,12 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
-"import { defineComponent } from 'vue'
+"import { defineComponent as _defineComponent } from 'vue'
 export interface Foo {}
         type Bar = {}
       
-export default defineComponent({
+export default _defineComponent({
+  expose: [],
   setup() {
 
         
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 958e81ec..5a8e24c4 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -66,6 +66,7 @@ const bar = 1
     expect(content).toMatch(`setup(__props, { props, emit }) {`)
     // should include context options in default export
     expect(content).toMatch(`export default {
+  expose: [],
   props: {
     foo: String
   },
@@ -194,7 +195,8 @@ const { props, emit } = defineOptions({
 </script>
       `)
       assertCode(content)
-      expect(content).toMatch(`export default defineComponent({
+      expect(content).toMatch(`export default _defineComponent({
+  expose: [],
   props: { foo: String },
   emits: ['a', 'b'],
   setup(__props, { props, emit }) {`)
@@ -410,14 +412,14 @@ const { props, emit } = defineOptions({
       let c = () => {}
       let d
       </script>`)
-      expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).toMatch(`import { ref as _ref } from 'vue'`)
       expect(content).not.toMatch(`ref: foo`)
       expect(content).not.toMatch(`ref: a`)
       expect(content).not.toMatch(`ref: b`)
-      expect(content).toMatch(`const foo = ref()`)
-      expect(content).toMatch(`const a = ref(1)`)
+      expect(content).toMatch(`const foo = _ref()`)
+      expect(content).toMatch(`const a = _ref(1)`)
       expect(content).toMatch(`
-      const b = ref({
+      const b = _ref({
         count: 0
       })
       `)
@@ -441,7 +443,7 @@ const { props, emit } = defineOptions({
       }
       </script>`)
       expect(content).toMatch(`
-      const a = ref(1), b = ref(2), c = ref({
+      const a = _ref(1), b = _ref(2), c = _ref({
         count: 0
       })
       `)
@@ -526,15 +528,15 @@ const { props, emit } = defineOptions({
       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()`
+        `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(`\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)`
       )
@@ -556,11 +558,11 @@ const { props, emit } = defineOptions({
       console.log(n, a, b, c)
       </script>`)
       expect(content).toMatch(
-        `const n = ref(1), [__a, __b = 1, ...__c] = useFoo()`
+        `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(`\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({
@@ -580,11 +582,11 @@ const { props, emit } = defineOptions({
       </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).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',
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 47420ca3..a049d205 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -24,7 +24,11 @@ import {
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
-import { genCssVarsCode, injectCssVarsCalls } from './genCssVars'
+import {
+  CSS_VARS_HELPER,
+  genCssVarsCode,
+  injectCssVarsCalls
+} from './genCssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 
 const DEFINE_OPTIONS = 'defineOptions'
@@ -165,6 +169,11 @@ export function compileScript(
   const scriptStartOffset = script && script.loc.start.offset
   const scriptEndOffset = script && script.loc.end.offset
 
+  function helper(key: string): string {
+    helperImports.add(key)
+    return `_${key}`
+  }
+
   function parse(
     input: string,
     options: ParserOptions,
@@ -240,11 +249,10 @@ export function compileScript(
 
   function processRefExpression(exp: Expression, statement: LabeledStatement) {
     if (exp.type === 'AssignmentExpression') {
-      helperImports.add('ref')
       const { left, right } = exp
       if (left.type === 'Identifier') {
         registerRefBinding(left)
-        s.prependRight(right.start! + startOffset, `ref(`)
+        s.prependRight(right.start! + startOffset, `${helper('ref')}(`)
         s.appendLeft(right.end! + startOffset, ')')
       } else if (left.type === 'ObjectPattern') {
         // remove wrapping parens
@@ -272,7 +280,7 @@ export function compileScript(
       exp.expressions.forEach(e => processRefExpression(e, statement))
     } else if (exp.type === 'Identifier') {
       registerRefBinding(exp)
-      s.appendLeft(exp.end! + startOffset, ` = ref()`)
+      s.appendLeft(exp.end! + startOffset, ` = ${helper('ref')}()`)
     } else {
       error(`ref: statements can only contain assignment expressions.`, exp)
     }
@@ -326,7 +334,7 @@ export function compileScript(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,
-          `\nconst ${nameId.name} = ref(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
         )
       }
     }
@@ -360,7 +368,7 @@ export function compileScript(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,
-          `\nconst ${nameId.name} = ref(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
         )
       }
     }
@@ -744,7 +752,7 @@ export function compileScript(
 
   // 8. inject `useCssVars` calls
   if (hasCssVars) {
-    helperImports.add(`useCssVars`)
+    helperImports.add(CSS_VARS_HELPER)
     for (const style of styles) {
       const vars = style.attrs.vars
       if (typeof vars === 'string') {
@@ -829,7 +837,6 @@ export function compileScript(
   if (isTS) {
     // for TS, make sure the exported type is still valid type with
     // correct props information
-    helperImports.add(`defineComponent`)
     // we have to use object spread for types to be merged properly
     // user's TS setting should compile it down to proper targets
     const def = defaultExport ? `\n  ...${defaultTempVar},` : ``
@@ -838,7 +845,9 @@ export function compileScript(
     // this allows `import { setup } from '*.vue'` for testing purposes.
     s.prependLeft(
       startOffset,
-      `\nexport default defineComponent({${def}${runtimeOptions}\n  ${
+      `\nexport default ${helper(
+        `defineComponent`
+      )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
       }setup(${args}) {\n`
     )
@@ -865,11 +874,12 @@ export function compileScript(
   }
 
   // 12. finalize Vue helper imports
-  // TODO account for cases where user imports a helper with the same name
-  // from a non-vue source
-  const helpers = [...helperImports].filter(i => !userImports[i])
-  if (helpers.length) {
-    s.prepend(`import { ${helpers.join(', ')} } from 'vue'\n`)
+  if (helperImports.size > 0) {
+    s.prepend(
+      `import { ${[...helperImports]
+        .map(h => `${h} as _${h}`)
+        .join(', ')} } from 'vue'\n`
+    )
   }
 
   s.trim()
diff --git a/packages/compiler-sfc/src/genCssVars.ts b/packages/compiler-sfc/src/genCssVars.ts
index 3d926cf5..69d1457f 100644
--- a/packages/compiler-sfc/src/genCssVars.ts
+++ b/packages/compiler-sfc/src/genCssVars.ts
@@ -10,6 +10,8 @@ import { SFCDescriptor } from './parse'
 import { rewriteDefault } from './rewriteDefault'
 import { ParserPlugin } from '@babel/parser'
 
+export const CSS_VARS_HELPER = `useCssVars`
+
 export function genCssVarsCode(
   varsExp: string,
   scoped: boolean,
@@ -38,7 +40,7 @@ export function genCssVarsCode(
           })
           .join('')
 
-  return `__useCssVars__(_ctx => (${transformedString})${
+  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString})${
     scoped ? `, true` : ``
   })`
 }
@@ -65,7 +67,7 @@ export function injectCssVarsCalls(
 
   return (
     script +
-    `\nimport { useCssVars as __useCssVars__ } from 'vue'\n` +
+    `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
     `const __injectCSSVars__ = () => {\n${calls}}\n` +
     `const __setup__ = __default__.setup\n` +
     `__default__.setup = __setup__\n` +