Best practice for triggering event methods about heresy HOT 13 CLOSED

I'll have a look, as something doesn't seem right, but I've been working on different abstractions recently, so it might be just something I don't remember, as tests are green, and people used heresy a lot already so ... not sure what's going on

from heresy.

it's already subscribed, every listener that starts with on gets registered and initialized, so once you click that, the component is the context and you can alert this.tagName

from heresy.

OK, that's the first thing I tried. I've just grabbed the latest version and tried again and the handler still isn't getting called. I tried with one of the CodePen examples and didn't get the click event. I've tested in Firefox and Chrome, on Windows and Mac. I was able to get it to work by inheriting from a Handler class inspired by your article (the code in the article didn't work because it uses this and .prototype in a static method):

  constructor() {
    super();
    console.log('events: %o', this.events);
    this.events.forEach(evt => this.addEventListener(evt, this));
  }

  // lazy static list definition
  get events() {
    let proto = Object.getPrototypeOf(this);
    return proto._events || Object.defineProperty(
      proto, '_events',
      {value: Object.getOwnPropertyNames(proto)
                    .filter(type => /^on/.test(type))
                    .filter(type => !['onconnected', 'ondisconnected', 'onattributechange', 'oninit'].includes(type))
                    .map(type => type.slice(2))}
    )._events;
  }

from heresy.

So, I'm still not sure what I'm doing wrong, but I couldn't find anything in the code base which does the above. If I'm mistaken, I'm happy to be corrected, otherwise if this is supposed to work but doesn't (i.e., if I'm not the only one this is not working for) I'm happy to put the above in a PR.

from heresy.

it is possible events are getting attached without the on prefix ... can you please try the following instead?

class MyComponent extends HTMLElement{
  static get name(){ return "MyComponent"; }
  static get tagName(){ return "my-component";}
  click(){ alert("I've been clicked!"); }
}
define(MyComponent);

if this works, I think this might be indeed a valid bug, if it doesn't, I think something went wrong with latest pushes 🤔

from heresy.

this is supposed to work

yes, as indeed examples uses onthings around, so I'm not fully sure why it's not working, but looking at the code, something is wrong, so like I've said, this might be indeed a very valid bug somehow I didn't catch before.

from heresy.

So, I'm still not sure what I'm doing wrong, but I couldn't find anything in the code base which does the above. If I'm mistaken, I'm happy to be corrected, otherwise if this is supposed to work but doesn't (i.e., if I'm not the only one this is not working for) I'm happy to put the above in a PR.

from heresy.

Yes, I had already tried adding click(){} vs. onclick(){} without success. Glad to know this is a feature which is not working and not just me losing my mind 😄

from heresy.

Also, my code above for Handler is not working (although I could have sworn it worked yesterday). It is returning an empty list now instead of ['onclick']. I've tried for too long to get it working and then realized I'm fixing it in the wrong place and instead of getting the Handler workaround functioning, I should fix it in heresy. I'll try installing rollup, etc. and see if I can get it patched.

from heresy.

Thanks, I don't have sed on my work machine, so it's difficult to build things here.

from heresy.

quick update, this demo uses event handlers and it works without any issue:
https://webcomponents.dev/edit/6JTOoIOI1dwSyUq0Xvo7

I am still not sure what's the issue here, as heresy always worked like that, but indeed that demo is about defining listeners to its children, while if you want to define listeners to the component itself, I guess the best approach is to do that oninit

class MyComponent extends HTMLElement{
  static get name(){ return "MyComponent"; }
  static get tagName(){ return "my-component";}
  oninit() { this.addEventListener('click', this); }
  onclick(){ alert("I've been clicked!"); }
}
define(MyComponent);

Listeners added through the template literal will be owned by listeners providers, but the component itself can also use its own prototype to define listeners either on connected, removing these on disconnected, or on init, if these are nt meant to be removed.

This should answer your question, so if that's the case, please close this bug, thanks!

from heresy.

OK, that answers my question. I just need to be more explicit with the handlers than I thought. Not a problem. Thanks for looking into it and clarifying.

from heresy.

Handlers are more common for inner elements, and if added automatically would trigger twice each time.

You can, however, create an portable oninit method that does that dance for you, if it’s your commo use case.

from heresy.