From: Andy Li <andylizi666@gmail.com>
Date: Mon, 5 Aug 2024 03:14:36 +0000 (+0800)
Subject: fix(types/custome-element): `defineCustomElement` props inference with array emits... 
X-Git-Tag: v3.5.0-beta.1~29
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e94b01bd8a1ec740eddc823839ab2627b307c1b0;p=thirdparty%2Fvuejs%2Fcore.git

fix(types/custome-element): `defineCustomElement` props inference with array emits (#11384)

close #11353
---

diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 2d48dbc1bc..b81c0befe9 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -68,7 +68,7 @@ describe('inject', () => {
 })
 
 describe('defineCustomElement using defineComponent return type', () => {
-  test('with emits', () => {
+  test('with object emits', () => {
     const Comp1Vue = defineComponent({
       props: {
         a: String,
@@ -80,6 +80,23 @@ describe('defineCustomElement using defineComponent return type', () => {
     const Comp = defineCustomElement(Comp1Vue)
     expectType<VueElementConstructor>(Comp)
 
-    expectType<string | undefined>(new Comp().a)
+    const instance = new Comp()
+    expectType<string | undefined>(instance.a)
+    instance.a = ''
+  })
+
+  test('with array emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: Number,
+      },
+      emits: ['click'],
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    const instance = new Comp()
+    expectType<number | undefined>(instance.a)
+    instance.a = 42
   })
 })
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index a92248dd55..add2092574 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -142,11 +142,17 @@ export function defineCustomElement<
     >,
 ): VueElementConstructor<ResolvedProps>
 
-// overload 5: defining a custom element from the returned value of
+// overload 3: defining a custom element from the returned value of
 // `defineComponent`
-export function defineCustomElement<P>(
-  options: DefineComponent<P, any, any, any>,
-): VueElementConstructor<ExtractPropTypes<P>>
+export function defineCustomElement<
+  T extends DefineComponent<any, any, any, any>,
+>(
+  options: T,
+): VueElementConstructor<
+  T extends DefineComponent<infer P, any, any, any>
+    ? ExtractPropTypes<P>
+    : unknown
+>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(