Add support for @mounted="mounted" to be @mounted if the function mounted is defined on the component

[gingerchew]

As I've been using petite-vue, I find myself writing events like this a lot:

<div v-scope="MyComponent()" @mounted="mounted">
  <button ref="button" @click="click">Click Me</button>
</div>

Since the names of the functions don't matter much at this level, it is fine for them to be named after the event. Then I remembered EventListener.handleEvent. I first found out about it when reading about the quirkyness of this in event listeners in this article by desandro.

With handleEvent you can do stuff like this:

const eventHandler = {
  utilFunction(...args) {
    // utility function stuff
  },
  click(event, target, instance) {
    // run click function
    this.utilFunction(target)
  },
  change(event, target, instance) {
    // run change function
  },
  handleEvent(event) {
    if (['click','change'].includes(event.type) === false) {
      console.warn('There is no event handler for event of type: ' + event.type);
      return;
    }
    this[event.type](event, event.target, this);
  }
};

document.addEventListener('click', eventHandler);
document.querySelector('input').addEventListener('change', eventHandler);
document.addEventListener('my-fake-event', eventHandler); // Adds warning to console.

It's that last line of the eventHandler.handleEvent function that I am hoping to emulate

That would mean that using this component:

function MyComponent() {
  return {
    click(e) {
      console.log(e.target);
    },
    mounted() {
      console.log("I've mounted");
    }
  };
}

The event directives on this HTML

<div v-scope="MyComponent()" @mounted>
  <button @click>Click Me</button>
</div>

Will work the same as on this HTML

<div v-scope="MyComponent()" @mounted="mounted">
  <button @click="click">Click Me</button>
</div>

I think this would be useful for organizing and also be useful for shorthand. What do others think though?

[gingerchew]

I've been fiddling with this and I've hit a small road-block. Adding the below code here:

if (!exp && ctx.scope[arg]) handler = get(`function ${get(arg)}`);

Then modifying the app on the on.html test to:

<script type="module">
  import { createApp } from '../src';

  createApp({
    // unnamed event handler
    click() {
      alert('clicked');
    },
  }).mount('#app');
</script>

And it works! 🎉 The caveat is the example with the .prevent modifier, it still runs the unnamed event handler. That feels like an unexpected behavior to me.

I added the guard:

if (!exp && ctx.scope[arg] && !modifiers?.prevent) handler = get(`function ${get(arg)}`);

Downside is now all .prevent modifiers will not run unnamed event handlers, which seems unexpected as well. Are there any thoughts on what I've done so far/how I can best move forward?