JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<button id="a">a</button>
<button id="b">b</button>
<button id="c">c</button>

JavaScript

(function(root, name, factory) {

  if (typeof root.module === 'object' && root.module.exports)
    module.exports = factory();
    
  else if (typeof root.define === 'function' && root.define.amd)  
    define([], factory);
    
  else if (root === window)
    root[name] = factory();
  
})(this, 'pubsub', function() { 'use strict';

  var topics = {};

  function publish(topic, msg) {
    if (topics[topic])
      topics[topic].listeners.forEach((l, i) => l(msg, i));
  }
  
  function subscribe(topic, fn) {
    var index;
    if (!topics[topic]) {
      topics[topic] = { listeners: [fn] };
      index = 0;
    }
    else
      index = topics[topic].listeners.push(fn) - 1;
    return { 
      unsubscribe: function() {
        topics[topic].listeners.splice(index, 1); 
      } 
    }
  }
  
  return {
    publish: publish,
    subscribe: subscribe
  };

});

var a = pubsub.subscribe('click', function(msg, index) {
  console.log(msg, index)
});

var b = pubsub.subscribe('click', function(msg, index) {
  console.log(msg, index)
});

var c = pubsub.subscribe('click', function(msg, index) {
  console.log(msg, index)
});