From 4813c9b118771e5a49e40e0dda3c3a69e8e5b072 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Fri, 11 Feb 2022 15:17:03 +0000
Subject: [PATCH 1/3] types(runtime-core): ComponentInstance type

---
 packages/runtime-core/src/component.ts |  21 +++++
 packages/runtime-core/src/index.ts     |   3 +-
 test-dts/componentInstance.test-d.tsx  | 107 +++++++++++++++++++++++++
 test-dts/defineComponent.test-d.tsx    |   7 +-
 4 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 test-dts/componentInstance.test-d.tsx

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 9b2f35c9745..d343b7e5054 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -70,6 +70,27 @@ import { SchedulerJob } from './scheduler'
 
 export type Data = Record<string, unknown>
 
+export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
+  ? InstanceType<T>
+  : T extends FunctionalComponent<infer Props, infer Emits>
+  ? ComponentPublicInstance<Props, {}, {}, {}, {}, Emits>
+  : T extends Component<
+      infer Props,
+      infer RawBindings,
+      infer D,
+      infer C,
+      infer M
+    >
+  ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+    ComponentPublicInstance<
+      unknown extends Props ? {} : Props,
+      unknown extends RawBindings ? {} : RawBindings,
+      unknown extends D ? {} : D,
+      C,
+      M
+    >
+  : never // not a vue Component
+
 /**
  * For extending allowed non-declared props on components in TSX
  */
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index ad4817d91b9..6f98e3f9e56 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -206,7 +206,8 @@ export {
   ComponentInternalInstance,
   SetupContext,
   ComponentCustomProps,
-  AllowedComponentProps
+  AllowedComponentProps,
+  ComponentInstance
 } from './component'
 export { DefineComponent } from './apiDefineComponent'
 export {
diff --git a/test-dts/componentInstance.test-d.tsx b/test-dts/componentInstance.test-d.tsx
new file mode 100644
index 00000000000..0d4a7df7100
--- /dev/null
+++ b/test-dts/componentInstance.test-d.tsx
@@ -0,0 +1,107 @@
+import {
+  defineComponent,
+  expectType,
+  FunctionalComponent,
+  ComponentPublicInstance,
+  ComponentInstance
+} from './index'
+
+const CompSetup = defineComponent({
+  props: {
+    test: String
+  },
+  setup() {
+    return {
+      a: 1
+    }
+  }
+})
+declare const compSetup: ComponentInstance<typeof CompSetup>
+
+expectType<string | undefined>(compSetup.test)
+expectType<number>(compSetup.a)
+expectType<ComponentPublicInstance>(compSetup)
+
+// Functional
+declare const CompFunctional: FunctionalComponent<{ test?: string }>
+declare const compFunctional: ComponentInstance<typeof CompFunctional>
+
+expectType<string | undefined>(compFunctional.test)
+expectType<ComponentPublicInstance>(compFunctional)
+
+declare const CompFunction: (props: { test?: string }) => any
+declare const compFunction: ComponentInstance<typeof CompFunction>
+
+expectType<string | undefined>(compFunction.test)
+expectType<ComponentPublicInstance>(compFunction)
+
+// Options
+const CompOptions = defineComponent({
+  props: {
+    test: String
+  },
+  data() {
+    return {
+      a: 1
+    }
+  },
+  computed: {
+    b() {
+      return 'test'
+    }
+  },
+  methods: {
+    func(a: string) {
+      return true
+    }
+  }
+})
+declare const compOptions: ComponentInstance<typeof CompOptions>
+expectType<string | undefined>(compOptions.test)
+expectType<number>(compOptions.a)
+expectType<(a: string) => boolean>(compOptions.func)
+expectType<ComponentPublicInstance>(compOptions)
+
+// object - no defineComponent
+
+const CompObjectSetup = {
+  props: {
+    test: String
+  },
+  setup() {
+    return {
+      a: 1
+    }
+  }
+}
+declare const compObjectSetup: ComponentInstance<typeof CompObjectSetup>
+expectType<string | undefined>(compObjectSetup.test)
+expectType<number>(compObjectSetup.a)
+expectType<ComponentPublicInstance>(compObjectSetup)
+
+const CompObjectData = {
+  props: {
+    test: String
+  },
+  data() {
+    return {
+      a: 1
+    }
+  }
+}
+declare const compObjectData: ComponentInstance<typeof CompObjectData>
+expectType<string | undefined>(compObjectData.test)
+expectType<number>(compObjectData.a)
+expectType<ComponentPublicInstance>(compObjectData)
+
+const CompObjectNoProps = {
+  data() {
+    return {
+      a: 1
+    }
+  }
+}
+declare const compObjectNoProps: ComponentInstance<typeof CompObjectNoProps>
+expectType<string | undefined>(compObjectNoProps.test)
+expectType<number>(compObjectNoProps.a)
+expectType<ComponentPublicInstance>(compObjectNoProps)
diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
index 031b4a13eb8..505802d202c 100644
--- a/test-dts/defineComponent.test-d.tsx
+++ b/test-dts/defineComponent.test-d.tsx
@@ -12,7 +12,8 @@ import {
   ComponentOptions,
   SetupContext,
   IsUnion,
-  h
+  h,
+  ComponentInstance
 } from './index'
 
 describe('with object props', () => {
@@ -1066,7 +1067,7 @@ describe('extract instance type', () => {
     }
   })
 
-  const compA = {} as InstanceType<typeof CompA>
+  const compA = {} as ComponentInstance<typeof CompA>
 
   expectType<boolean>(compA.a)
   expectType<string>(compA.b)
@@ -1114,7 +1115,7 @@ describe('async setup', () => {
     }
   })
 
-  const vm = {} as InstanceType<typeof Comp>
+  const vm = {} as ComponentInstance<typeof Comp>
   // assert setup context unwrapping
   expectType<number>(vm.a)
   expectType<string>(vm.b.c.value)

From 05cea29383289e52dcc1e1185d760747808f5861 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 6 May 2022 05:04:21 -0400
Subject: [PATCH 2/3] Update component.ts

---
 packages/runtime-core/src/component.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index d343b7e5054..f50b11730c8 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -70,6 +70,18 @@ import { SchedulerJob } from './scheduler'
 
 export type Data = Record<string, unknown>
 
+/**
+ * Public utility type for extracting the instance type of a component.
+ * Works with all valid component definition types. This is intended to replace
+ * the usage of `InstanceType<typeof Comp>` which only works for
+ * constructor-based component definition types.
+ * 
+ * Exmaple:
+ * ```ts
+ * const MyComp = { ... }
+ * declare const instance: ComponentInstance<typeof MyComp>
+ * ```
+ */
 export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
   ? InstanceType<T>
   : T extends FunctionalComponent<infer Props, infer Emits>

From 0b63443d9b4617f656b33f3f6153ac956bec43c1 Mon Sep 17 00:00:00 2001
From: pikax <david-181@hotmail.com>
Date: Fri, 6 Oct 2023 15:02:22 +0100
Subject: [PATCH 3/3] tests

---
 .../dts-test/componentInstance.test-d.tsx     | 198 ++++++++++--------
 1 file changed, 115 insertions(+), 83 deletions(-)

diff --git a/packages/dts-test/componentInstance.test-d.tsx b/packages/dts-test/componentInstance.test-d.tsx
index d8a8ef1a438..2fb20312b2c 100644
--- a/packages/dts-test/componentInstance.test-d.tsx
+++ b/packages/dts-test/componentInstance.test-d.tsx
@@ -2,106 +2,138 @@ import {
   defineComponent,
   FunctionalComponent,
   ComponentPublicInstance,
-  ComponentInstance
+  ComponentInstance,
+  ref
 } from 'vue'
-import { expectType } from './utils'
+import { expectType, describe } from './utils'
 
-const CompSetup = defineComponent({
-  props: {
-    test: String
-  },
-  setup() {
-    return {
-      a: 1
+describe('defineComponent', () => {
+  const CompSetup = defineComponent({
+    props: {
+      test: String
+    },
+    setup() {
+      return {
+        a: 1
+      }
     }
-  }
-})
-declare const compSetup: ComponentInstance<typeof CompSetup>
+  })
+  const compSetup: ComponentInstance<typeof CompSetup> = {} as any
 
-expectType<string | undefined>(compSetup.test)
-expectType<number>(compSetup.a)
-expectType<ComponentPublicInstance>(compSetup)
-
-// Functional
-declare const CompFunctional: FunctionalComponent<{ test?: string }>
-declare const compFunctional: ComponentInstance<typeof CompFunctional>
+  expectType<string | undefined>(compSetup.test)
+  expectType<number>(compSetup.a)
+  expectType<ComponentPublicInstance>(compSetup)
+})
+describe('functional component', () => {
+  // Functional
+  const CompFunctional: FunctionalComponent<{ test?: string }> = {} as any
+  const compFunctional: ComponentInstance<typeof CompFunctional> = {} as any
 
-expectType<string | undefined>(compFunctional.test)
-expectType<ComponentPublicInstance>(compFunctional)
+  expectType<string | undefined>(compFunctional.test)
+  expectType<ComponentPublicInstance>(compFunctional)
 
-declare const CompFunction: (props: { test?: string }) => any
-declare const compFunction: ComponentInstance<typeof CompFunction>
+  const CompFunction: (props: { test?: string }) => any = {} as any
+  const compFunction: ComponentInstance<typeof CompFunction> = {} as any
 
-expectType<string | undefined>(compFunction.test)
-expectType<ComponentPublicInstance>(compFunction)
+  expectType<string | undefined>(compFunction.test)
+  expectType<ComponentPublicInstance>(compFunction)
+})
 
-// Options
-const CompOptions = defineComponent({
-  props: {
-    test: String
-  },
-  data() {
-    return {
-      a: 1
-    }
-  },
-  computed: {
-    b() {
-      return 'test'
-    }
-  },
-  methods: {
-    func(a: string) {
-      return true
+describe('options component', () => {
+  // Options
+  const CompOptions = defineComponent({
+    props: {
+      test: String
+    },
+    data() {
+      return {
+        a: 1
+      }
+    },
+    computed: {
+      b() {
+        return 'test'
+      }
+    },
+    methods: {
+      func(a: string) {
+        return true
+      }
     }
-  }
+  })
+  const compOptions: ComponentInstance<typeof CompOptions> = {} as any
+  expectType<string | undefined>(compOptions.test)
+  expectType<number>(compOptions.a)
+  expectType<(a: string) => boolean>(compOptions.func)
+  expectType<ComponentPublicInstance>(compOptions)
 })
-declare const compOptions: ComponentInstance<typeof CompOptions>
-expectType<string | undefined>(compOptions.test)
-expectType<number>(compOptions.a)
-expectType<(a: string) => boolean>(compOptions.func)
-expectType<ComponentPublicInstance>(compOptions)
 
-// object - no defineComponent
+describe('object no defineComponent', () => {
+  // object - no defineComponent
 
-const CompObjectSetup = {
-  props: {
-    test: String
-  },
-  setup() {
-    return {
-      a: 1
+  const CompObjectSetup = {
+    props: {
+      test: String
+    },
+    setup() {
+      return {
+        a: 1
+      }
     }
   }
-}
-declare const compObjectSetup: ComponentInstance<typeof CompObjectSetup>
-expectType<string | undefined>(compObjectSetup.test)
-expectType<number>(compObjectSetup.a)
-expectType<ComponentPublicInstance>(compObjectSetup)
+  const compObjectSetup: ComponentInstance<typeof CompObjectSetup> = {} as any
+  expectType<string | undefined>(compObjectSetup.test)
+  expectType<number>(compObjectSetup.a)
+  expectType<ComponentPublicInstance>(compObjectSetup)
 
-const CompObjectData = {
-  props: {
-    test: String
-  },
-  data() {
-    return {
-      a: 1
+  const CompObjectData = {
+    props: {
+      test: String
+    },
+    data() {
+      return {
+        a: 1
+      }
     }
   }
-}
-declare const compObjectData: ComponentInstance<typeof CompObjectData>
-expectType<string | undefined>(compObjectData.test)
-expectType<number>(compObjectData.a)
-expectType<ComponentPublicInstance>(compObjectData)
+  const compObjectData: ComponentInstance<typeof CompObjectData> = {} as any
+  expectType<string | undefined>(compObjectData.test)
+  expectType<number>(compObjectData.a)
+  expectType<ComponentPublicInstance>(compObjectData)
 
-const CompObjectNoProps = {
-  data() {
-    return {
-      a: 1
+  const CompObjectNoProps = {
+    data() {
+      return {
+        a: 1
+      }
     }
   }
-}
-declare const compObjectNoProps: ComponentInstance<typeof CompObjectNoProps>
-expectType<string | undefined>(compObjectNoProps.test)
-expectType<number>(compObjectNoProps.a)
-expectType<ComponentPublicInstance>(compObjectNoProps)
+  const compObjectNoProps: ComponentInstance<typeof CompObjectNoProps> =
+    {} as any
+  expectType<string | undefined>(compObjectNoProps.test)
+  expectType<number>(compObjectNoProps.a)
+  expectType<ComponentPublicInstance>(compObjectNoProps)
+})
+
+describe('Generic component', () => {
+  const Comp = defineComponent(
+    // TODO: babel plugin to auto infer runtime props options from type
+    // similar to defineProps<{...}>()
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      // use Composition API here like in <script setup>
+      const count = ref(0)
+
+      return () => (
+        // return a render function (both JSX and h() works)
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    }
+  )
+
+  // defaults to known types since types are resolved on instantiation
+  const comp: ComponentInstance<typeof Comp> = {} as any
+  expectType<string | number>(comp.msg)
+  expectType<Array<string | number>>(comp.list)
+})