feat: Support for generic props component

packages/runtime-core/src/apiDefineComponent.ts

@@ -6,7 +6,8 @@ import {
   ComponentOptionsWithObjectProps,
   ComponentOptionsMixin,
   RenderFunction,
-  ComponentOptionsBase
+  ComponentOptionsBase,
+  ComponentPropsOverride
 } from './componentOptions'
 import {
   SetupContext,
@@ -16,7 +17,8 @@ import {
 import {
   ExtractPropTypes,
   ComponentPropsOptions,
-  ExtractDefaultPropTypes
+  ExtractDefaultPropTypes,
+  PropType
 } from './componentProps'
 import { EmitsOptions } from './componentEmits'
 import { isFunction } from '@vue/shared'
@@ -43,35 +45,39 @@ export type DefineComponent<
   PP = PublicProps,
   Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>
-> = ComponentPublicInstanceConstructor<
-  CreateComponentPublicInstance<
-    Props,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    PP & Props,
-    Defaults,
-    true
-  > &
-    Props
-> &
-  ComponentOptionsBase<
-    Props,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    Defaults
-  > &
-  PP
+> =
+  // If props is a class we should ifnore all the process
+  (PropsOrPropOptions extends { prototype: ComponentPropsOverride }
+    ? PropsOrPropOptions
+    : ComponentPublicInstanceConstructor<
+        CreateComponentPublicInstance<
+          Props,
+          RawBindings,
+          D,
+          C,
+          M,
+          Mixin,
+          Extends,
+          E,
+          PP & Props,
+          Defaults,
+          true
+        > &
+          Props
+      >) &
+    ComponentOptionsBase<
+      Props,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E,
+      EE,
+      Defaults
+    > &
+    PP
 
 // defineComponent is a utility that is primarily used for type inference
 // when declaring components. Type inference is provided in the component
@@ -179,6 +185,34 @@ export function defineComponent<
   >
 ): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
 
+// overload 5: Allow overriding Props object
+export function defineComponent<
+  O extends { prototype: ComponentPropsOverride },
+  RawBindings = {},
+  D = {},
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions,
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = Record<string, any>,
+  EE extends string = string,
+  PP = PublicProps
+>(
+  options: ComponentOptionsWithObjectProps<
+    O extends new () => { $props: infer P }
+      ? { [K in keyof P]: PropType<P[K]> }
+      : {},
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
+): DefineComponent<O, RawBindings, D, C, M, Mixin, Extends, E, EE, PP>
+
 // implementation, close to no-op
 export function defineComponent(options: unknown) {
   return isFunction(options) ? { setup: options, name: options.name } : options

packages/runtime-core/src/componentOptions.ts

@@ -190,6 +190,10 @@ export interface ComponentOptionsBase<
   __defaults?: Defaults
 }
 
+export abstract class ComponentPropsOverride<Props = {}> {
+  readonly $props: Props = {} as Props
+}
+
 export type ComponentOptionsWithoutProps<
   Props = {},
   RawBindings = {},

packages/runtime-core/src/index.ts

@@ -177,6 +177,7 @@ export {
   ComponentOptionsWithArrayProps,
   ComponentCustomOptions,
   ComponentOptionsBase,
+  ComponentPropsOverride,
   RenderFunction,
   MethodOptions,
   ComputedOptions

test-dts/defineComponent.test-d.tsx

@@ -12,6 +12,7 @@ import {
   ComponentOptions,
   SetupContext,
   IsUnion,
+  ComponentPropsOverride,
   h
 } from './index'
 
@@ -1038,6 +1039,38 @@ describe('async setup', () => {
   vm.a = 2
 })
 
+// #3102
+describe('Generic props', () => {
+  type OnChange<ValueType, Clearable> = Clearable extends true
+    ? (value: ValueType | null) => void
+    : (value: ValueType) => void
+
+  interface GenericProp<Clearable, ValueType> {
+    clearable?: Clearable
+    value?: ValueType
+    onChange?: OnChange<ValueType, Clearable>
+  }
+
+  class CompProps<
+    Clearable extends boolean,
+    ValueType extends string | number | null | undefined
+  > extends ComponentPropsOverride<GenericProp<Clearable, ValueType>> {}
+
+  const Comp = defineComponent<typeof CompProps>({
+    props: {
+      value: Object,
+      clearable: Boolean
+    }
+  })
+  ;<Comp
+    value={'sss'}
+    clearable
+    onChange={a => {
+      expectType<'sss' | null>(a)
+    }}
+  />
+})
+
 // check if defineComponent can be exported
 export default {
   // function components

test-dts/h.test-d.ts

@@ -9,7 +9,8 @@ import {
   Component,
   expectError,
   expectAssignable,
-  resolveComponent
+  resolveComponent,
+  ComponentPropsOverride
 } from './index'
 
 describe('h inference w/ element', () => {
@@ -233,3 +234,34 @@ describe('resolveComponent should work', () => {
     message: '1'
   })
 })
+
+// #3102
+describe('Class component generic props', () => {
+  type OnChange<ValueType, Clearable> = Clearable extends true
+    ? (value: ValueType | null) => void
+    : (value: ValueType) => void
+
+  interface GenericProp<Clearable, ValueType> {
+    clearable?: Clearable
+    value?: ValueType
+    onChange?: OnChange<ValueType, Clearable>
+  }
+
+  class CompProps<
+    Clearable extends boolean,
+    ValueType extends string | number | null | undefined
+  > extends ComponentPropsOverride<GenericProp<Clearable, ValueType>> {}
+
+  const Comp = defineComponent<typeof CompProps>({
+    props: {},
+    setup() {
+      return {}
+    }
+  })
+
+  h(Comp, {
+    clearable: true,
+    value: 'test',
+    onChange(e) {}
+  })
+})