Kotlinx JSON serialization

3 files changed, 31 insertions, 22 deletions

diff --git a/examples/showcase/src/main/kotlin/com/example/DataTab.kt b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
index 8a38e001..ed690340 100644
--- a/examples/showcase/src/main/kotlin/com/example/DataTab.kt
+++ b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
@@ -1,7 +1,7 @@
 package com.example
 
 import com.lightningkite.kotlin.observable.list.observableListOf
-import pl.treksoft.kvision.data.DataComponent
+import pl.treksoft.kvision.data.BaseDataComponent
 import pl.treksoft.kvision.data.DataContainer
 import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
 import pl.treksoft.kvision.form.check.CheckBox
@@ -20,7 +20,7 @@ class DataTab : SimplePanel() {
 
         val panel = VPanel(spacing = 5)
 
-        class DataModel(checked: Boolean, text: String) : DataComponent() {
+        class DataModel(checked: Boolean, text: String) : BaseDataComponent() {
             var checked: Boolean by obs(checked)
             var text: String by obs(text)
         }
diff --git a/examples/todomvc/build.gradle b/examples/todomvc/build.gradle
index 3087c146..f8e959d3 100644
--- a/examples/todomvc/build.gradle
+++ b/examples/todomvc/build.gradle
@@ -1,5 +1,6 @@
 buildscript {
     ext.kotlin_version = '1.2.21'
+    ext.serialization_version = '0.4'
     ext.production = (findProperty('prod') ?: 'false') == 'true'
     ext.npmdeps = new URL("file:///home/rjaros/git/kvision/npm.dependencies").getText()
 
@@ -7,23 +8,27 @@ buildscript {
         jcenter()
         maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
         maven { url "https://plugins.gradle.org/m2/" }
+        maven { url "https://kotlin.bintray.com/kotlinx" }
     }
 
     dependencies {
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
         classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.26"
         classpath "gradle.plugin.io.gitlab.arturbosch.detekt:detekt-gradle-plugin:1.0.0.RC6-2"
+        classpath "org.jetbrains.kotlinx:kotlinx-gradle-serialization-plugin:$serialization_version"
     }
 }
 
 apply plugin: 'kotlin2js'
+apply plugin: 'kotlinx-serialization'
 apply plugin: 'org.jetbrains.kotlin.frontend'
 apply plugin: "io.gitlab.arturbosch.detekt"
 
 repositories {
     jcenter()
-    maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
-    maven { url = 'https://dl.bintray.com/rjaros/kotlin' }
+    maven { url 'https://kotlin.bintray.com/kotlinx' }
+    maven { url 'https://dl.bintray.com/gbaldeck/kotlin' }
+    maven { url 'https://dl.bintray.com/rjaros/kotlin' }
     maven {
 	url "file:///home/rjaros/kotlin/mvn/"
     }
@@ -31,6 +36,7 @@ repositories {
 
 dependencies {
     compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
+    compile "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:$serialization_version"
     compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" // for now only compile configuration is supported
     compile "pl.treksoft:kvision:0.0.1"
 }
diff --git a/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt b/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt
index 76d90716..bbed337f 100644
--- a/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt
+++ b/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt
@@ -1,11 +1,14 @@
 package com.example
 
 import com.lightningkite.kotlin.observable.list.observableListOf
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.json.JSON
+import kotlinx.serialization.list
 import org.w3c.dom.get
 import org.w3c.dom.set
 import pl.treksoft.kvision.ApplicationBase
 import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.data.DataComponent
+import pl.treksoft.kvision.data.BaseDataComponent
 import pl.treksoft.kvision.data.DataContainer
 import pl.treksoft.kvision.form.FieldLabel
 import pl.treksoft.kvision.form.check.CHECKINPUTTYPE
@@ -23,13 +26,18 @@ import kotlin.browser.localStorage
 const val ENTER_KEY = 13
 const val ESCAPE_KEY = 27
 
-class Todo(completed: Boolean, title: String, hidden: Boolean) : DataComponent() {
-    var completed: Boolean by obs(completed)
-    var title: String by obs(title)
+@Serializable
+open class BaseTodo(open var completed: Boolean, open var title: String) : BaseDataComponent()
+
+class Todo(completed: Boolean, title: String, hidden: Boolean) : BaseTodo(completed, title) {
+    constructor(base: BaseTodo) : this(base.completed, base.title, false)
+
+    override var completed: Boolean by obs(completed)
+    override var title: String by obs(title)
     var hidden: Boolean by obs(hidden)
 }
 
-enum class LISTMODE {
+enum class TODOMODE {
     ALL,
     ACTIVE,
     COMPLETED
@@ -57,7 +65,7 @@ class Todomvc : ApplicationBase() {
     private val itemsLeftTag = Tag(TAG.SPAN, " items left", classes = setOf("todo-count")).apply {
         add(countTag)
     }
-    private var mode: LISTMODE = LISTMODE.ALL
+    private var mode: TODOMODE = TODOMODE.ALL
 
     private val header = genHeader()
     private val main = genMain()
@@ -80,17 +88,12 @@ class Todomvc : ApplicationBase() {
 
     private fun loadModel() {
         localStorage.get("todos-kvision")?.let {
-            JSON.parse<Array<dynamic>>(it).map { Todo(it.completed, it.title, false) }.forEach {
-                model.add(it)
-            }
+            JSON.parse(BaseTodo.serializer().list, it).map { model.add(Todo(it)) }
         }
     }
 
     private fun saveModel() {
-        val jsonString = model.map {
-            val array = listOf("title" to it.title, "completed" to it.completed).toTypedArray()
-            JSON.stringify(kotlin.js.json(*array))
-        }.toString()
+        val jsonString = JSON.indented.stringify(BaseTodo.serializer().list, model.toList())
         localStorage.set("todos-kvision", jsonString)
     }
 
@@ -110,7 +113,7 @@ class Todomvc : ApplicationBase() {
     }
 
     private fun all() {
-        this.mode = LISTMODE.ALL
+        this.mode = TODOMODE.ALL
         this.allLink.addCssClass("selected")
         this.activeLink.removeCssClass("selected")
         this.completedLink.removeCssClass("selected")
@@ -118,7 +121,7 @@ class Todomvc : ApplicationBase() {
     }
 
     private fun active() {
-        this.mode = LISTMODE.ACTIVE
+        this.mode = TODOMODE.ACTIVE
         this.allLink.removeCssClass("selected")
         this.activeLink.addCssClass("selected")
         this.completedLink.removeCssClass("selected")
@@ -126,7 +129,7 @@ class Todomvc : ApplicationBase() {
     }
 
     private fun completed() {
-        this.mode = LISTMODE.COMPLETED
+        this.mode = TODOMODE.COMPLETED
         this.allLink.removeCssClass("selected")
         this.activeLink.removeCssClass("selected")
         this.completedLink.addCssClass("selected")
@@ -154,7 +157,7 @@ class Todomvc : ApplicationBase() {
     private fun addTodo(value: String?) {
         val v = value?.trim() ?: ""
         if (v.isNotEmpty()) {
-            model.add(Todo(false, v, mode == LISTMODE.COMPLETED))
+            model.add(Todo(false, v, mode == TODOMODE.COMPLETED))
         }
     }
 
@@ -183,7 +186,7 @@ class Todomvc : ApplicationBase() {
                         ).onClick {
                             model[index].completed = this.value
                             model[index].hidden =
-                                    mode == LISTMODE.ACTIVE && this.value || mode == LISTMODE.COMPLETED && !this.value
+                                    mode == TODOMODE.ACTIVE && this.value || mode == TODOMODE.COMPLETED && !this.value
                         })
                         add(Tag(TAG.LABEL, model[index].title).apply {
                             setEventListener<Tag> {