JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/luri@2.4.11/src/luri.js"></script>

JavaScript

let {
  Component,
  BUTTON,
  SPAN
} = luri;

class Counter extends Component {

  listeners() {
    return {
      "increment-all": this.increment,
      "request-sum": this.addToSum
    }
  }

  addToSum(collector) {
    collector.sum += this.getCounter().innerHTML * 1;
  }

  increment() {
    this.getCounter().innerHTML++;
  }

  getCounter() {
    return this.ref.firstElementChild;
  }

  props() {
    return BUTTON({
      html: ["+1 me (", SPAN(1), ")"],
      onclick: this.increment.bind(this)
    })
  }
}

class Collector {
  constructor() {
    this.sum = 0;
  }
}

let buttons = luri.construct([
  new Counter(),
  new Counter(),
  BUTTON({
    html: "+1 all",
    onclick(e) {
    	luri.emit("increment-all");
    }
  }),
  BUTTON({
    html: "Request sum",
    onclick(e) {
      let [collector] = luri.emit("request-sum", new Collector);
      
      alert(collector.sum);
    }
  })
]);

document.body.appendChild(buttons);