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