Add readme, update dependencies

.idea/libraries/Gradle__nl_astraeus_komp_0_0_4_SNAPSHOT.xml

@@ -1,9 +0,0 @@
-<component name="libraryTable">
-  <library name="Gradle: nl.astraeus:komp:0.0.4-SNAPSHOT">
-    <CLASSES>
-      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/nl.astraeus/komp/0.0.4-SNAPSHOT/b88123c896040e776bd78687c4f6f9b531c65535/komp-0.0.4-SNAPSHOT.jar!/" />
-    </CLASSES>
-    <JAVADOC />
-    <SOURCES />
-  </library>
-</component>

.idea/libraries/Gradle__nl_astraeus_komp_0_0_5_SNAPSHOT.xml

@@ -0,0 +1,9 @@
+<component name="libraryTable">
+  <library name="Gradle: nl.astraeus:komp:0.0.5-SNAPSHOT" type="kotlin.js">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/nl.astraeus/komp/0.0.5-SNAPSHOT/f8a9999971b427dd21fb9bf55333d9b39a905b6d/komp-0.0.5-SNAPSHOT.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>

.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_0.xml

@@ -1,5 +1,5 @@
 <component name="libraryTable">
-  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.0">
+  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.0" type="kotlin.common">
     <CLASSES>
       <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.0/3acbcd23b3d8e85d4429146690ac072bb526c1ac/kotlin-stdlib-common-1.1.0.jar!/" />
     </CLASSES>

.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_1_4.xml

@@ -1,11 +1,11 @@
 <component name="libraryTable">
-  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4-eap-11">
+  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4" type="kotlin.js">
     <CLASSES>
-      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.4-eap-11/fce562fb9acf253e2a7f6118f9545919e450d03e/kotlin-stdlib-js-1.1.4-eap-11.jar!/" />
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.4/55f39a77bc0893576d48e1cc4065e41d6feb9233/kotlin-stdlib-js-1.1.4.jar!/" />
     </CLASSES>
     <JAVADOC />
     <SOURCES>
-      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.4-eap-11/fbbb8562bff1e98fc3c5e52185e0bc98c3fd5648/kotlin-stdlib-js-1.1.4-eap-11-sources.jar!/" />
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.4/cac83db2042ebed585ce6cf418079aea2a14ade0/kotlin-stdlib-js-1.1.4-sources.jar!/" />
     </SOURCES>
   </library>
 </component>

.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_2.xml

@@ -1,5 +1,5 @@
 <component name="libraryTable">
-  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.2">
+  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.2" type="kotlin.common">
     <CLASSES>
       <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.2/3329a310cedec85a9bf175c9da8bb0dadedaba21/kotlinx-html-common-0.6.2.jar!/" />
     </CLASSES>

.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_2.xml

@@ -1,5 +1,5 @@
 <component name="libraryTable">
-  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.2">
+  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.2" type="kotlin.js">
     <CLASSES>
       <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.2/eba3a3fb7eb7ec26f4c4aece64b210d9e202d0df/kotlinx-html-js-0.6.2.jar!/" />
     </CLASSES>

.idea/modules/komp-todo_main.iml

@@ -10,6 +10,7 @@
           <option name="outputFile" value="$MODULE_DIR$/../../web/js/kotlin/komp-todo.js" />
           <option name="noStdlib" value="true" />
           <option name="sourceMap" value="true" />
+          <option name="sourceMapEmbedSources" value="inlining" />
           <option name="metaInfo" value="true" />
           <option name="target" value="v5" />
           <option name="main" value="call" />
@@ -21,11 +22,7 @@
           <option name="pluginClasspaths">
             <array />
           </option>
-          <option name="freeArgs">
+          <option name="verbose" value="true" />
-            <list>
-              <option value="inlining" />
-            </list>
-          </option>
           <option name="suppressWarnings" value="true" />
           <option name="coroutinesWarn" value="true" />
         </compilerArguments>
@@ -42,8 +39,8 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4-eap-11" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4" level="project" />
-    <orderEntry type="library" name="Gradle: nl.astraeus:komp:0.0.4-SNAPSHOT" level="project" />
+    <orderEntry type="library" name="Gradle: nl.astraeus:komp:0.0.5-SNAPSHOT" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.2" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.2" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.0" level="project" />

.idea/modules/komp-todo_test.iml

@@ -7,6 +7,7 @@
         <compilerArguments>
           <option name="outputFile" value="$MODULE_DIR$/../../build/classes/test/komp-todo_test.js" />
           <option name="noStdlib" value="true" />
+          <option name="sourceMapEmbedSources" value="inlining" />
           <option name="metaInfo" value="true" />
           <option name="target" value="v5" />
           <option name="main" value="call" />
@@ -18,11 +19,6 @@
           <option name="pluginClasspaths">
             <array />
           </option>
-          <option name="freeArgs">
-            <list>
-              <option value="inlining" />
-            </list>
-          </option>
           <option name="coroutinesWarn" value="true" />
         </compilerArguments>
       </configuration>
@@ -39,8 +35,8 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="module" module-name="komp-todo_main" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4-eap-11" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.4" level="project" />
-    <orderEntry type="library" name="Gradle: nl.astraeus:komp:0.0.4-SNAPSHOT" level="project" />
+    <orderEntry type="library" name="Gradle: nl.astraeus:komp:0.0.5-SNAPSHOT" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.2" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.2" level="project" />
     <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.0" level="project" />

build.gradle

@@ -2,7 +2,7 @@ group 'nl.astraeus'
 version '0.0.1-SNAPSHOT'
 
 buildscript {
-    ext.kotlin_version = '1.1.4-eap-11'
+    ext.kotlin_version = '1.1.4'
 
     repositories {
         maven {
@@ -21,7 +21,7 @@ buildscript {
 
 allprojects {
     ext {
-        kotlin_version = '1.1.4-eap-11'
+        kotlin_version = '1.1.4'
     }
 }
 
@@ -37,7 +37,7 @@ repositories {
 
 dependencies {
     compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
-    compile "nl.astraeus:komp:0.0.4-SNAPSHOT"
+    compile "nl.astraeus:komp:0.0.5-SNAPSHOT"
 }
 
 compileKotlin2Js {

readme.md

@@ -1 +1,230 @@
-https://github.com/tastejs/todomvc/
+An example on how to build a single page app with Kotlin (javascript) using static html builders.
+
+Runing example: [komp-todo](http://todo.astraeus.nl/)
+
+Compare it with other js frameworks: [https://github.com/tastejs/todomvc/](https://github.com/tastejs/todomvc/)
+
+Dependencies:
+
+* [kotlinx-html-js](https://github.com/Kotlin/kotlinx.html)
+* [komponent](https://github.com/rnentjes/komponent)
+
+Complete source:
+
+```kotlin
+package nl.astraeus.komp.todo
+
+import kotlinx.html.*
+import kotlinx.html.js.*
+import nl.astraeus.komp.Komponent
+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
+
+/**
+ * https://github.com/tastejs/todomvc/
+ */
+
+class Todo(
+  val dataId: String,
+  var title: String,
+  var completed: Boolean = false,
+  var editing: Boolean = false
+)
+
+enum class Selection(val title: String) {
+    ALL("All"),
+    ACTIVE("Active"),
+    COMPLETED("Completed")
+}
+
+class TodoApp: Komponent() {
+    val todoList: MutableList<Todo> = ArrayList()
+    var selected: Selection = Selection.ALL
+
+    fun addTodo(e: Event) {
+        val target = e.target
+
+        if (target is HTMLInputElement) {
+            todoList.add(Todo("${Date().getTime()}", target.value))
+
+            refresh()
+        }
+    }
+
+    fun editTodo(e: Event, todo: Todo) {
+        val target = e.target
+
+        if (target is HTMLInputElement) {
+            todo.title = target.value
+            todo.editing = false
+
+            refresh()
+        }
+
+    }
+
+    fun destroyTodo(todo: Todo) {
+        todoList.remove(todo)
+
+        refresh()
+    }
+
+    fun selectSelection(selection: Selection) {
+        selected = selection
+
+        refresh()
+    }
+
+    fun clearCompleted() {
+        for (todo in ArrayList(todoList)) {
+            if (todo.completed) {
+                todoList.remove(todo)
+            }
+        }
+
+        refresh()
+    }
+
+    fun todoClicked(todo: Todo) {
+        todo.completed = !todo.completed
+
+        refresh()
+    }
+
+    fun getItemsLeft(): Int {
+        var result = 0
+        for (todo in todoList) {
+            if (!todo.completed) {
+                result++
+            }
+        }
+        return result
+    }
+
+    fun setEditing(editTodo: Todo) {
+        for (todo in todoList) {
+            todo.editing = todo == editTodo
+        }
+
+        refresh()
+    }
+
+    override fun refresh() {
+        super.refresh()
+
+        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") {
+                id = "todo_input"
+                placeholder = "What needs to be done?"
+                autoFocus = true
+                onKeyPressFunction = { e ->
+                    if (e is KeyboardEvent && e.keyCode == 13) {
+                        addTodo(e)
+                    }
+                }
+            }
+        }
+
+        section(classes = "main") {
+            input(classes = "toggle-all") {
+                type = InputType.checkBox
+            }
+            label {
+                for_ = "toggle-all"
+                + "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)) {
+                        li {
+                            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)
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        footer(classes = "footer") {
+            span(classes = "todo-count") {
+                strong { + "${getItemsLeft()}" }
+                + " item left"
+            }
+            ul(classes = "filters") {
+                for (selection in Selection.values())
+                li {
+                    a {
+                        if (selection == selected) { classes += "selected" }
+                        href = "#"
+                        + selection.title
+                        onClickFunction = {
+                            selectSelection(selection)
+                        }
+                    }
+                }
+            }
+            button(classes = "clear-completed") {
+                + "Clear completed"
+                onClickFunction = {
+                    clearCompleted()
+                }
+            }
+        }
+    }
+
+}
+
+fun main(args: Array<String>) {
+    Komponent.create(document.body!!, TodoApp(), true)
+}
+```

web/index.html

@@ -14,4 +14,4 @@
 
   <script src="js/generated/todo.all.min.js" ></script>
 </body>
-</html>
+</html>