feat(sfc): support referenced types for defineEmits

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

@@ -746,10 +746,111 @@ return { a, b, c, d, x }
 }"
 `;
 
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported interface) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+export interface Emits { (e: 'foo' | 'bar'): void }
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported type alias) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+export type Emits = { (e: 'foo' | 'bar'): void }
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (interface) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Emits { (e: 'foo' | 'bar'): void }
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced exported function type) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+export type Emits = (e: 'foo' | 'bar') => void
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced function type) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Emits = (e: 'foo' | 'bar') => void
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type alias) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Emits = { (e: 'foo' | 'bar'): void }
+      
+export default _defineComponent({
+  emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
+  setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
+  expose()
+
+      
+      
+return { emit }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type literal w/ call signatures) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-      
 export default _defineComponent({
   emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
   setup(__props, { expose, emit }: { emit: ({(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}), expose: any, slots: any, attrs: any }) {
@@ -766,7 +867,6 @@ return { emit }
 exports[`SFC compile <script setup> with TypeScript defineEmits w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-      
 export default _defineComponent({
   emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
   setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
@@ -839,8 +939,7 @@ return {  }
 
 exports[`SFC compile <script setup> with TypeScript defineProps w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-
+interface Test {}
-      interface Test {}
 
       type Alias = number[]
 
@@ -927,7 +1026,6 @@ return {  }
 exports[`SFC compile <script setup> with TypeScript defineProps/Emit w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-
 export default _defineComponent({
   props: { foo: String },
   emits: ['a', 'b'],

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

@@ -19,7 +19,6 @@ describe('SFC compile <script setup>', () => {
   test('defineProps()', () => {
     const { content, bindings } = compile(`
 <script setup>
-import { defineProps } from 'vue'
 const props = defineProps({
   foo: String
 })
@@ -51,7 +50,6 @@ const bar = 1
   test('defineProps w/ external definition', () => {
     const { content } = compile(`
     <script setup>
-    import { defineProps } from 'vue'
     import { propsModel } from './props'
     const props = defineProps(propsModel)
     </script>
@@ -64,7 +62,6 @@ const bar = 1
   test('defineEmit() (deprecated)', () => {
     const { content, bindings } = compile(`
 <script setup>
-import { defineEmit } from 'vue'
 const myEmit = defineEmit(['foo', 'bar'])
 </script>
   `)
@@ -84,7 +81,6 @@ const myEmit = defineEmit(['foo', 'bar'])
   test('defineEmits()', () => {
     const { content, bindings } = compile(`
 <script setup>
-import { defineEmits } from 'vue'
 const myEmit = defineEmits(['foo', 'bar'])
 </script>
   `)
@@ -104,7 +100,6 @@ const myEmit = defineEmits(['foo', 'bar'])
   test('defineExpose()', () => {
     const { content } = compile(`
 <script setup>
-import { defineExpose } from 'vue'
 defineExpose({ foo: 123 })
 </script>
   `)
@@ -170,7 +165,7 @@ defineExpose({ foo: 123 })
     test('should allow defineProps/Emit at the start of imports', () => {
       assertCode(
         compile(`<script setup>
-      import { defineProps, defineEmits, ref } from 'vue'
+      import { ref } from 'vue'
       defineProps(['foo'])
       defineEmits(['bar'])
       const r = ref(0)
@@ -233,7 +228,6 @@ defineExpose({ foo: 123 })
       const { content } = compile(
         `
         <script setup>
-        import { defineExpose } from 'vue'
         const count = ref(0)
         defineExpose({ count })
         </script>
@@ -494,7 +488,6 @@ defineExpose({ foo: 123 })
     test('defineProps/Emit w/ runtime options', () => {
       const { content } = compile(`
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue'
 const props = defineProps({ foo: String })
 const emit = defineEmits(['a', 'b'])
 </script>
@@ -509,7 +502,6 @@ const emit = defineEmits(['a', 'b'])
     test('defineProps w/ type', () => {
       const { content, bindings } = compile(`
       <script setup lang="ts">
-      import { defineProps } from 'vue'
       interface Test {}
 
       type Alias = number[]
@@ -699,7 +691,6 @@ const emit = defineEmits(['a', 'b'])
     test('defineEmits w/ type', () => {
       const { content } = compile(`
       <script setup lang="ts">
-      import { defineEmits } from 'vue'
       const emit = defineEmits<(e: 'foo' | 'bar') => void>()
       </script>
       `)
@@ -713,7 +704,6 @@ const emit = defineEmits(['a', 'b'])
       expect(() =>
         compile(`
       <script setup lang="ts">
-      import { defineEmits } from 'vue'
       const emit = defineEmits<${type}>()
       </script>
       `)
@@ -724,7 +714,6 @@ const emit = defineEmits(['a', 'b'])
       const type = `{(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}`
       const { content } = compile(`
       <script setup lang="ts">
-      import { defineEmits } from 'vue'
       const emit = defineEmits<${type}>()
       </script>
       `)
@@ -734,6 +723,78 @@ const emit = defineEmits(['a', 'b'])
         `emits: ["foo", "bar", "baz"] as unknown as undefined`
       )
     })
+
+    test('defineEmits w/ type (interface)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      interface Emits { (e: 'foo' | 'bar'): void }
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineEmits w/ type (exported interface)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      export interface Emits { (e: 'foo' | 'bar'): void }
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineEmits w/ type (type alias)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      type Emits = { (e: 'foo' | 'bar'): void }
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineEmits w/ type (exported type alias)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      export type Emits = { (e: 'foo' | 'bar'): void }
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineEmits w/ type (referenced function type)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      type Emits = (e: 'foo' | 'bar') => void
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
+
+    test('defineEmits w/ type (referenced exported function type)', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      export type Emits = (e: 'foo' | 'bar') => void
+      const emit = defineEmits<Emits>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
+      expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
+    })
   })
 
   describe('async/await detection', () => {
@@ -1052,7 +1113,6 @@ const emit = defineEmits(['a', 'b'])
 
       expect(() => {
         compile(`<script setup lang="ts">
-        import { defineEmits } from 'vue'
         defineEmits<{}>({})
         </script>`)
       }).toThrow(`cannot accept both type and non-type arguments`)
@@ -1061,7 +1121,6 @@ const emit = defineEmits(['a', 'b'])
     test('defineProps/Emit() referencing local var', () => {
       expect(() =>
         compile(`<script setup>
-        import { defineProps } from 'vue'
         const bar = 1
         defineProps({
           foo: {
@@ -1073,7 +1132,6 @@ const emit = defineEmits(['a', 'b'])
 
       expect(() =>
         compile(`<script setup>
-        import { defineEmits } from 'vue'
         const bar = 'hello'
         defineEmits([bar])
         </script>`)
@@ -1083,7 +1141,6 @@ const emit = defineEmits(['a', 'b'])
     test('defineProps/Emit() referencing ref declarations', () => {
       expect(() =>
         compile(`<script setup>
-        import { defineProps } from 'vue'
         ref: bar = 1
         defineProps({
           bar
@@ -1093,7 +1150,6 @@ const emit = defineEmits(['a', 'b'])
 
       expect(() =>
         compile(`<script setup>
-        import { defineEmits } from 'vue'
         ref: bar = 1
         defineEmits({
           bar
@@ -1105,7 +1161,6 @@ const emit = defineEmits(['a', 'b'])
     test('should allow defineProps/Emit() referencing scope var', () => {
       assertCode(
         compile(`<script setup>
-          import { defineProps, defineEmits } from 'vue'
           const bar = 1
           defineProps({
             foo: {
@@ -1122,7 +1177,6 @@ const emit = defineEmits(['a', 'b'])
     test('should allow defineProps/Emit() referencing imported binding', () => {
       assertCode(
         compile(`<script setup>
-        import { defineProps, defineEmits } from 'vue'
         import { bar } from './bar'
         defineProps({
           foo: {
@@ -1361,7 +1415,7 @@ describe('SFC analyze <script> bindings', () => {
   it('works for script setup', () => {
     const { bindings } = compile(`
       <script setup>
-      import { defineProps, ref as r } from 'vue'
+      import { ref as r } from 'vue'
       defineProps({
         foo: String
       })

packages/compiler-sfc/src/compileScript.ts

@@ -199,7 +199,7 @@ export function compileScript(
   let propsTypeDecl: TSTypeLiteral | TSInterfaceBody | undefined
   let propsIdentifier: string | undefined
   let emitRuntimeDecl: Node | undefined
-  let emitTypeDecl: TSFunctionType | TSTypeLiteral | undefined
+  let emitTypeDecl: TSFunctionType | TSTypeLiteral | TSInterfaceBody | undefined
   let emitIdentifier: string | undefined
   let hasAwait = false
   let hasInlinedSsrRenderFn = false
@@ -288,47 +288,16 @@ export function compileScript(
         )
       }
 
-      let typeArg: Node = node.typeParameters.params[0]
+      propsTypeDecl = resolveQualifiedType(
-      if (typeArg.type === 'TSTypeLiteral') {
+        node.typeParameters.params[0],
-        propsTypeDecl = typeArg
+        node => node.type === 'TSTypeLiteral'
-      } else if (
+      ) as TSTypeLiteral | TSInterfaceBody | undefined
-        typeArg.type === 'TSTypeReference' &&
-        typeArg.typeName.type === 'Identifier'
-      ) {
-        const refName = typeArg.typeName.name
-        const isValidType = (node: Node): boolean => {
-          if (
-            node.type === 'TSInterfaceDeclaration' &&
-            node.id.name === refName
-          ) {
-            propsTypeDecl = node.body
-            return true
-          } else if (
-            node.type === 'TSTypeAliasDeclaration' &&
-            node.id.name === refName &&
-            node.typeAnnotation.type === 'TSTypeLiteral'
-          ) {
-            propsTypeDecl = node.typeAnnotation
-            return true
-          } else if (
-            node.type === 'ExportNamedDeclaration' &&
-            node.declaration
-          ) {
-            return isValidType(node.declaration)
-          }
-          return false
-        }
-
-        for (const node of scriptSetupAst) {
-          if (isValidType(node)) break
-        }
-      }
 
       if (!propsTypeDecl) {
         error(
           `type argument passed to ${DEFINE_PROPS}() must be a literal type, ` +
-            `or a reference to a interface or literal type.`,
+            `or a reference to an interface or literal type.`,
-          typeArg
+          node.typeParameters.params[0]
         )
       }
     }
@@ -375,23 +344,61 @@ export function compileScript(
           node
         )
       }
-      const typeArg = node.typeParameters.params[0]
+
-      if (
+      emitTypeDecl = resolveQualifiedType(
-        typeArg.type === 'TSFunctionType' ||
+        node.typeParameters.params[0],
-        typeArg.type === 'TSTypeLiteral'
+        node => node.type === 'TSFunctionType' || node.type === 'TSTypeLiteral'
-      ) {
+      ) as TSFunctionType | TSTypeLiteral | TSInterfaceBody | undefined
-        emitTypeDecl = typeArg
+
-      } else {
+      if (!emitTypeDecl) {
         error(
-          `type argument passed to ${DEFINE_EMITS}() must be a function type ` +
+          `type argument passed to ${DEFINE_EMITS}() must be a function type, ` +
-            `or a literal type with call signatures.`,
+            `a literal type with call signatures, or a reference to the above types.`,
-          typeArg
+          node.typeParameters.params[0]
         )
       }
     }
     return true
   }
 
+  function resolveQualifiedType(
+    node: Node,
+    qualifier: (node: Node) => boolean
+  ) {
+    if (qualifier(node)) {
+      return node
+    }
+    if (
+      node.type === 'TSTypeReference' &&
+      node.typeName.type === 'Identifier'
+    ) {
+      const refName = node.typeName.name
+      const isQualifiedType = (node: Node): Node | undefined => {
+        if (
+          node.type === 'TSInterfaceDeclaration' &&
+          node.id.name === refName
+        ) {
+          return node.body
+        } else if (
+          node.type === 'TSTypeAliasDeclaration' &&
+          node.id.name === refName &&
+          qualifier(node.typeAnnotation)
+        ) {
+          return node.typeAnnotation
+        } else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+          return isQualifiedType(node.declaration)
+        }
+      }
+
+      for (const node of scriptSetupAst) {
+        const qualified = isQualifiedType(node)
+        if (qualified) {
+          return qualified
+        }
+      }
+    }
+  }
+
   function processDefineExpose(node: Node): boolean {
     if (isCallOf(node, DEFINE_EXPOSE)) {
       if (hasDefineExposeCall) {
@@ -1469,11 +1476,12 @@ function toRuntimeTypeString(types: string[]) {
 }
 
 function extractRuntimeEmits(
-  node: TSFunctionType | TSTypeLiteral,
+  node: TSFunctionType | TSTypeLiteral | TSInterfaceBody,
   emits: Set<string>
 ) {
-  if (node.type === 'TSTypeLiteral') {
+  if (node.type === 'TSTypeLiteral' || node.type === 'TSInterfaceBody') {
-    for (let t of node.members) {
+    const members = node.type === 'TSTypeLiteral' ? node.members : node.body
+    for (let t of members) {
       if (t.type === 'TSCallSignatureDeclaration') {
         extractEventNames(t.parameters[0], emits)
       }