feat(types): defineComponent() with generics support (#7963)

BREAKING CHANGE: The type of `defineComponent()` when passing in a function has changed. This overload signature is rarely used in practice and the breakage will be minimal, so repurposing it to something more useful should be worth it.

close #3102

packages/dts-test/defineComponent.test-d.tsx

@@ -351,7 +351,7 @@ describe('type inference w/ optional props declaration', () => {
 })
 
 describe('type inference w/ direct setup function', () => {
-  const MyComponent = defineComponent((_props: { msg: string }) => {})
+  const MyComponent = defineComponent((_props: { msg: string }) => () => {})
   expectType<JSX.Element>(<MyComponent msg="foo" />)
   // @ts-expect-error
   ;<MyComponent />
@@ -1250,10 +1250,130 @@ describe('prop starting with `on*` is broken', () => {
   })
 })
 
+describe('function syntax w/ generics', () => {
+  const Comp = defineComponent(
+    // TODO: babel plugin to auto infer runtime props options from type
+    // similar to defineProps<{...}>()
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      // use Composition API here like in <script setup>
+      const count = ref(0)
+
+      return () => (
+        // return a render function (both JSX and h() works)
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    }
+  )
+
+  expectType<JSX.Element>(<Comp msg="fse" list={['foo']} />)
+  expectType<JSX.Element>(<Comp msg={123} list={[123]} />)
+
+  expectType<JSX.Element>(
+    // @ts-expect-error missing prop
+    <Comp msg={123} />
+  )
+
+  expectType<JSX.Element>(
+    // @ts-expect-error generics don't match
+    <Comp msg="fse" list={[123]} />
+  )
+  expectType<JSX.Element>(
+    // @ts-expect-error generics don't match
+    <Comp msg={123} list={['123']} />
+  )
+})
+
+describe('function syntax w/ emits', () => {
+  const Foo = defineComponent(
+    (props: { msg: string }, ctx) => {
+      ctx.emit('foo')
+      // @ts-expect-error
+      ctx.emit('bar')
+      return () => {}
+    },
+    {
+      emits: ['foo']
+    }
+  )
+  expectType<JSX.Element>(<Foo msg="hi" onFoo={() => {}} />)
+  // @ts-expect-error
+  expectType<JSX.Element>(<Foo msg="hi" onBar={() => {}} />)
+})
+
+describe('function syntax w/ runtime props', () => {
+  // with runtime props, the runtime props must match
+  // manual type declaration
+  defineComponent(
+    (_props: { msg: string }) => {
+      return () => {}
+    },
+    {
+      props: ['msg']
+    }
+  )
+
+  defineComponent(
+    <T extends string>(_props: { msg: T }) => {
+      return () => {}
+    },
+    {
+      props: ['msg']
+    }
+  )
+
+  defineComponent(
+    <T extends string>(_props: { msg: T }) => {
+      return () => {}
+    },
+    {
+      props: {
+        msg: String
+      }
+    }
+  )
+
+  // @ts-expect-error string prop names don't match
+  defineComponent(
+    (_props: { msg: string }) => {
+      return () => {}
+    },
+    {
+      props: ['bar']
+    }
+  )
+
+  // @ts-expect-error prop type mismatch
+  defineComponent(
+    (_props: { msg: string }) => {
+      return () => {}
+    },
+    {
+      props: {
+        msg: Number
+      }
+    }
+  )
+
+  // @ts-expect-error prop keys don't match
+  defineComponent(
+    (_props: { msg: string }, ctx) => {
+      return () => {}
+    },
+    {
+      props: {
+        msg: String,
+        bar: String
+      }
+    }
+  )
+})
+
 // check if defineComponent can be exported
 export default {
   // function components
-  a: defineComponent(_ => h('div')),
+  a: defineComponent(_ => () => h('div')),
   // no props
   b: defineComponent({
     data() {

packages/dts-test/h.test-d.ts

@@ -157,7 +157,7 @@ describe('h support for generic component type', () => {
 describe('describeComponent extends Component', () => {
   // functional
   expectAssignable<Component>(
-    defineComponent((_props: { foo?: string; bar: number }) => {})
+    defineComponent((_props: { foo?: string; bar: number }) => () => {})
   )
 
   // typed props

packages/runtime-core/__tests__/apiOptions.spec.ts

@@ -122,7 +122,7 @@ describe('api: options', () => {
     expect(serializeInner(root)).toBe(`<div>4</div>`)
   })
 
-  test('component’s own methods have higher priority than global properties', async () => {
+  test("component's own methods have higher priority than global properties", async () => {
     const app = createApp({
       methods: {
         foo() {
@@ -667,7 +667,7 @@ describe('api: options', () => {
 
   test('mixins', () => {
     const calls: string[] = []
-    const mixinA = {
+    const mixinA = defineComponent({
       data() {
         return {
           a: 1
@@ -682,8 +682,8 @@ describe('api: options', () => {
       mounted() {
         calls.push('mixinA mounted')
       }
-    }
-    const mixinB = {
+    })
+    const mixinB = defineComponent({
       props: {
         bP: {
           type: String
@@ -705,7 +705,7 @@ describe('api: options', () => {
       mounted() {
         calls.push('mixinB mounted')
       }
-    }
+    })
     const mixinC = defineComponent({
       props: ['cP1', 'cP2'],
       data() {
@@ -727,7 +727,7 @@ describe('api: options', () => {
       props: {
         aaa: String
       },
-      mixins: [defineComponent(mixinA), defineComponent(mixinB), mixinC],
+      mixins: [mixinA, mixinB, mixinC],
       data() {
         return {
           c: 4,
@@ -817,6 +817,22 @@ describe('api: options', () => {
     ])
   })
 
+  test('unlikely mixin usage', () => {
+    const MixinA = {
+      data() {}
+    }
+    const MixinB = {
+      data() {}
+    }
+    defineComponent({
+      // @ts-expect-error edge case after #7963, unlikely to happen in practice
+      // since the user will want to type the mixins themselves.
+      mixins: [defineComponent(MixinA), defineComponent(MixinB)],
+      // @ts-expect-error
+      data() {}
+    })
+  })
+
   test('chained extends in mixins', () => {
     const calls: string[] = []
 
@@ -863,7 +879,7 @@ describe('api: options', () => {
 
   test('extends', () => {
     const calls: string[] = []
-    const Base = {
+    const Base = defineComponent({
       data() {
         return {
           a: 1,
@@ -878,9 +894,9 @@ describe('api: options', () => {
         expect(this.b).toBe(2)
         calls.push('base')
       }
-    }
+    })
     const Comp = defineComponent({
-      extends: defineComponent(Base),
+      extends: Base,
       data() {
         return {
           b: 2
@@ -900,7 +916,7 @@ describe('api: options', () => {
 
   test('extends with mixins', () => {
     const calls: string[] = []
-    const Base = {
+    const Base = defineComponent({
       data() {
         return {
           a: 1,
@@ -916,8 +932,8 @@ describe('api: options', () => {
         expect(this.c).toBe(2)
         calls.push('base')
       }
-    }
-    const Mixin = {
+    })
+    const Mixin = defineComponent({
       data() {
         return {
           b: true,
@@ -930,10 +946,10 @@ describe('api: options', () => {
         expect(this.c).toBe(2)
         calls.push('mixin')
       }
-    }
+    })
     const Comp = defineComponent({
-      extends: defineComponent(Base),
-      mixins: [defineComponent(Mixin)],
+      extends: Base,
+      mixins: [Mixin],
       data() {
         return {
           c: 2

packages/runtime-core/src/apiDefineComponent.ts

@@ -7,7 +7,8 @@ import {
   ComponentOptionsMixin,
   RenderFunction,
   ComponentOptionsBase,
-  ComponentInjectOptions
+  ComponentInjectOptions,
+  ComponentOptions
 } from './componentOptions'
 import {
   SetupContext,
@@ -17,10 +18,11 @@ import {
 import {
   ExtractPropTypes,
   ComponentPropsOptions,
-  ExtractDefaultPropTypes
+  ExtractDefaultPropTypes,
+  ComponentObjectPropsOptions
 } from './componentProps'
 import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { isFunction } from '@vue/shared'
+import { extend, isFunction } from '@vue/shared'
 import { VNodeProps } from './vnode'
 import {
   CreateComponentPublicInstance,
@@ -86,12 +88,34 @@ export type DefineComponent<
 
 // overload 1: direct setup function
 // (uses user defined props interface)
-export function defineComponent<Props, RawBindings = object>(
+export function defineComponent<
+  Props extends Record<string, any>,
+  E extends EmitsOptions = {},
+  EE extends string = string
+>(
+  setup: (
+    props: Props,
+    ctx: SetupContext<E>
+  ) => RenderFunction | Promise<RenderFunction>,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+    props?: (keyof Props)[]
+    emits?: E | EE[]
+  }
+): (props: Props & EmitsToProps<E>) => any
+export function defineComponent<
+  Props extends Record<string, any>,
+  E extends EmitsOptions = {},
+  EE extends string = string
+>(
   setup: (
-    props: Readonly<Props>,
-    ctx: SetupContext
-  ) => RawBindings | RenderFunction
-): DefineComponent<Props, RawBindings>
+    props: Props,
+    ctx: SetupContext<E>
+  ) => RenderFunction | Promise<RenderFunction>,
+  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+    props?: ComponentObjectPropsOptions<Props>
+    emits?: E | EE[]
+  }
+): (props: Props & EmitsToProps<E>) => any
 
 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -198,6 +222,11 @@ export function defineComponent<
 ): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
 
 // implementation, close to no-op
-export function defineComponent(options: unknown) {
-  return isFunction(options) ? { setup: options, name: options.name } : options
+export function defineComponent(
+  options: unknown,
+  extraOptions?: ComponentOptions
+) {
+  return isFunction(options)
+    ? extend({}, extraOptions, { setup: options, name: options.name })
+    : options
 }