From 5e06740f3df193d66ee757a86c0fce98e8e8b79f Mon Sep 17 00:00:00 2001 From: rudyxu1102 Date: Wed, 22 Mar 2023 19:57:00 +0800 Subject: [PATCH 1/4] fix(types): defining a custom element from the defined component with emits --- .../dts-test/defineCustomElement.test-d.ts | 18 +++++++++++++++++- packages/runtime-dom/src/apiCustomElement.ts | 14 +++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts index 4e7cf228372..318fc8e8e33 100644 --- a/packages/dts-test/defineCustomElement.test-d.ts +++ b/packages/dts-test/defineCustomElement.test-d.ts @@ -1,4 +1,8 @@ -import { defineCustomElement } from 'vue' +import { + defineCustomElement, + defineComponent, + type VueElementConstructor +} from 'vue' import { expectType, describe } from './utils' describe('inject', () => { @@ -62,3 +66,15 @@ describe('inject', () => { } }) }) + +describe('emits', () => { + test('no props', () => { + const Comp1Vue = defineComponent({ + emits: { + click: () => true + } + }) + const Comp = defineCustomElement(Comp1Vue) + expectType(Comp) + }) +}) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 7710d57216a..7a5e6f4ff64 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -130,7 +130,19 @@ export function defineCustomElement< // overload 5: defining a custom element from the returned value of // `defineComponent` export function defineCustomElement(options: { - new (...args: any[]): ComponentPublicInstance + new (...args: any[]): ComponentPublicInstance< + any, + any, + any, + any, + any, + any, + any, + any, + any, + any, + any + > }): VueElementConstructor export function defineCustomElement( From a2838208c13f00f7cf99e0547ba71140670ab9b7 Mon Sep 17 00:00:00 2001 From: rudyxu1102 Date: Wed, 22 Mar 2023 20:08:49 +0800 Subject: [PATCH 2/4] chore: improve code --- packages/dts-test/defineCustomElement.test-d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts index 318fc8e8e33..34ebb537d05 100644 --- a/packages/dts-test/defineCustomElement.test-d.ts +++ b/packages/dts-test/defineCustomElement.test-d.ts @@ -3,7 +3,7 @@ import { defineComponent, type VueElementConstructor } from 'vue' -import { expectType, describe } from './utils' +import { expectType, describe, test } from './utils' describe('inject', () => { // with object inject From 863f1a052df11ec934face773e8e81fec65a6a61 Mon Sep 17 00:00:00 2001 From: Carlos Rodrigues Date: Fri, 3 Nov 2023 20:04:19 +0000 Subject: [PATCH 3/4] chore: using DefineComponent and also allow to get the correct props --- .../dts-test/defineCustomElement.test-d.ts | 5 +++++ packages/runtime-dom/src/apiCustomElement.ts | 22 +++++-------------- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts index 34ebb537d05..657251c34b5 100644 --- a/packages/dts-test/defineCustomElement.test-d.ts +++ b/packages/dts-test/defineCustomElement.test-d.ts @@ -70,11 +70,16 @@ describe('inject', () => { describe('emits', () => { test('no props', () => { const Comp1Vue = defineComponent({ + props: { + a: String + }, emits: { click: () => true } }) const Comp = defineCustomElement(Comp1Vue) expectType(Comp) + + expectType(new Comp().a) }) }) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 36fe586638d..de37605d68a 100644 --- 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,21 +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< - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any - > -}): VueElementConstructor +export function defineCustomElement

( + options: DefineComponent +): VueElementConstructor> /*! #__NO_SIDE_EFFECTS__ */ export function defineCustomElement( From 4e4d2d840171c22bd373be4f3195fbd6d488a307 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 10 Nov 2023 13:52:25 +0800 Subject: [PATCH 4/4] Update defineCustomElement.test-d.ts --- packages/dts-test/defineCustomElement.test-d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts index 657251c34b5..f4f238641db 100644 --- a/packages/dts-test/defineCustomElement.test-d.ts +++ b/packages/dts-test/defineCustomElement.test-d.ts @@ -67,8 +67,8 @@ describe('inject', () => { }) }) -describe('emits', () => { - test('no props', () => { +describe('defineCustomElement using defineComponent return type', () => { + test('with emits', () => { const Comp1Vue = defineComponent({ props: { a: String