implement choo v5 API (#425)
* implement choo v5 API * fix tests * 5.0.0-3 * 4kb now * bump nanomorph * 5.0.0-4 * fix missing deps stuff * 5.0.0-5 * fix travis * fixup! oops standard * chooexpose * fix state passing * fixup! update example * fixup! incorporate feedback * fixup! more docs * fixup! even more docs
This commit is contained in:
Yoshua Wuyts
@@ -0,0 +1,350 @@
|
||||
var mutate = require('xtend/mutable')
|
||||
var expose = require('choo-expose')
|
||||
var css = require('sheetify')
|
||||
var html = require('bel')
|
||||
var choo = require('../')
|
||||
|
||||
css('todomvc-common/base.css')
|
||||
css('todomvc-app-css/index.css')
|
||||
|
||||
// we export this so tests can run
|
||||
if (module.parent) {
|
||||
exports.todoStore = todoStore
|
||||
} else {
|
||||
var app = choo()
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
var persist = require('choo-persist')
|
||||
var logger = require('choo-log')
|
||||
app.use(persist())
|
||||
app.use(logger())
|
||||
}
|
||||
app.use(expose())
|
||||
app.use(todoStore)
|
||||
|
||||
app.route('/', mainView)
|
||||
app.route('#active', mainView)
|
||||
app.route('#completed', mainView)
|
||||
app.mount('body')
|
||||
}
|
||||
|
||||
function mainView (state, emit) {
|
||||
emit('log:debug', 'Rendering main view')
|
||||
return html`
|
||||
<body>
|
||||
<section class="todoapp">
|
||||
${Header(state, emit)}
|
||||
${TodoList(state, emit)}
|
||||
${Footer(state, emit)}
|
||||
</section>
|
||||
<footer class="info">
|
||||
<p>Double-click to edit a todo</p>
|
||||
<p>choo by <a href="https://yoshuawuyts.com/">Yoshua Wuyts</a></p>
|
||||
<p>Created by <a href="http://shuheikagawa.com">Shuhei Kagawa</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
`
|
||||
}
|
||||
|
||||
function todoStore (state, emitter) {
|
||||
if (!state.todos) {
|
||||
state.todos = {}
|
||||
|
||||
state.todos.active = []
|
||||
state.todos.done = []
|
||||
state.todos.all = []
|
||||
|
||||
state.todos.idCounter = 0
|
||||
}
|
||||
|
||||
emitter.on('DOMContentLoaded', function () {
|
||||
emitter.emit('log:debug', 'Loading todos model')
|
||||
|
||||
// CRUD
|
||||
emitter.on('todos:create', create)
|
||||
emitter.on('todos:update', update)
|
||||
emitter.on('todos:delete', del)
|
||||
|
||||
// Shorthand
|
||||
emitter.on('todos:edit', edit)
|
||||
emitter.on('todos:unedit', unedit)
|
||||
emitter.on('todos:toggle', toggle)
|
||||
emitter.on('todos:toggleAll', toggleAll)
|
||||
emitter.on('todos:deleteCompleted', deleteCompleted)
|
||||
})
|
||||
|
||||
function create (name) {
|
||||
var item = {
|
||||
id: state.todos.idCounter,
|
||||
editing: false,
|
||||
done: false,
|
||||
name: name
|
||||
}
|
||||
|
||||
state.todos.idCounter += 1
|
||||
state.todos.active.push(item)
|
||||
state.todos.all.push(item)
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function edit (id) {
|
||||
state.todos.all.forEach(function (todo) {
|
||||
if (todo.id === id) todo.editing = true
|
||||
})
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function unedit (id) {
|
||||
state.todos.all.forEach(function (todo) {
|
||||
if (todo.id === id) todo.editing = false
|
||||
})
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function update (newTodo) {
|
||||
var todo = state.todos.all.filter(function (todo) {
|
||||
return todo.id === newTodo.id
|
||||
})[0]
|
||||
|
||||
if (newTodo.done && todo.done === false) {
|
||||
state.todos.active.splice(state.todos.active.indexOf(todo), 1)
|
||||
state.todos.done.push(todo)
|
||||
} else if (newTodo.done === false && todo.done) {
|
||||
state.todos.done.splice(state.todos.done.indexOf(todo), 1)
|
||||
state.todos.active.push(todo)
|
||||
}
|
||||
|
||||
mutate(todo, newTodo)
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function del (id) {
|
||||
var i = null
|
||||
var todo = null
|
||||
state.todos.all.forEach(function (_todo, j) {
|
||||
if (_todo.id === id) {
|
||||
i = j
|
||||
todo = _todo
|
||||
}
|
||||
})
|
||||
state.todos.all.splice(i, 1)
|
||||
|
||||
if (todo.done) {
|
||||
var done = state.todos.done
|
||||
var doneIndex = done[todo]
|
||||
done.splice(doneIndex, 1)
|
||||
} else {
|
||||
var active = state.todos.active
|
||||
var activeIndex = active[todo]
|
||||
active.splice(activeIndex, 1)
|
||||
}
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function deleteCompleted (data) {
|
||||
var done = state.todos.done
|
||||
done.forEach(function (todo) {
|
||||
var index = state.todos.all.indexOf(todo)
|
||||
state.todos.all.splice(index, 1)
|
||||
})
|
||||
state.todos.done = []
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function toggle (id) {
|
||||
var todo = state.todos.all.filter(function (todo) {
|
||||
return todo.id === id
|
||||
})[0]
|
||||
var done = todo.done
|
||||
todo.done = !done
|
||||
var arr = done ? state.todos.done : state.todos.active
|
||||
var target = done ? state.todos.active : state.todos.done
|
||||
var index = arr.indexOf(todo)
|
||||
arr.splice(index, 1)
|
||||
target.push(todo)
|
||||
emitter.emit('render')
|
||||
}
|
||||
|
||||
function toggleAll (data) {
|
||||
var todos = state.todos.all
|
||||
var allDone = state.todos.all.length &&
|
||||
state.todos.done.length === state.todos.all.length
|
||||
|
||||
todos.forEach(function (todo) {
|
||||
todo.done = !allDone
|
||||
})
|
||||
|
||||
if (allDone) {
|
||||
state.todos.done = []
|
||||
state.todos.active = state.todos.all
|
||||
} else {
|
||||
state.todos.done = state.todos.all
|
||||
state.todos.active = []
|
||||
}
|
||||
|
||||
emitter.emit('render')
|
||||
}
|
||||
}
|
||||
|
||||
function Footer (state, emit) {
|
||||
var filter = window.location.hash.replace(/^#/, '')
|
||||
var activeCount = state.todos.active.length
|
||||
var hasDone = state.todos.done.length
|
||||
|
||||
return html`
|
||||
<footer class="footer">
|
||||
<span class="todo-count">
|
||||
<strong>${activeCount}</strong>
|
||||
item${state.todos.all === 1 ? '' : 's'} left
|
||||
</span>
|
||||
<ul class="filters">
|
||||
${filterButton('All', '', filter, emit)}
|
||||
${filterButton('Active', 'active', filter, emit)}
|
||||
${filterButton('Completed', 'completed', filter, emit)}
|
||||
</ul>
|
||||
${hasDone ? deleteCompleted(emit) : ''}
|
||||
</footer>
|
||||
`
|
||||
|
||||
function filterButton (name, filter, currentFilter, emit) {
|
||||
var filterClass = filter === currentFilter
|
||||
? 'selected'
|
||||
: ''
|
||||
|
||||
var uri = '#' + name.toLowerCase()
|
||||
if (uri === '#all') uri = '/'
|
||||
return html`
|
||||
<li>
|
||||
<a href=${uri} class=${filterClass}>
|
||||
${name}
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
function deleteCompleted (emit) {
|
||||
return html`
|
||||
<button class="clear-completed" onclick=${deleteAllCompleted}>
|
||||
Clear completed
|
||||
</button>
|
||||
`
|
||||
|
||||
function deleteAllCompleted () {
|
||||
emit('todos:deleteCompleted')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Header (todos, emit) {
|
||||
return html`
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo"
|
||||
autofocus
|
||||
placeholder="What needs to be done?"
|
||||
onkeydown=${createTodo} />
|
||||
</header>
|
||||
`
|
||||
|
||||
function createTodo (e) {
|
||||
if (e.keyCode === 13) {
|
||||
emit('todos:create', e.target.value)
|
||||
e.target.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function TodoItem (todo, emit) {
|
||||
return html`
|
||||
<li class=${classList({ completed: todo.done, editing: todo.editing })}>
|
||||
<div class="view">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked="${todo.done}"
|
||||
onchange=${toggle} />
|
||||
<label ondblclick=${edit}>${todo.name}</label>
|
||||
<button
|
||||
class="destroy"
|
||||
onclick=${destroy}
|
||||
></button>
|
||||
</div>
|
||||
<input
|
||||
class="edit"
|
||||
value=${todo.name}
|
||||
onkeydown=${handleEditKeydown}
|
||||
onblur=${update} />
|
||||
</li>
|
||||
`
|
||||
|
||||
function toggle (e) {
|
||||
emit('todos:toggle', todo.id)
|
||||
}
|
||||
|
||||
function edit (e) {
|
||||
emit('todos:edit', todo.id)
|
||||
}
|
||||
|
||||
function destroy (e) {
|
||||
emit('todos:delete', todo.id)
|
||||
}
|
||||
|
||||
function update (e) {
|
||||
emit('todos:update', {
|
||||
id: todo.id,
|
||||
editing: false,
|
||||
name: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
function handleEditKeydown (e) {
|
||||
if (e.keyCode === 13) update(e) // Enter
|
||||
else if (e.code === 27) emit('todos:unedit') // Escape
|
||||
}
|
||||
|
||||
function classList (classes) {
|
||||
var str = ''
|
||||
var keys = Object.keys(classes)
|
||||
for (var i = 0, len = keys.length; i < len; i++) {
|
||||
var key = keys[i]
|
||||
var val = classes[key]
|
||||
if (val) str += (key + ' ')
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
|
||||
function TodoList (state, emit) {
|
||||
var filter = window.location.hash.replace(/^#/, '')
|
||||
var items = filter === 'completed'
|
||||
? state.todos.done
|
||||
: filter === 'active'
|
||||
? state.todos.active
|
||||
: state.todos.all
|
||||
|
||||
var allDone = state.todos.done.length === state.todos.all.length
|
||||
|
||||
var nodes = items.map(function (todo) {
|
||||
return TodoItem(todo, emit)
|
||||
})
|
||||
|
||||
return html`
|
||||
<section class="main">
|
||||
<input
|
||||
class="toggle-all"
|
||||
type="checkbox"
|
||||
checked=${allDone}
|
||||
onchange=${toggleAll}/>
|
||||
<label for="toggle-all" style="display: none;">
|
||||
Mark all as done
|
||||
</label>
|
||||
<ul class="todo-list">
|
||||
${nodes}
|
||||
</ul>
|
||||
</section>
|
||||
`
|
||||
|
||||
function toggleAll () {
|
||||
emit('todos:toggleAll')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "choo-todomvc-example",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"deps": "dependency-check . && dependency-check . --extra --no-dev",
|
||||
"start": "bankai start --open",
|
||||
"build": "bankai build --optimize",
|
||||
"test": "standard && npm run deps && node test.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"choo-expose": "^1.0.0",
|
||||
"sheetify": "^6.0.1",
|
||||
"todomvc-app-css": "^2.0.6",
|
||||
"todomvc-common": "^1.0.3",
|
||||
"xtend": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bankai": "^5.4.0",
|
||||
"dependency-check": "^2.8.0",
|
||||
"standard": "^9.0.1"
|
||||
}
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
var EventEmitter = require('events').EventEmitter
|
||||
var spok = require('spok')
|
||||
var tape = require('tape')
|
||||
|
||||
var example = require('./')
|
||||
var todoStore = example.todoStore
|
||||
|
||||
tape('should initialize empty state', function (t) {
|
||||
var emitter = new EventEmitter()
|
||||
var state = {}
|
||||
todoStore(state, emitter)
|
||||
spok(t, state, {
|
||||
todos: {
|
||||
idCounter: 0,
|
||||
active: spok.arrayElements(0),
|
||||
done: spok.arrayElements(0),
|
||||
all: spok.arrayElements(0)
|
||||
}
|
||||
})
|
||||
t.end()
|
||||
})
|
||||
|
||||
tape('restore previous state', function (t) {
|
||||
var emitter = new EventEmitter()
|
||||
var state = {
|
||||
todos: {
|
||||
idCounter: 100,
|
||||
active: [],
|
||||
done: [],
|
||||
all: []
|
||||
}
|
||||
}
|
||||
todoStore(state, emitter)
|
||||
spok(t, state, {
|
||||
todos: {
|
||||
idCounter: 100
|
||||
}
|
||||
})
|
||||
t.end()
|
||||
})
|
||||
|
||||
tape('todos:create', function (t) {
|
||||
var emitter = new EventEmitter()
|
||||
var state = {}
|
||||
todoStore(state, emitter)
|
||||
emitter.emit('DOMContentLoaded')
|
||||
|
||||
emitter.emit('todos:create', 'same as it ever was')
|
||||
spok(t, state.todos, {
|
||||
all: spok.arrayElements(1),
|
||||
active: spok.arrayElements(1),
|
||||
done: spok.arrayElements(0)
|
||||
})
|
||||
spok(t, state.todos.all[0], {
|
||||
name: 'same as it ever was',
|
||||
editing: false,
|
||||
done: false,
|
||||
id: 0
|
||||
})
|
||||
|
||||
emitter.emit('todos:create', 'and another one down')
|
||||
spok(t, state.todos, {
|
||||
all: spok.arrayElements(2),
|
||||
active: spok.arrayElements(2),
|
||||
done: spok.arrayElements(0)
|
||||
})
|
||||
spok(t, state.todos.all[1], {
|
||||
name: 'and another one down',
|
||||
editing: false,
|
||||
done: false,
|
||||
id: 1
|
||||
})
|
||||
|
||||
t.end()
|
||||
})
|
||||
|
||||
tape('todos:update', function (t) {
|
||||
var emitter = new EventEmitter()
|
||||
var state = {}
|
||||
todoStore(state, emitter)
|
||||
emitter.emit('DOMContentLoaded')
|
||||
|
||||
emitter.emit('todos:create', 'same as it ever was')
|
||||
emitter.emit('todos:create', 'and another one down')
|
||||
|
||||
emitter.emit('todos:update', {
|
||||
id: 0,
|
||||
editing: true,
|
||||
name: 'been here all along'
|
||||
})
|
||||
spok(t, state.todos.all[0], {
|
||||
name: 'been here all along',
|
||||
editing: true,
|
||||
done: false,
|
||||
id: 0
|
||||
})
|
||||
|
||||
emitter.emit('todos:update', {
|
||||
done: true,
|
||||
id: 1
|
||||
})
|
||||
spok(t, state.todos, {
|
||||
all: spok.arrayElements(2),
|
||||
active: spok.arrayElements(1),
|
||||
done: spok.arrayElements(1)
|
||||
})
|
||||
|
||||
emitter.emit('todos:update', {
|
||||
done: false,
|
||||
id: 1
|
||||
})
|
||||
spok(t, state.todos, {
|
||||
all: spok.arrayElements(2),
|
||||
active: spok.arrayElements(2),
|
||||
done: spok.arrayElements(0)
|
||||
})
|
||||
|
||||
t.end()
|
||||
})
|
||||
|
||||
// tape('todos:delete')
|
||||
// tape('todos:edit')
|
||||
// tape('todos:unedit')
|
||||
// tape('todos:toggle')
|
||||
// tape('todos:toggleAll')
|
||||
// tape('todos:deleteCompleted')
|
||||
Reference in New Issue
Block a user