feat: support mixins with defineComponent

Author: gulewei11022

types/options.d.ts

@@ -3,6 +3,7 @@ import { VNode, VNodeData, VNodeDirective, NormalizedScopedSlot } from './vnode'
 import { SetupContext } from './v3-setup-context'
 import { DebuggerEvent } from './v3-generated'
 import { DefineComponent } from './v3-define-component'
+import { ComponentOptionsMixin } from './v3-component-options'
 
 type Constructor = {
   new (...args: any[]): any
@@ -104,11 +105,11 @@ export type ThisTypedComponentOptionsWithArrayProps<
     Computed,
     PropNames[],
     Record<PropNames, any>,
-    SetupBindings
-  > & {
-    mixins?: (Mixin | typeof Vue)[]
-    extends?: Extends | typeof Vue
-  } & ThisType<
+    SetupBindings,
+    Mixin,
+    Extends
+  > &
+  ThisType<
     CombinedVueInstance<
       V,
       Data,
@@ -141,11 +142,11 @@ export type ThisTypedComponentOptionsWithRecordProps<
     Computed,
     RecordPropsDefinition<Props>,
     Props,
-    SetupBindings
-  > & {
-    mixins?: (Mixin | typeof Vue)[]
-    extends?: Extends | typeof Vue
-  } & ThisType<
+    SetupBindings,
+    Mixin,
+    Extends
+  > &
+  ThisType<
     CombinedVueInstance<
       V,
       Data,
@@ -170,7 +171,9 @@ export interface ComponentOptions<
   Computed = DefaultComputed,
   PropsDef = PropsDefinition<DefaultProps>,
   Props = DefaultProps,
-  RawBindings = {}
+  RawBindings = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin
 > {
   data?: Data
   props?: PropsDef
@@ -229,12 +232,12 @@ export interface ComponentOptions<
   }
 
   parent?: Vue
-  mixins?: (ComponentOptions<Vue> | typeof Vue)[]
+  mixins?: (Mixin | ComponentOptions<Vue> | typeof Vue)[]
   name?: string
   // for SFC auto name inference w/ ts-loader check
   __name?: string
   // TODO: support properly inferred 'extends'
-  extends?: ComponentOptions<Vue> | typeof Vue
+  extends?: Extends | ComponentOptions<Vue> | typeof Vue
   delimiters?: [string, string]
   comments?: boolean
   inheritAttrs?: boolean

types/test/vue-test.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from '../index'
+import Vue, { VNode, defineComponent } from '../index'
 import { ComponentOptions } from '../options'
 
 class Test extends Vue {
@@ -250,7 +250,14 @@ const ComponentWithStyleInVNodeData = Vue.extend({
 // infer mixin type with new Vue() #12730
 new Vue({
   mixins: [
-    {
+    defineComponent({
+      props: {
+        p1: String,
+        p2: {
+          type: Number,
+          default: 0
+        }
+      },
       data() {
         return {
           foo: 123
@@ -261,7 +268,7 @@ new Vue({
           return 123
         }
       }
-    },
+    }),
     {
       methods: {
         hello(n: number) {}
@@ -271,5 +278,8 @@ new Vue({
   created() {
     this.hello(this.foo)
     this.hello(this.bar)
+    // @ts-expect-error
+    this.hello(this.p1)
+    this.hello(this.p2)
   }
 })

types/v3-component-public-instance.d.ts

@@ -57,12 +57,6 @@ type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
     : false
   : false
 
-type inferData<T> = T extends { data?: infer D }
-  ? D extends (this: Vue) => infer R
-    ? IfAny<R, {}, R>
-    : IfAny<D, {}, D>
-  : {}
-
 type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
   infer P,
   infer B,
@@ -78,29 +72,6 @@ type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
   ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
       IntersectionMixin<Mixin> &
       IntersectionMixin<Extends>
-  : // V3 data not assignable to V2 data
-  Omit<T, 'data'> extends ComponentOptionsBase<
-      infer P,
-      infer B,
-      any,
-      infer C,
-      infer M,
-      infer Mixin,
-      infer Extends,
-      any,
-      any,
-      infer Defaults
-    >
-  ? OptionTypesType<
-      P & {},
-      B & {},
-      inferData<T> & {},
-      C & {},
-      M & {},
-      Defaults & {}
-    > &
-      IntersectionMixin<Mixin> &
-      IntersectionMixin<Extends>
   : never
 
 // ExtractMixin(map type) is used to resolve circularly references

types/vue.d.ts

@@ -13,12 +13,15 @@ import {
 import { VNode, VNodeData, VNodeChildren, NormalizedScopedSlot } from './vnode'
 import { PluginFunction, PluginObject } from './plugin'
 import { DefineComponent } from './v3-define-component'
-import { nextTick } from './v3-generated'
+import { nextTick, UnwrapNestedRefs, ShallowUnwrapRef } from './v3-generated'
 import {
   UnwrapMixinsType,
   IntersectionMixin
 } from './v3-component-public-instance'
-import { ExtractComputedReturns } from './v3-component-options'
+import {
+  ExtractComputedReturns,
+  ComponentOptionsMixin
+} from './v3-component-options'
 
 export interface CreateElement {
   (
@@ -99,21 +102,17 @@ export interface Vue<
   $createElement: CreateElement
 }
 
-type ComponentMixin = ComponentOptions<any, any, any, any, any>
-
 export type CombinedVueInstance<
   Instance extends Vue,
   Data,
   Methods,
   Computed,
   Props,
   SetupBindings = {},
-  Mixin extends ComponentMixin = ComponentMixin,
-  Extends extends ComponentMixin = ComponentMixin,
-  PublicMixin = IntersectionMixin<Mixin> &
-    IntersectionMixin<Extends> &
-    IntersectionMixin<ComponentOptions<any, any, any, any, any>> // prevent produce `never` in UnwrapMixinsType
-> = UnwrapMixinsType<PublicMixin, 'D'> &
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>
+> = UnwrapNestedRefs<UnwrapMixinsType<PublicMixin, 'D'>> &
   Data &
   UnwrapMixinsType<PublicMixin, 'M'> &
   Methods &
@@ -122,7 +121,7 @@ export type CombinedVueInstance<
   UnwrapMixinsType<PublicMixin, 'P'> &
   Props &
   Instance &
-  UnwrapMixinsType<PublicMixin, 'B'> &
+  ShallowUnwrapRef<UnwrapMixinsType<PublicMixin, 'B'>> &
   (SetupBindings extends void ? {} : SetupBindings)
 
 export type ExtendedVue<
@@ -132,8 +131,8 @@ export type ExtendedVue<
   Computed,
   Props,
   SetupBindings = {},
-  Mixin extends ComponentMixin = ComponentMixin,
-  Extends extends ComponentMixin = ComponentMixin
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin
 > = VueConstructor<
   CombinedVueInstance<
     Instance,
@@ -171,8 +170,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed = object,
     PropNames extends string = never,
     SetupBindings = {},
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     options?: ThisTypedComponentOptionsWithArrayProps<
       V,
@@ -207,8 +206,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed = object,
     Props = object,
     SetupBindings = {},
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     options?: ThisTypedComponentOptionsWithRecordProps<
       V,
@@ -252,8 +251,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed,
     PropNames extends string = never,
     SetupBindings = {},
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     options?: ThisTypedComponentOptionsWithArrayProps<
       V,
@@ -285,8 +284,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed,
     Props,
     SetupBindings = {},
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     options?: ThisTypedComponentOptionsWithRecordProps<
       V,
@@ -353,8 +352,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed,
     PropNames extends string = never,
     SetupBindings = {},
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     id: string,
     definition?: ThisTypedComponentOptionsWithArrayProps<
@@ -383,8 +382,8 @@ export interface VueConstructor<V extends Vue = Vue> {
     Computed,
     Props,
     SetupBindings,
-    Mixin extends ComponentMixin = ComponentMixin,
-    Extends extends ComponentMixin = ComponentMixin
+    Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin = ComponentOptionsMixin
   >(
     id: string,
     definition?: ThisTypedComponentOptionsWithRecordProps<