diff --git a/.idea/hotswap_agent.xml b/.idea/hotswap_agent.xml
index 8a869d9..d73a0fd 100644
--- a/.idea/hotswap_agent.xml
+++ b/.idea/hotswap_agent.xml
@@ -1,6 +1,6 @@
-
+
\ No newline at end of file
diff --git a/.idea/libraries/Gradle__nl_astraeus_komp_0_0_8_SNAPSHOT.xml b/.idea/libraries/Gradle__nl_astraeus_komp_0_0_8_SNAPSHOT.xml
deleted file mode 100644
index 4134542..0000000
--- a/.idea/libraries/Gradle__nl_astraeus_komp_0_0_8_SNAPSHOT.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml b/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml
new file mode 100644
index 0000000..81f7a2b
--- /dev/null
+++ b/.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_4.xml b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_4.xml
deleted file mode 100644
index 6052e6e..0000000
--- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_4.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml
new file mode 100644
index 0000000..b085b2b
--- /dev/null
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_21.xml b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml
similarity index 52%
rename from .idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_21.xml
rename to .idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml
index 966de7d..d1d48e6 100644
--- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_21.xml
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml
@@ -1,11 +1,11 @@
-
+
-
+
-
+
\ No newline at end of file
diff --git a/build.gradle b/build.gradle
index c00b22a..8f04d26 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,5 +1,7 @@
+import com.eriwen.gradle.js.tasks.CombineJsTask
+
buildscript {
- ext.kotlin_version = '1.2.21'
+ ext.kotlin_version = '1.2.51'
repositories {
maven {
@@ -29,7 +31,7 @@ version '0.0.1-SNAPSHOT'
allprojects {
ext {
- kotlin_version = '1.2.21'
+ kotlin_version = '1.2.51'
}
}
@@ -42,7 +44,7 @@ repositories {
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
- compile "nl.astraeus:komp:0.0.8-SNAPSHOT"
+ compile "nl.astraeus:komp:0.1.1-SNAPSHOT"
}
compileKotlin2Js {
@@ -63,7 +65,7 @@ runDceKotlinJs.doLast {
}
// Create new CombineJsTasks if you have multiple sets of JS files
-task combineKotlinJs(type: com.eriwen.gradle.js.tasks.CombineJsTask) {
+task combineKotlinJs(type: CombineJsTask) {
dependsOn runDceKotlinJs
source = [
"${projectDir}/web/js/generated/kotlin.js",
diff --git a/komp-todo.iml b/komp-todo.iml
index 0c9830c..e74b399 100644
--- a/komp-todo.iml
+++ b/komp-todo.iml
@@ -23,6 +23,7 @@
+
@@ -33,30 +34,27 @@
-
-
-
-
+
-
+
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
\ No newline at end of file
diff --git a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
index 70788de..61fc7aa 100644
--- a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
+++ b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
@@ -1,31 +1,28 @@
package nl.astraeus.komp.todo
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.dom.create
import kotlinx.html.footer
import kotlinx.html.h1
import kotlinx.html.header
import kotlinx.html.id
import kotlinx.html.input
-import kotlinx.html.js.div
import kotlinx.html.js.onClickFunction
import kotlinx.html.js.onDoubleClickFunction
import kotlinx.html.js.onKeyPressFunction
-import kotlinx.html.js.section
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.DomDiffer
+import nl.astraeus.komp.KompConsumer
import nl.astraeus.komp.Komponent
-import org.w3c.dom.HTMLElement
+import nl.astraeus.komp.UpdateStrategy
+import nl.astraeus.komp.include
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.events.Event
import org.w3c.dom.events.KeyboardEvent
@@ -49,6 +46,52 @@ enum class Selection(val title: String) {
COMPLETED("Completed")
}
+class TodoKomponent(
+ val app: TodoApp,
+ val todo: Todo
+): Komponent() {
+ override fun render(consumer: KompConsumer) = consumer.li {
+ if (todo.editing) {
+ classes += "editing"
+ input(classes = "edit") {
+ value = todo.title
+ onKeyPressFunction = { e ->
+ if (e is KeyboardEvent && e.keyCode == 13) {
+ 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 = ArrayList()
var selected: Selection = Selection.ALL
@@ -131,7 +174,7 @@ class TodoApp : Komponent() {
}
}
- override fun render(consumer: TagConsumer) = consumer.section(classes = "todoapp") {
+ override fun render(consumer: KompConsumer) = consumer.section(classes = "todoapp") {
header(classes = "header") {
h1 { +"todos" }
input(classes = "new-todo") {
@@ -166,45 +209,7 @@ class TodoApp : Komponent() {
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)
- }
- }
- }
- }
- }
+ include(TodoKomponent(this@TodoApp, todo))
}
}
}
@@ -216,7 +221,7 @@ class TodoApp : Komponent() {
+" item left"
}
ul(classes = "filters") {
- for (selection in Selection.values())
+ for (selection in Selection.values()) {
li {
a {
if (selection == selected) {
@@ -229,6 +234,7 @@ class TodoApp : Komponent() {
}
}
}
+ }
}
button(classes = "clear-completed") {
+"Clear completed"
@@ -242,39 +248,12 @@ class TodoApp : Komponent() {
}
fun main(args: Array) {
+/*
+ Komponent.logReplaceEvent = true
+ Komponent.logEquals = true
+ Komponent.logRenderEvent = true
+*/
+
+ Komponent.updateStrategy = UpdateStrategy.REPLACE
Komponent.create(document.body!!, TodoApp(), true)
-
- val el1 = document.create.div {
- div {
- div {
- id = "id1"
- span {
- +"Test"
- }
- }
- }
- }
-
- val el2 = document.create.div {
- div {
- id = "id1"
- span {
- +"Test"
- }
- input {
- name = "bla"
- }
- }
- }
-
- // println("equals ${DomDiffer.match(el1, el2)}")
-
- console.log("OLD", el1)
- console.log("NEW", el2)
-
- DomDiffer.replaceDiff(el2, el1)
-
- console.log("OLD", el1)
- console.log("NEW", el2)
}
-