feat: node.eventListeners/getEventListeners(node) alternative to conditionally render internal elements, when an @Event has listeners.

[antonselukh]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Add an ability to check whether the @event decorated property has any event listeners/subscribers.
There is currently no way to check if a callback function was assigned to this event prop.

Describe the Use Case

The original idea was to create a resuable component, containing a conditionally-rendered button as part of the component template outside of <slot>. The button needs to have an onClick action, but since it's inside the template, an @event decorator will be used on <Host> and we link onClick handler with action.emit().
But the conditional rendering has to be done with @Prop() hasAction:boolean
<SomeComponent hasAction={true} onAction={handler}/>

Describe Preferred Solution

A preferred solution would be to be able to check if the action has listeners/callback subscribed and based on that, render or hide the button in the template.

Angular offers this soluton using this.click.observers.length > 0

then the result with button would look like: <SomeComponent onAction={handler}/>
without button: <SomeComponent />

Describe Alternatives

An alternative could be a custom attribute added to the <Host> after rendering, e.g. reflect-event="action", which we could access via elementRef.
On the other hand it can be also done via children inside of , but then wiring between internal logic of and will be harder

Chromium Devtools offers node.eventListeners(); and getEventListeners(node), but of course it's not part of native DOM API.

Related Code

No response

Additional Information

No response

[christian-bromann]

Thanks for raising the issue @antonselukh. I think it is a perfectly viable request. I sketched a component the way I think you've described it:

import { Component, Fragment, Event, h, EventEmitter, Watch } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Event({
    eventName: 'dynamicListener',
    composed: true,
    cancelable: true,
    bubbles: true,
  }) dynamicListener: EventEmitter<HTMLButtonElement>;

  @Watch('dynamicListener')
  watchListenerHandler(newValue: boolean, oldValue: boolean) {
    console.log('The old value of activated is: ', oldValue);
    console.log('The new value of activated is: ', newValue);
  }

  render() {
    const self = this;
    /**
     * fails because Stencil's EventListener currently only provides
     * the following interface: { emit: (data: any) => void }
     */
    const hasListener = this.dynamicListener.observers.length > 0;

    const btn = hasListener
      ? (<button onClick={function () {
        return self.dynamicListener.emit(this)
        }}>
          Hello
        </button>
      )
      : <>not</>
    return <div>click me: {btn}</div>;
  }
}

I will ingest this into our backlog for the team to prioritize.

[antonselukh]

@christian-bromann appreciate it