Commit c01dae98743153d400531ac256fb74b5ca35138e
add when transform
Matt McKegg committed on 7/8/2016, 3:46:32 AMParent: c2921b35648957f8ee09a7df19d9df07911c9160
Files changed
| README.md | changed |
| test/dom.js | changed |
| when.js | added |
| README.md | ||
|---|---|---|
| @@ -15,18 +15,22 @@ | ||
| 15 | 15 … | |
| 16 | 16 … | ## Use |
| 17 | 17 … | |
| 18 | 18 … | ```js |
| 19 … | +var h = require('@mmckegg/mutant/html-element') | |
| 19 | 20 … | var Struct = require('@mmckegg/mutant/struct') |
| 20 | 21 … | var send = require('@mmckegg/mutant/send') |
| 21 | -var h = require('@mmckegg/mutant/html-element') | |
| 22 … | +var computed = require('@mmckegg/mutant/computed') | |
| 23 … | +var when = require('@mmckegg/mutant/when') | |
| 22 | 24 … | |
| 23 | 25 … | var state = Struct({ |
| 24 | 26 … | text: 'Test', |
| 25 | 27 … | color: 'red', |
| 26 | 28 … | value: 0 |
| 27 | 29 … | }) |
| 28 | 30 … | |
| 31 … | +var isBlue = computed([state.color], color => color === 'blue') | |
| 32 … | + | |
| 29 | 33 … | var element = h('div.cool', { |
| 30 | 34 … | classList: ['cool', state.text], |
| 31 | 35 … | style: { |
| 32 | 36 … | 'background-color': state.color |
| @@ -35,11 +39,17 @@ | ||
| 35 | 39 … | h('div', [ |
| 36 | 40 … | state.text, ' ', state.value, ' ', h('strong', 'test') |
| 37 | 41 … | ]), |
| 38 | 42 … | h('div', [ |
| 39 | - h('button', { | |
| 40 | - 'ev-click': send(state.color.set, 'blue') | |
| 41 | - }, 'Change color') | |
| 43 … | + when(isBlue, | |
| 44 … | + h('button', { | |
| 45 … | + 'ev-click': send(state.color.set, 'red') | |
| 46 … | + }, 'Change color to red'), | |
| 47 … | + h('button', { | |
| 48 … | + 'ev-click': send(state.color.set, 'blue') | |
| 49 … | + }, 'Change color to blue') | |
| 50 … | + ) | |
| 51 … | + | |
| 42 | 52 … | ]) |
| 43 | 53 … | ]) |
| 44 | 54 … | |
| 45 | 55 … | setTimeout(function () { |
| test/dom.js | |||
|---|---|---|---|
| @@ -1,14 +1,18 @@ | |||
| 1 | 1 … | var Struct = require('../struct') | |
| 2 | 2 … | var send = require('../send') | |
| 3 | 3 … | var h = require('../html-element') | |
| 4 … | +var computed = require('../computed') | ||
| 5 … | +var when = require('../when') | ||
| 4 | 6 … | ||
| 5 | 7 … | var state = Struct({ | |
| 6 | 8 … | text: 'Test', | |
| 7 | 9 … | color: 'red', | |
| 8 | 10 … | value: 0 | |
| 9 | 11 … | }) | |
| 10 | 12 … | ||
| 13 … | +var isBlue = computed([state.color], color => color === 'blue') | ||
| 14 … | + | ||
| 11 | 15 … | var element = h('div.cool', { | |
| 12 | 16 … | classList: ['cool', state.text], | |
| 13 | 17 … | style: { | |
| 14 | 18 … | 'background-color': state.color | |
| @@ -17,11 +21,17 @@ | |||
| 17 | 21 … | h('div', [ | |
| 18 | 22 … | state.text, ' ', state.value, ' ', h('strong', 'test') | |
| 19 | 23 … | ]), | |
| 20 | 24 … | h('div', [ | |
| 21 | - h('button', { | ||
| 22 | - 'ev-click': send(state.color.set, 'blue') | ||
| 23 | - }, 'Change color') | ||
| 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 … | + | ||
| 24 | 34 … | ]) | |
| 25 | 35 … | ]) | |
| 26 | 36 … | ||
| 27 | 37 … | setTimeout(function () { | |
Built with git-ssb-web