Callback return value in custom event handlers #1553
Description
For example, I want to write some custom event handler for form submission which will be additionally disable form fields to prevent modifying. So, I'll do something like this:
export default function(node, callback) {
const submit = (e) => {
e.preventDefault();
// disable form fields
const promise = callback(e);
promise.finally(() => /* enable form fields */);
};
node.addEventListener('submit', submit);
return {
destroy() {
node.removeEventListener('submit', submit);
}
};
}And use it as follows:
<form on:sendForm="submit(event)">
....
</form>
<script>
import sendForm from './events/sendForm.js';
export default {
events: { sendForm }
};
</script>It's very useful and I'll just use this custom event in all my forms which need this feature.
The problem, that right now callback handler looks like this:
console.log(callback);
/*
ƒ (event) {
component.submit(event);
}
*/So, I can't get a value returned by component's method.
I suppose, we could just add return statement to this generated code to get something like this:
console.log(callback);
/*
ƒ (event) {
return component.submit(event);
}
*/What do you think about it?