feat(runtime-core): return result of handlers in emit

[jaulz]

It would be great if emit could return the result of the handlers. A typical example could be to show a loading indicator while asynchronous event handlers are running:

const loading = ref(false)

const handleClick = async () => {
  loading.value = true
  await Promise.all(emit('click'))
  loading.value = false
}

This is just a basic example that does not consider errors or multiple clicks but it gives an idea what would be possible. The same could already be implemented with props but it duplicates the handling.

If you think this is a good idea, I can extend the PR with corresponding tests.

[sxzz]

I'm not sure if we should have an issue discussing this feature first.

[sxzz]

If handler and onceHandler are existing at the same time, the result will be overwritten.

[sxzz]

Should change type declaration too

core/packages/runtime-core/src/componentEmits.ts

Lines 57 to 70 in 45782df

	export type EmitFn<
	Options = ObjectEmitsOptions,
	Event extends keyof Options = keyof Options
	> = Options extends Array<infer V>
	? (event: V, ...args: any[]) => void
	: {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
	? (event: string, ...args: any[]) => void
	: UnionToIntersection<
	{
	[key in Event]: Options[key] extends (...args: infer Args) => any
	? (event: key, ...args: Args) => void
	: (event: key, ...args: any[]) => void
	}[Event]
	>

[jaulz]

I'm not sure if we should have an issue discussing this feature first.

Yep, for sure, I thought this PR could serve as an initial base to discuss it further. Happy to move it somewhere else if you want?

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	a1cac63
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/633d2b62989f1b000874005a

[sxzz]

If !instance.emitted is true, it will skip else.

Suggested change

	} else if (!instance.emitted[handlerName]) {
	} if (!instance.emitted[handlerName]) {

[sxzz]

I wonder if values could be an array? If handler is not an array, then values is not.

[jaulz]

Based on the definition of callWithAsyncErrorHandling it can return an array:

core/packages/runtime-core/src/errorHandling.ts

Lines 77 to 98 in ae4b078

	export function callWithAsyncErrorHandling(
	fn: Function | Function[],
	instance: ComponentInternalInstance | null,
	type: ErrorTypes,
	args?: unknown[]
	): any[] {
	if (isFunction(fn)) {
	const res = callWithErrorHandling(fn, instance, type, args)
	if (res && isPromise(res)) {
	res.catch(err => {
	handleError(err, instance, type)
	})
	}
	return res
	}
	const values = []
	for (let i = 0; i < fn.length; i++) {
	values.push(callWithAsyncErrorHandling(fn[i], instance, type, args))
	}
	return values
	}

[sxzz]

It depends on handler. If handler is a function, then callWithAsyncErrorHandling will return the result directly. I don't think handler will be an array.

[newVincentFong]

It's an underrated feature here!
First of all, it would really be nice to have:

<!-- Outside -->
<SomeFormComponent
	@validate="validateData"
	@submit="saveDataToDatabase"
/>
<script>
async function validateData() {
	await API.validateXXX()
}
async function saveDataToDatabase() {
	await API.postXXX()
}
</script>

<!-- Inside -->
<form />
<script>
const emit = defineEmits()
async function handleClickSubmit() {
	startLoading()
	await emit('validate', data)
	await emit('submit', data)
	stopLoading()
}
</script>

Nice and clean, right?
But for now, we can't write in this way.
Because there is actually an untold rule on event handlers.

defineEmits<{
	(e: 'submit'): Promise<undefined> // ❌
	(e: 'submit'): void // ✅
}>()

The return type can only be void.
You won't get the result returned by your event handlers.
The whole EMIT thing is basically an EventEmitter, and in a typical EventEmitter model, one event key can have multiple handlers.
Despite the fact that @sxzz has looked up the code, and handler won't be an array.
So, Vue should make a decision on its Emit model.
Either Vue supports Returning result of event handlers or stress the void type in doc like:

defineEmits<{
	(e: 'aaa'): void
	(e: 'bbb'): void
	/** .... */
}>()

[mrchar]

I realy need this feature, is this feature likely to be merged? when will it be available?

[skirtles-code]

There's an RFC discussion at vuejs/rfcs#587 that proposes a slightly different way of approaching this. I'm not sure which I prefer.

---

Just to clarify, a single event can have multiple listeners. In the Playground below, the emitted event triggers 3 handlers. mergeProps ensures that these are combined into an array.

• Playground

emit will need to return an array in all cases, it can't just assume a single listener. The RFC above seems to be suggesting that the array should be automatically wrapped in a promise, whereas the approach here seem to leave it to the user to call Promise.all.

[edison1105]

I prefer the proposal in this PR to vuejs/rfcs#587. This implementation is more flexible, giving the user control over exactly what is returned, rather than just returning a boolean value.