fix(types): defineCustomElement using defineComponent return type with emits (#7937)

close #7782

diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 4e7cf228372f93cfba0dd09ce7c797715447107e..f4f238641db9a4c001f6236a2c8378c7d2e9484b 100644 (file)
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -1,5 +1,9 @@
-import { defineCustomElement } from 'vue'
-import { expectType, describe } from './utils'
+import {
+  defineCustomElement,
+  defineComponent,
+  type VueElementConstructor
+} from 'vue'
+import { expectType, describe, test } from './utils'
 
 describe('inject', () => {
   // with object inject
@@ -62,3 +66,20 @@ describe('inject', () => {
     }
   })
 })
+
+describe('defineCustomElement using defineComponent return type', () => {
+  test('with emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: String
+      },
+      emits: {
+        click: () => true
+      }
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    expectType<string | undefined>(new Comp().a)
+  })
+})

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 5662b0b535b5cfc170cc2d80e060144f59071da0..de37605d68a7151456ffcd220e3426979b5a090f 100644 (file)
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -4,7 +4,6 @@ import {
   ComponentOptionsWithObjectProps,
   ComponentOptionsWithoutProps,
   ComponentPropsOptions,
-  ComponentPublicInstance,
   ComputedOptions,
   EmitsOptions,
   MethodOptions,
@@ -21,7 +20,8 @@ import {
   ConcreteComponent,
   ComponentOptions,
   ComponentInjectOptions,
-  SlotsType
+  SlotsType,
+  DefineComponent
 } from '@vue/runtime-core'
 import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
 import { hydrate, render } from '.'
@@ -136,9 +136,9 @@ export function defineCustomElement<
 
 // overload 5: defining a custom element from the returned value of
 // `defineComponent`
-export function defineCustomElement(options: {
-  new (...args: any[]): ComponentPublicInstance
-}): VueElementConstructor
+export function defineCustomElement<P>(
+  options: DefineComponent<P, any, any, any>
+): VueElementConstructor<ExtractPropTypes<P>>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(