git @ Cat's Eye Technologies DAM / master demo / storeon.html
master

Tree @master (Download .tar.gz)

storeon.html @master — raw · history · blame 

 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
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>DAM + Storeon demo</title>
</head>
<body>

<h1>DAM + Storeon demo</h1>

<p>DAM doesn't come with any state management capabilities, but if you're looking
for a state management library that's as obscenely small as DAM (and,
like DAM, written in ES5 Javascript -- no transpiling necessary), have you considered
<a href="https://evilmartians.com/chronicles/storeon-redux-in-173-bytes">Storeon</a>?</p>

<div id="installation"></div>

<script src="../dist/dam-plus-widgets-0.2.js"></script>

<script>var module = {};</script>
<script src="https://unpkg.com/storeon@0.8.2/index.js"></script>
<script>var createStore = module.exports;</script>

<script>
  function initCounter(store) {
    store.on('@init', function() { return {count: 0}; });
    store.on('inc', function(state) { return {count: state.count + 1}; });
    store.on('dec', function(state) { return {count: state.count - 1}; });
  }

  var store = createStore([initCounter]);

  var div=DAM.maker('div'), span=DAM.maker('span'), button=DAM.maker('button');
  var statusBar = span();
  function updateStatusBar(state) {
    statusBar.textContent = "Count is " + state.count + ".";
  }
  store.on('@changed', updateStatusBar);
  updateStatusBar(store.get());

  var d = div(
    div(
      button('Increment', { onclick: function(e) { store.dispatch('inc'); } }),
      button('Decrement', { onclick: function(e) { store.dispatch('dec'); } })
    ),
    statusBar
  );
  document.getElementById('installation').appendChild(d);
</script>

</body>