Cleanup, update readme

readme.md

@@ -11,39 +11,21 @@ Dependencies:
 * [kotlinx-html-js](https://github.com/Kotlin/kotlinx.html)
 * [komponent](https://github.com/rnentjes/komponent)
 
-Complete source:
+This is the complete source:
 
 ```kotlin
 package nl.astraeus.komp.todo
 
-import kotlinx.html.HtmlBlockTag
+import kotlinx.browser.document
-import kotlinx.html.InputType
+import kotlinx.html.*
-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 nl.astraeus.komp.HtmlBuilder
-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
 import org.w3c.dom.events.KeyboardEvent
-import kotlin.browser.document
 import kotlin.js.Date
 
 /**
@@ -63,18 +45,15 @@ 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 {
+  override fun HtmlBuilder.render() {
+    li {
       if (todo.editing) {
-      classes += "editing"
+        classes = classes + "editing"
         input(classes = "edit") {
           value = todo.title
           onKeyPressFunction = { e ->
@@ -86,15 +65,15 @@ class TodoKomponent(
         }
       } else {
         if (todo.completed) {
-        classes += "completed"
+          classes = classes + "completed"
         }
-      attributes["data-id"] = todo.dataId
         div(classes = "view") {
           input(classes = "toggle") {
             type = InputType.checkBox
             checked = todo.completed
             onClickFunction = {
               app.todoClicked(todo)
+              it.preventDefault()
             }
           }
           label(classes = "todo-content") {
@@ -112,6 +91,7 @@ class TodoKomponent(
         }
       }
     }
+  }
 
 }
 
@@ -125,7 +105,7 @@ class TodoApp : Komponent() {
     if (target is HTMLInputElement) {
       todoList.add(Todo("${Date().getTime()}", target.value))
 
-      refresh()
+      requestUpdate()
     }
   }
 
@@ -136,7 +116,7 @@ class TodoApp : Komponent() {
       todo.title = target.value
       todo.editing = false
 
-      refresh()
+      requestUpdate()
     }
 
   }
@@ -144,13 +124,13 @@ class TodoApp : Komponent() {
   fun destroyTodo(todo: Todo) {
     todoList.remove(todo)
 
-    refresh()
+    requestUpdate()
   }
 
   fun selectSelection(selection: Selection) {
     selected = selection
 
-    refresh()
+    requestUpdate()
   }
 
   fun clearCompleted() {
@@ -160,13 +140,13 @@ class TodoApp : Komponent() {
       }
     }
 
-    refresh()
+    requestUpdate()
   }
 
   fun todoClicked(todo: Todo) {
     todo.completed = !todo.completed
 
-    refresh()
+    requestUpdate()
   }
 
   fun getItemsLeft(): Int {
@@ -184,20 +164,11 @@ class TodoApp : Komponent() {
       todo.editing = todo == editTodo
     }
 
-    refresh()
+    requestUpdate()
   }
 
-  override fun refresh() {
+  override fun HtmlBuilder.render() {
-    super.refresh()
+    section(classes = "todoapp") {
-
-    val inputBox = document.getElementById("todo_input")
-
-    if (inputBox is HTMLInputElement) {
-      inputBox.focus()
-    }
-  }
-
-  override fun render(consumer: TagConsumer<HTMLElement>) = consumer.section(classes = "todoapp") {
       header(classes = "header") {
         h1 { +"todos" }
         input(classes = "new-todo") {
@@ -206,7 +177,14 @@ class TodoApp : Komponent() {
           autoFocus = true
           onKeyPressFunction = { e ->
             val target = e.target
-          if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) {
+            if (target is HTMLInputElement &&
+              e is KeyboardEvent &&
+              e.keyCode == 13 &&
+              target.value.isNotBlank()
+            ) {
+              e.preventDefault()
+              e.stopPropagation()
+
               addTodo(e)
 
               target.value = ""
@@ -222,14 +200,14 @@ class TodoApp : Komponent() {
         }
         label {
           htmlFor = "toggle-all"
-        +"Mark all as complete"
+          + "Mark all as complete"
         }
         ul(classes = "todo-list") {
           for (todo in todoList) {
             if (selected == Selection.ALL ||
               (todo.completed && selected == Selection.COMPLETED) ||
               (!todo.completed && selected == Selection.ACTIVE)) {
-            todo(this@TodoApp, todo)
+              include(TodoKomponent(this@TodoApp, todo))
             }
           }
         }
@@ -245,7 +223,7 @@ class TodoApp : Komponent() {
             li {
               a {
                 if (selection == selected) {
-                classes += "selected"
+                  classes = classes + "selected"
                 }
                 href = "#"
                 +selection.title
@@ -264,10 +242,11 @@ class TodoApp : Komponent() {
         }
       }
     }
+  }
 
 }
 
 fun main() {
-  Komponent.create(document.body!!, TodoApp(), true)
+  Komponent.create(document.body!!, TodoApp())
 }
 ```

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

@@ -231,10 +231,5 @@ class TodoApp : Komponent() {
 }
 
 fun main() {
-  Komponent.logReplaceEvent = false
-  Komponent.logRenderEvent = false
-
-  println("Create TodoApp()")
-
   Komponent.create(document.body!!, TodoApp())
 }