feat: Support for generic props component

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

@@ -0,0 +1,40 @@
+import {
+  h,
+  nodeOps,
+  render,
+  serializeInner,
+  triggerEvent,
+  TestElement,
+  nextTick,
+  ref,
+  defineComponent,
+  ComponentOptionClass
+} from '@vue/runtime-test'
+
+describe('api: VCA class', () => {
+  test('data', async () => {
+    const CXXX = class extends ComponentOptionClass {
+      setup() {
+        const foo = ref(1)
+        return () =>
+          h(
+            'div',
+            {
+              onClick: () => {
+                foo.value++
+              }
+            },
+            foo.value
+          )
+      }
+    }
+    const Comp = defineComponent(CXXX)
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(`<div>1</div>`)
+
+    triggerEvent(root.children[0] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>2</div>`)
+  })
+})

packages/runtime-core/src/apiDefineComponent.ts

@@ -6,7 +6,8 @@ import {
   ComponentOptionsWithObjectProps,
   ComponentOptionsMixin,
   RenderFunction,
-  ComponentOptionsBase
+  ComponentOptionsBase,
+  ComponentOptionClass
 } from './componentOptions'
 import {
   SetupContext,
@@ -43,41 +44,79 @@ 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: ComponentOptionClass }
+    ? 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
 // options (provided as the argument). The returned value has artificial types
 // for TSX / manual render function / IDE support.
 
+// export function defineComponent<O extends ComponentOptionClass>(
+//   // Props = {},
+//   // RawBindings = {},
+//   // D = {},
+//   // C extends ComputedOptions = {},
+//   // M extends MethodOptions = {},
+//   // Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+//   // Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+//   // E extends EmitsOptions = EmitsOptions,
+//   // EE extends string = string
+//   options: O
+// ): DefineComponent<Props>
+
+// WORKING
+// export function defineComponent<
+//   C extends { prototype: B },
+//   B extends { prototype: C } = any
+// >(o: C): C
+
+// // kind working
+// export function defineComponent<O extends { prototype: ComponentOptionClass }>(
+//   o: O
+// ): DefineComponent<O>
+
+// export function defineComponent<O extends ComponentOptionClass>(
+//   o: any
+// ): DefineComponent<O>
+
+// export function defineComponent<TClass extends ComponentOptionClass>(
+
+// ) {
+
+// }
+
 // overload 1: direct setup function
 // (uses user defined props interface)
 export function defineComponent<Props, RawBindings = object>(
@@ -179,7 +218,20 @@ export function defineComponent<
   >
 ): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
 
+// overload 4: ComponentOptionClass format to allow more powerful generics
+export function defineComponent<O extends { prototype: ComponentOptionClass }>(
+  o: O
+): DefineComponent<
+  O,
+  O extends { setup: (...a: any[]) => infer Setup } ? Setup : false
+>
+
 // implementation, close to no-op
 export function defineComponent(options: unknown) {
-  return isFunction(options) ? { setup: options, name: options.name } : options
+  return isFunction(options)
+    ? !options.prototype
+      ? { setup: options, name: options.name }
+      : // @ts-expect-error
+        new options()
+    : options
 }

packages/runtime-core/src/componentOptions.ts

@@ -53,9 +53,10 @@ import {
 import {
   ComponentObjectPropsOptions,
   ExtractPropTypes,
-  ExtractDefaultPropTypes
+  ExtractDefaultPropTypes,
+  PropType
 } from './componentProps'
-import { EmitsOptions } from './componentEmits'
+import { EmitFn, EmitsOptions } from './componentEmits'
 import { Directive } from './directives'
 import {
   CreateComponentPublicInstance,
@@ -190,6 +191,31 @@ export interface ComponentOptionsBase<
   __defaults?: Defaults
 }
 
+export abstract class ComponentOptionClass<
+  Props = {},
+  E extends EmitsOptions = EmitsOptions
+> {
+  readonly __vccOpts = {}
+  readonly $props: Props = {} as Props
+  readonly $emit: EmitFn<E> = {} as EmitFn<E>
+
+  props?: { [K in keyof Props]: PropType<Props[K]> }
+  emits?: E
+
+  constructor() {
+    this.setup.bind(this)
+  }
+
+  setup(
+    props: Props,
+    ctx: SetupContext<E>
+  ):
+    | Promise<Record<string, any>>
+    | Record<string, any>
+    | RenderFunction
+    | void {}
+}
+
 export type ComponentOptionsWithoutProps<
   Props = {},
   RawBindings = {},

packages/runtime-core/src/index.ts

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

test-dts/defineComponent.test-d.tsx

@@ -1,6 +1,7 @@
 import {
   describe,
   Component,
+  ConcreteComponent,
   defineComponent,
   PropType,
   ref,
@@ -12,6 +13,7 @@ import {
   ComponentOptions,
   SetupContext,
   IsUnion,
+  ComponentOptionClass,
   h
 } from './index'
 
@@ -1038,6 +1040,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>
+  }
+
+  const Comp = defineComponent(
+    class<
+      Clearable extends boolean,
+      ValueType extends string | number | null | undefined
+    > extends ComponentOptionClass<GenericProp<Clearable, ValueType>> {
+      props = {}
+      setup() {
+        return {}
+      }
+    }
+  )
+  ;<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

@@ -1,3 +1,4 @@
+import { ComponentOptionClass } from '@vue/runtime-core'
 import {
   describe,
   h,
@@ -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>
+  }
+
+  const Comp = defineComponent(
+    class<
+      Clearable extends boolean,
+      ValueType extends string | number | null | undefined
+    > extends ComponentOptionClass<GenericProp<Clearable, ValueType>> {
+      props = {}
+      setup() {
+        return {}
+      }
+    }
+  )
+
+  h(Comp, {
+    clearable: true,
+    value: 'test',
+    onChange(e) {}
+  })
+})