hyperviews
Version:
View template language based targeting hyperscript
69 lines (65 loc) • 1.46 kB
HTML
<html>
<body>
<script src="https://unpkg.com/hyperapp@^1"></script>
<script src="view.js"></script>
<script>
const { h, app } = hyperapp
const state = {
input: '',
todos: [{
id: 1,
text: 'Buy milk'
}, {
id: 2,
text: 'Buy coffee'
}, {
id: 3,
text: 'Buy sugar',
done: true
}]
}
const actions = {
add: e => state => {
e.preventDefault()
return {
input: '',
todos: state.todos.concat({
id: Date.now(),
text: state.input
})
}
},
updateInput: e => state => ({
input: e.target.value.trim()
}),
updateText: todo => state => ({
todos: state.todos.map(item => {
if (item.id === todo.id) {
item.text = todo.text
}
return item
})
}),
toggleDone: id => state => ({
todos: state.todos.map(item => {
if (item.id === id) {
item.done = !item.done
}
return item
})
}),
clearCompleted: e => state => ({
todos: state.todos.filter(t => !t.done)
}),
toggleAll: e => state => ({
todos: state.todos.map(item => {
item.done = e.target.checked
return item
})
})
}
app(state, actions, view, document.body)
</script>
</body>
</html>