Choose events lib
In order to remove jQuery from not-DOM event handlers we need to find a new events lib to deal with custom events and at the same time support all browsers.
One example of this problem is the way we handle the todos badge with the number of todos:
$(document).trigger('todo:toggle', data.count);
(function() {
$(document).on('todo:toggle', function(e, count) {
var $todoPendingCount = $('.todos-pending-count');
$todoPendingCount.text(gl.text.addDelimiter(count));
$todoPendingCount.toggleClass('hidden', count === 0);
});
})();
According to this article from MDN, this could be accomplished by:
const event = new CustomEvent('todo:toggle', {
'detail': {
'count': data.count
}
});
document.dispatchEvent(event);
(() => {
document.addEventListener('todo:toggle', (event) => {
const todoPendingCount = document.querySelector('.todos-pending-count');
const count = event.detail.count;
todoPendingCount.textContent = gl.text.addDelimiter(count);
if (count === 0) {
todoPendingCount.classList.toggle('hidden');
}
});
})();
But CustomEvent
is not supported by IE.
I found a small lib called tiny-emitter which seems to do what we need. What do you think?