types(defineComponent): DefineComponent refactor

packages/runtime-core/src/apiDefineComponent.ts

@@ -61,8 +61,10 @@ export type DefineComponent<
     true
   > &
     Props
-> &
-  ComponentOptionsBase<
+>
+/**
+ * just typescript
+ */ & { __isDefineComponent?: true } & ComponentOptionsBase<
     Props,
     RawBindings,
     D,
@@ -174,7 +176,9 @@ export function defineComponent<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = Record<string, any>,
   EE extends string = string,
-  S = any
+  S = any,
+  Props = Readonly<ExtractPropTypes<PropsOptions>> & EmitsToProps<E>,
+  Defaults = ExtractDefaultPropTypes<PropsOptions>
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
@@ -186,9 +190,25 @@ export function defineComponent<
     Extends,
     E,
     EE,
-    S
+    S,
+    Props,
+    Defaults
   >
-): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
+): DefineComponent<
+  ExtractPropTypes<PropsOptions>,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  S,
+  PublicProps,
+  Props,
+  Defaults
+>
 
 // implementation, close to no-op
 export function defineComponent(options: unknown) {

packages/runtime-core/src/component.ts

@@ -33,6 +33,7 @@ import { Directive, validateDirectiveName } from './directives'
 import {
   applyOptions,
   ComponentOptions,
+  ComponentOptionsMixin,
   ComputedOptions,
   MethodOptions
 } from './componentOptions'
@@ -109,7 +110,7 @@ export interface FunctionalComponent<
   S extends Slots = Slots
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: Omit<SetupContext<E, S>, 'expose'>): any
+  (props: P, ctx: Omit<SetupContext<E, P, S>, 'expose'>): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
@@ -132,10 +133,13 @@ export type ConcreteComponent<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  Mixin extends ComponentOptionsMixin = any,
+  Extends extends ComponentOptionsMixin = any,
+  E extends EmitsOptions = any
 > =
-  | ComponentOptions<Props, RawBindings, D, C, M>
-  | FunctionalComponent<Props, any>
+  | ComponentOptions<Props, RawBindings, D, C, M, Mixin, Extends, E>
+  | FunctionalComponent<Props, E>
 
 /**
  * A type used in public APIs where a component type is expected.
@@ -172,10 +176,14 @@ export const enum LifecycleHooks {
   SERVER_PREFETCH = 'sp'
 }
 
-export interface SetupContext<E = EmitsOptions, S extends Slots = Slots> {
+export interface SetupContext<
+  E = EmitsOptions,
+  P = {},
+  S extends Slots = Slots
+> {
   attrs: Data
   slots: S
-  emit: EmitFn<E>
+  emit: EmitFn<E, P>
   expose: (exposed?: Record<string, any>) => void
 }
 

packages/runtime-core/src/componentEmits.ts

@@ -53,10 +53,16 @@ export type EmitsToProps<T extends EmitsOptions> = T extends string[]
     }
   : {}
 
+export type EmitVModelUpdate<
+  T,
+  E extends keyof T & string = keyof T & string
+> = (event: `update:${E}`, value: T[E]) => void
+
 export type EmitFn<
   Options = ObjectEmitsOptions,
+  P = {},
   Event extends keyof Options = keyof Options
-> = Options extends Array<infer V>
+> = (Options extends Array<infer V>
   ? (event: V, ...args: any[]) => void
   : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
   ? (event: string, ...args: any[]) => void
@@ -66,7 +72,8 @@ export type EmitFn<
           ? (event: key, ...args: Args) => void
           : (event: key, ...args: any[]) => void
       }[Event]
-    >
+    >) &
+  EmitVModelUpdate<P>
 
 export function emit(
   instance: ComponentInternalInstance,

packages/runtime-core/src/componentOptions.ts

@@ -130,7 +130,7 @@ export interface ComponentOptionsBase<
           UnionToIntersection<ExtractOptionProp<Extends>>
       >
     >,
-    ctx: SetupContext<E, Slots<S>>
+    ctx: SetupContext<E, Props, Slots<S>>
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node
@@ -348,8 +348,20 @@ export type ComponentOptions<
   M extends MethodOptions = any,
   Mixin extends ComponentOptionsMixin = any,
   Extends extends ComponentOptionsMixin = any,
-  E extends EmitsOptions = any
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E> &
+  E extends EmitsOptions = {},
+  S = any
+> = ComponentOptionsBase<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  any,
+  S
+> &
   ThisType<
     CreateComponentPublicInstance<
       {},
@@ -360,6 +372,7 @@ export type ComponentOptions<
       Mixin,
       Extends,
       E,
+      any,
       Readonly<Props>
     >
   >

packages/runtime-core/src/componentProps.ts

@@ -97,7 +97,7 @@ type DefaultKeys<T> = {
     : never
 }[keyof T]
 
-type InferPropType<T> = [T] extends [null]
+export type InferPropType<T> = [T] extends [null]
   ? any // null & true would fail to infer
   : [T] extends [{ type: null | true }]
   ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`

packages/runtime-core/src/componentPublicInstance.ts

@@ -203,7 +203,7 @@ export type ComponentPublicInstance<
   $slots: Slots<S>
   $root: ComponentPublicInstance | null
   $parent: ComponentPublicInstance | null
-  $emit: EmitFn<E>
+  $emit: EmitFn<E, P>
   $el: any
   $options: Options & MergedComponentOptionsOverride
   $forceUpdate: () => void

packages/runtime-core/src/h.ts

@@ -15,11 +15,12 @@ import { RawSlots } from './componentSlots'
 import {
   FunctionalComponent,
   Component,
-  ComponentOptions,
-  ConcreteComponent
+  ConcreteComponent,
+  ComponentOptions
 } from './component'
 import { EmitsOptions } from './componentEmits'
 import { DefineComponent } from './apiDefineComponent'
+import { Slots } from 'test-dts'
 
 // `h` is a more user-friendly version of `createVNode` that allows omitting the
 // props when possible. It is intended for manually written render functions.
@@ -68,16 +69,61 @@ type RawChildren =
   | (() => any)
 
 // fake constructor type returned from `defineComponent`
-interface Constructor<P = any, S = any> {
+interface Constructor<P = {}, S = any> {
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
+  __isDefineComponent?: never
   new (...args: any[]): { $props: P; $slots?: S }
 }
 
+// Converts emits value to object
+type ExtractEmitEvents<T> = T extends Readonly<Array<infer V>>
+  ? { [K in V & string as `on${Capitalize<K>}`]: (...args: any[]) => void }
+  : T extends any[]
+  ? { [K in T & string as `on${Capitalize<K>}`]: (...args: any[]) => void }
+  : {} extends T // if the emit is empty object (usually the default value for emit) should be converted to function
+  ? {}
+  : {
+      [K in keyof T & string as `on${Capitalize<K>}`]: T[K] extends (
+        ...args: infer Args
+      ) => any
+        ? (...args: Args) => void
+        : (...args: any[]) => void
+    }
+
+type ExtractEmitPropUpdate<
+  P = {},
+  PK extends keyof P & string = keyof P & string
+> = P extends Readonly<Array<infer V>>
+  ? { [K in V & string as `onUpdate:${K}`]?: (value: any) => void }
+  : P extends any[]
+  ? { [K in P & string as `onUpdate:${K}`]?: (value: any) => void }
+  : // we need to omit if it infers emit as props
+    {
+      [K in keyof Omit<P, `on${Capitalize<PK>}`> &
+        string as `onUpdate:${K}`]?: (value: P[K]) => void
+    }
+
+type RenderProps<P, E extends EmitsOptions = {}> =
+  | (Partial<ExtractEmitEvents<E>> & RawProps & P & ExtractEmitPropUpdate<P>)
+  | ({} extends P ? Partial<ExtractEmitEvents<E>> | null : never)
+
 // The following is a series of overloads for providing props validation of
 // manually written render functions.
 
+// functional component
+// NOTE: is set on top to allow infer the props when doing
+/// const Func = (_props: { foo: string; bar?: number }) => ''
+/// h(Func, {})
+// otherwise it will default to `h(type: string)`
+export function h<P, E extends EmitsOptions = {}>(
+  type: FunctionalComponent<P, E>,
+  props?: RenderProps<P, E>,
+  children?: RawChildren | RawSlots
+): VNode
+export function h(type: FunctionalComponent): VNode
+
 // element
 export function h(type: string, children?: RawChildren): VNode
 export function h(
@@ -120,23 +166,24 @@ export function h(
 ): VNode
 
 // functional component
-export function h<P, E extends EmitsOptions = {}>(
-  type: FunctionalComponent<P, E>,
-  props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
-): VNode
+// export function h<P, E extends EmitsOptions = {}>(
+//   type: FunctionalComponent<P, E>,
+//   props?: (RawProps & P) | ({} extends P ? null : never),
+//   children?: RawChildren | RawSlots
+// ): VNode
 
 // catch-all for generic component types
 export function h(type: Component, children?: RawChildren): VNode
 
 // concrete component
-export function h<P>(
-  type: ConcreteComponent | string,
+export function h<P, E extends EmitsOptions = {}>(
+  type: ConcreteComponent<P, any, any, any, any, any, any, E> | string,
+  props?: RenderProps<P, E>,
   children?: RawChildren
 ): VNode
+
 export function h<P>(
-  type: ConcreteComponent<P> | string,
-  props?: (RawProps & P) | ({} extends P ? null : never),
+  type: ConcreteComponent | string,
   children?: RawChildren
 ): VNode
 
@@ -148,27 +195,56 @@ export function h(
 ): VNode
 
 // exclude `defineComponent` constructors
-export function h<P>(
-  type: ComponentOptions<P>,
-  props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
-): VNode
-
-// fake constructor type returned by `defineComponent` or class component
-export function h(type: Constructor, children?: RawChildren): VNode
-export function h<P, S>(
-  type: Constructor<P, S>,
-  props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: (RawChildren & S) | ({} extends S ? RawSlots : S)
+export function h<
+  P,
+  S,
+  E extends EmitsOptions = {},
+  PP = {},
+  Props = {},
+  Defaults = {}
+>(
+  type: ComponentOptions<P, any, any, any, any, any, any, E, S>,
+  props?: RenderProps<Partial<Defaults> & Omit<Props & PP, keyof Defaults>, E>,
+  children?: (RawChildren & Slots<S>) | ({} extends S ? RawSlots : Slots<S>)
 ): VNode
 
 // fake constructor type returned by `defineComponent`
+export function h<
+  P,
+  S,
+  E extends EmitsOptions = {},
+  PP = {},
+  Props = {},
+  Defaults = {}
+>(
+  type: DefineComponent<
+    P,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    E,
+    any,
+    S,
+    PP,
+    Props,
+    Defaults
+  >,
+  props?: RenderProps<Partial<Defaults> & Omit<Props & PP, keyof Defaults>, E>,
+  children?: (RawChildren & Slots<S>) | ({} extends S ? RawSlots : Slots<S>)
+): VNode
+export function h(type: DefineComponent): VNode
 export function h(type: DefineComponent, children?: RawChildren): VNode
-export function h<P>(
-  type: DefineComponent<P>,
-  props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+
+// fake constructor type returned by `defineComponent` or class component
+export function h<P, S, E extends EmitsOptions = {}>(
+  type: Constructor<P, S>,
+  props?: RenderProps<P, E>,
+  children?: (RawChildren & Slots<S>) | ({} extends S ? RawSlots : Slots<S>)
 ): VNode
+export function h(type: Constructor, children?: RawChildren): VNode
 
 // Actual implementation
 export function h(type: any, propsOrChildren?: any, children?: any): VNode {