Time Travelling with Meiosis using JQuery

Meiosis is a simple pattern which helps at synchronizing the state and the view of an application.
It is completely agnostic concerning the tool you use to render the view, here I use JQuery.

The example below shows how you can time travel between the states and render the view accordingly.

const state = {
  counter: 0,
  random: Math.random(),
  lenhistory : 0
}

let historyStates = []

const createView = (states) => `
  <h3>Time travelling with Meiosis</h3>
  Counter value  : <h3 style="display:inline">${states.counter}</h3>  
  <br />
  Random value : <h3 style="display:inline">${states.random}</h3>  
  <br /><br />
  <button onclick="actions.onclick()">incr</button>
  <br ><br />
  <input type="range" min="0" oninput="applyPatch(this.value)" max="${states.lenhistory-1}" value="${states.lenhistory}" step="1">       
`

const createHistory = (states) => `
  <h3>Time travel</h3>
  Counter value : <h3 style="display:inline">${states.counter}</h3>  
  <br />
  Random value : <h3 style="display:inline">${states.random}</h3>    
`
const merge = mergerino
const update = m.stream()
const states = m.stream.scan(merge, state, update) 
const actions = createActions(update)
const view = () => createView(states())

states.map(s => $("#app").html(view())) 

function applyPatch(num) {
  $("#history").html(createHistory(historyStates[num]))
}

function createActions (update) {
  return {
    onclick: onclick
  }
  function onclick () {
   historyStates.push(states())
    update({
      counter: (c) => c + 1,
      lenhistory: (h) => h + 1,
      random: () => Math.random()
    })
  }
}

You can test it here : TimeeTravel