Time Travelling with Meiosis using JQuery
Published: 2020-08-26 06:31:10

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.

```js
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](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ATAOgBwEYA0IAxgPYB2AzsQskVbAIYAO58UIBAZhAucgNqhS9MIiQgMACwAuYWO1qkp8RTQA8UCADcABNAC8AHRBNGRgHwHS27ZdUB6DZoulVEgE7a7Zm6VuPdUIYgEhDkUsRuAJ7mlta2Dlpm8iwIhFIQZLxiAMxIAOwgAL54gsKi4gBWvAQkispSNLVh2mH0Stp62sCx2iQArnVuSNoADHg9bvSkUMRgwwCybRIYk9OzABQAlONW2gikIWERkdrDI5aFlpYIUtqH4VEAylJt8OQd2nwAurGWTbeENzwV4ANQg8AA7h91q0lORNh1vAADHqubJmAAqEBE2ikk008FgsAgpAA5toIRApBJtPN4BlyKF7BJ0T0AMLEAZKDyaeiwPrwazDNEtKSRBBBDTkRgMSJIEnE0jwcwAEmAsLeGH6g0KzPRcV2qgARh4vD0AEpTGZgbS8-mC4Us0Xi+CS0Iy+hyhUk5UgMxqjXkFZW2a6uws7w+azG01mGOeZzRo19KThKxkQjEwgAayC9DSGQoGAzWezW3MJMB9mTqbIie08bjJoTqJJjBTuMijFdRlWpN92kgpCC5xA2jIbZTecYMsiAAU2oQJOtqaEMHaBZsjIP6AAPIIBl5wjD7e7HAC0OEuY43PZAh9eQdPoQekWvovgjCCOHM1j-BpRXxSH+XogVeAAJF9jmhQMET0ZFUQjLEcTxegCVgPV6w5Ll4B5PkBVOBsnTCF03WlWV5VIRVfX9dUj01bVuTDCMDSTWMLRDG1NHtQiRRIiUjClD0vSon1VTox9gzWMBmP1P9LEAq5gMyW4RDcfsPjU-s3BJYg-hU7Q+kYKBXk0jAwjAsBy2UihbkDMyLOBMBzMIKZ1i0+A8FFV4vKMkylARfTbO0fN0kyD5AWBJQAEEC0ydY-NeLcbOaTRwShTotkRUCovgMFIRhejyC2ZLLEDDAwCYGFspVdYjAAYhMIxNkkGRYHWNKCs2bqfEsDgBjiqwTFgedF2XUg+jABFul2WqGrPKJmta2R1kiiCoKidYFsiZ5Hz4CawC+bqLiU-rgLCqw1piwb3gS4ykq6CZ4CkPo3CsGb-xLCAc2GL6cx6S5djOwbx2A0ttCyj7rG23bj3bchl0DEqemsRKlHWKH-0Y3DhlWuDvEIbQAGptHwFG-2fI4olxiR8buYnSZ2f9rFWa1cbpxZqSk61rP-QpkusQHAaU3qgPkEgwEYbhcJoI16CNQlkkJeAbpoEYkBGc8AFY8g1ooShAIQRBoLVyGqBQlBUMQii+AhFWzLIBENsoaEgakdLkAhXrkMRpCkZgkDsOwBkYbNSS1WY7Dd9xuAAAUwEYMAAFijqkY9gCqSQwKp5DFbsaHIQEIEYBpilKY2xGjj3z0c4R5G9mg-YDoOQ7DiOwFT93uBrvEnPjjBE5GOxa+cnOCDz8pC50kv9fL8oPJ00hiHrtwfeCVNm+D0hQ-DiWo9w7TdNjxOk4HhIwn39TcN0jA3i1zPSGz82J4LouZ7L52K5ACoAEcBSiFea8m7kEDlvHe7c7C-3-pEWO2QMD3xwOfKQkC-64UiE-XOXZJ5v1LrbT+5Q6QMlCAAKVQQAwoQA)