types(resolveType): fix defineComponent type error

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

@@ -2,6 +2,7 @@ import {
  type Component,
  type ComponentOptions,
  type ComponentPublicInstance,
+ type FunctionalContext,
  type PropType,
  type SetupContext,
  type Slots,
@@ -1290,6 +1291,72 @@ describe('function syntax w/ generics', () => {
  )
 })
 
+describe('function syntax w/ resolveType plugin', () => {
+ const Comp = defineComponent(
+ // jsx plugin resolveType is true
+ <T extends string | number>(
+ props: { msg: T; list: T[] },
+ ctx: FunctionalContext<
+ {
+ (key: 'foo', args1: string): any
+ (key: 'bar', args1: number): any
+ },
+ {
+ foo: (args1: string, args2: number) => any
+ default: () => any
+ }
+ >,
+ ) => {
+ // use Composition API here like in <script setup>
+ const count = ref(0)
+ // @ts-expect-error
+ ctx.emit('foo', 1)
+ // @ts-expect-error
+ ctx.emit('bar')
+
+ ctx.emit('bar', 1)
+
+ return () => (
+ // return a render function (both JSX and h() works)
+ <div>
+ {props.msg} {count.value}
+ {// @ts-expect-error
+ ctx.slots.foo?.()}
+ {// @ts-expect-error
+ ctx.slots.foo?.(1)}
+ {ctx.slots.foo?.('', 1)}
+ </div>
+ )
+ },
+ )
+
+ expectType<JSX.Element>(<Comp msg="fse" list={['foo']} onBar={args1 => {}} />)
+ 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']} />,
+ )
+
+ expectType<JSX.Element>(
+ // @ts-expect-error generics don't match
+ <Comp msg={123} list={['123']} />,
+ )
+ expectType<JSX.Element>(
+ // @ts-expect-error Type 'string' is not assignable to type 'number'
+ <Comp msg={123} list={[123]} onFoo={(arg: number) => {}} />,
+ )
+})
+
 describe('function syntax w/ emits', () => {
  const Foo = defineComponent(
  (props: { msg: string }, ctx) => {

packages/runtime-core/src/apiDefineComponent.ts

@@ -13,6 +13,7 @@ import type {
 import type {
  AllowedComponentProps,
  ComponentCustomProps,
+ FunctionalContext,
  SetupContext,
 } from './component'
 import type {
@@ -21,7 +22,11 @@ import type {
  ExtractDefaultPropTypes,
  ExtractPropTypes,
 } from './componentProps'
-import type { EmitsOptions, EmitsToProps } from './componentEmits'
+import type {
+ EmitsOptions,
+ EmitsOverloadFnToProps,
+ EmitsToProps,
+} from './componentEmits'
 import { extend, isFunction } from '@vue/shared'
 import type { VNodeProps } from './vnode'
 import type {
@@ -96,6 +101,19 @@ export type DefineComponent<
 
 // overload 1: direct setup function
 // (uses user defined props interface)
+export function defineComponent<
+ Props extends Record<string, any>,
+ E extends (key: any, ...args: any[]) => any,
+ Data extends Record<string, any>,
+ S extends Record<string, (...args: any[]) => any>,
+ Slots extends Partial<S>,
+>(
+ setup: (
+ props: Props,
+ ctx: FunctionalContext<E, S, Data>,
+ ) => RenderFunction | Promise<RenderFunction>,
+): (props: Props & EmitsOverloadFnToProps<E>) => any
+
 export function defineComponent<
  Props extends Record<string, any>,
  E extends EmitsOptions = {},
@@ -106,7 +124,7 @@ export function defineComponent<
  props: Props,
  ctx: SetupContext<E, S>,
  ) => RenderFunction | Promise<RenderFunction>,
- options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+ options: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
  props?: (keyof Props)[]
  emits?: E | EE[]
  slots?: S
@@ -122,7 +140,7 @@ export function defineComponent<
  props: Props,
  ctx: SetupContext<E, S>,
  ) => RenderFunction | Promise<RenderFunction>,
- options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
+ options: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
  props?: ComponentObjectPropsOptions<Props>
  emits?: E | EE[]
  slots?: S

packages/runtime-core/src/component.ts

@@ -238,6 +238,22 @@ export type SetupContext<
  }
  : never
 
+export type FunctionalContext<
+ E extends (key: any, ...args: any[]) => any = (
+ key: string,
+ ...args: any[]
+ ) => any,
+ S extends Record<string, (...args: any[]) => any> = {},
+ Data extends Record<string, any> = Record<string, any>,
+> = E extends any
+ ? {
+ attrs: Data
+ slots: Partial<S>
+ emit: E
+ expose: (exposed?: Record<string, any>) => void
+ }
+ : never
+
 /**
  * @internal
  */

packages/runtime-core/src/componentEmits.ts

@@ -1,5 +1,6 @@
 import {
  EMPTY_OBJ,
+ type Prettify,
  type UnionToIntersection,
  camelize,
  extend,
@@ -79,6 +80,26 @@ export type EmitFn<
  }[Event]
  >
 
+type EmitsOverloadFnToPropsHelper<
+ T extends (key: string, ...args: any[]) => any,
+ PartialOverload = unknown,
+ P = {},
+> = T extends (key: infer K, ...args: infer Args) => infer TReturn
+ ? K extends string
+ ? PartialOverload extends T
+ ? P
+ : EmitsOverloadFnToPropsHelper<
+ PartialOverload & T,
+ PartialOverload & ((key: K, ...args: Args) => TReturn),
+ P & { [k in K as `on${Capitalize<K>}`]: (...args: Args) => any }
+ >
+ : never
+ : never
+
+export type EmitsOverloadFnToProps<
+ T extends (key: any, ...args: any[]) => any,
+> = Partial<Prettify<EmitsOverloadFnToPropsHelper<T>>>
+
 export function emit(
  instance: ComponentInternalInstance,
  event: string,

packages/runtime-core/src/index.ts

@@ -246,6 +246,7 @@ export type {
  FunctionalComponent,
  ComponentInternalInstance,
  SetupContext,
+ FunctionalContext,
  ComponentCustomProps,
  AllowedComponentProps,
  ComponentInstance,