Create an Observable-Based Fetch Wrapper Using Ramda & Most

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script data-require="ramda@*" data-semver="0.23.0" src="https://unpkg.com/ramda@0.23.0/dist/ramda.min.js"></script>
    <script src="https://unpkg.com/most@1.5.0/dist/most.min.js"></script>
    
    
  </head>

  <body>
    <!-- // make console.log write to the page for better in-browser experience -->
    <script>
      (function () {
        var body = document.querySelector('body');
        body.style['fontFamily'] = 'monospace';
        body.style['fontSize'] = '2em';
        console.log = function (x) {  body.innerText = JSON.stringify(x, null, 2);  };
      }());
      
    </script>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */

const { compose, curry, head } = R
const { fromPromise, observe } = most

const url = 'https://api.github.com/search/repositories?q=most'

const then = curry((f, thenable) => thenable.then(f))
const toJson = response => response.json()
// NOTE: Using response.json() here was only intended as an example.
// You could instead use response.text(), response.blob(), etc. as needed.
// You could also skip this step and return the response directly if you needed
// to inspect it or perform some logic based on the HTTP status code.
const fetchJsonStream = compose(fromPromise, then(toJson), fetch)

const toItems = ({ items }) => items
const toFirstItem = compose(head, toItems)
const logFirstItem = compose(console.log, toFirstItem)
// NOTE: We could have done the above in one step. It would look like this:
// const logFirstItem = compose(console.log, head, toItems)

observe(logFirstItem, fetchJsonStream(url))