demo/async.html

<!DOCTYPE html>
<html>
<head>
<title>Async Generators Demo</title>
<style>

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#box {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  border-radius: 5px;
  text-shadow: 0 0 5px yellow;
  font: 25px sans-serif;
  text-align: center;
  line-height: 22px;
  letter-spacing: -2px;
}
</style>
<script src="../bin/BrowserSystem.js"></script>
<script>
System.loadScriptTypeModule();
</script>

<script type="module" traceurOptions="--async-functions --async-generators --for-on">

import Observable from './resources/Observable.js';

async function* coordinates() {
  for (let event on Observable.fromEvent(window, 'mousemove')) {
    yield {x: event.clientX, y: event.clientY};
  }
}

async function followMouse() {
  var box = document.getElementById('box');
  for (let {x, y} on coordinates()) {
    box.style.left = x + 'px';
    box.style.top = y + 'px';
  }
}

followMouse();

</script>
</head>
<body>
  <div id="box">Traceur<br>Rocks!</div>
</body>
</html>