From 5e0f6d5f8fe7c4eb8f247357c3e2e281726f36db Mon Sep 17 00:00:00 2001
From: Andy Li <andylizi666@gmail.com>
Date: Thu, 15 Aug 2024 10:28:40 +0800
Subject: [PATCH] fix(types/custom-element): `defineCustomElement` with
 required props (#11578)

---
 .../dts-test/defineCustomElement.test-d.ts    | 33 +++++++++++++++++++
 packages/runtime-dom/src/apiCustomElement.ts  |  8 ++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages-private/dts-test/defineCustomElement.test-d.ts b/packages-private/dts-test/defineCustomElement.test-d.ts
index b81c0befe9f..f81f8b8fa61 100644
--- a/packages-private/dts-test/defineCustomElement.test-d.ts
+++ b/packages-private/dts-test/defineCustomElement.test-d.ts
@@ -99,4 +99,37 @@ describe('defineCustomElement using defineComponent return type', () => {
     expectType<number | undefined>(instance.a)
     instance.a = 42
   })
+
+  test('with required props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: { type: Number, required: true },
+      },
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
+
+  test('with default props', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: {
+          type: Number,
+          default: 1,
+          validator: () => true,
+        },
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number>(instance.a)
+    instance.a = 42
+  })
 })
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 79b7eea8094..ccd8989b377 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -9,6 +9,7 @@ import {
   type ComponentOptionsBase,
   type ComponentOptionsMixin,
   type ComponentProvideOptions,
+  type ComponentPublicInstance,
   type ComputedOptions,
   type ConcreteComponent,
   type CreateAppFunction,
@@ -153,14 +154,13 @@ export function defineCustomElement<
 // overload 3: defining a custom element from the returned value of
 // `defineComponent`
 export function defineCustomElement<
-  T extends DefineComponent<any, any, any, any>,
+  // this should be `ComponentPublicInstanceConstructor` but that type is not exported
+  T extends { new (...args: any[]): ComponentPublicInstance<any> },
 >(
   options: T,
   extraOptions?: CustomElementOptions,
 ): VueElementConstructor<
-  T extends DefineComponent<infer P, any, any, any>
-    ? ExtractPropTypes<P>
-    : unknown
+  T extends DefineComponent<infer P, any, any, any> ? P : unknown
 >
 
 /*! #__NO_SIDE_EFFECTS__ */