From c52427b0d2c1d203deea6eb69f2b4b181d56022c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <2pi_r2@gmx.de>
Date: Thu, 3 Jun 2021 15:13:33 +0200
Subject: [PATCH] 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
---
 types/options.d.ts                 | 15 +++++-----
 types/test/async-component-test.ts | 44 ++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 types/test/async-component-test.ts

diff --git a/types/options.d.ts b/types/options.d.ts
index 323c7630..ff266052 100644
--- a/types/options.d.ts
+++ b/types/options.d.ts
@@ -12,9 +12,10 @@ export type Component<Data=DefaultData<never>, Methods=DefaultMethods<never>, Co
   | FunctionalComponentOptions<Props>
   | ComponentOptions<never, Data, Methods, Computed, Props>
 
-interface EsModuleComponent {
-  default: Component
-}
+type EsModule<T> = T | { default: T }
+
+type ImportedComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
+  = EsModule<Component<Data, Methods, Computed, Props>>
 
 export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps>
   = AsyncComponentPromise<Data, Methods, Computed, Props>
@@ -23,12 +24,12 @@ export type AsyncComponent<Data=DefaultData<never>, Methods=DefaultMethods<never
 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;
+) => Promise<ImportedComponent<Data, Methods, Computed, Props>> | void;
 
 export type AsyncComponentFactory<Data=DefaultData<never>, Methods=DefaultMethods<never>, Computed=DefaultComputed, Props=DefaultProps> = () => {
-  component: AsyncComponentPromise<Data, Methods, Computed, Props>;
-  loading?: Component | EsModuleComponent;
-  error?: Component | EsModuleComponent;
+  component: Promise<ImportedComponent<Data, Methods, Computed, Props>>;
+  loading?: ImportedComponent;
+  error?: ImportedComponent;
   delay?: number;
   timeout?: number;
 }
diff --git a/types/test/async-component-test.ts b/types/test/async-component-test.ts
new file mode 100644
index 00000000..baa50c4b
--- /dev/null
+++ b/types/test/async-component-test.ts
@@ -0,0 +1,44 @@
+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: ""
+      }
+    })
+  })
+})
+
+// Test that Vue.component accepts any AsyncComponent
+Vue.component("async-compponent1", a)