-
Notifications
You must be signed in to change notification settings - Fork 87
/
main.js
49 lines (41 loc) · 1.48 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
/* jshint esnext: true */
const R = require('ramda');
const Type = require('union-type');
const flyd = require('flyd');
const stream = flyd.stream;
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');
// Update
const Action = Type({Increment: [], Decrement: []});
const update = (model, action) => Action.case({
Increment: () => model + 1,
Decrement: () => model - 1,
}, action);
// View
const view = R.curry((actions$, model) =>
h('div', {style: countStyle}, [
h('button', {on: {click: [actions$, Action.Decrement()]}}, '–'),
h('div', {style: countStyle}, model),
h('button', {on: {click: [actions$, Action.Increment()]}}, '+'),
]));
const countStyle = {
fontSize: '20px',
fontFamily: 'monospace',
width: '50px',
textAlign: 'center',
};
// Streams
const actions$ = stream(); // All modifications to the state originate here
const model$ = flyd.scan(update, 0, actions$); // Contains the entire state of the application
const vnode$ = flyd.map(view(actions$), model$); // Stream of virtual nodes to render
// flyd.map(console.log.bind(console), 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$);
});