How to use rx - 10 common examples

beforeEach(function() {
      messages = new rx.Subject();
      channel = { 
        send: function() { 
          // NB: Posting a message to the channel returns an editable message
          // object, which we're faking out here.
          return { updateMessage: function() { } };
        } 
      };
      scheduler = new rx.HistoricalScheduler();
      players = [];
    });

_defineRootElemStream() {
    // Create rootElem stream and automatic className correction
    let originalClasses = (this._domContainer.className || '').trim().split(/\s+/);
    //console.log('%coriginalClasses: ' + originalClasses, 'color: lightgray');
    this._rawRootElem$ = new Rx.Subject();
    this._rootElem$ = this._rawRootElem$
      .map(function fixRootElemClassName(rootElem) {
        let previousClasses = rootElem.className.trim().split(/\s+/);
        let missingClasses = originalClasses.filter(function (clss) {
          return previousClasses.indexOf(clss) < 0;
        });
        //console.log('%cfixRootElemClassName(), missingClasses: ' + missingClasses,
        //  'color: lightgray');
        rootElem.className = previousClasses.concat(missingClasses).join(' ');
        //console.log('%c  result: ' + rootElem.className, 'color: lightgray');
        //console.log('%cEmit rootElem$ ' + rootElem.tagName + '.' + rootElem.className,
        //  'color: #009988');
        return rootElem;
      })
      .shareReplay(1);
  }

.distinctUntilChanged(
        (s) => s,
        dimenstionsHaveNotChanged
      )
      // Center the camera vertically and align it to the top
      .map(() => ({weightX: 0.5, weightY: 0})),
  });

  return {
    DOM: O.combineLatest(
      // merge the cost panel into the vtree
      pla$.map(costPanel),
      stage.DOM,
      (a,b) => [a,b]
    ).map(wrapInDiv),
    preventDefault: O.merge([
      actions.preventDefault,
      stage.preventDefault,
    ]),
  };
};

const model = actions => {
    const message$ = Rx.Observable.merge(
      actions.changeMessage$,
      // we listen to this observable
      // because when the submit button is clicked
      // we want to clear the message input out
      actions.submitMessage$.map(x => '')
    ).startWith('')

    return Observable.combineLatest(
      allPusherMessages$,
      actions.submitUsername$.startWith(''),
      message$,
      (pusherMessages, username, message) => ({ pusherMessages, username, message })
    );
  };

Slider.rectangular = function (value, postprocessor) {
        var hotspot = Ax.create()
            .withinPath(Ax.create()
            .lineTo([20, 0])
            .lineTo([20, 20])
            .lineTo([0, 20])
            .lineTo([0, 0]));
        value.subscribe(function (x) { return console.log("pre construction value changed", x); });
        var slider = new Slider(hotspot, new events.ComponentMouseState(), new events.ComponentMouseState(), value, Ax.create().fillStyle("red"), /* pressed */ Ax.create().fillStyle("orange"), /* over */ Ax.create().fillStyle("white") /* idle */); /* idle */
        if (postprocessor)
            postprocessor(slider);
        return slider;
    };
    return Slider;
})(Ax.Operation);
var value = new Rx.BehaviorSubject(0);
//each frame, first draw black background to erase the previous contents
animator.play(Ax.create().fillStyle(Parameter.rgba(Parameter.updateFrom(0, value).mapValue(function (x) { return x * 2.5; }), 0, 0, 1)).fillRect([0, 0], [100, 100]));
animator.play(Ax.create()
    .pipe(Slider.rectangular(value)));
helper.playExample("@name", 2, animator, 100, 100);

const App = R(({events}) => {
  const inc$ = Observable.fromEvent(events, "inc-click").map(() => +1)
  const dec$ = Observable.fromEvent(events, "dec-click").map(() => -1)

  // also React onChange is supported
  const text$ = Observable.fromEvent(events, "text-change")
    .map(e => e.target.value)
    .startWith("tsers")
    .shareReplay()

  const counter$ =
    inc$.merge(dec$)
      .startWith(0)
      .scan((val, d) => val + d, 0)
      .shareReplay()

  const style$ =
    Observable.combineLatest([text$, counter$])
      .map(([text, counter]) => text.length === counter ? "red" : "black")
      .map(color => ({color}))

  // You can emit events from reactive components by giving an object

const App = R(({events}) => {
  const inc$ = Observable.fromEvent(events, "inc-click").map(() => +1)
  const dec$ = Observable.fromEvent(events, "dec-click").map(() => -1)

  // also React onChange is supported
  const text$ = Observable.fromEvent(events, "text-change")
    .map(e => e.target.value)
    .startWith("tsers")
    .shareReplay()

  const counter$ =
    inc$.merge(dec$)
      .startWith(0)
      .scan((val, d) => val + d, 0)
      .shareReplay()

  const style$ =
    Observable.combineLatest([text$, counter$])

constructor() {
        super();

        let loadDisposable = new Rx.SingleAssignmentDisposable();
        this.addDisposable(loadDisposable);

        this._stream = Rx.Observable.empty();
        this._publishedStream = Rx.Observable.defer(() => {
            // We close over _stream so that we allow the class to modify
            // it (see registerStream function)
            return this._stream;
        })
        // When we load, stop on the first error result we get
        // But yield it back to the consumer so they know it stopped
        .takeUntilInclusive((result: LoadResult) =>  result.stage === ResultStage.Error)
        .multicast(new Rx.ReplaySubject(1))
        .lazyConnect(loadDisposable);
    }

export default ({
  DOM, // DOM driver source
  globalEvents, // globalEvent driver sources
}) => {
  const openData$ = new Subject();
  const importExpression$ = new Subject();
  const viewSetting$ = new Subject();

  const actions = intent({
    DOM, globalEvents,
    openData$,
    importExpression$,
    viewSetting$: viewSetting$,
  });

  const state$ = model(O.empty(), actions);

  const plaData$ = state$.map(({state}) =>
    toPLA(state.diagram, state.currentKvMode, state.currentLoop.cube)
  ).share();

  const jsonData$ = state$.map(({state}) =>

function EventEmitter() {
        _super.call(this);
        // System creates a different object for import * than Typescript es5 emit.
        if (Rx.hasOwnProperty('default')) {
            this._subject = new Rx.default.Rx.Subject();
            this._immediateScheduler = Rx.default.Rx.Scheduler.immediate;
        }
        else {
            this._subject = new Rx.Subject();
            this._immediateScheduler = Rx.Scheduler.immediate;
        }
    }
    EventEmitter.prototype.observer = function (generator) {