Update readme

readme.md

@@ -16,9 +16,29 @@ Complete source:
 ```kotlin
 package nl.astraeus.komp.todo
 
-import kotlinx.html.*
+import kotlinx.html.HtmlBlockTag
-import kotlinx.html.js.*
+import kotlinx.html.InputType
+import kotlinx.html.TagConsumer
+import kotlinx.html.a
+import kotlinx.html.button
+import kotlinx.html.classes
+import kotlinx.html.div
+import kotlinx.html.footer
+import kotlinx.html.h1
+import kotlinx.html.header
+import kotlinx.html.id
+import kotlinx.html.input
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onDoubleClickFunction
+import kotlinx.html.js.onKeyPressFunction
+import kotlinx.html.label
+import kotlinx.html.li
+import kotlinx.html.section
+import kotlinx.html.span
+import kotlinx.html.strong
+import kotlinx.html.ul
 import nl.astraeus.komp.Komponent
+import nl.astraeus.komp.include
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.events.Event
@@ -27,7 +47,7 @@ import kotlin.browser.document
 import kotlin.js.Date
 
 /**
- * https://github.com/tastejs/todomvc/
+ * see: https://github.com/tastejs/todomvc/
  */
 
 class Todo(
@@ -43,6 +63,58 @@ enum class Selection(val title: String) {
   COMPLETED("Completed")
 }
 
+fun HtmlBlockTag.todo(app: TodoApp, todo: Todo) {
+  this.include(TodoKomponent(app, todo))
+}
+
+class TodoKomponent(
+    val app: TodoApp,
+    val todo: Todo
+) : Komponent() {
+
+  override fun render(consumer: TagConsumer<HTMLElement>) = consumer.li {
+    if (todo.editing) {
+      classes += "editing"
+      input(classes = "edit") {
+        value = todo.title
+        onKeyPressFunction = { e ->
+          val target = e.target
+          if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) {
+            app.editTodo(e, todo)
+          }
+        }
+      }
+    } else {
+      if (todo.completed) {
+        classes += "completed"
+      }
+      attributes["data-id"] = todo.dataId
+      div(classes = "view") {
+        input(classes = "toggle") {
+          type = InputType.checkBox
+          checked = todo.completed
+          onClickFunction = {
+            app.todoClicked(todo)
+          }
+        }
+        label(classes = "todo-content") {
+          +todo.title
+
+          onDoubleClickFunction = {
+            app.setEditing(todo)
+          }
+        }
+        button(classes = "destroy") {
+          onClickFunction = {
+            app.destroyTodo(todo)
+          }
+        }
+      }
+    }
+  }
+
+}
+
 class TodoApp : Komponent() {
   val todoList: MutableList<Todo> = ArrayList()
   var selected: Selection = Selection.ALL
@@ -133,8 +205,12 @@ class TodoApp: Komponent() {
         placeholder = "What needs to be done?"
         autoFocus = true
         onKeyPressFunction = { e ->
-                    if (e is KeyboardEvent && e.keyCode == 13) {
+          val target = e.target
+          if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) {
             addTodo(e)
+
+            target.value = ""
+            target.defaultValue = ""
           }
         }
       }
@@ -145,7 +221,7 @@ class TodoApp: Komponent() {
         type = InputType.checkBox
       }
       label {
-                for_ = "toggle-all"
+        htmlFor = "toggle-all"
         +"Mark all as complete"
       }
       ul(classes = "todo-list") {
@@ -153,45 +229,7 @@ class TodoApp: Komponent() {
           if (selected == Selection.ALL ||
               (todo.completed && selected == Selection.COMPLETED) ||
               (!todo.completed && selected == Selection.ACTIVE)) {
-                        li {
+            todo(this@TodoApp, todo)
-                            if (todo.editing) {
-                                classes += "editing"
-                                input(classes = "edit") {
-                                    value = todo.title
-                                    onKeyPressFunction = { e ->
-                                        if (e is KeyboardEvent && e.keyCode == 13) {
-                                            editTodo(e, todo)
-                                        }
-                                    }
-                                }
-                            } else {
-                                if (todo.completed) {
-                                    classes += "completed"
-                                }
-                                attributes["data-id"] = todo.dataId
-                                div(classes = "view") {
-                                    input(classes = "toggle") {
-                                        type = InputType.checkBox
-                                        checked = todo.completed
-                                        onClickFunction = {
-                                            todoClicked(todo)
-                                        }
-                                    }
-                                    label(classes = "todo-content") {
-                                        +todo.title
-
-                                        onDoubleClickFunction = {
-                                            setEditing(todo)
-                                        }
-                                    }
-                                    button(classes = "destroy") {
-                                        onClickFunction = {
-                                            destroyTodo(todo)
-                                        }
-                                    }
-                                }
-                            }
-                        }
           }
         }
       }
@@ -203,10 +241,12 @@ class TodoApp: Komponent() {
         +" item left"
       }
       ul(classes = "filters") {
-                for (selection in Selection.values())
+        for (selection in Selection.values()) {
           li {
             a {
-                        if (selection == selected) { classes += "selected" }
+              if (selection == selected) {
+                classes += "selected"
+              }
               href = "#"
               +selection.title
               onClickFunction = {
@@ -215,6 +255,7 @@ class TodoApp: Komponent() {
             }
           }
         }
+      }
       button(classes = "clear-completed") {
         +"Clear completed"
         onClickFunction = {
@@ -226,7 +267,7 @@ class TodoApp: Komponent() {
 
 }
 
-fun main(args: Array<String>) {
+fun main() {
   Komponent.create(document.body!!, TodoApp(), true)
 }
 ```

src/main/kotlin/nl/astraeus/komp/todo/Todo.kt

@@ -21,7 +21,6 @@ import kotlinx.html.section
 import kotlinx.html.span
 import kotlinx.html.strong
 import kotlinx.html.ul
-import kotlinx.html.video
 import nl.astraeus.komp.Komponent
 import nl.astraeus.komp.include
 import org.w3c.dom.HTMLElement
@@ -32,7 +31,7 @@ import kotlin.browser.document
 import kotlin.js.Date
 
 /**
- * https://github.com/tastejs/todomvc/
+ * see: https://github.com/tastejs/todomvc/
  */
 
 class Todo(