JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<button>
  Click to test
</button>

JavaScript

/**
	
*/
function emitter (document) {
/**
    CustomEvent Polyfill for
    IE 11 etc...
  */

  (function () {

    if ( typeof window.CustomEvent === "function" ) return false;

    function CustomEvent ( event, params ) {
      params = params || { bubbles: false, cancelable: false, detail: null };
      var evt = document.createEvent( 'CustomEvent' );
      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
      return evt;
     }

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
  })();

  const store = {
    numClicks: 0
  }
  const btn = document.querySelector('button');
    btn.addEventListener('click', (e) => { handleBtnClick(e) });

  const handleBtnClick = () => {
    console.log('got btn click');
    updateStore();
  }

  const updateStore = () => {
    const prev = Object.assign({}, store);
    store.numClicks++;
    const event = new CustomEvent('storeUpdate', {
      previous: prev,
      current: store
    });
    document.dispatchEvent(event);
  }

  document.addEventListener('storeUpdate', () => { console.log('wow', store); });
};

emitter(document);