artydev
Posted on August 7, 2020
Let's Mithril do it's magical 'autoredrawing'
// https://github.com/pakx/the-mithril-diaries/wiki/Model-Management-with-Meiosis
/* @jsx m */
const merge = mergerino;
const state = { count: 0 };
const update = m.stream();
const states = m.stream.scan(merge, state, update);
const actions = Actions(update);
const App = { view: () => app(states(), actions) };
m.mount(document.getElementById("app"), App);
function app(states, actions) {
const { up, down, increment } = helpers(actions);
return (
<div>
<div>{states.count}</div>
<button onclick={increment(up)}>inc</button>
<button onclick={increment(down)}>dec</button>
</div>
);
}
function helpers(actions) {
return {
up: 1,
down: -1,
increment: (direction, incr = 1) => () =>
actions.onclick(direction * incr)
};
}
function Actions(update) {
return {
onclick: onclick,
};
function onclick(incr) {
update({
count: (value) => value + incr,
});
}
}
You can test it here MithrilMeiosis
💖 💪 🙅 🚩
artydev
Posted on August 7, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.