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
Top comments (0)