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,65 @@
+var Component = require('../../../component')
+var html = require('bel')
+
+var Todo = require('./todo')
+
+module.exports = class Header extends Component {
+  constructor (name, state, emit) {
+    super(name)
+    this.state = state
+    this.emit = emit
+    this.local = this.state.components[name] = {}
+    this.setState()
+  }
+
+  setState () {
+    this.local.rawTodos = this.state.todos.clock
+    this.local.rawHref = this.state.href
+
+    this.local.allDone = this.state.todos.done.length === this.state.todos.all.length
+    this.local.filter = this.state.href.replace(/^\//, '') || ''
+    this.local.todos = this.local.filter === 'completed'
+      ? this.state.todos.done
+      : this.local.filter === 'active'
+        ? this.state.todos.active
+        : this.state.todos.all
+  }
+
+  update () {
+    if (this.local.rawTodos !== this.state.todos.clock ||
+      this.local.rawHref !== this.state.href) {
+      this.setState()
+      return true
+    } else {
+      return false
+    }
+  }
+
+  createElement () {
+    return html`<section class="main">
+      <input
+        class="toggle-all"
+        type="checkbox"
+        checked=${this.local.allDone}
+        onchange=${() => this.toggleAll()}/>
+      <label for="toggle-all" style="display: none;">
+        Mark all as done
+      </label>
+      <ul class="todo-list">
+        ${this.local.todos.map(todo => Todo(todo, this.emit))}
+      </ul>
+    </section>`
+  }
+
+  createTodo (e) {
+    var value = e.target.value
+    if (e.keyCode === 13) {
+      e.target.value = ''
+      this.emit('todos:create', value)
+    }
+  }
+
+  toggleAll () {
+    this.emit('todos:toggleAll')
+  }
+}