fix(types): fix compat with generated types that rely on CreateComponentPublicInstance

close #10842

Author: yyx990803

packages/dts-test/defineComponent.test-d.tsx

@@ -1766,3 +1766,196 @@ defineComponent({
     expectType<string | null | undefined>(props.foo)
   },
 })
+
+import type * as vue from 'vue'
+
+interface ErrorMessageSlotProps {
+  message: string | undefined
+}
+/**
+ * #10842
+ * component types generated by vue-tsc
+ * relying on legacy CreateComponentPublicInstance signature
+ */
+declare const ErrorMessage: {
+  new (...args: any[]): vue.CreateComponentPublicInstance<
+    Readonly<
+      vue.ExtractPropTypes<{
+        as: {
+          type: StringConstructor
+          default: any
+        }
+        name: {
+          type: StringConstructor
+          required: true
+        }
+      }>
+    >,
+    () =>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >
+      | vue.Slot<any>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      | {
+          default: () => VNode<
+            vue.RendererNode,
+            vue.RendererElement,
+            {
+              [key: string]: any
+            }
+          >[]
+        },
+    unknown,
+    {},
+    {},
+    vue.ComponentOptionsMixin,
+    vue.ComponentOptionsMixin,
+    {},
+    vue.VNodeProps &
+      vue.AllowedComponentProps &
+      vue.ComponentCustomProps &
+      Readonly<
+        vue.ExtractPropTypes<{
+          as: {
+            type: StringConstructor
+            default: any
+          }
+          name: {
+            type: StringConstructor
+            required: true
+          }
+        }>
+      >,
+    {
+      as: string
+    },
+    true,
+    {},
+    {},
+    {
+      P: {}
+      B: {}
+      D: {}
+      C: {}
+      M: {}
+      Defaults: {}
+    },
+    Readonly<
+      vue.ExtractPropTypes<{
+        as: {
+          type: StringConstructor
+          default: any
+        }
+        name: {
+          type: StringConstructor
+          required: true
+        }
+      }>
+    >,
+    () =>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >
+      | vue.Slot<any>
+      | VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      | {
+          default: () => VNode<
+            vue.RendererNode,
+            vue.RendererElement,
+            {
+              [key: string]: any
+            }
+          >[]
+        },
+    {},
+    {},
+    {},
+    {
+      as: string
+    }
+  >
+  __isFragment?: never
+  __isTeleport?: never
+  __isSuspense?: never
+} & vue.ComponentOptionsBase<
+  Readonly<
+    vue.ExtractPropTypes<{
+      as: {
+        type: StringConstructor
+        default: any
+      }
+      name: {
+        type: StringConstructor
+        required: true
+      }
+    }>
+  >,
+  () =>
+    | VNode<
+        vue.RendererNode,
+        vue.RendererElement,
+        {
+          [key: string]: any
+        }
+      >
+    | vue.Slot<any>
+    | VNode<
+        vue.RendererNode,
+        vue.RendererElement,
+        {
+          [key: string]: any
+        }
+      >[]
+    | {
+        default: () => VNode<
+          vue.RendererNode,
+          vue.RendererElement,
+          {
+            [key: string]: any
+          }
+        >[]
+      },
+  unknown,
+  {},
+  {},
+  vue.ComponentOptionsMixin,
+  vue.ComponentOptionsMixin,
+  {},
+  string,
+  {
+    as: string
+  },
+  {},
+  string,
+  {}
+> &
+  vue.VNodeProps &
+  vue.AllowedComponentProps &
+  vue.ComponentCustomProps &
+  (new () => {
+    $slots: {
+      default: (arg: ErrorMessageSlotProps) => VNode[]
+    }
+  })
+;<ErrorMessage name="password" class="error" />

packages/runtime-core/src/apiDefineComponent.ts

@@ -31,7 +31,7 @@ import { extend, isFunction } from '@vue/shared'
 import type { VNodeProps } from './vnode'
 import type {
   ComponentPublicInstanceConstructor,
-  CreateComponentPublicInstance,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 import type { SlotsType } from './componentSlots'
 import type { Directive } from './directives'
@@ -68,7 +68,7 @@ export type DefineComponent<
   Provide extends ComponentProvideOptions = ComponentProvideOptions,
   MakeDefaultsOptional extends boolean = true,
 > = ComponentPublicInstanceConstructor<
-  CreateComponentPublicInstance<
+  CreateComponentPublicInstanceWithMixins<
     Props,
     RawBindings,
     D,
@@ -116,7 +116,7 @@ export type DefineSetupFnComponent<
   PP = PublicProps,
 > = new (
   props: Props & PP,
-) => CreateComponentPublicInstance<
+) => CreateComponentPublicInstanceWithMixins<
   Props,
   {},
   {},
@@ -240,7 +240,7 @@ export function defineComponent<
     Provide
   > &
     ThisType<
-      CreateComponentPublicInstance<
+      CreateComponentPublicInstanceWithMixins<
         ResolvedProps,
         SetupBindings,
         Data,

packages/runtime-core/src/componentOptions.ts

@@ -62,7 +62,7 @@ import type {
 import type { Directive } from './directives'
 import {
   type ComponentPublicInstance,
-  type CreateComponentPublicInstance,
+  type CreateComponentPublicInstanceWithMixins,
   type IntersectionMixin,
   type UnwrapMixinsType,
   isReservedPrefix,
@@ -263,7 +263,7 @@ export type ComponentOptions<
   Provide
 > &
   ThisType<
-    CreateComponentPublicInstance<
+    CreateComponentPublicInstanceWithMixins<
       {},
       RawBindings,
       D,
@@ -372,7 +372,7 @@ interface LegacyOptions<
   // since that leads to some sort of circular inference and breaks ThisType
   // for the entire component.
   data?: (
-    this: CreateComponentPublicInstance<
+    this: CreateComponentPublicInstanceWithMixins<
       Props,
       {},
       {},
@@ -381,7 +381,7 @@ interface LegacyOptions<
       Mixin,
       Extends
     >,
-    vm: CreateComponentPublicInstance<
+    vm: CreateComponentPublicInstanceWithMixins<
       Props,
       {},
       {},
@@ -1125,7 +1125,7 @@ export type ComponentOptionsWithoutProps<
    */
   __typeEmits?: TE
 } & ThisType<
-    CreateComponentPublicInstance<
+    CreateComponentPublicInstanceWithMixins<
       PE,
       RawBindings,
       D,
@@ -1187,7 +1187,7 @@ export type ComponentOptionsWithArrayProps<
 > & {
   props: PropNames[]
 } & ThisType<
-    CreateComponentPublicInstance<
+    CreateComponentPublicInstanceWithMixins<
       Props,
       RawBindings,
       D,
@@ -1250,7 +1250,7 @@ export type ComponentOptionsWithObjectProps<
 > & {
   props: PropsOptions & ThisType<void>
 } & ThisType<
-    CreateComponentPublicInstance<
+    CreateComponentPublicInstanceWithMixins<
       Props,
       RawBindings,
       D,

packages/runtime-core/src/componentPublicInstance.ts

@@ -150,7 +150,71 @@ export type ComponentPublicInstanceConstructor<
   new (...args: any[]): T
 }
 
+/**
+ * @deprecated This is no longer used internally, but exported and relied on by
+ * existing library types generated by vue-tsc.
+ */
 export type CreateComponentPublicInstance<
+  P = {},
+  B = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = {},
+  PublicProps = P,
+  Defaults = {},
+  MakeDefaultsOptional extends boolean = false,
+  I extends ComponentInjectOptions = {},
+  S extends SlotsType = {},
+  PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
+  PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
+  PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
+  PublicD = UnwrapMixinsType<PublicMixin, 'D'> & EnsureNonVoid<D>,
+  PublicC extends ComputedOptions = UnwrapMixinsType<PublicMixin, 'C'> &
+    EnsureNonVoid<C>,
+  PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
+    EnsureNonVoid<M>,
+  PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
+    EnsureNonVoid<Defaults>,
+> = ComponentPublicInstance<
+  PublicP,
+  PublicB,
+  PublicD,
+  PublicC,
+  PublicM,
+  E,
+  PublicProps,
+  PublicDefaults,
+  MakeDefaultsOptional,
+  ComponentOptionsBase<
+    P,
+    B,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    string,
+    Defaults,
+    {},
+    string,
+    S
+  >,
+  I,
+  S
+>
+
+/**
+ * This is the same as `CreateComponentPublicInstance` but adds local components,
+ * global directives, exposed, and provide inference.
+ * It changes the arguments order so that we don't need to repeat mixin
+ * inference everywhere internally, but it has to be a new type to avoid
+ * breaking types that relies on previous arguments order (#10842)
+ */
+export type CreateComponentPublicInstanceWithMixins<
   P = {},
   B = {},
   D = {},
@@ -167,6 +231,8 @@ export type CreateComponentPublicInstance<
   LC extends Record<string, Component> = {},
   Directives extends Record<string, Directive> = {},
   Exposed extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  // mixin inference
   PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
   PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
   PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
@@ -177,7 +243,6 @@ export type CreateComponentPublicInstance<
     EnsureNonVoid<M>,
   PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
     EnsureNonVoid<Defaults>,
-  Provide extends ComponentProvideOptions = ComponentProvideOptions,
 > = ComponentPublicInstance<
   PublicP,
   PublicB,

packages/runtime-core/src/index.ts

@@ -279,6 +279,7 @@ export type {
   ComponentPublicInstance,
   ComponentCustomProperties,
   CreateComponentPublicInstance,
+  CreateComponentPublicInstanceWithMixins,
 } from './componentPublicInstance'
 export type {
   Renderer,