feat: add emits mixin helper

ktsn · ktsn · commit 4846b414a80b · 2020-09-12T18:58:15.000+08:00
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -1,9 +1,9 @@
-import { ComponentOptions, SetupContext, UnwrapRef, ComponentObjectPropsOptions, ExtractPropTypes } from 'vue'
-import { Vue, VueBase, VueMixin } from './vue'
+import { ComponentOptions, UnwrapRef, ComponentObjectPropsOptions, ExtractPropTypes } from 'vue'
+import { EmitsOptions, ObjectEmitsOptions, Vue, VueConstructor, VueMixin } from './vue'
 
 export function Options<V extends Vue>(
   options: ComponentOptions & ThisType<V>
-): <VC extends VueBase>(target: VC) => VC {
+): <VC extends VueConstructor>(target: VC) => VC {
   return (Component) => {
     Component.__vccBase = options
     return Component
@@ -12,7 +12,7 @@ export function Options<V extends Vue>(
 
 export interface VueDecorator {
   // Class decorator
-  (Ctor: VueBase): void
+  (Ctor: VueConstructor): void
 
   // Property decorator
   (target: Vue, key: string): void
@@ -24,9 +24,9 @@ export interface VueDecorator {
 export function createDecorator(
   factory: (options: ComponentOptions, key: string, index: number) => void
 ): VueDecorator {
-  return (target: Vue | VueBase, key?: any, index?: any) => {
+  return (target: Vue | VueConstructor, key?: any, index?: any) => {
     const Ctor =
-      typeof target === 'function' ? target : (target.constructor as VueBase)
+      typeof target === 'function' ? target : (target.constructor as VueConstructor)
     if (!Ctor.__vccDecorators) {
       Ctor.__vccDecorators = []
     }
@@ -52,40 +52,51 @@ export type UnionToIntersection<U> = (
 export type ExtractInstance<T> = T extends VueMixin<infer V> ? V : never
 
 export type MixedVueBase<Mixins extends VueMixin[]> = Mixins extends (infer T)[]
-  ? VueBase<UnionToIntersection<ExtractInstance<T>> & Vue> & PropsMixin
+  ? VueConstructor<UnionToIntersection<ExtractInstance<T>> & Vue> & PropsMixin
   : never
 
 export function mixins<T extends VueMixin[]>(...Ctors: T): MixedVueBase<T>
-export function mixins(...Ctors: VueMixin[]): VueBase {
-  return class MixedVue<Props> extends Vue<Props> {
+export function mixins(...Ctors: VueMixin[]): VueConstructor {
+  return class MixedVue extends Vue {
     static __vccExtend(options: ComponentOptions) {
       Ctors.forEach((Ctor) => Ctor.__vccExtend(options))
     }
 
-    constructor(props: Props, ctx: SetupContext) {
-      super(props, ctx)
+    constructor(...args: any[]) {
+      super(...args)
 
       Ctors.forEach((Ctor) => {
-        const data = new (Ctor as any)(props, ctx)
+        const data = new (Ctor as VueConstructor)(...args)
         Object.keys(data).forEach((key) => {
-          ;(this as any)[key] = data[key]
+          ;(this as any)[key] = (data as any)[key]
         })
       })
     }
   }
 }
 
-export function props<PropNames extends string, Props = Readonly<{  [key in PropNames]?: any }>>(propNames: PropNames[]): VueBase<Vue<Props> & Props>
-export function props<PropsOptions extends ComponentObjectPropsOptions, Props = Readonly<ExtractPropTypes<PropsOptions>>>(propsOptions: PropsOptions): VueBase<Vue<Props> & Props>
-export function props(propsOptions: string[] | ComponentObjectPropsOptions): VueBase {
-  class PropsMixin<Props> extends Vue<Props> {
+export function props<PropNames extends string, Props = Readonly<{ [key in PropNames]?: any }>>(propNames: PropNames[]): VueConstructor<Vue<Props> & Props>
+export function props<PropsOptions extends ComponentObjectPropsOptions, Props = Readonly<ExtractPropTypes<PropsOptions>>>(propsOptions: PropsOptions): VueConstructor<Vue<Props> & Props>
+export function props(propsOptions: string[] | ComponentObjectPropsOptions): VueConstructor {
+  class PropsMixin extends Vue {
     static __vccExtend(options: ComponentOptions) {
       options.props = propsOptions
     }
   }
   return PropsMixin
 }
 
+export function emits<EmitNames extends string>(emitNames: EmitNames[]): VueConstructor<Vue<unknown, EmitNames[]>>
+export function emits<EmitsOptions extends ObjectEmitsOptions>(emitsOptions: EmitsOptions): VueConstructor<Vue<unknown, EmitsOptions>>
+export function emits(emitsOptions: EmitsOptions): VueConstructor {
+  class EmitsMixin extends Vue {
+    static __vccExtend(options: ComponentOptions) {
+      options.emits = emitsOptions
+    }
+  }
+  return EmitsMixin
+}
+
 export function setup<R>(setupFn: () => R): UnwrapRef<R> {
   // Hack to delay the invocation of setup function.
   // Will be called after dealing with class properties.
diff --git a/src/index.ts b/src/index.ts
@@ -4,13 +4,13 @@
 
 export { Vue, ClassComponentHooks } from './vue'
 
-export { Options, createDecorator, mixins, props, setup } from './helpers'
+export { Options, createDecorator, mixins, props, emits, setup } from './helpers'
 
 /**
  * Other types
  */
 
-export { VueBase, VueMixin, VueStatic, VueConstructor } from './vue'
+export { VueBase, VueMixin, VueStatic, VueConstructor, EmitsOptions, ObjectEmitsOptions } from './vue'
 
 export {
   VueDecorator,
diff --git a/src/vue.ts b/src/vue.ts
@@ -84,10 +84,9 @@ export interface VueStatic {
   registerHooks(keys: string[]): void
 }
 
-export type VueMixin<V extends Vue = Vue> = VueStatic & { prototype: V }
+export type VueBase = Vue<unknown, never[]>
 
-export type VueBase<V extends Vue = Vue> = VueMixin<V> &
-  (new (...args: any[]) => V)
+export type VueMixin<V extends VueBase = Vue> = VueStatic & { prototype: V }
 
 export interface ClassComponentHooks {
   // To be extended on user land
@@ -108,19 +107,22 @@ export interface ClassComponentHooks {
   serverPrefetch?(): Promise<unknown>
 }
 
-export type Vue<Props = unknown> = ComponentPublicInstance<
+export type ObjectEmitsOptions = Record<string, ((...args: any[]) => any) | null>
+export type EmitsOptions = ObjectEmitsOptions | string[]
+
+export type Vue<Props = unknown, Emits extends EmitsOptions = {}> = ComponentPublicInstance<
   {},
   {},
   {},
   {},
   {},
-  Record<string, any>,
+  Emits,
   Props
 > &
   ClassComponentHooks
 
-export interface VueConstructor extends VueStatic {
-  new <Props = unknown>(prop: Props, ctx: SetupContext): Vue<Props>
+export interface VueConstructor<V extends VueBase = Vue> extends VueStatic {
+  new (...args: any[]): V
 }
 
 class VueImpl {
diff --git a/test/helpers.ts b/test/helpers.ts
@@ -1,9 +1,9 @@
 import { createApp, App } from 'vue'
-import { VueBase } from '../src/vue'
+import { VueConstructor } from '../src/vue'
 
 const wrapper = document.createElement('div')
 
-export function mount<T extends VueBase>(
+export function mount<T extends VueConstructor>(
   Component: T,
   props?: Record<string, any>
 ) {
diff --git a/test/specs/test.spec.ts b/test/specs/test.spec.ts
@@ -1,6 +1,6 @@
 import 'reflect-metadata'
 import { h, resolveComponent, ref, onMounted, Ref, watch, toRef } from 'vue'
-import { Options, createDecorator, mixins, Vue, setup, props } from '../../src'
+import { Options, createDecorator, mixins, Vue, setup, props, emits } from '../../src'
 import { mount, unmount } from '../helpers'
 
 describe('vue-class-component', () => {
@@ -59,15 +59,11 @@ describe('vue-class-component', () => {
   }
 
   it('data: $props should be available', () => {
-    interface Props {
-      foo: number
-    }
-
     @Options({
       props: ['foo'],
     })
-    class MyComp extends Vue<Props> {
-      message = 'answer is ' + this.$props.foo
+    class MyComp extends Vue {
+      message = 'answer is ' + (this.$props as any).foo
     }
 
     const { root } = mount(MyComp, { foo: 42 })
@@ -391,6 +387,81 @@ describe('vue-class-component', () => {
     expect(root.baz).toBe('The answer is: 42')
   })
 
+  it('emits mixin: emit names', () => {
+    const Emits = emits(['foo', 'bar'])
+
+    class Child extends Emits {
+      mounted() {
+        this.$emit('foo', 42)
+        this.$emit('bar', 'Hello', 'World')
+      }
+
+      render() {
+        return h('span')
+      }
+    }
+
+    class App extends Vue {
+      fooResult: number | null = null
+      barResult: string | null = null
+
+      render() {
+        return h(Child, {
+          onFoo: (result: number) => {
+            this.fooResult = result
+          },
+
+          onBar: (res1: string, res2: string) => {
+            this.barResult = res1 + res2
+          }
+        })
+      }
+    }
+
+    const { root } = mount(App)
+    expect(root.fooResult).toBe(42)
+    expect(root.barResult).toBe('HelloWorld')
+  })
+
+  it('emits mixin: emits options object', () => {
+    const Emits = emits({
+      foo: (_n: number) => true,
+      bar: (_n1: string, _n2: string) => true
+    })
+
+    class Child extends Emits {
+      mounted() {
+        this.$emit('foo', 42)
+        this.$emit('bar', 'Hello', 'World')
+      }
+
+      render() {
+        return h('span')
+      }
+    }
+
+    class App extends Vue {
+      fooResult: number | null = null
+      barResult: string | null = null
+
+      render() {
+        return h(Child, {
+          onFoo: (result: number) => {
+            this.fooResult = result
+          },
+
+          onBar: (res1: string, res2: string) => {
+            this.barResult = res1 + res2
+          }
+        })
+      }
+    }
+
+    const { root } = mount(App)
+    expect(root.fooResult).toBe(42)
+    expect(root.barResult).toBe('HelloWorld')
+  })
+
   it('uses composition functions', () => {
     function useCounter() {
       const count = ref(0)
