feat: integrated vue-component-type-helpers

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [14, 16, 18]
+        node: [16, 18]
 
     steps:
     - uses: actions/checkout@v3

package.json

@@ -60,8 +60,9 @@
     "vitest": "0.29.8",
     "vue": "3.2.47",
     "vue-class-component": "8.0.0-rc.1",
+    "vue-component-type-helpers": "1.3.14-patch.1",
     "vue-router": "4.1.6",
-    "vue-tsc": "1.2.0",
+    "vue-tsc": "1.3.14",
     "vuex": "4.1.0"
   },
   "peerDependencies": {

src/index.ts

@@ -25,5 +25,3 @@ export {
   MountingOptions,
   createWrapperError
 }
-
-export type { ComponentMountingOptions } from './mount'

src/mount.ts

@@ -1,150 +1,54 @@
 import {
-  FunctionalComponent,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithoutProps,
   ExtractPropTypes,
   VNodeProps,
   ComponentOptionsMixin,
-  DefineComponent,
-  MethodOptions,
   AllowedComponentProps,
   ComponentCustomProps,
-  ExtractDefaultPropTypes,
   EmitsOptions,
   ComputedOptions,
   ComponentPropsOptions,
-  Prop
+  VNode
 } from 'vue'
-import { MountingOptions } from './types'
+import { GlobalMountOptions, MountingOptions } from './types'
 import { VueWrapper } from './vueWrapper'
 import { trackInstance } from './utils/autoUnmount'
 import { createVueWrapper } from './wrapperFactory'
 import { createInstance } from './createInstance'
+import type {
+  ComponentProps,
+  ComponentSlots,
+  ComponentExposed
+} from 'vue-component-type-helpers'
 
 // NOTE this should come from `vue`
 type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
 
-export type ComponentMountingOptions<T> = T extends DefineComponent<
-  infer PropsOrPropOptions,
-  any,
-  infer D,
-  any,
-  any
->
-  ? MountingOptions<
-      Partial<ExtractDefaultPropTypes<PropsOrPropOptions>> &
-        Omit<
-          Readonly<ExtractPropTypes<PropsOrPropOptions>> & PublicProps,
-          keyof ExtractDefaultPropTypes<PropsOrPropOptions>
-        >,
-      D
-    > &
-      Record<string, any>
-  : MountingOptions<any>
-
-// Class component (without vue-class-component) - no props
-export function mount<V extends {}>(
-  originalComponent: {
-    new (...args: any[]): V
-    __vccOpts: any
-  },
-  options?: MountingOptions<any> & Record<string, any>
-): VueWrapper<ComponentPublicInstance<V>>
-
-// Class component (without vue-class-component) - props
-export function mount<V extends {}, P>(
-  originalComponent: {
-    new (...args: any[]): V
-    __vccOpts: any
-    defaultProps?: Record<string, Prop<any>> | string[]
-  },
-  options?: MountingOptions<P & PublicProps> & Record<string, any>
-): VueWrapper<ComponentPublicInstance<V>>
-
-// Class component - no props
-export function mount<V extends {}>(
-  originalComponent: {
-    new (...args: any[]): V
-    registerHooks(keys: string[]): void
-  },
-  options?: MountingOptions<any> & Record<string, any>
-): VueWrapper<ComponentPublicInstance<V>>
-
-// Class component - props
-export function mount<V extends {}, P>(
-  originalComponent: {
-    new (...args: any[]): V
-    props(Props: P): any
-    registerHooks(keys: string[]): void
-  },
-  options?: MountingOptions<P & PublicProps> & Record<string, any>
-): VueWrapper<ComponentPublicInstance<V>>
+type PatchSlot<T> = T extends (...args: infer P) => any
+  ? (...args: P) => any
+  : T
 
-// Functional component with emits
-export function mount<Props extends {}, E extends EmitsOptions = {}>(
-  originalComponent: FunctionalComponent<Props, E>,
-  options?: MountingOptions<Props & PublicProps> & Record<string, any>
-): VueWrapper<ComponentPublicInstance<Props>>
-
-// Component declared with defineComponent
 export function mount<
-  PropsOrPropOptions = {},
-  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,
-  Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
-  Defaults extends {} = ExtractDefaultPropTypes<PropsOrPropOptions>
+  T extends ((...args: any) => any) | (new (...args: any) => any)
 >(
-  component: DefineComponent<
-    PropsOrPropOptions,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    PP,
-    Props,
-    Defaults
-  >,
-  options?: MountingOptions<
-    Partial<Defaults> & Omit<Props & PublicProps, keyof Defaults>,
-    D
-  > &
-    Record<string, any>
-): VueWrapper<
-  InstanceType<
-    DefineComponent<
-      PropsOrPropOptions,
-      RawBindings,
-      D,
-      C,
-      M,
-      Mixin,
-      Extends,
-      EmitsOptions,
-      EE,
-      PP,
-      Props,
-      Defaults
-    >
-  >
->
-// component declared by vue-tsc ScriptSetup
-export function mount<T extends DefineComponent<any, any, any, any, any>>(
-  component: T,
-  options?: ComponentMountingOptions<T>
-): VueWrapper<InstanceType<T>>
+  originalComponent: T,
+  options?: Record<string, unknown> & {
+    props?: Record<string, unknown> & ComponentProps<T>
+    slots?: {
+      [K in keyof ComponentSlots<T>]:
+        | PatchSlot<ComponentSlots<T>[K]>
+        | string
+        | VNode
+        | VNode[]
+        | (new () => any)
+        | { template: string }
+    }
+    global?: GlobalMountOptions
+  }
+): VueWrapper<ComponentExposed<T> & ComponentProps<T>>
 
 // Component declared with no props
 export function mount<

src/vueWrapper.ts

@@ -1,10 +1,4 @@
-import {
-  nextTick,
-  App,
-  ComponentCustomProperties,
-  ComponentPublicInstance,
-  VNode
-} from 'vue'
+import { nextTick, App, ComponentPublicInstance, VNode } from 'vue'
 
 import { config } from './config'
 import domEvents from './constants/dom-events'
@@ -75,14 +69,10 @@ function createVMProxy<T extends ComponentPublicInstance>(
 }
 
 export class VueWrapper<
-  T extends Omit<
-    ComponentPublicInstance,
-    '$emit' | keyof ComponentCustomProperties
-  > & {
-    $emit: (event: any, ...args: any[]) => void
-  } & ComponentCustomProperties = ComponentPublicInstance
+  T = any,
+  C extends ((...args: any) => T) | (new (...args: any) => T) = any
 > extends BaseWrapper<Node> {
-  private readonly componentVM: T
+  private readonly componentVM: T & ComponentPublicInstance
   private readonly rootVM: ComponentPublicInstance | undefined | null
   private readonly __app: App | null
   private readonly __setProps:
@@ -92,7 +82,7 @@ export class VueWrapper<
 
   constructor(
     app: App | null,
-    vm: T,
+    vm: T & ComponentPublicInstance,
     setProps?: (props: Record<string, unknown>) => void
   ) {
     super(vm?.$el)
@@ -108,7 +98,10 @@ export class VueWrapper<
     // or for components with a setup that returns a render function (as they have an empty proxy)
     // in both cases, we return `vm` directly instead
     if (hasSetupState(vm)) {
-      this.componentVM = createVMProxy<T>(vm, vm.$.setupState)
+      this.componentVM = createVMProxy<T & ComponentPublicInstance>(
+        vm,
+        vm.$.setupState
+      )
     } else {
       this.componentVM = vm
     }
@@ -217,7 +210,7 @@ export class VueWrapper<
     return this.hasMultipleRoots ? this.parentElement : this.vm.$el
   }
 
-  get vm(): T {
+  get vm(): T & ComponentPublicInstance {
     return this.componentVM
   }
 

test-dts/mount.d-test.ts

@@ -278,16 +278,16 @@ class WithPropCustomClassComponent extends CustomClassComponent<CustomClassCompo
 }
 
 expectError(
-  mount<WithPropCustomClassComponent, CustomClassComponentProps>(
+  mount(
     // @ts-expect-error should has props error
-    WithPropCustomClassComponent,
+    WithPropCustomClassComponent as typeof WithPropCustomClassComponent & (new () => { $props: CustomClassComponentProps }),
     {
       props: {}
     }
   )
 )
-mount<WithPropCustomClassComponent, CustomClassComponentProps>(
-  WithPropCustomClassComponent,
+mount(
+  WithPropCustomClassComponent as typeof WithPropCustomClassComponent & (new () => { $props: CustomClassComponentProps }),
   {
     props: { size: 'small' }
   }