Skip to content

Commit c52427b

Browse files
authoredJun 3, 2021
fix(types): async Component types (#11906)
* Update options.d.ts * Create async-component-test.ts * add generics to Component ad EsModuleComponent * remove not needed , and ; * revert unrelated changes * revert unrelated changes * revert unrelated changes * revert unrelated changes * optimize EsModuleImports * Update async-component-test.ts
1 parent 80e7730 commit c52427b

File tree

2 files changed

+52
-7
lines changed

2 files changed

+52
-7
lines changed
 

‎types/options.d.ts

+8-7
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ export type Component<Data=DefaultData<never>, Methods=DefaultMethods<never>, Co
1212
| FunctionalComponentOptions<Props>
1313
| ComponentOptions<never, Data, Methods, Computed, Props>
1414

15-
interface EsModuleComponent {
16-
default: Component
17-
}
15+
type EsModule<T> = T | { default: T }
16+
17+
type ImportedComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
18+
= EsModule<Component<Data, Methods, Computed, Props>>
1819

1920
export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
2021
= AsyncComponentPromise<Data, Methods, Computed, Props>
@@ -23,12 +24,12 @@ export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never
2324
export type AsyncComponentPromise<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = (
2425
resolve: (component: Component<Data, Methods, Computed, Props>) => void,
2526
reject: (reason?: any) => void
26-
) => Promise<Component | EsModuleComponent> | void;
27+
) => Promise<ImportedComponent<Data, Methods, Computed, Props>> | void;
2728

2829
export type AsyncComponentFactory<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = () => {
29-
component: AsyncComponentPromise<Data, Methods, Computed, Props>;
30-
loading?: Component | EsModuleComponent;
31-
error?: Component | EsModuleComponent;
30+
component: Promise<ImportedComponent<Data, Methods, Computed, Props>>;
31+
loading?: ImportedComponent;
32+
error?: ImportedComponent;
3233
delay?: number;
3334
timeout?: number;
3435
}

‎types/test/async-component-test.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Vue, { AsyncComponent, Component } from "../index";
2+
3+
const a: AsyncComponent = () => ({
4+
component: new Promise<Component>((res, rej) => {
5+
res({ template: "" })
6+
})
7+
})
8+
9+
const b: AsyncComponent = () => ({
10+
// @ts-expect-error component has to be a Promise that resolves to a component
11+
component: () =>
12+
new Promise<Component>((res, rej) => {
13+
res({ template: "" })
14+
})
15+
})
16+
17+
const c: AsyncComponent = () =>
18+
new Promise<Component>((res, rej) => {
19+
res({
20+
template: ""
21+
})
22+
})
23+
24+
const d: AsyncComponent = () =>
25+
new Promise<{ default: Component }>((res, rej) => {
26+
res({
27+
default: {
28+
template: ""
29+
}
30+
})
31+
})
32+
33+
const e: AsyncComponent = () => ({
34+
component: new Promise<{ default: Component }>((res, rej) => {
35+
res({
36+
default: {
37+
template: ""
38+
}
39+
})
40+
})
41+
})
42+
43+
// Test that Vue.component accepts any AsyncComponent
44+
Vue.component("async-compponent1", a)

0 commit comments

Comments
 (0)
Please sign in to comment.