Signal handling with AbortController

[adrianb93]

Just sharing if anyone finds this useful or wants to PR it.

Javascript event listeners and fetch/axios calls accept a signal option. This allows the listener to be removed or the request to be cancelled when an abort signal comes in.

https://developer.mozilla.org/en-US/docs/Web/API/AbortController

I wrapped a proxy around my emitter to handle this:

const emitter = new Proxy(mitt(), {
    get(emitter, method) {
        const signalSupport = (event, listener = null, options = {}) => {
            const output = emitter[method](event, listener)

            options.signal?.addEventListener('abort', () => emitter.off(event, listener))

            return output
        }

        const decoratedLookup = {
            on: signalSupport,
        }

        return decoratedLookup[method] ?? emitter[method]
    },
})

Example:

const abortController = new AbortController
const signal = abortController.signal

let example = 'hello'

mitt.on('example', () => example = 'world', { signal })

abortController.abort()

mitt.emit('example')

// Reason: The event listener was removed because of the abort signal.
example === 'hello' // true
example === 'world' // false