Testing state komponent

src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt

@@ -1,13 +1,13 @@
 package nl.astraeus.komp
 
-import kotlinx.html.*
 import org.w3c.dom.*
 import org.w3c.dom.css.CSSStyleDeclaration
 import org.w3c.dom.events.Event
-import kotlin.browser.document
+import kotlinx.browser.document
+import kotlinx.html.*
 
 @Suppress("NOTHING_TO_INLINE")
-inline fun HTMLElement.setEvent(name: String, noinline callback: (Event) -> Unit): Unit {
+inline fun HTMLElement.setEvent(name: String, noinline callback: (Event) -> Unit) {
   val eventName = if (name.startsWith("on")) {
     name.substring(2)
   } else {
@@ -185,7 +185,7 @@ class HtmlBuilder(
       throw IllegalStateException("No current DOM node")
     }
 
-    // stupid hack as browsers doesn't support createEntityReference
+    // stupid hack as browsers don't support createEntityReference
     val s = document.createElement("span") as HTMLElement
     s.innerHTML = entity.text
     path.last().appendChild(s.childNodes.asList().first { it.nodeType == Node.TEXT_NODE })

src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt

@@ -1,14 +1,36 @@
 package nl.astraeus.komp
 
-import kotlinx.html.div
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
 import org.w3c.dom.css.CSSStyleDeclaration
-import kotlin.browser.document
+import kotlinx.browser.document
+import kotlinx.browser.window
+import kotlinx.html.div
+import kotlin.reflect.KProperty
 
 typealias CssStyle = CSSStyleDeclaration.() -> Unit
 
+class StateDelegate<T>(
+  val komponent: Komponent,
+  initialValue: T
+) {
+  var value: T = initialValue
+
+  operator fun getValue(thisRef: Any?, property: KProperty<*>): T {
+    return value
+  }
+
+  operator fun setValue(thisRef: Any?, property: KProperty<*>, value: T) {
+    if (this.value?.equals(value) != true) {
+      this.value = value
+      komponent.requestUpdate()
+    }
+  }
+}
+
+inline fun <reified T> Komponent.state(initialValue: T): StateDelegate<T> = StateDelegate(this, initialValue)
+
 fun HtmlConsumer.include(component: Komponent) {
   if (Komponent.updateStrategy == UpdateStrategy.REPLACE) {
     if (component.element != null) {
@@ -39,6 +61,9 @@ enum class UpdateStrategy {
 }
 
 abstract class Komponent {
+  private var createIndex = getNextCreateIndex()
+  private var dirty: Boolean = true
+
   var element: Node? = null
   val declaredStyles: MutableMap<String, CSSStyleDeclaration> = HashMap()
 
@@ -49,11 +74,18 @@ abstract class Komponent {
 
     element = result
 
+    dirty = false
+
     return result
   }
 
   abstract fun HtmlBuilder.render()
 
+  fun requestUpdate() {
+    dirty = true
+    scheduleForUpdate(this)
+  }
+
   open fun style(className: String, vararg imports: CssStyle, block: CssStyle = {}) {
     val style = (document.createElement("div") as HTMLDivElement).style
     for (imp in imports) {
@@ -63,9 +95,11 @@ abstract class Komponent {
     declaredStyles[className] = style
   }
 
-  open fun update() = refresh()
+  open fun update() {
+    refresh()
+  }
 
-  open fun refresh() {
+  internal fun refresh() {
     val oldElement = element
     if (logRenderEvent) {
       console.log("Rendering", this)
@@ -73,19 +107,21 @@ abstract class Komponent {
     val newElement = create()
 
     if (oldElement != null) {
-      if (updateStrategy == UpdateStrategy.REPLACE) {
-        if (logReplaceEvent) {
-          console.log("Replacing", oldElement, newElement)
-        }
-        oldElement.parentNode?.replaceChild(newElement, oldElement)
-        element = newElement
+      element = if (updateStrategy == UpdateStrategy.REPLACE) {
+          if (logReplaceEvent) {
+            console.log("Replacing", oldElement, newElement)
+          }
+          oldElement.parentNode?.replaceChild(newElement, oldElement)
+        newElement
       } else {
-        if (logReplaceEvent) {
-          console.log("DomDiffing", oldElement, newElement)
-        }
-        element = DiffPatch.updateNode(oldElement, newElement)
+          if (logReplaceEvent) {
+            console.log("DomDiffing", oldElement, newElement)
+          }
+        DiffPatch.updateNode(oldElement, newElement)
       }
     }
+
+    dirty = false
   }
 
   @JsName("remove")
@@ -102,6 +138,10 @@ abstract class Komponent {
   }
 
   companion object {
+    private var nextCreateIndex: Int = 1
+    private var updateCallback: Int? = null
+    private var scheduledForUpdate = mutableSetOf<Komponent>()
+
     var logRenderEvent = false
     var logReplaceEvent = false
     var updateStrategy = UpdateStrategy.DOM_DIFF
@@ -115,6 +155,42 @@ abstract class Komponent {
         parent.appendChild(element)
       }
     }
+
+    private fun getNextCreateIndex() = nextCreateIndex++
+
+    private fun scheduleForUpdate(komponent: Komponent) {
+      scheduledForUpdate.add(komponent)
+
+      if (updateCallback == null) {
+        window.setTimeout({
+          runUpdate()
+        }, 0)
+      }
+    }
+
+    private fun runUpdate() {
+      val todo = scheduledForUpdate.sortedBy { komponent -> komponent.createIndex }
+
+      if (logRenderEvent) {
+        console.log("runUpdate")
+      }
+
+      todo.forEach { next ->
+        if (next.dirty) {
+          if (logRenderEvent) {
+            console.log("Update dirty ${next.createIndex}")
+          }
+          next.update()
+        } else {
+          if (logRenderEvent) {
+            console.log("Skip ${next.createIndex}")
+          }
+        }
+      }
+
+      scheduledForUpdate.clear()
+      updateCallback = null
+    }
   }
 
 }