rnentjes/komp-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Test komponent

Browse Source
This commit is contained in:
rnentjes
2018-11-18 18:41:51 +01:00
parent 78ea669e29
commit 575e3ae39a
9 changed files with 103 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/hotswap_agent.xml generated
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="HotSwapAgentPluginSettingsProvider"> <component name="HotSwapAgentPluginSettingsProvider">
<option name="agentPath" value="$APPLICATION_PLUGINS_DIR$/hotswap-agent-intellij-plugin/lib/agent/hotswap-agent-1.0.jar" /> <option name="agentPath" value="$APPLICATION_PLUGINS_DIR$/hotswap-agent-intellij-plugin/lib/agent/hotswap-agent-1.3.0.jar" />
</component> </component>
</project> </project>

9
.idea/libraries/Gradle__nl_astraeus_komp_0_0_8_SNAPSHOT.xml generated
View File

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

10
.idea/libraries/Gradle__nl_astraeus_komp_0_1_0_SNAPSHOT.xml generated Normal file
View File

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

11
.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_4.xml generated
View File

@@ -1,11 +0,0 @@
<component name="libraryTable">
<library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.4" type="kotlin.common">
<CLASSES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.4/dc47c809e549ff5e48be235b682e2d6eaf9b1d9e/kotlin-stdlib-common-1.1.4.jar!/" />
</CLASSES>
<JAVADOC />
<SOURCES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.4/ee299091d089dbc770eac2d3b59383917dc14cc2/kotlin-stdlib-common-1.1.4-sources.jar!/" />
</SOURCES>
</library>
</component>

11
.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_2_51.xml generated Normal file
View File

@@ -0,0 +1,11 @@
<component name="libraryTable">
<library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" type="kotlin.common">
<CLASSES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.2.51/e4a9d4b13ab19ed1e6531fce6df98e8cfa7f7301/kotlin-stdlib-common-1.2.51.jar!/" />
</CLASSES>
<JAVADOC />
<SOURCES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.2.51/e8c91083a5863d94fdc2836459e7e7a555774be9/kotlin-stdlib-common-1.2.51-sources.jar!/" />
</SOURCES>
</library>
</component>

6
.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_21.xml → .idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_2_51.xml generated
View File

@@ -1,11 +1,11 @@
<component name="libraryTable"> <component name="libraryTable">
<library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.21" type="kotlin.js"> <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" type="kotlin.js">
<CLASSES> <CLASSES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.21/ff3f8ae5d1bd662bbb89dfc7a4ca70a8d663733/kotlin-stdlib-js-1.2.21.jar!/" /> <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.51/ac00507005af8df9e3a0957f9169f47cca7cdb72/kotlin-stdlib-js-1.2.51.jar!/" />
</CLASSES> </CLASSES>
<JAVADOC /> <JAVADOC />
<SOURCES> <SOURCES>
<root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.21/16a3f8f3704502ea2fd666e8aaffb3a33a095c2d/kotlin-stdlib-js-1.2.21-sources.jar!/" /> <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.51/c00799bfcbee73a3cd1f0d78031de126a0e7c200/kotlin-stdlib-js-1.2.51-sources.jar!/" />
</SOURCES> </SOURCES>
</library> </library>
</component> </component>

10
build.gradle
View File

@@ -1,5 +1,7 @@
import com.eriwen.gradle.js.tasks.CombineJsTask
buildscript { buildscript {
ext.kotlin_version = '1.2.21' ext.kotlin_version = '1.2.51'
repositories { repositories {
maven { maven {
@@ -29,7 +31,7 @@ version '0.0.1-SNAPSHOT'
allprojects { allprojects {
ext { ext {
kotlin_version = '1.2.21' kotlin_version = '1.2.51'
} }
} }
@@ -42,7 +44,7 @@ repositories {
dependencies { dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" 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 { compileKotlin2Js {
@@ -63,7 +65,7 @@ runDceKotlinJs.doLast {
} }
// Create new CombineJsTasks if you have multiple sets of JS files // 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 dependsOn runDceKotlinJs
source = [ source = [
"${projectDir}/web/js/generated/kotlin.js", "${projectDir}/web/js/generated/kotlin.js",

26
komp-todo.iml
View File

@@ -23,6 +23,7 @@
<option name="pluginClasspaths"> <option name="pluginClasspaths">
<array /> <array />
</option> </option>
<option name="coroutinesState" value="warn" />
<option name="suppressWarnings" value="true" /> <option name="suppressWarnings" value="true" />
</compilerArguments> </compilerArguments>
</configuration> </configuration>
@@ -33,30 +34,27 @@
<output-test url="file://$MODULE_DIR$/out/test/classes" /> <output-test url="file://$MODULE_DIR$/out/test/classes" />
<exclude-output /> <exclude-output />
<content url="file://$MODULE_DIR$"> <content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" type="kotlin-source" />
<sourceFolder url="file://$MODULE_DIR$/src/test/kotlin" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/test/resources" type="java-test-resource" />
<excludeFolder url="file://$MODULE_DIR$/.gradle" /> <excludeFolder url="file://$MODULE_DIR$/.gradle" />
<excludeFolder url="file://$MODULE_DIR$/build" /> <excludeFolder url="file://$MODULE_DIR$/build" />
<excludeFolder url="file://$MODULE_DIR$/out" /> <excludeFolder url="file://$MODULE_DIR$/out" />
</content> </content>
<orderEntry type="inheritedJdk" /> <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.21" level="project" /> <orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" level="project" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: nl.astraeus:komp:0.0.8-SNAPSHOT" level="project" /> <orderEntry type="library" scope="PROVIDED" name="Gradle: nl.astraeus:komp:0.1.0-SNAPSHOT" level="project" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" level="project" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" /> <orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" /> <orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" />
<orderEntry type="library" scope="PROVIDED" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.4" level="project" /> <orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" level="project" />
<orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.21" level="project" /> <orderEntry type="library" scope="RUNTIME" name="Gradle: nl.astraeus:komp:0.1.0-SNAPSHOT" level="project" />
<orderEntry type="library" scope="RUNTIME" name="Gradle: nl.astraeus:komp:0.0.8-SNAPSHOT" level="project" /> <orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" level="project" />
<orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" /> <orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" />
<orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" /> <orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" />
<orderEntry type="library" scope="RUNTIME" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.4" level="project" /> <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" level="project" />
<orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.21" level="project" /> <orderEntry type="library" scope="TEST" name="Gradle: nl.astraeus:komp:0.1.0-SNAPSHOT" level="project" />
<orderEntry type="library" scope="TEST" name="Gradle: nl.astraeus:komp:0.0.8-SNAPSHOT" level="project" /> <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" level="project" />
<orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" /> <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" />
<orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" /> <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" />
<orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.4" level="project" />
</component> </component>
</module> </module>

141
src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
View File

@@ -1,31 +1,28 @@
package nl.astraeus.komp.todo package nl.astraeus.komp.todo
import kotlinx.html.InputType import kotlinx.html.InputType
import kotlinx.html.TagConsumer
import kotlinx.html.a import kotlinx.html.a
import kotlinx.html.button import kotlinx.html.button
import kotlinx.html.classes import kotlinx.html.classes
import kotlinx.html.div import kotlinx.html.div
import kotlinx.html.dom.create
import kotlinx.html.footer import kotlinx.html.footer
import kotlinx.html.h1 import kotlinx.html.h1
import kotlinx.html.header import kotlinx.html.header
import kotlinx.html.id import kotlinx.html.id
import kotlinx.html.input import kotlinx.html.input
import kotlinx.html.js.div
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import kotlinx.html.js.onDoubleClickFunction import kotlinx.html.js.onDoubleClickFunction
import kotlinx.html.js.onKeyPressFunction import kotlinx.html.js.onKeyPressFunction
import kotlinx.html.js.section
import kotlinx.html.label import kotlinx.html.label
import kotlinx.html.li import kotlinx.html.li
import kotlinx.html.section import kotlinx.html.section
import kotlinx.html.span import kotlinx.html.span
import kotlinx.html.strong import kotlinx.html.strong
import kotlinx.html.ul import kotlinx.html.ul
import nl.astraeus.komp.DomDiffer import nl.astraeus.komp.KompConsumer
import nl.astraeus.komp.Komponent 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.HTMLInputElement
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
import org.w3c.dom.events.KeyboardEvent import org.w3c.dom.events.KeyboardEvent
@@ -49,6 +46,52 @@ enum class Selection(val title: String) {
COMPLETED("Completed") 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() { class TodoApp : Komponent() {
val todoList: MutableList<Todo> = ArrayList() val todoList: MutableList<Todo> = ArrayList()
var selected: Selection = Selection.ALL var selected: Selection = Selection.ALL
@@ -131,7 +174,7 @@ class TodoApp : Komponent() {
} }
} }
override fun render(consumer: TagConsumer<HTMLElement>) = consumer.section(classes = "todoapp") { override fun render(consumer: KompConsumer) = consumer.section(classes = "todoapp") {
header(classes = "header") { header(classes = "header") {
h1 { +"todos" } h1 { +"todos" }
input(classes = "new-todo") { input(classes = "new-todo") {
@@ -166,45 +209,7 @@ class TodoApp : Komponent() {
if (selected == Selection.ALL || if (selected == Selection.ALL ||
(todo.completed && selected == Selection.COMPLETED) || (todo.completed && selected == Selection.COMPLETED) ||
(!todo.completed && selected == Selection.ACTIVE)) { (!todo.completed && selected == Selection.ACTIVE)) {
li { include(TodoKomponent(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)
}
}
}
}
}
} }
} }
} }
@@ -216,7 +221,7 @@ class TodoApp : Komponent() {
+" item left" +" item left"
} }
ul(classes = "filters") { ul(classes = "filters") {
for (selection in Selection.values()) for (selection in Selection.values()) {
li { li {
a { a {
if (selection == selected) { if (selection == selected) {
@@ -229,6 +234,7 @@ class TodoApp : Komponent() {
} }
} }
} }
}
} }
button(classes = "clear-completed") { button(classes = "clear-completed") {
+"Clear completed" +"Clear completed"
@@ -242,39 +248,12 @@ class TodoApp : Komponent() {
} }
fun main(args: Array<String>) { fun main(args: Array<String>) {
/*
Komponent.logReplaceEvent = true
Komponent.logEquals = true
Komponent.logRenderEvent = true
*/
Komponent.updateStrategy = UpdateStrategy.REPLACE
Komponent.create(document.body!!, TodoApp(), true) 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)
} }