Internal events helper functions

[michaelwarren1106]

With a previous design system that I worked on, one way we used to communicate between parent/child components was to pass internal-only events back up to the parent. I've found that the slotchange event or a MutationObserver works a lot of the time in the parent for doing recalculation of child elements in a parent, but there might be some times those wouldnt be the best idea, or would be too much code, etc. So we came up with a few helper functions that would enable events to be emitted between components that would be "internal only". Basically that the event name would start with a prefix marking them as internal, and through the use of helper functions, enable other components to easily create event listeners for "internal only" events with only the actual event name showing up in the source code. The actual internal event name emitted and listened for would be in memory.

The helper functions would be something like:

// create and dispatch an internal event
const dispatchInternalEvent(hostElement: HTMElement, eventName: string, eventOptions) {
  const defaultOptions = { bubbles: true, cancelable: true, detail: {}};
  const actualOptions = Object.assign({}, defaultOptions, eventOptions);

  const internalEvent = new CustomEvent(`${internalEventNamePrefix}-${eventName}`, actualEventOptions);
  
  hostElement.dispatchEvent(internalEvent);
};

// addEventListener for internal event
const internalEventListener(hostElement: HTMLElement, eventName: string, callback) {
  const eventHandler = function(event) {
    event.stopImmediatePropagation();
    callback.call(hostElement);
  };

  hostElement.addEventListener(`${internalEventNamePrefix}-${eventName}`, eventHandler );
}

// remove event listener
const removeInternalEventListener(hostElement: HTMLElement, eventName: string, callback) {
  hostElement.removeEventListener(`${internalEventNamePrefix}-${eventName}`, callback);
}

usage might be something like:

class MyComp extends LitElement {

  private InternalEventHandler() {
    dispatchInternalEvent('child-updated', { index: this.index}); 
  }
}

and in a parent component

class MyComp extends LitElement {

  connectedCallback() {
    super.connectedCallback();
    internalEventListener('child-updated', this.internalEventHandler); 
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    removeInternalEventListener('child-updated', this.internalEventHandler); 
  }
}

Its a pretty simple/straight forward set of helpers that would enable cross-component communication in places where slotchange and MutationObserver aren't the right choice?

What is this group's thoughts about providing such helpers for a pattern like this as a part of some open-wc package?

[Westbrook]

This might be interesting related research: whatwg/dom#331 (comment)

[Westbrook]

I also wonder if this falls closer towards a “protocol” than a set of mixins/controllers such that there could be interoperability between base classes, etc. have you checked out https://github.com/webcomponents-cg/community-protocols as a possible home for this concept?

[michaelwarren1106]

imo this kind of thing would be a separate offering. its not a mixin or controller, but just some helper function(s) to make it easier to do things should a dev need to. Imo, this kind of thing could be a protocol, but i think for now the community-protocols repo is a place for specs/drafts/proposals if i'm reading that right. I'm not sure that such a small pattern as this would need such a proposal? its just merely a way to do internal events in a standardized kinda of way across a project. I'm not even sure if i'd vote for this as a standardized approach across the community...The Symbol() approach for event naming would be a cool addition to this too!