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"?>
<project version="4">
<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>
</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">
<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>
<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>
<JAVADOC />
<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>
</library>
</component>

10
build.gradle
View File

@@ -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",

26
komp-todo.iml
View File

@@ -23,6 +23,7 @@
<option name="pluginClasspaths">
<array />
</option>
<option name="coroutinesState" value="warn" />
<option name="suppressWarnings" value="true" />
</compilerArguments>
</configuration>
@@ -33,30 +34,27 @@
<output-test url="file://$MODULE_DIR$/out/test/classes" />
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" isTestSource="false" />
<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" />
<sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" type="kotlin-source" />
<excludeFolder url="file://$MODULE_DIR$/.gradle" />
<excludeFolder url="file://$MODULE_DIR$/build" />
<excludeFolder url="file://$MODULE_DIR$/out" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
<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: nl.astraeus:komp:0.0.8-SNAPSHOT" 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.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-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.21" 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-js:1.2.51" 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: 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-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.21" 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-js:1.2.51" 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: 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-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>
</module>

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

@@ -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<Todo> = ArrayList()
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") {
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<String>) {
/*
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)
}