feat: add props helper function

ktsn · ktsn · commit ce61b0c67140 · 2020-07-21T20:49:09.000+08:00
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -1,4 +1,4 @@
-import { ComponentOptions, SetupContext, UnwrapRef } from 'vue'
+import { ComponentOptions, SetupContext, UnwrapRef, ComponentObjectPropsOptions, ExtractPropTypes } from 'vue'
 import { Vue, VueBase, VueMixin } from './vue'
 
 export function Options<V extends Vue>(
@@ -58,7 +58,9 @@ export type MixedVueBase<Mixins extends VueMixin[]> = Mixins extends (infer T)[]
 export function mixins<T extends VueMixin[]>(...Ctors: T): MixedVueBase<T>
 export function mixins(...Ctors: VueMixin[]): VueBase {
   return class MixedVue<Props> extends Vue<Props> {
-    static __vccMixins = Ctors.map((Ctor) => Ctor.__vccOpts)
+    static __vccExtend(options: ComponentOptions) {
+      Ctors.forEach((Ctor) => Ctor.__vccExtend(options))
+    }
 
     constructor(props: Props, ctx: SetupContext) {
       super(props, ctx)
@@ -73,6 +75,17 @@ export function mixins(...Ctors: VueMixin[]): VueBase {
   }
 }
 
+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> {
+    static __vccExtend(options: ComponentOptions) {
+      options.props = propsOptions
+    }
+  }
+  return PropsMixin
+}
+
 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,7 +4,7 @@
 
 export { Vue, ClassComponentHooks } from './vue'
 
-export { Options, createDecorator, mixins, setup } from './helpers'
+export { Options, createDecorator, mixins, props, setup } from './helpers'
 
 /**
  * Other types
diff --git a/src/vue.ts b/src/vue.ts
@@ -29,14 +29,13 @@ function defineProxy(proxy: any, key: string, target: any): void {
   })
 }
 
-function getSuperOptions(Ctor: Function): ComponentOptions | undefined {
+function getSuper(Ctor: typeof VueImpl): typeof VueImpl | undefined {
   const superProto = Object.getPrototypeOf(Ctor.prototype)
   if (!superProto) {
     return undefined
   }
 
-  const Super = superProto.constructor as typeof Vue
-  return Super.__vccOpts
+  return superProto.constructor as typeof VueImpl
 }
 
 export interface VueStatic {
@@ -52,7 +51,7 @@ export interface VueStatic {
   __vccDecorators?: ((options: ComponentOptions) => void)[]
 
   /** @internal */
-  __vccMixins?: ComponentOptions[]
+  __vccExtend: ((options: ComponentOptions) => void)
 
   /** @internal */
   __vccHooks: string[]
@@ -134,9 +133,6 @@ class VueImpl {
   /** @internal */
   static __vccDecorators?: ((options: ComponentOptions) => void)[]
 
-  /** @internal */
-  static __vccMixins?: ComponentOptions[]
-
   /** @internal */
   static __vccHooks = [
     'data',
@@ -155,6 +151,12 @@ class VueImpl {
     'serverPrefetch',
   ]
 
+  /** @internal */
+  static __vccExtend(options: ComponentOptions) {
+    options.mixins = options.mixins || []
+    options.mixins.push(this.__vccOpts)
+  }
+
   /** @internal */
   static get __vccOpts(): ComponentOptions {
     // Early return if `this` is base class as it does not have any options
@@ -175,12 +177,9 @@ class VueImpl {
       : {})
 
     // Handle super class options
-    options.extends = getSuperOptions(Ctor)
-
-    // Handle mixins
-    const mixins = this.hasOwnProperty('__vccMixins') && this.__vccMixins
-    if (mixins) {
-      options.mixins = options.mixins ? options.mixins.concat(mixins) : mixins
+    const Super = getSuper(Ctor)
+    if (Super) {
+      Super.__vccExtend(options)
     }
 
     options.methods = { ...options.methods }
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 } from '../../src'
+import { Options, createDecorator, mixins, Vue, setup, props } from '../../src'
 import { mount, unmount } from '../helpers'
 
 describe('vue-class-component', () => {
@@ -378,6 +378,37 @@ describe('vue-class-component', () => {
     expect(root.valueB).toBe(456)
   })
 
+  it('props mixin: prop names', () => {
+    const Props = props(['foo', 'bar'])
+
+    class App extends Props {
+      baz = this.foo + this.bar
+    }
+
+    const { root } = mount(App, { foo: 'Hello', bar: 'World' })
+    expect(root.baz).toBe('HelloWorld')
+  })
+
+  it('props mixin: props options object', () => {
+    const Props = props({
+      foo: {
+        type: String,
+        default: 'The answer is'
+      },
+      bar: {
+        type: Number,
+        required: true
+      }
+    })
+
+    class App extends Props {
+      baz = this.foo + ': ' + this.bar
+    }
+
+    const { root } = mount(App, { bar: 42 })
+    expect(root.baz).toBe('The answer is: 42')
+  })
+
   it('uses composition functions', () => {
     function useCounter() {
       const count = ref(0)
