message-bus
Use the existing browser events API to implement a message-bus.
ðđ # window.addEventListener()
const log = () =>
console.log('hello, world')
addEventListener(
'DOMContentLoaded',
log
)
ð # CustomEvent
addEventListener('ð', event => {
console.log('hello, ' + event?.detail)
})
const event = new CustomEvent('ð', {
detail: 'world'
})
dispatchEvent(event)
ðļ # emit()
const fireEvent = () =>
emit('ð', 'world')
function emit(name, detail) {
dispatchEvent(
new CustomEvent(name, { detail })
)
}
ðš # on()
const fireEvent = () =>
emit('ð', 'world')
const off = on('ð', msg => {
console.log('hello, ' + msg)
})
function on(eventName, cb) {
const fn = ({ detail }) => cb(detail)
addEventListener(eventName, fn)
return () =>
removeEventListener(eventName, fn)
}
ð· # once()
const fireEvent = () => emit('ð')
once('ð', () => {
console.log('just once')
})
function once(eventName, cb) {
const off = on(
eventName,
detail => (off(), cb(detail))
)
return off
}