Juhla

Feast, festival, celebration

Juhla is a wrapper around the native Event Target interface. It clocks in at around 290b (195b gzip, 167b br), and uses familiar methods.

import { juhla } from 'juhla'; // notice it is juhla and not fête

const evt = juhla();

const myHandler = ({ detail }) => console.log(detail);

evt.on('my-custom-event', myHandler); 

evt.emit('my-custom-event', { detail: 'hi :)' }); // hi :)

evt.off('my-custom-event', myHandler);
// or use one to run the handler one time
evt.one('my-custom-event', myHandler);

If you need to namespace events, pass a string to the first parameter.

const myEvt = juhla('me');
const yourEvt = juhla('you');

myEvt.on('greeting', () => console.log('hi!'));
yourEvt.on('greeting', () => console.log('yoyoyo'));

myEvt.emit('greeting') // hi!
yourEvt.emit('greeting') // yoyoyo

Aliased events, like $(document).click() from jQuery, are also supported.

const $ = juhla();

$.click(incr); // is the same as
$.on('click', incr);

$.customEvent(incr); // custom events are _techinically_ supported
$.emit('customEvent'); // using $.on for these preferred

Todo

• [ ] Remove extra 9 bytes from adding the aliased event handlers
• [ ] Add aliased event names, like ready for DOMContentLoaded
• [ ] Find plugin to remove unnecessary semicolons

Inspirations

• Stefan's How to use EventTarget as a web native event emitter.
• mitt: A functional 200b event emitter/pubsub.