From 81a6ff8f588ac574086f898246285e1b94135072 Mon Sep 17 00:00:00 2001 From: rnentjes Date: Sat, 13 Feb 2021 12:05:44 +0100 Subject: [PATCH] Update kotlin version, use MPP, update komp version --- .../komp_todo_jslegacy_0_1_0_SNAPSHOT.xml | 6 + .idea/compiler.xml | 6 + .idea/gradle.xml | 7 +- .idea/hotswap_agent.xml | 6 - .idea/jarRepositories.xml | 35 +++ .idea/kotlinc.xml | 7 - .idea/misc.xml | 16 ++ .idea/modules.xml | 8 - .idea/modules/komp-todo.main.iml | 15 ++ .idea/modules/komp-todo.test.iml | 14 + build.gradle | 82 ------ build.gradle.kts | 49 ++++ gradle/wrapper/gradle-wrapper.properties | 2 +- settings.gradle | 2 - settings.gradle.kts | 11 + .../kotlin/nl/astraeus/komp/todo/Todo.kt | 229 ++++++++++++++++ {web => src/jsMain/resources}/css/base.css | 0 {web => src/jsMain/resources}/css/index.css | 0 {web => src/jsMain/resources}/index.html | 2 +- src/main/kotlin/nl/astraeus/komp/todo/Todo.kt | 255 ------------------ web/index_dev.html | 20 -- 21 files changed, 387 insertions(+), 385 deletions(-) create mode 100644 .idea/artifacts/komp_todo_jslegacy_0_1_0_SNAPSHOT.xml create mode 100644 .idea/compiler.xml delete mode 100644 .idea/hotswap_agent.xml create mode 100644 .idea/jarRepositories.xml delete mode 100644 .idea/kotlinc.xml create mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml create mode 100644 .idea/modules/komp-todo.main.iml create mode 100644 .idea/modules/komp-todo.test.iml delete mode 100644 build.gradle create mode 100644 build.gradle.kts delete mode 100644 settings.gradle create mode 100644 settings.gradle.kts create mode 100644 src/jsMain/kotlin/nl/astraeus/komp/todo/Todo.kt rename {web => src/jsMain/resources}/css/base.css (100%) rename {web => src/jsMain/resources}/css/index.css (100%) rename {web => src/jsMain/resources}/index.html (86%) delete mode 100644 src/main/kotlin/nl/astraeus/komp/todo/Todo.kt delete mode 100644 web/index_dev.html diff --git a/.idea/artifacts/komp_todo_jslegacy_0_1_0_SNAPSHOT.xml b/.idea/artifacts/komp_todo_jslegacy_0_1_0_SNAPSHOT.xml new file mode 100644 index 0000000..7da8130 --- /dev/null +++ b/.idea/artifacts/komp_todo_jslegacy_0_1_0_SNAPSHOT.xml @@ -0,0 +1,6 @@ + + + $PROJECT_DIR$/build/libs + + + \ No newline at end of file diff --git a/.idea/compiler.xml b/.idea/compiler.xml new file mode 100644 index 0000000..61a9130 --- /dev/null +++ b/.idea/compiler.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/gradle.xml b/.idea/gradle.xml index a931762..b4a665a 100644 --- a/.idea/gradle.xml +++ b/.idea/gradle.xml @@ -4,15 +4,16 @@ diff --git a/.idea/hotswap_agent.xml b/.idea/hotswap_agent.xml deleted file mode 100644 index d73a0fd..0000000 --- a/.idea/hotswap_agent.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/jarRepositories.xml b/.idea/jarRepositories.xml new file mode 100644 index 0000000..2707cef --- /dev/null +++ b/.idea/jarRepositories.xml @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml deleted file mode 100644 index 5806fb3..0000000 --- a/.idea/kotlinc.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..2fbddba --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,16 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index a7acfe8..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/modules/komp-todo.main.iml b/.idea/modules/komp-todo.main.iml new file mode 100644 index 0000000..9e05931 --- /dev/null +++ b/.idea/modules/komp-todo.main.iml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules/komp-todo.test.iml b/.idea/modules/komp-todo.test.iml new file mode 100644 index 0000000..0ddbe14 --- /dev/null +++ b/.idea/modules/komp-todo.test.iml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/build.gradle b/build.gradle deleted file mode 100644 index de2154a..0000000 --- a/build.gradle +++ /dev/null @@ -1,82 +0,0 @@ -buildscript { - ext.kotlin_version = '1.3.50' - - repositories { - jcenter() - maven { - url "http://nexus.astraeus.nl/nexus/content/groups/public" - } - maven { - url "https://plugins.gradle.org/m2/" - } - mavenCentral() - } - dependencies { - classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" - classpath "com.eriwen:gradle-js-plugin:1.12.1" - } -} - -apply plugin: "com.eriwen.gradle.js" -apply plugin: 'kotlin-platform-js' -apply plugin: 'kotlin-dce-js' - -group 'nl.astraeus' -version '0.0.1-SNAPSHOT' - -allprojects { - ext { - kotlin_version = '1.3.50' - } -} - -repositories { - maven { - url "http://nexus.astraeus.nl/nexus/content/groups/public" - } - mavenCentral() -} - -dependencies { - compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" - compile "nl.astraeus:komp:0.1.9" -} - -compileKotlin2Js { - kotlinOptions.metaInfo = true - - kotlinOptions.sourceMap = true - kotlinOptions.sourceMapEmbedSources = "always" - kotlinOptions.suppressWarnings = true - kotlinOptions.verbose = true -} - -runDceKotlinJs.doLast { - copy { - from("build/kotlin-js-min/main") - - into("web/js/generated") - } -} - -// Create new CombineJsTasks if you have multiple sets of JS files -combineJs { - dependsOn runDceKotlinJs - source = [ - "${projectDir}/web/js/generated/kotlin.js", - "${projectDir}/web/js/generated/kotlinx-html-js.js", - "${projectDir}/web/js/generated/komp.js", - "${projectDir}/web/js/generated/komp-todo.js" - ] - dest = file("${projectDir}/web/js/generated/todo.all.js") -} - -minifyJs { - dependsOn combineJs - source = "${projectDir}/web/js/generated/todo.all.js" - dest = file("${projectDir}/web/js/generated/todo.all.min.js") - closure { - warningLevel = 'QUIET' - compilerOptions.languageIn = "ECMASCRIPT5" - } -} diff --git a/build.gradle.kts b/build.gradle.kts new file mode 100644 index 0000000..8660eef --- /dev/null +++ b/build.gradle.kts @@ -0,0 +1,49 @@ + +plugins { + kotlin("multiplatform") version "1.4.30" + `maven-publish` +} + +group = "nl.astraeus" +version = "0.1.0-SNAPSHOT" + +repositories { + mavenCentral() + jcenter() + maven { + url = uri("http://nexus.astraeus.nl/nexus/content/groups/public") + } +} + +kotlin { + /* Targets configuration omitted. + * To find out how to configure the targets, please follow the link: + * https://kotlinlang.org/docs/reference/building-mpp-with-gradle.html#setting-up-targets */ + js(IR) { + binaries.executable() + browser { + //produceKotlinLibrary() + testTask { + useKarma { + useChromeHeadless() + } + } + distribution { + directory = File("$projectDir/web/") + } + } + } + + sourceSets { + val commonMain by getting { + dependencies { + implementation("nl.astraeus:komp:0.2.5-SNAPSHOT") + } + } + val jsMain by getting { + dependencies { + implementation(kotlin("stdlib-js")) + } + } + } +} diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index 311144e..d746a1c 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-4.2-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip diff --git a/settings.gradle b/settings.gradle deleted file mode 100644 index 8f176ff..0000000 --- a/settings.gradle +++ /dev/null @@ -1,2 +0,0 @@ -rootProject.name = 'komp-todo' - diff --git a/settings.gradle.kts b/settings.gradle.kts new file mode 100644 index 0000000..8dfdd69 --- /dev/null +++ b/settings.gradle.kts @@ -0,0 +1,11 @@ +pluginManagement { + repositories { + mavenCentral() + + maven { setUrl("https://plugins.gradle.org/m2/") } + } +} + +rootProject.name = "komp-todo" + +enableFeaturePreview("GRADLE_METADATA") diff --git a/src/jsMain/kotlin/nl/astraeus/komp/todo/Todo.kt b/src/jsMain/kotlin/nl/astraeus/komp/todo/Todo.kt new file mode 100644 index 0000000..422436b --- /dev/null +++ b/src/jsMain/kotlin/nl/astraeus/komp/todo/Todo.kt @@ -0,0 +1,229 @@ +package nl.astraeus.komp.todo + +import kotlinx.browser.document +import kotlinx.html.* +import kotlinx.html.js.onClickFunction +import kotlinx.html.js.onDoubleClickFunction +import kotlinx.html.js.onKeyPressFunction +import nl.astraeus.komp.HtmlBuilder +import nl.astraeus.komp.Komponent +import nl.astraeus.komp.include +import org.w3c.dom.HTMLInputElement +import org.w3c.dom.events.Event +import org.w3c.dom.events.KeyboardEvent +import kotlin.js.Date + +/** + * see: 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 TodoKomponent( + val app: TodoApp, + val todo: Todo +) : Komponent() { + + override fun HtmlBuilder.render() { + li { + if (todo.editing) { + classes += "editing" + input(classes = "edit") { + value = todo.title + onKeyPressFunction = { e -> + val target = e.target + if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) { + 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 + + fun addTodo(e: Event) { + val target = e.target + + if (target is HTMLInputElement) { + todoList.add(Todo("${Date().getTime()}", target.value)) + + requestUpdate() + } + } + + fun editTodo(e: Event, todo: Todo) { + val target = e.target + + if (target is HTMLInputElement) { + todo.title = target.value + todo.editing = false + + requestUpdate() + } + + } + + fun destroyTodo(todo: Todo) { + todoList.remove(todo) + + requestUpdate() + } + + fun selectSelection(selection: Selection) { + selected = selection + + requestUpdate() + } + + fun clearCompleted() { + for (todo in ArrayList(todoList)) { + if (todo.completed) { + todoList.remove(todo) + } + } + + requestUpdate() + } + + fun todoClicked(todo: Todo) { + todo.completed = !todo.completed + + requestUpdate() + } + + 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 + } + + requestUpdate() + } + + override fun HtmlBuilder.render() { + 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 -> + val target = e.target + if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) { + addTodo(e) + + target.value = "" + target.defaultValue = "" + } + } + } + } + + section(classes = "main") { + input(classes = "toggle-all") { + type = InputType.checkBox + } + label { + htmlFor = "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)) { + include(TodoKomponent(this@TodoApp, 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() { + Komponent.create(document.body!!, TodoApp(), true) +} diff --git a/web/css/base.css b/src/jsMain/resources/css/base.css similarity index 100% rename from web/css/base.css rename to src/jsMain/resources/css/base.css diff --git a/web/css/index.css b/src/jsMain/resources/css/index.css similarity index 100% rename from web/css/index.css rename to src/jsMain/resources/css/index.css diff --git a/web/index.html b/src/jsMain/resources/index.html similarity index 86% rename from web/index.html rename to src/jsMain/resources/index.html index b096035..364b0b9 100644 --- a/web/index.html +++ b/src/jsMain/resources/index.html @@ -12,6 +12,6 @@

Compare other javascript MVC* frameworks with TodoMVC

- + diff --git a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt deleted file mode 100644 index 730f58a..0000000 --- a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt +++ /dev/null @@ -1,255 +0,0 @@ -package nl.astraeus.komp.todo - -import kotlinx.html.HtmlBlockTag -import kotlinx.html.InputType -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 kotlinx.html.li -import kotlinx.html.section -import kotlinx.html.span -import kotlinx.html.strong -import kotlinx.html.ul -import nl.astraeus.komp.HtmlBuilder -import nl.astraeus.komp.Komponent -import nl.astraeus.komp.include -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 - -/** - * see: 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") -} - -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: HtmlBuilder) = consumer.li { - if (todo.editing) { - classes += "editing" - input(classes = "edit") { - value = todo.title - onKeyPressFunction = { e -> - val target = e.target - if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) { - 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 - - 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: HtmlBuilder) = 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 -> - val target = e.target - if (target is HTMLInputElement && e is KeyboardEvent && e.keyCode == 13 && target.value.isNotBlank()) { - addTodo(e) - - target.value = "" - target.defaultValue = "" - } - } - } - } - - section(classes = "main") { - input(classes = "toggle-all") { - type = InputType.checkBox - } - label { - htmlFor = "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)) { - todo(this@TodoApp, 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() { - Komponent.create(document.body!!, TodoApp(), true) -} diff --git a/web/index_dev.html b/web/index_dev.html deleted file mode 100644 index 1e997e2..0000000 --- a/web/index_dev.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - Komp-Todo - - - - -
-

Double-click to edit a todo

-

Compare other javascript MVC* frameworks with TodoMVC

-
- - - - - - -