Callback return value in custom event handlers

[PaulMaly]

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?

[Rich-Harris]

It seems totally reasonable, I can't think of a reason not to do that off the top of my head. Any chance you could throw a PR together? It may not even need an additional test if it's already covered by the ones in test/js/samples.

[PaulMaly]

@Rich-Harris Yes, I could provide a PR for that fix, but I didn't catch the meaning of the phrase "throw a PR together". Sorry about that, I'm not a native speaker, as you can see.)))

[PaulMaly]

@Rich-Harris Check related PR, please!

[PaulMaly]

Closed with #1557