feat(tsx): add support for passing generics to child components

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

@@ -2027,3 +2027,70 @@ expectString(instance.actionText)
 // public prop on $props should be optional
 // @ts-expect-error
 expectString(instance.$props.actionText)
+
+describe('generic components in defineComponent', () => {
+ const GenericComp = defineComponent(
+ <T extends { name: string }>(props: { msg: string; list: T[] }) => {
+ return () => (
+ <div>
+ {props.msg}
+ {props.list.map(item => item.name).join(', ')}
+ </div>
+ )
+ },
+ )
+
+ const GenericCompUser = defineComponent(() => {
+ const list = ref([{ name: 'Tom' }, { name: 'Jack' }])
+
+ return () => {
+ return (
+ <div>
+ <GenericComp<{ name: string }> msg="hello" list={list.value} />
+ </div>
+ )
+ }
+ })
+
+ // Test correct usage
+ expectType<JSX.Element>(<GenericCompUser />)
+
+ // Test GenericComp directly with correct props
+ expectType<JSX.Element>(
+ <GenericComp<{ name: string }> msg="hello" list={[{ name: 'Alice' }]} />,
+ )
+
+ // Test with missing required prop
+ expectType<JSX.Element>(
+ // @ts-expect-error
+ <GenericComp<{ name: string }> list={[{ name: 'Bob' }]} />,
+ )
+
+ // Test with extended type
+ interface Person {
+ name: string
+ age: number
+ }
+
+ const ExtendedGenericCompUser = defineComponent(() => {
+ const people = ref<Person[]>([
+ { name: 'Tom', age: 25 },
+ { name: 'Jack', age: 30 },
+ ])
+
+ return () => {
+ return (
+ <div>
+ <GenericComp<Person> msg="people" list={people.value} />
+ </div>
+ )
+ }
+ })
+
+ expectType<JSX.Element>(<ExtendedGenericCompUser />)
+
+ // Test GenericComp directly with extended type
+ expectType<JSX.Element>(
+ <GenericComp<Person> msg="people" list={[{ name: 'Alice', age: 28 }]} />,
+ )
+})

packages/runtime-core/src/apiDefineComponent.ts

@@ -28,14 +28,15 @@ import type {
  TypeEmitsToOptions,
 } from './componentEmits'
 import { extend, isFunction } from '@vue/shared'
-import type { VNodeProps } from './vnode'
+import type { VNode, VNodeProps } from './vnode'
 import type {
  ComponentPublicInstanceConstructor,
  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 import type { SlotsType } from './componentSlots'
 import type { Directive } from './directives'
 import type { ComponentTypeEmits } from './apiSetupHelpers'
+import type { Ref } from '@vue/reactivity'
 
 export type PublicProps = VNodeProps &
  AllowedComponentProps &
@@ -134,6 +135,58 @@ export type DefineSetupFnComponent<
  S
 >
 
+export type DefineComponentWithGeneric<
+ PropsOrPropOptions = {},
+ RawBindings = {},
+ D = {},
+ C extends ComputedOptions = ComputedOptions,
+ M extends MethodOptions = MethodOptions,
+ Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+ Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+ E extends EmitsOptions = {},
+ EE extends string = string,
+ PP = PublicProps,
+ Props = ResolveProps<PropsOrPropOptions, E>,
+ Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
+ S extends SlotsType = {},
+ Generic extends Record<string, any> = {},
+> = ComponentPublicInstanceConstructor<
+ CreateComponentPublicInstanceWithMixins<
+ Props,
+ RawBindings,
+ D,
+ C,
+ M,
+ Mixin,
+ Extends,
+ E,
+ PP & Props,
+ Defaults,
+ true,
+ {},
+ S
+ > &
+ Generic
+> &
+ ComponentOptionsBase<
+ Props,
+ RawBindings,
+ D,
+ C,
+ M,
+ Mixin,
+ Extends,
+ E,
+ EE,
+ Defaults,
+ {},
+ string,
+ S
+ > &
+ PP & {
+ <T extends Generic>(props: Props & { ref?: Ref<any> } & T): VNode
+ }
+
 // defineComponent is a utility that is primarily used for type inference
 // when declaring components. Type inference is provided in the component
 // options (provided as the argument). The returned value has artificial types
@@ -290,16 +343,60 @@ export function defineComponent<
  TypeRefs
 >
 
+export function defineComponent<
+ T extends Record<string, any> = {},
+ PropsOptions extends Readonly<ComponentPropsOptions> = {},
+ RawBindings = {},
+ D = {},
+ C extends ComputedOptions = {},
+ M extends MethodOptions = {},
+ Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+ Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+ E extends EmitsOptions = {},
+ EE extends string = string,
+ S extends SlotsType = {},
+>(
+ options: ComponentOptionsBase<
+ PropsOptions,
+ RawBindings,
+ D,
+ C,
+ M,
+ Mixin,
+ Extends,
+ E,
+ EE,
+ ExtractDefaultPropTypes<PropsOptions>,
+ {},
+ string,
+ S
+ > & { __generic?: T },
+): DefineComponentWithGeneric<
+ PropsOptions,
+ RawBindings,
+ D,
+ C,
+ M,
+ Mixin,
+ Extends,
+ E,
+ EE,
+ PublicProps,
+ Readonly<PropsOptions>,
+ ExtractDefaultPropTypes<PropsOptions>,
+ S,
+ T
+>
+
 // implementation, close to no-op
 /*! #__NO_SIDE_EFFECTS__ */
-export function defineComponent(
- options: unknown,
- extraOptions?: ComponentOptions,
-) {
- return isFunction(options)
- ? // #8326: extend call and options.name access are considered side-effects
- // by Rollup, so we have to wrap it in a pure-annotated IIFE.
- /*#__PURE__*/ (() =>
- extend({ name: options.name }, extraOptions, { setup: options }))()
+export function defineComponent(options: unknown): any {
+ const comp = isFunction(options)
+ ? { setup: options, name: options.name }
  : options
+ return new Proxy(comp as any, {
+ apply(target, thisArg, argumentsList) {
+ return extend({}, target, { props: argumentsList[0] })
+ },
+ })
 }

packages/runtime-core/src/index.ts

@@ -268,6 +268,7 @@ export type {
 export type {
  DefineComponent,
  DefineSetupFnComponent,
+ DefineComponentWithGeneric,
  PublicProps,
 } from './apiDefineComponent'
 export type {

packages/runtime-dom/src/index.ts

@@ -1,7 +1,7 @@
 import {
  type App,
  type CreateAppFunction,
- type DefineComponent,
+ type DefineComponentWithGeneric as DefineComponent,
  DeprecationTypes,
  type Directive,
  type ElementNamespace,