Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add defineStandardCustomElement api to make emit match standard customEvent #7787

Closed
wants to merge 4 commits into from

Conversation

zh-lx
Copy link
Contributor

@zh-lx zh-lx commented Feb 24, 2023

close #7652 , close #7605

By comparing with standard customEvent api: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#syntax:
this.emit or setup emit in defineCustomElement is missing some features of stantard customEvent as following:

  • type of detail property: detail can be any type in standard customEvent but in defineCustomElement additional event arguments (payload) can be only exposed as an array on the CustomEvent object as its detail property.
  • addition of the properties defined in Event(): Standard customEvent supports pass bubbles, cancelable and composed properties, but it isn't supported in defineCustomElement.

The above problem may be due to the defineCustomElement to make the component completely consistent with the vue component or it may be due to the inadequate consideration in the design, but now I think we need a api which completely matches standard customEvent.

In order not to affect users who now use defineCustomElement, I add an new api named defineStandardCustomElement. It will exposed the second argument of emit to be the second parameter of CustomEvent. (The way can be adjusted, but I think the current way is more conducive to keeping consistent with the customer in the suitcase when it changes in future.) Now the behavior of this new api is as following:

emit('my-click', { detail: 123, bubble: true })
// it equals to
dispatch(new CustomEvent('my-click', { detail: 123, bubble: true }))

I hope you can consider it and make reasonable suggestions. Thanks!

@starcsb
Copy link

starcsb commented Feb 27, 2023

I can get parameter of customEvent by e.detail instead of e.detail[0] with this api, it is greatly helpful for using web component built by vue.

Copy link

github-actions bot commented Nov 3, 2023

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 90.3 kB (+131 B) 34.4 kB (+38 B) 31 kB (+50 B)
vue.global.prod.js 147 kB (+131 B) 53.6 kB (+41 B) 47.9 kB (+60 B)

Usages

Name Size Gzip Brotli
createApp 50.3 kB 19.7 kB 18 kB
createSSRApp 53.7 kB 21 kB 19.1 kB
defineCustomElement 52.7 kB (+106 B) 20.5 kB (+26 B) 18.7 kB (+21 B)
overall 64 kB 24.8 kB 22.5 kB

@YohannParis
Copy link

Having bubbles support would make working with Vue easier.

The idea of creating a bus to communicate between children and parents is overkill when this has been already solved in JS.

@tal-mogendorff
Copy link

Seems like one of the best feature that should be considered to merge to Main version of Vue.

From my side, we are developing an Shared component Infra library that has "bubbles" inside the root component.
How ever, we have a problem where we did a wrapper for the root component to create our own Shared component and we struggle to pass "event bubbles" such as .prevent or .stop to the custom Event.

This Feature would be really meaningful for us so we can optimize our Shared component mechanism in specific use cases.

@yyx990803
Copy link
Member

yyx990803 commented Aug 3, 2024

#7652 (comment)

Ability to provide options to the CustomEvent (e.g. bubbles) is addressed in e181bff

@yyx990803 yyx990803 closed this Aug 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Rejected
Development

Successfully merging this pull request may close these issues.

CustomElement: Additional event arguments of CustomEvent Custom Element, Emit CustomEvent, allow bubbles
6 participants