git ssb

1
var Struct = require('../struct')
2
var send = require('../send')
3
var h = require('../html-element')
4
var computed = require('../computed')
5
var when = require('../when')
6
7
var state = Struct({
8
  text: 'Test',
9
  color: 'red',
10
  value: 0
11
})
12
13
var isBlue = computed([state.color], color => color === 'blue')
14
15
var element = h('div.cool', {
16
  classList: ['cool', state.text],
17
  style: {
18
    'background-color': state.color
19
  }
20
}, [
21
  h('div', [
22
    state.text, ' ', state.value, ' ', h('strong', 'test')
23
  ]),
24
  h('div', [
25
    when(isBlue,
26
      h('button', {
27
        'ev-click': send(state.color.set, 'red')
28
      }, 'Change color to red'),
29
      h('button', {
30
        'ev-click': send(state.color.set, 'blue')
31
      }, 'Change color to blue')
32
    )
33
34
  ])
35
])
36
37
setTimeout(function () {
38
  state.text.set('Another value')
39
}, 5000)
40
41
setInterval(function () {
42
  state.value.set(state.value() + 1)
43
}, 1000)
44
45
setInterval(function () {
46
  // bulk update state
47
  state.set({
48
    text: 'Retrieved from server (not really)',
49
    color: '#FFEECC',
50
    value: 1337
51
  })
52
}, 10000)
53
54
document.body.appendChild(element)
55