feat(runtime-core): mixins/extends support in TypeScript

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

@@ -426,83 +426,117 @@ describe('api: options', () => {
 
   test('mixins', () => {
     const calls: string[] = []
-    const mixinA = {
+    const mixinA = defineComponent({
       data() {
         return {
           a: 1
         }
       },
-      created(this: any) {
+      created() {
         calls.push('mixinA created')
         expect(this.a).toBe(1)
-        expect(this.b).toBe(2)
-        expect(this.c).toBe(3)
+        // should not visit other props/data... in one mixin
+        // ????? only test current mixin props/data
+        // expect(this.b).toBe(2)
+        // expect(this.c).toBe(3)
       },
       mounted() {
         calls.push('mixinA mounted')
       }
-    }
-    const mixinB = {
+    })
+    const mixinB = defineComponent({
+      props: {
+        bP: {
+          type: String
+        }
+      },
       data() {
         return {
           b: 2
         }
       },
-      created(this: any) {
+      created() {
         calls.push('mixinB created')
-        expect(this.a).toBe(1)
+        // expect(this.a).toBe(1)
         expect(this.b).toBe(2)
-        expect(this.c).toBe(3)
+        expect(this.bP).toBeUndefined()
+        // expect(this.c).toBe(3)
       },
       mounted() {
         calls.push('mixinB mounted')
       }
-    }
-    const Comp = {
-      mixins: [mixinA, mixinB],
+    })
+    const mixinC = defineComponent({
+      props: ['cP1', 'cP2'],
       data() {
         return {
           c: 3
         }
       },
-      created(this: any) {
+      created() {
+        calls.push('mixinC created')
+        // expect(this.a).toBe(1)
+        // expect(this.b).toBe(2)
+        // expect(this.bP).toBeUndefined()
+        expect(this.c).toBe(3)
+        expect(this.cP1).toBeUndefined()
+      },
+      mounted() {
+        calls.push('mixinC mounted')
+      }
+    })
+    const Comp = defineComponent({
+      mixins: [mixinA, mixinB, mixinC],
+      data() {
+        return {
+          z: 4
+        }
+      },
+      created() {
         calls.push('comp created')
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
+        expect(this.bP).toBeUndefined()
         expect(this.c).toBe(3)
+        expect(this.cP2).toBeUndefined()
+        expect(this.z).toBe(4)
       },
       mounted() {
         calls.push('comp mounted')
       },
-      render(this: any) {
+      render() {
         return `${this.a}${this.b}${this.c}`
       }
-    }
-
+    })
     expect(renderToString(h(Comp))).toBe(`123`)
     expect(calls).toEqual([
       'mixinA created',
       'mixinB created',
+      'mixinC created',
       'comp created',
       'mixinA mounted',
       'mixinB mounted',
+      'mixinC mounted',
       'comp mounted'
     ])
   })
 
   test('extends', () => {
     const calls: string[] = []
-    const Base = {
+    const Base = defineComponent({
       data() {
         return {
           a: 1
         }
       },
+      methods: {
+        sayA() {}
+      },
       mounted() {
         calls.push('base')
       }
-    }
-    const Comp = {
+    })
+    const Comp = defineComponent({
       extends: Base,
       data() {
         return {
@@ -512,15 +546,60 @@ describe('api: options', () => {
       mounted() {
         calls.push('comp')
       },
-      render(this: any) {
+      render() {
         return `${this.a}${this.b}`
       }
-    }
+    })
 
     expect(renderToString(h(Comp))).toBe(`12`)
     expect(calls).toEqual(['base', 'comp'])
   })
 
+  test('extends with mixins', () => {
+    const calls: string[] = []
+    const Base = defineComponent({
+      data() {
+        return {
+          a: 1
+        }
+      },
+      methods: {
+        sayA() {}
+      },
+      mounted() {
+        calls.push('base')
+      }
+    })
+    const Base2 = defineComponent({
+      data() {
+        return {
+          b: true
+        }
+      },
+      mounted() {
+        calls.push('base2')
+      }
+    })
+    const Comp = defineComponent({
+      extends: Base,
+      mixins: [Base2],
+      data() {
+        return {
+          c: 2
+        }
+      },
+      mounted() {
+        calls.push('comp')
+      },
+      render() {
+        return `${this.a}${this.b}${this.c}`
+      }
+    })
+
+    expect(renderToString(h(Comp))).toBe(`1true2`)
+    expect(calls).toEqual(['base', 'base2', 'comp'])
+  })
+
   test('accessing setup() state from options', async () => {
     const Comp = defineComponent({
       setup() {

packages/runtime-core/src/apiDefineComponent.ts

@@ -3,10 +3,14 @@ import {
   MethodOptions,
   ComponentOptionsWithoutProps,
   ComponentOptionsWithArrayProps,
-  ComponentOptionsWithObjectProps
+  ComponentOptionsWithObjectProps,
+  IComponentOptions
 } from './componentOptions'
 import { SetupContext, RenderFunction, FunctionalComponent } from './component'
-import { ComponentPublicInstance } from './componentProxy'
+import {
+  CreateComponentPublicInstance,
+  ComponentPublicInstanceConstructor
+} from './componentProxy'
 import { ExtractPropTypes, ComponentPropsOptions } from './componentProps'
 import { EmitsOptions } from './componentEmits'
 import { isFunction } from '@vue/shared'
@@ -24,17 +28,21 @@ export function defineComponent<Props, RawBindings = object>(
     props: Readonly<Props>,
     ctx: SetupContext
   ) => RawBindings | RenderFunction
-): {
-  new (): ComponentPublicInstance<
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
     Props,
     RawBindings,
     {},
     {},
     {},
+    {},
+    {},
+    {},
     // public props
     VNodeProps & Props
   >
-} & FunctionalComponent<Props>
+> &
+  FunctionalComponent<Props>
 
 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -45,21 +53,46 @@ export function defineComponent<
   D = {},
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin extends IComponentOptions = {},
+  Extends extends IComponentOptions = {},
   E extends EmitsOptions = Record<string, any>,
   EE extends string = string
 >(
-  options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
-): {
-  new (): ComponentPublicInstance<
+  options: ComponentOptionsWithoutProps<
     Props,
     RawBindings,
     D,
     C,
     M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
     E,
     VNodeProps & Props
   >
-} & ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
+> &
+  ComponentOptionsWithoutProps<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
 
 // overload 3: object format with array props declaration
 // props inferred as { [key in PropNames]?: any }
@@ -70,6 +103,8 @@ export function defineComponent<
   D,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin extends IComponentOptions = {},
+  Extends extends IComponentOptions = {},
   E extends EmitsOptions = Record<string, any>,
   EE extends string = string
 >(
@@ -79,13 +114,36 @@ export function defineComponent<
     D,
     C,
     M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
+): ComponentPublicInstanceConstructor<
+  // array props technically doesn't place any contraints on props in TSX before,
+  // but now we can export array props in TSX
+  CreateComponentPublicInstance<
+    Readonly<{ [key in PropNames]?: any }>,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E
+  >
+> &
+  ComponentOptionsWithArrayProps<
+    PropNames,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
     E,
     EE
   >
-): {
-  // array props technically doesn't place any contraints on props in TSX
-  new (): ComponentPublicInstance<VNodeProps, RawBindings, D, C, M, E>
-} & ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, E, EE>
 
 // overload 4: object format with object props declaration
 // see `ExtractPropTypes` in ./componentProps.ts
@@ -97,6 +155,8 @@ export function defineComponent<
   D,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin extends IComponentOptions = {},
+  Extends extends IComponentOptions = {},
   E extends EmitsOptions = Record<string, any>,
   EE extends string = string
 >(
@@ -106,20 +166,35 @@ export function defineComponent<
     D,
     C,
     M,
+    Mixin,
+    Extends,
     E,
     EE
   >
-): {
-  new (): ComponentPublicInstance<
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
     ExtractPropTypes<PropsOptions>,
     RawBindings,
     D,
     C,
     M,
+    Mixin,
+    Extends,
     E,
     VNodeProps & ExtractPropTypes<PropsOptions, false>
   >
-} & ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, EE>
+> &
+  ComponentOptionsWithObjectProps<
+    PropsOptions,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
 
 // implementation, close to no-op
 export function defineComponent(options: unknown) {