Illustration for a possible bug in Rx.js.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="rxjs@2.5.3" data-semver="2.5.3" src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Content area</h2>
      <div id="root"></div>
    <div>
      <h2>LOG</h2>
      <div id="log"></div>
    </div>
  </body>

</html>

// Code goes here
document.addEventListener('DOMContentLoaded', function() {
  var logContainer = document.getElementById('log');
  var root = document.getElementById('root');
  // Use a more visible log than the console
  function log(text) {
    var line = document.createElement('div');
    line.appendChild(document.createTextNode(text));
    logContainer.appendChild(line);
  }
  // Observer that writes to the log
  function debugLogger(name) {
    var prefix = '[' + name +'] ';
    return Rx.Observer.create(
        function (v) { log(prefix + 'value'); },
        function (e) { log(prefix + 'error'); },
        function() { log(prefix + 'DONE'); }
    );
  }
  // Create a simple DOM structure
  function makeBox(text) {
    var box = document.createElement('div');
    box.classList.add('box');
    box.appendChild(document.createTextNode(text));
    return box;
  }
  function attach(dom, patches) {
    patches.subscribe(function (newDom) {
      // Should be replaceWith, but doesn't matter in this example
      dom.appendChild(newDom);
    });
  }
  
  function test1() {
    var dom = makeBox('one');
    var clicks = Rx.Observable.fromEvent(dom, 'click');

    // Attach
    clicks.subscribe(debugLogger('one'));
    root.appendChild(dom);
  }
  function test2() {
    var domStream = Rx.Observable.return(makeBox('two'));
    var clicks = domStream.flatMapLatest(function(dom) {
      return Rx.Observable.fromEvent(dom, 'click');
    });

    // Attach
    clicks.subscribe(debugLogger('two'));
    attach(root, domStream);
  }
  function test3() {
    var updates = Rx.Observable.return(1);
    var domStream = updates.map(function (update) {
      return makeBox('three');
    });
    var clicks = domStream.flatMapLatest(function(dom) {
      return Rx.Observable.fromEvent(dom, 'click');
    });
    
    // Attach
    clicks.subscribe(debugLogger('two'));
    attach(root, domStream);
  }
  
  test1();
  test2();
  test3();
});

/* Styles go here */
.box {
  width: 5em;
  height: 2em;
  border: 1px solid black;
  background-color: lightgrey;
  text-align: center;
}