choo components (#639)

* add components * example: componentize header * fix choo SSR * example: componentize footer * example: fix footer * update component cache asserts * componentize todos * reorder example dir * fix example tests * fix dep check test * Add garbage collection of unused components * Apply args when calling identity * update to new component preview * update nanocomponent * fix cache err name * remove static methods from example * restore app.emit() function * public API tests * offset component cache iteration by 2 * whitelist contents of component folder (#643) * allow lru number arg * fix lint typo
2018-03-30 18:19:06 +02:00
parent 357d50871e
commit bddcfbe838
17 changed files with 411 additions and 259 deletions
@@ -0,0 +1,64 @@
+var html = require('bel')
+
+module.exports = Todo
+
+function Todo (todo, emit) {
+  var clx = classList({ completed: todo.done, editing: todo.editing })
+  return html`
+    <li id=${todo.id} class=${clx}>
+      <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
+  }
+}