-
Notifications
You must be signed in to change notification settings - Fork 87
/
main.js
58 lines (48 loc) · 1.63 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* jshint esnext: true */
const R = require('ramda');
const flyd = require('flyd');
const stream = flyd.stream;
const forwardTo = require('flyd-forwardto');
const Type = require('union-type');
const patch = require('snabbdom').init([
require('snabbdom/modules/class'),
require('snabbdom/modules/props'),
require('snabbdom/modules/eventlisteners'),
require('snabbdom/modules/style'),
]);
const h = require('snabbdom/h');
const counter = require('./counter.js');
// Model
const init = (top, bottom) => ({
topCounter: counter.init(top),
bottomCounter: counter.init(bottom)
});
// Update
const Action = Type({
Reset: [],
Top: [counter.Action],
Bottom: [counter.Action],
});
const update = (model, action) =>
Action.case({
Reset: () => init(0, 0),
Top: (act) => R.evolve({topCounter: counter.update(R.__, act)}, model),
Bottom: (act) => R.evolve({bottomCounter: counter.update(R.__, act)}, model),
}, action);
// View
const view = R.curry((actions$, model) =>
h('div', [
counter.view(forwardTo(actions$, Action.Top), model.topCounter),
counter.view(forwardTo(actions$, Action.Bottom), model.bottomCounter),
h('button', {on: {click: [actions$, Action.Reset()]}}, 'RESET'),
]));
// Streams
const actions$ = flyd.stream();
const model$ = flyd.scan(update, init(0, 0), actions$);
const vnode$ = flyd.map(view(actions$), model$);
// flyd.map((model) => console.log(model), model$); // Uncomment to log state on every update
// Begin rendering when the DOM is ready
window.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('container');
flyd.scan(patch, container, vnode$);
});