Discussion on: Type-Safe CustomEvents: Better Messaging with Native APIs

View post

Replies for: This is really neat. I've been doing something similar but way less elegant — basically just a plain object with event name keys mapping to callbac...

For removing event listeners you can either use the native once, this will disconnect the event listener once it's been caught once.

// set the event listener to once
shoppingCartSingleton.addEventListener('item-added', (event) => { ... }, {
  once: true
});

Or, my preferred method, you can send an abort signal to remove as many event listeners as you like.

// declare an abort controller
const ac = new AbortController();

// pass the signal through to the event listener
shoppingCartSingleton.addEventListener('item-added', (event) => { ... }, {
  signal: ac.signal
});

// abort the AbortController to remove the event listener
ac.abort();

For example in react you would do something like this

useEffect(() => {
  const ac = new AbortController();

  // attach 3 listeners all with the same signal
  shoppingCartSingleton.addEventListener('item-added', (event) => { ... }, { signal: ac.signal });
  shoppingCartSingleton.addEventListener('item-removed', (event) => { ... }, { signal: ac.signal });
  shoppingCartSingleton.addEventListener('cart-cleared', (event) => { ... }, { signal: ac.signal });

  // on unmount, all 3 listeners are removed.
  return () => ac.abort();
}, [])