Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(types): async Component types #11906

Merged
merged 10 commits into from Jun 3, 2021
Merged

fix(types): async Component types #11906

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ef65ec8
Update options.d.ts
mathe42 Feb 11, 2021
9b7b193
Create async-component-test.ts
mathe42 Feb 12, 2021
b0cbe18
add generics to Component ad EsModuleComponent
mathe42 Feb 19, 2021
35b689d
remove not needed , and ;
mathe42 Feb 19, 2021
44313f2
revert unrelated changes
mathe42 Feb 19, 2021
ee20f17
revert unrelated changes
mathe42 Feb 19, 2021
6291ee2
revert unrelated changes
mathe42 Feb 19, 2021
5250bc6
revert unrelated changes
mathe42 Feb 19, 2021
7e82b51
optimize EsModuleImports
mathe42 Feb 19, 2021
271bc0f
Update async-component-test.ts
mathe42 Feb 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
181 changes: 134 additions & 47 deletions types/options.d.ts
View file
Open in desktop
@@ -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;
}
};
mathe42 marked this conversation as resolved.
Show resolved Hide resolved

/**
* When the `Computed` type parameter on `ComponentOptions` is inferred,
Expand All @@ -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;
Expand Down Expand Up @@ -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 };

Expand All @@ -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?: {
Expand All @@ -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;
Expand Down Expand Up @@ -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[];
61 changes: 61 additions & 0 deletions types/test/async-component-test.ts
View file
Open in desktop
@@ -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: ""
})
})
}))
mathe42 marked this conversation as resolved.
Show resolved Hide resolved

Vue.component(
"async-compponent2",
() =>
new Promise<{ default: Component }>((res, rej) => {
res({
default: {
template: ""
}
})
})
)
mathe42 marked this conversation as resolved.
Show resolved Hide resolved