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
-
+