fix(types): async Component types

types/options.d.ts

@@ -1,37 +1,73 @@
 import { Vue, CreateElement, CombinedVueInstance } from "./vue";
-import { VNode, VNodeData, VNodeDirective, NormalizedScopedSlot } from "./vnode";
+import {
+  VNode,
+  VNodeData,
+  VNodeDirective,
+  NormalizedScopedSlot,
+} from "./vnode";
 
 type Constructor = {
   new (...args: any[]): any;
-}
+};
 
 // we don't support infer props in async component
 // N.B. ComponentOptions<V> is contravariant, the default generic should be bottom type
-export type Component<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> =
+export type Component<
+  Data = DefaultData<never>,
+  Methods = DefaultMethods<never>,
+  Computed = DefaultComputed,
+  Props = DefaultProps
+> =
   | typeof Vue
   | FunctionalComponentOptions<Props>
-  | ComponentOptions<never, Data, Methods, Computed, Props>
-
-interface EsModuleComponent {
-  default: Component
+  | ComponentOptions<never, Data, Methods, Computed, Props>;
+
+interface EsModuleComponent<
+  Data = DefaultData<never>,
+  Methods = DefaultMethods<never>,
+  Computed = DefaultComputed,
+  Props = DefaultProps
+> {
+  default: Component<Data, Methods, Computed, Props>;
 }
 
-export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
-  = AsyncComponentPromise<Data, Methods, Computed, Props>
-  | AsyncComponentFactory<Data, Methods, Computed, Props>
-
-export type AsyncComponentPromise<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = (
+export type AsyncComponent<
+  Data = DefaultData<never>,
+  Methods = DefaultMethods<never>,
+  Computed = DefaultComputed,
+  Props = DefaultProps
+> =
+  | AsyncComponentPromise<Data, Methods, Computed, Props>
+  | AsyncComponentFactory<Data, Methods, Computed, Props>;
+
+export type AsyncComponentPromise<
+  Data = DefaultData<never>,
+  Methods = DefaultMethods<never>,
+  Computed = DefaultComputed,
+  Props = DefaultProps
+> = (
   resolve: (component: Component<Data, Methods, Computed, Props>) => void,
   reject: (reason?: any) => void
-) => Promise<Component | EsModuleComponent> | void;
-
-export type AsyncComponentFactory<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = () => {
-  component: AsyncComponentPromise<Data, Methods, Computed, Props>;
+) => Promise<
+  | Component<Data, Methods, Computed, Props>
+  | EsModuleComponent<Data, Methods, Computed, Props>
+> | void;
+
+export type AsyncComponentFactory<
+  Data = DefaultData<never>,
+  Methods = DefaultMethods<never>,
+  Computed = DefaultComputed,
+  Props = DefaultProps
+> = () => {
+  component: Promise<
+    | Component<Data, Methods, Computed, Props>
+    | EsModuleComponent<Data, Methods, Computed, Props>
+  >;
   loading?: Component | EsModuleComponent;
   error?: Component | EsModuleComponent;
   delay?: number;
   timeout?: number;
-}
+};
 
 /**
  * When the `Computed` type parameter on `ComponentOptions` is inferred,
@@ -40,37 +76,70 @@ export type AsyncComponentFactory<Data=DefaultData<never>, Methods=DefaultMethod
  * to infer from the shape of `Accessors<Computed>` and work backwards.
  */
 export type Accessors<T> = {
-  [K in keyof T]: (() => T[K]) | ComputedOptions<T[K]>
-}
+  [K in keyof T]: (() => T[K]) | ComputedOptions<T[K]>;
+};
 
-type DataDef<Data, Props, V> = Data | ((this: Readonly<Props> & V) => Data)
+type DataDef<Data, Props, V> = Data | ((this: Readonly<Props> & V) => Data);
 /**
  * This type should be used when an array of strings is used for a component's `props` value.
  */
-export type ThisTypedComponentOptionsWithArrayProps<V extends Vue, Data, Methods, Computed, PropNames extends string> =
-  object &
-  ComponentOptions<V, DataDef<Data, Record<PropNames, any>, V>, Methods, Computed, PropNames[], Record<PropNames, any>> &
-  ThisType<CombinedVueInstance<V, Data, Methods, Computed, Readonly<Record<PropNames, any>>>>;
+export type ThisTypedComponentOptionsWithArrayProps<
+  V extends Vue,
+  Data,
+  Methods,
+  Computed,
+  PropNames extends string
+> = object &
+  ComponentOptions<
+    V,
+    DataDef<Data, Record<PropNames, any>, V>,
+    Methods,
+    Computed,
+    PropNames[],
+    Record<PropNames, any>
+  > &
+  ThisType<
+    CombinedVueInstance<
+      V,
+      Data,
+      Methods,
+      Computed,
+      Readonly<Record<PropNames, any>>
+    >
+  >;
 
 /**
  * This type should be used when an object mapped to `PropOptions` is used for a component's `props` value.
  */
-export type ThisTypedComponentOptionsWithRecordProps<V extends Vue, Data, Methods, Computed, Props> =
-  object &
-  ComponentOptions<V, DataDef<Data, Props, V>, Methods, Computed, RecordPropsDefinition<Props>, Props> &
+export type ThisTypedComponentOptionsWithRecordProps<
+  V extends Vue,
+  Data,
+  Methods,
+  Computed,
+  Props
+> = object &
+  ComponentOptions<
+    V,
+    DataDef<Data, Props, V>,
+    Methods,
+    Computed,
+    RecordPropsDefinition<Props>,
+    Props
+  > &
   ThisType<CombinedVueInstance<V, Data, Methods, Computed, Readonly<Props>>>;
 
-type DefaultData<V> =  object | ((this: V) => object);
+type DefaultData<V> = object | ((this: V) => object);
 type DefaultProps = Record<string, any>;
-type DefaultMethods<V> =  { [key: string]: (this: V, ...args: any[]) => any };
+type DefaultMethods<V> = { [key: string]: (this: V, ...args: any[]) => any };
 type DefaultComputed = { [key: string]: any };
 export interface ComponentOptions<
   V extends Vue,
-  Data=DefaultData<V>,
-  Methods=DefaultMethods<V>,
-  Computed=DefaultComputed,
-  PropsDef=PropsDefinition<DefaultProps>,
-  Props=DefaultProps> {
+  Data = DefaultData<V>,
+  Methods = DefaultMethods<V>,
+  Computed = DefaultComputed,
+  PropsDef = PropsDefinition<DefaultProps>,
+  Props = DefaultProps
+> {
   data?: Data;
   props?: PropsDef;
   propsData?: object;
@@ -99,7 +168,11 @@ export interface ComponentOptions<
   serverPrefetch?(this: V): Promise<void>;
 
   directives?: { [key: string]: DirectiveFunction | DirectiveOptions };
-  components?: { [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any> };
+  components?: {
+    [key: string]:
+      | Component<any, any, any, any>
+      | AsyncComponent<any, any, any, any>;
+  };
   transitions?: { [key: string]: object };
   filters?: { [key: string]: Function };
 
@@ -121,7 +194,10 @@ export interface ComponentOptions<
   inheritAttrs?: boolean;
 }
 
-export interface FunctionalComponentOptions<Props = DefaultProps, PropDefs = PropsDefinition<Props>> {
+export interface FunctionalComponentOptions<
+  Props = DefaultProps,
+  PropDefs = PropsDefinition<Props>
+> {
   name?: string;
   props?: PropDefs;
   model?: {
@@ -130,38 +206,47 @@ export interface FunctionalComponentOptions<Props = DefaultProps, PropDefs = Pro
   };
   inject?: InjectOptions;
   functional: boolean;
-  render?(this: undefined, createElement: CreateElement, context: RenderContext<Props>): VNode | VNode[];
+  render?(
+    this: undefined,
+    createElement: CreateElement,
+    context: RenderContext<Props>
+  ): VNode | VNode[];
 }
 
-export interface RenderContext<Props=DefaultProps> {
+export interface RenderContext<Props = DefaultProps> {
   props: Props;
   children: VNode[];
   slots(): any;
   data: VNodeData;
   parent: Vue;
   listeners: { [key: string]: Function | Function[] };
   scopedSlots: { [key: string]: NormalizedScopedSlot };
-  injections: any
+  injections: any;
 }
 
-export type Prop<T> = { (): T } | { new(...args: never[]): T & object } | { new(...args: string[]): Function }
+export type Prop<T> =
+  | { (): T }
+  | { new (...args: never[]): T & object }
+  | { new (...args: string[]): Function };
 
 export type PropType<T> = Prop<T> | Prop<T>[];
 
 export type PropValidator<T> = PropOptions<T> | PropType<T>;
 
-export interface PropOptions<T=any> {
+export interface PropOptions<T = any> {
   type?: PropType<T>;
   required?: boolean;
   default?: T | null | undefined | (() => T | null | undefined);
   validator?(value: T): boolean;
 }
 
 export type RecordPropsDefinition<T> = {
-  [K in keyof T]: PropValidator<T[K]>
-}
+  [K in keyof T]: PropValidator<T[K]>;
+};
 export type ArrayPropsDefinition<T> = (keyof T)[];
-export type PropsDefinition<T> = ArrayPropsDefinition<T> | RecordPropsDefinition<T>;
+export type PropsDefinition<T> =
+  | ArrayPropsDefinition<T>
+  | RecordPropsDefinition<T>;
 
 export interface ComputedOptions<T> {
   get?(): T;
@@ -201,6 +286,8 @@ export interface DirectiveOptions {
 
 export type InjectKey = string | symbol;
 
-export type InjectOptions = {
-  [key: string]: InjectKey | { from?: InjectKey, default?: any }
-} | string[];
+export type InjectOptions =
+  | {
+      [key: string]: InjectKey | { from?: InjectKey; default?: any };
+    }
+  | string[];

types/test/async-component-test.ts

@@ -0,0 +1,61 @@
+import Vue, { AsyncComponent, Component } from "../index";
+
+const a: AsyncComponent = () => ({
+  component: new Promise<Component>((res, rej) => {
+    res({ template: "" })
+  })
+})
+
+const b: AsyncComponent = () => ({
+  // @ts-expect-error component has to be a Promise that resolves to a component
+  component: () =>
+    new Promise<Component>((res, rej) => {
+      res({ template: "" })
+    })
+})
+
+const c: AsyncComponent = () =>
+  new Promise<Component>((res, rej) => {
+    res({
+      template: ""
+    })
+  })
+
+const d: AsyncComponent = () =>
+  new Promise<{ default: Component }>((res, rej) => {
+    res({
+      default: {
+        template: ""
+      }
+    })
+  })
+
+const e: AsyncComponent = () => ({
+  component: new Promise<{ default: Component }>((res, rej) => {
+    res({
+      default: {
+        template: ""
+      }
+    })
+  })
+})
+
+Vue.component("async-compponent1", () => ({
+  component: new Promise<Component>((res, rej) => {
+    res({
+      template: ""
+    })
+  })
+}))
+
+Vue.component(
+  "async-compponent2",
+  () =>
+    new Promise<{ default: Component }>((res, rej) => {
+      res({
+        default: {
+          template: ""
+        }
+      })
+    })
+)