JSFiddle - React, Tailwind, and code Playground

HTML

<div id="console"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

TypeScript

/////////// Helper function to print to JsFiddle output window //////////////////////////
let console = document.getElementById('console');
let log = (text) => {
  console.innerHTML = console.innerHTML + text + '</br>';
}
//////////////////////////////////////////////////////////////////////////////////////////

class SvcA {
  private sub = new Rx.Subject();

  poke() {
    log('service A is doing some work');
    this.sub.next();
  }

  events() {
    return this.sub.asObservable();
  }
}

class SvcB {
  private sub = new Rx.Subject();

  poke() {
    log('service B is doing some work');
    this.sub.next();
  }

  events() {
    return this.sub.asObservable();
  }
}

class ObserverY {

  constructor(svcA, svcB) {
  	// Aside: Looks like JsFiddle has some scoping issues with the "this" keyword
    // when used inside an arrow function as seen below. The following assignment
    // is a workaround.
    let _this = this;
    
    svcA.events().subscribe(() => {    
    	if(!_this.ignoreAEvent) {
      	_this.ignoreBEvent = true;
      	svcB.poke();
      }
      _this.ignoreAEvent = false;
    });

    svcB.events().subscribe(() => {
    	if(!_this.ignoreBEvent) {
      	_this.ignoreAEvent = true;
      	svcA.poke();
      }
      _this.ignoreBEvent = false;
    });
  }
}

class WidgetComponent {
  constructor(svcA) {}
  
  click() {
  	svcA.poke()
  }
}

let svcA = new SvcA();
let svcB = new SvcB();
new ObserverY(svcA, svcB);

let widget = new WidgetComponent(svcA);
widget.click();