eggheadio-projects/getting-to-know-the-state-monad-in-javascript: null

(function(root) {

  // add :: Number -> Number -> Number
  const add =
    x => y => x + y

  // pluralize :: (String, String) -> Number -> String
  const pluralize =
    (single, plural) => num =>
      `${num} ${Math.abs(num) === 1 ? single : plural}`

  root.helpers = {
    add,
    pluralize
  }
})(window)

<!DOCTYPE html>
<html>

  <head>
    <script data-require="crocks@*" data-semver="0.8.1" src="https://unpkg.com/crocks@0.8.1/dist/crocks.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

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

</html>

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

const { State } = crocks
const { Pair } = crocks
const { compose } = crocks

const { get } = State

const { add, pluralize } = helpers

// State s a
// (s -> (a, s))

// state :: State Number
const state =
  State(s => Pair(s + 10, s))

log(
  'state instance',
  state
)

log(
  'state runWith',
  state.runWith(23)
)

log(
  'state resultant (fst)',
  state.runWith(23).fst()
)

log(
  'state state (snd)',
  state.runWith(23).snd()
)

// map :: State s a ~> (a -> b) -> State s b

// getState :: () -> State s
const getState = () =>
  State(s => Pair(s, s))

log(
  'getState (snd)',
  getState().runWith(23).snd()
)

log(
  'getState (fst)',
  getState().runWith(23).snd()
)

log(
  'getState',
  getState().runWith(23)
)

log(
  'map add(10) (fst)',
  getState()
    .map(add(10))
    .runWith(23)
    .fst()
)

log(
  'map add(10) with 0 (fst)',
  getState()
    .map(add(10))
    .runWith(0)
    .fst()
)

log(
  'map add(10) with 0 (snd)',
  getState()
    .map(add(10))
    .runWith(0)
    .snd()
)

// makeAwesome :: Number -> String
const makeAwesome =
  pluralize('Awesome', 'Awesomes')

log(
  'makeAwesome with zero (snd)',
  getState()
    .map(makeAwesome)
    .runWith(0)
    .snd()
)

log(
  'makeAwesome with zero (fst)',
  getState()
    .map(makeAwesome)
    .runWith(0)
    .fst()
)

log(
  'makeAwesome with 1 (fst)',
  getState()
    .map(makeAwesome)
    .runWith(1)
    .fst()
)

log(
  'makeAwesome with 100 (fst)',
  getState()
    .map(makeAwesome)
    .runWith(100)
    .fst()
)

log(
  'map with both (fst)',
  getState()
    .map(add(10))
    .map(makeAwesome)
    .runWith(100)
    .fst()
)

// flow :: Number -> String
const flow = compose(
  makeAwesome,
  add(10)
)

log(
  'composed (fst)',
  getState()
    .map(flow)
    .runWith(100)
    .fst()
)

log(
  'composed (snd)',
  getState()
    .map(flow)
    .runWith(100)
    .snd()
)

log(
  'composed with -9 (snd)',
  getState()
    .map(flow)
    .runWith(-9)
    .snd()
)

log(
  'composed with -9 (fst)',
  getState()
    .map(flow)
    .runWith(-9)
    .fst()
)

log(
  'composed with 23 (fst)',
  getState()
    .map(flow)
    .runWith(23)
    .fst()
)

log(
  'using get (fst)',
  get()
    .map(flow)
    .runWith(23)
    .fst()
)

log(
  'using get (snd)',
  get()
    .map(flow)
    .runWith(23)
    .snd()
)

log(
  'using get (runWith)',
  get()
    .map(flow)
    .runWith(23)
)