Global-dispatcher NPM

global-dispatcher

Basically a global bare bones event emitter

Functional: no this (for you poeple obsessed with FP)
Tiny: 350 Bytes (min + gzip)
No transpilation required: written in ES3, import directly
No constructor: everything is global
Support synchronous and asynchronous dispatches

Import

CJS: const {subscribe, dispath} = require('global-dispatcher');
ESM/Node: import {subscribe, dispath} from 'global-dispatcher';
ESM/Unpkg: import {subscribe, dispath} from 'https://unpkg.com/global-dispatcher/min.esm.js';

Usage

Basic

// Register a new subscription
subscribe('event', data => console.log(data));

// ...

// Somewhere else in the code land
dispatch('event', {
	a: 'b'
});

Unsubscribing listeners

const unsub = subscribe('event', () => {});

// Calling `unsub` removes the specified listener from the list
unsub();

Example

// list.js
import {subscribe} from 'global-dispatcher';

class List extends HTMLElement {
  connectedCallback() {
    subscribe('new-item', item => this.renderNewItem(item));
  }

  renderNewItem(item) {
    // ...
  }
}

// button.js
import {dispatch} from 'global-dispatcher';

class Button extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', () => {
      const randomString = (Math.random() * 1e16).toString(36);
      dispatch('new-item', randomString);
    });
  }
}

FAQ

Motivation

Some modules require you to transpile for your target, you may end up having to transpile even when your original pipeline doesn't need one.
They are not global (see below), or require singleton pattern files, even when you just need a single instance.

Sync and Async dispatches

dispatch(...) by default calls the listeners asynchronously, to run listeners synchronously, use dispathcSync(...) instead.

Why global by default?

Because when you create an instance of an emitter thingy in each of your component, there is no way for them to communicate with each other. This module follows the singleton pattern in a global level (expand below to see example).

Some people end up using hacks like the one below

// util/emitter.js
import eventEmitterConstructor from 'some-event-emitter-library';

export default eventEmitterConstructor();

// components/component1.js
import emitter from '../util/emitter.js'

// components/component2.js
import emitter from '../util/emitter.js'

Why the name `global-dispather`

Because its global by default, not bound to any object/constructor. And you do not emit or subscribe to events on an emitter object, so it ended up being a dispatcher.