Create Streams From Iterables With Most.js

<!DOCTYPE html>
<html>

  <head>
    <script data-require="most.js@0.18.8" data-semver="0.18.8" src="https://rawgit.com/cujojs/most/master/dist/most.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="logger.js"></script>
    <script src="script.js"></script>
  </body>

</html>

const { from, just } = most

const array =
  [ 1, 2, 3 ]

from(array)
  .observe(logger.bind(null, 'from array'))

just(array)
  .observe(logger.bind(null, 'just array'))

const string =
  'ice cream'

from(string)
  .observe(logger.bind(null, 'from string'))

just(string)
  .observe(logger.bind(null, 'just string'))

function *life() {
  const data =
    [ 'eat', 'sleep', 'code' ]

  for(let i=0 ;; ++i) {
    yield data[ i % data.length ]
  }
}

from(life())
  .take(3 * 5)
  .observe(logger.bind(null, 'from life'))
  
// Bonus Bits
// Your very own iterable

function bonusBits() {
  from(array)
    .take(2)
    .observe(logger.bind(null, 'from array-take-2'))

  from(string)
    .take(3)
    .observe(logger.bind(null, 'from string-take-3'))
  
  const alphabet = {
    [Symbol.iterator]: function() {
      let start = 97
      let end = 122
      let index = start

      return {
        next: function() {
          return {
            value: String.fromCharCode(index > end ? index = start : index++),
            done: false
          }
        }
      }
    }
  }

  from(alphabet)
    .take(10)
    .observe(logger.bind(null, 'alphabet'))
}

setTimeout(bonusBits, 200)

// extra credit: run `bonusBits` outside of `setTimeout`,
//               see if you can figure out what is going on!

// bonusBits()

/* Styles go here */

(function(e){const n=console.log;const o=document.querySelector(e.selector);c(o,{background:e.colors.background,color:e.colors.foreground,fontFamily:"monospace"});function t(e){return{}.toString.call(e)==="[object Array]"}function r(e){return{}.toString.call(e)==="[object Object]"}function l(e){return e&&typeof e.inspect==="function"}function c(e,n){Object.assign(e.style,n);return e}function i(e){const n=document.createElement("span");if(e.tagName){n.appendChild(e)}else{n.innerText=e}return n}function u(n){const o=document.createElement("span");o.appendChild(i("{ "));Object.keys(n).reduce(function(o,t,r,l){o.appendChild(c(i(t+": "),{color:e.colors.key}));o.appendChild(d(n[t]));if(r<l.length-1){o.appendChild(i(", "))}return o},o);o.appendChild(i(" }"));return o}function a(e){const n=document.createElement("span");n.appendChild(i("[ "));e.reduce(function(n,o,t){n.appendChild(d(o));if(t<e.length-1){n.appendChild(i(", "))}return n},n);n.appendChild(i(" ]"));return n}function d(n){if(l(n)){return d(n.inspect())}else if(typeof n==="number"){return c(i(n),{color:e.colors.number})}else if(typeof n==="string"){return c(i("'"+n+"'"),{color:e.colors.string})}else if(typeof n==="boolean"){return c(i(n),{color:e.colors.boolean})}else if(typeof n==="function"){return c(i("Function"))}else if(t(n)){return i(a(n))}else if(r(n)){return i(u(n))}else if(n===undefined){return c(i("undefined"),{fontStyle:"italic",color:e.colors.boolean})}else if(n===null){return c(i("null"),{fontStyle:"italic",color:e.colors.boolean})}}function s(n,o){const t=document.createElement("dl");const r=document.createElement("dt");const l=document.createElement("dd");c(t,{padding:"0",margin:"0",marginBottom:"0.6em",fontSize:e.fontSize});c(r,{color:e.colors.label,fontWeight:600,fontSize:"1.1em",margin:"0"});c(l,{padding:"0 0.75em",margin:"0"});r.innerText=n+":";l.appendChild(d(o));t.appendChild(r);t.appendChild(l);return t}function f(n){return c(i(d(n)),{display:"block",margin:"0",marginBottom:"0.6em",fontSize:e.fontSize})}function p(){o.appendChild(arguments.length>1?s(arguments[0],arguments[1]):f(arguments[0]));n.apply(console,arguments)}e.root.logger=p;console.log=p})
({
  root:window,
  selector:"body",
  fontSize:"22px",
  colors: {
    background:"transparent",
    foreground:"gray",
    label:"blue",
    nil:"green",
    number:"violet",
    string:"red",
    key:"blue",
    boolean:"green"
  }
});