Version 1.2.3-SNAPSHOT

- Fix attr vs property checkbox update

.gitignore

@@ -8,3 +8,4 @@ local.properties
 *.ipr
 *.iws
 kotlin-js-store
+.idea

build.gradle.kts

@@ -1,19 +1,19 @@
 plugins {
-  kotlin("multiplatform") version "1.6.10"
-  `maven-publish`
-  signing
+  kotlin("multiplatform") version "1.9.23"
+  id("maven-publish")
+  id("signing")
   id("org.jetbrains.dokka") version "1.5.31"
 }
 
 group = "nl.astraeus"
-version = "1.0.2"
+version = "1.2.3-SNAPSHOT"
 
 repositories {
   mavenCentral()
 }
 
 kotlin {
-  js(BOTH) {
+  js(IR) {
     browser {
       testTask {
         useKarma {
@@ -22,20 +22,37 @@ kotlin {
       }
     }
   }
+  /*
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    //moduleName = project.name
+    browser()
+
+    mavenPublication {
+      groupId = group as String
+      pom { name = "${project.name}-wasm-js" }
+    }
+  }
+
+  @OptIn(ExperimentalKotlinGradlePluginApi::class)
+  applyDefaultHierarchyTemplate {
+    common {
+      group("jsCommon") {
+        withJs()
+        // TODO: switch to `withWasmJs()` after upgrade to Kotlin 2.0
+        withWasm()
+      }
+    }
+  }
+  */
 
   sourceSets {
     val commonMain by getting {
       dependencies {
-        implementation(kotlin("stdlib-common"))
-
-        api("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
-      }
-    }
-    val jsMain by getting {
-      dependencies {
-        implementation(kotlin("stdlib-js"))
+        api("org.jetbrains.kotlinx:kotlinx-html:0.11.0")
       }
     }
+    val jsMain by getting
     val jsTest by getting {
       dependencies {
         implementation(kotlin("test-js"))
@@ -71,25 +88,25 @@ publishing {
     maven {
       name = "releases"
       // change to point to your repo, e.g. http://my.org/repo
-      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/releases")
+      setUrl("https://reposilite.astraeus.nl/releases")
       credentials {
-        val nexusUsername: String? by project
-        val nexusPassword: String? by project
+        val reposiliteUsername: String? by project
+        val reposilitePassword: String? by project
 
-        username = nexusUsername
-        password = nexusPassword
+        username = reposiliteUsername
+        password = reposilitePassword
       }
     }
     maven {
       name = "snapshots"
       // change to point to your repo, e.g. http://my.org/repo
-      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/snapshots")
+      setUrl("https://reposilite.astraeus.nl/snapshots")
       credentials {
-        val nexusUsername: String? by project
-        val nexusPassword: String? by project
+        val reposiliteUsername: String? by project
+        val reposilitePassword: String? by project
 
-        username = nexusUsername
-        password = nexusPassword
+        username = reposiliteUsername
+        password = reposilitePassword
       }
     }
     maven {
@@ -136,3 +153,23 @@ publishing {
 signing {
   sign(publishing.publications)
 }
+
+tasks.named<Task>("signJsPublication") {
+  dependsOn(tasks.named<Task>("publishKotlinMultiplatformPublicationToMavenLocal"))
+}
+
+tasks.named<Task>("publishJsPublicationToReleasesRepository") {
+  dependsOn(tasks.named<Task>("signKotlinMultiplatformPublication"))
+}
+
+tasks.named<Task>("publishKotlinMultiplatformPublicationToMavenLocalRepository") {
+  dependsOn(tasks.named<Task>("signJsPublication"))
+}
+
+tasks.named<Task>("publishKotlinMultiplatformPublicationToReleasesRepository") {
+  dependsOn(tasks.named<Task>("signJsPublication"))
+}
+
+tasks.named<Task>("publishKotlinMultiplatformPublicationToSonatypeRepository") {
+  dependsOn(tasks.named<Task>("signJsPublication"))
+}

docs/getting-started.md

@@ -56,7 +56,7 @@ fun greet() = "world"
 
 Replace the code in the file with the following for a simple click app:
 
-```koltin
+```kotlin
 import kotlinx.browser.document
 import kotlinx.html.button
 import kotlinx.html.div
@@ -144,4 +144,4 @@ the data changes, that would look like this:
 
 In that case you can remove the requestUpdate call from the onClickFunction.
 
-You can find a working repository of this example here: [example]()
+You can find a working repository of this example here: [kotlin-komponent-start](https://github.com/rnentjes/kotlin-komponent-start)

docs/home.md

@@ -3,3 +3,4 @@
 * [Home](home.md)
 * [Getting started](getting-started.md)
 * [How it works](how-it-works.md)
+

docs/how-it-works.md

@@ -15,8 +15,8 @@ This way there will not be double updates of the same komponent.
 The render call will be invoked and every html builder function (div, span etc.) will call the 
 different HtmlBuilder functions like onTagStart, onTagAttributeChange etc.
 
-In these functions the HtmlBuilder will compare the dom against the call being made and it will update the DOM
-if needed.
+In these functions the HtmlBuilder will compare the dom against the call being made, and it will update the DOM
+as needed.
 
 
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 #Wed Mar 04 13:29:12 CET 2020
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists

readme.md

@@ -9,3 +9,5 @@ See the komp-todo repository for a basic example here: [komp-todo](https://githu
 For a more complete example take a look at the simple-password-manager repository: [simple-password-manager](https://github.com/rnentjes/simple-password-manager)
 
 Available on maven central: "nl.astraeus:kotlin-komponent-js:1.0.0"
+
+Some getting started documentation can be found [here](docs/getting-started.md)

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

@@ -1,8 +1,9 @@
 package nl.astraeus.komp
 
+import org.w3c.dom.events.Event
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.events.Event
+import org.w3c.dom.events.EventListener
 import org.w3c.dom.get
 
 private fun Int.asSpaces(): String {
@@ -65,66 +66,59 @@ fun Element.printTree(indent: Int = 0): String {
   return result.toString()
 }
 
-internal fun Element.clearKompAttributes() {
-  val attributes = this.asDynamic()["komp-attributes"] as MutableSet<String>?
-
-  if (attributes == null) {
-    this.asDynamic()["komp-attributes"] = mutableSetOf<String>()
-  } else {
-    attributes.clear()
-  }
-
-  if (this is HTMLInputElement) {
-    this.checked = false
-  }
-}
-
-internal fun Element.getKompAttributes(): MutableSet<String> {
-  var result: MutableSet<String>? = this.asDynamic()["komp-attributes"] as MutableSet<String>?
-
-  if (result == null) {
-    result = mutableSetOf()
-
-    this.asDynamic()["komp-attributes"] = result
-  }
-
-  return result
-}
-
-internal fun Element.setKompAttribute(name: String, value: String) {
-  val setAttrs: MutableSet<String> = getKompAttributes()
-  setAttrs.add(name)
-
-  if (this is HTMLInputElement) {
-    when (name) {
-      "checked" -> {
-        this.checked = value == "checked"
-      }
-      "value" -> {
-        this.value = value
-
-      }
-      else -> {
-        setAttribute(name, value)
+internal fun Element.setKompAttribute(attributeName: String, value: String?) {
+  //val attributeName = name.lowercase()
+  if (value == null || value.isBlank()) {
+    if (this is HTMLInputElement) {
+      when (attributeName) {
+        "checked" -> {
+          checked = false
+        }
+/*
+        "class" -> {
+          className = ""
+        }
+*/
+        "value" -> {
+          this.value = ""
+        }
+        else -> {
+          removeAttribute(attributeName)
+        }
       }
+    } else {
+      removeAttribute(attributeName)
+    }
+  } else {
+    if (this is HTMLInputElement) {
+      when (attributeName) {
+        "checked" -> {
+          checked = "checked" == value
+        }
+/*
+        "class" -> {
+          className = value
+        }
+*/
+        "value" -> {
+          this.value = value
+        }
+        else -> {
+          setAttribute(attributeName, value)
+        }
+      }
+    } else if (this.getAttribute(attributeName) != value) {
+      setAttribute(attributeName, value)
     }
-  } else if (this.getAttribute(name) != value) {
-    setAttribute(name, value)
   }
 }
 
 internal fun Element.clearKompEvents() {
+  val events = getKompEvents()
   for ((name, event) in getKompEvents()) {
     removeEventListener(name, event)
   }
-
-  val events = this.asDynamic()["komp-events"] as MutableMap<String, (Event) -> Unit>?
-
-  if (events == null) {
-    this.asDynamic()["komp-events"] = mutableMapOf<String, (Event) -> Unit>()
-  } else {
-    events.clear()
-  }
+  events.clear()
 }
 
 internal fun Element.setKompEvent(name: String, event: (Event) -> Unit) {
@@ -134,22 +128,20 @@ internal fun Element.setKompEvent(name: String, event: (Event) -> Unit) {
     name
   }
 
-  val events: MutableMap<String, (Event) -> Unit> = getKompEvents()
-
-  events[eventName]?.let {
-    println("Warn event '$eventName' already defined!")
-    removeEventListener(eventName, it)
-  }
-
-  events[eventName] = event
-
-  this.asDynamic()["komp-events"] = events
+  getKompEvents()[eventName] = event
 
   this.addEventListener(eventName, event)
 }
 
 internal fun Element.getKompEvents(): MutableMap<String, (Event) -> Unit> {
-  return this.asDynamic()["komp-events"] ?: mutableMapOf()
+  var result: MutableMap<String, (Event) -> Unit>? = this.asDynamic()["komp-events"] as MutableMap<String, (Event) -> Unit>?
+
+  if (result == null) {
+    result = mutableMapOf()
+    this.asDynamic()["komp-events"] = result
+  }
+
+  return result
 }
 
 internal fun Element.findElementIndex(): Int {
@@ -163,4 +155,4 @@ internal fun Element.findElementIndex(): Int {
   }
 
   return 0
-}
+}

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

@@ -0,0 +1,64 @@
+package nl.astraeus.komp
+
+import org.w3c.dom.Node
+import org.w3c.dom.get
+
+data class ElementIndex(
+  val parent: Node,
+  var childIndex: Int,
+  var setAttr: MutableSet<String> = mutableSetOf()
+) {
+  override fun toString(): String {
+    return "${parent.nodeName}[$childIndex]"
+  }
+}
+
+fun ArrayList<ElementIndex>.currentParent(): Node {
+  this.lastOrNull()?.let {
+    return it.parent
+  }
+
+  throw IllegalStateException("currentParent should never be null!")
+}
+
+fun ArrayList<ElementIndex>.currentElement(): Node? {
+  this.lastOrNull()?.let {
+    return it.parent.childNodes[it.childIndex]
+  }
+
+  return null
+}
+
+fun ArrayList<ElementIndex>.currentPosition(): ElementIndex? {
+  return if (this.size < 2) {
+    null
+  } else {
+    this[this.size - 2]
+  }
+}
+
+fun ArrayList<ElementIndex>.nextElement() {
+  this.lastOrNull()?.let {
+    it.setAttr.clear()
+    it.childIndex++
+  }
+}
+
+fun ArrayList<ElementIndex>.pop() {
+  this.removeLast()
+}
+
+fun ArrayList<ElementIndex>.push(element: Node) {
+  this.add(ElementIndex(element, 0))
+}
+
+fun ArrayList<ElementIndex>.replace(new: Node) {
+  if (this.currentElement() != null) {
+    this.currentElement()?.parentElement?.replaceChild(
+      new,
+      this.currentElement()!!
+    )
+  } else {
+    this.last().parent.appendChild(new)
+  }
+}

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

@@ -13,7 +13,6 @@ import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLSpanElement
 import org.w3c.dom.Node
 import org.w3c.dom.asList
-import org.w3c.dom.events.Event
 import org.w3c.dom.get
 
 private var currentElement: Element? = null
@@ -27,60 +26,18 @@ interface HtmlConsumer : TagConsumer<Element> {
 fun FlowOrMetaDataOrPhrasingContent.currentElement(): Element =
   currentElement ?: error("No current element defined!")
 
-private data class ElementIndex(
-  val parent: Node,
-  var childIndex: Int
-)
-
-private fun ArrayList<ElementIndex>.currentParent(): Node {
-  this.lastOrNull()?.let {
-    return it.parent
-  }
-
-  throw IllegalStateException("currentParent should never be null!")
-}
-
-private fun ArrayList<ElementIndex>.currentElement(): Node? {
-  this.lastOrNull()?.let {
-    return it.parent.childNodes[it.childIndex]
-  }
-
-  return null
-}
-
-private fun ArrayList<ElementIndex>.nextElement() {
-  this.lastOrNull()?.let {
-    it.childIndex++
-  }
-}
-
-private fun ArrayList<ElementIndex>.pop() {
-  this.removeLast()
-}
-
-private fun ArrayList<ElementIndex>.push(element: Node) {
-  this.add(ElementIndex(element, 0))
-}
-
-private fun ArrayList<ElementIndex>.replace(new: Node) {
-  if (this.currentElement() != null) {
-    this.currentElement()?.parentElement?.replaceChild(new, this.currentElement()!!)
-  } else {
-    this.last().parent.appendChild(new)
-  }
-}
-
 private fun Node.asElement() = this as? HTMLElement
 
 class HtmlBuilder(
-  val komponent: Komponent?,
+  private val komponent: Komponent?,
   parent: Element,
-  childIndex: Int = 0,
+  childIndex: Int = 0
 ) : HtmlConsumer {
   private var currentPosition = arrayListOf<ElementIndex>()
   private var inDebug = false
   private var exceptionThrown = false
-  var currentNode: Node? = null
+  private var currentNode: Node? = null
+  private var firstTag: Boolean = true
   var root: Element? = null
 
   init {
@@ -94,9 +51,18 @@ class HtmlBuilder(
     ) {
       currentPosition.replace(komponent.element!!)
       if (Komponent.logRenderEvent) {
-        console.log("Skipped include $komponent, memoize hasn't changed")
+        console.log(
+          "Skipped include $komponent, memoize hasn't changed"
+        )
       }
     } else {
+      // current element should become parent
+/*
+      val ce = komponent.element
+      if (ce != null) {
+        append(ce as Element)
+      }
+*/
       komponent.create(
         currentPosition.last().parent as Element,
         currentPosition.last().childIndex
@@ -123,25 +89,28 @@ class HtmlBuilder(
     }
   }
 
-  private fun logReplace(msg: String) {
+  private fun logReplace(msg: () -> String) {
     if (Komponent.logReplaceEvent && inDebug) {
-      console.log(msg)
+      console.log(msg.invoke())
     }
   }
 
   override fun onTagStart(tag: Tag) {
-    logReplace("onTagStart, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition")
+    logReplace {
+      "onTagStart, [${tag.tagName}, ${tag.namespace ?: ""}], currentPosition: $currentPosition"
+    }
+
     currentNode = currentPosition.currentElement()
 
     if (currentNode == null) {
-      logReplace("onTagStart, currentNode1: $currentNode")
+      logReplace { "onTagStart, currentNode1: $currentNode" }
       currentNode = if (tag.namespace != null) {
         document.createElementNS(tag.namespace, tag.tagName)
       } else {
         document.createElement(tag.tagName)
       }
 
-      //logReplace"onTagStart, currentElement1.1: $currentNode")
+      logReplace { "onTagStart, currentElement1.1: $currentNode" }
       currentPosition.currentParent().appendChild(currentNode!!)
     } else if (
       !currentNode?.asElement()?.tagName.equals(tag.tagName, true) ||
@@ -150,8 +119,13 @@ class HtmlBuilder(
               !currentNode?.asElement()?.namespaceURI.equals(tag.namespace, true)
           )
     ) {
-      logReplace("onTagStart, currentElement, namespace: ${currentNode?.asElement()?.namespaceURI} -> ${tag.namespace}")
-      logReplace("onTagStart, currentElement, replace: ${currentNode?.asElement()?.tagName} -> ${tag.tagName}")
+      logReplace {
+        "onTagStart, currentElement, namespace: ${currentNode?.asElement()?.namespaceURI} -> ${tag.namespace}"
+      }
+      logReplace {
+        "onTagStart, currentElement, replace: ${currentNode?.asElement()?.tagName} -> ${tag.tagName}"
+      }
+
       currentNode = if (tag.namespace != null) {
         document.createElementNS(tag.namespace, tag.tagName)
       } else {
@@ -159,74 +133,81 @@ class HtmlBuilder(
       }
 
       currentPosition.replace(currentNode!!)
-    } else {
-      //logReplace"onTagStart, same node type")
-
     }
 
     currentElement = currentNode as? Element ?: currentElement
 
     if (currentNode is Element) {
-      if (root == null) {
-        //logReplace"Setting root: $currentNode")
+      if (firstTag) {
+        logReplace { "Setting root: $currentNode" }
         root = currentNode as Element
+        firstTag = false
       }
 
-      currentElement?.clearKompAttributes()
       currentElement?.clearKompEvents()
 
+      // if currentElement = checkbox make sure it's cleared
+      (currentElement as? HTMLInputElement)?.checked = false
+
+      currentPosition.lastOrNull()?.setAttr?.clear()
       for (entry in tag.attributesEntries) {
-        currentElement!!.setKompAttribute(entry.key.lowercase(), entry.value)
-      }
-
-      if (tag.namespace != null) {
-        //logReplace"onTagStart, same node type")
-
-        (currentNode as? Element)?.innerHTML = ""
+        currentElement!!.setKompAttribute(entry.key, entry.value)
+        currentPosition.lastOrNull()?.setAttr?.add(entry.key)
       }
     }
 
-    //logReplace"onTagStart, currentElement2: $currentNode")
-
     currentPosition.push(currentNode!!)
   }
 
-  private fun checkTag(tag: Tag) {
+  private fun checkTag(source: String, tag: Tag) {
     check(currentElement != null) {
-      js("debugger")
-      "No current tag"
+      js("debugger;")
+      "No current tag ($source)"
     }
     check(currentElement?.tagName.equals(tag.tagName, ignoreCase = true)) {
-      js("debugger")
-      "Wrong current tag"
+      js("debugger;")
+      "Wrong current tag ($source), got: ${tag.tagName} expected ${currentElement?.tagName}"
     }
   }
 
-  override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
-    logReplace("onTagAttributeChange, ${tag.tagName} [$attribute, $value]")
+  override fun onTagAttributeChange(
+    tag: Tag,
+    attribute: String,
+    value: String?
+  ) {
+    logReplace { "onTagAttributeChange, ${tag.tagName} [$attribute, $value]" }
 
     if (Komponent.enableAssertions) {
-      checkTag(tag)
+      checkTag("onTagAttributeChange", tag)
     }
 
-    if (value == null) {
-      currentElement?.removeAttribute(attribute.lowercase())
+    currentElement?.setKompAttribute(attribute, value)
+    if (value == null || value.isEmpty()) {
+      currentPosition.currentPosition()?.setAttr?.remove(attribute)
     } else {
-      currentElement?.setKompAttribute(attribute.lowercase(), value)
+      currentPosition.currentPosition()?.setAttr?.add(attribute)
     }
   }
 
-  override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
-    logReplace("onTagEvent, ${tag.tagName} [$event, $value]")
+  override fun onTagEvent(
+    tag: Tag,
+    event: String,
+    value: (kotlinx.html.org.w3c.dom.events.Event) -> Unit
+  ) {
+    logReplace { "onTagEvent, ${tag.tagName} [$event, $value]" }
 
     if (Komponent.enableAssertions) {
-      checkTag(tag)
+      checkTag("onTagEvent", tag)
     }
 
-    currentElement?.setKompEvent(event.lowercase(), value)
+    currentElement?.setKompEvent(event.lowercase(), value.asDynamic())
   }
 
   override fun onTagEnd(tag: Tag) {
+    logReplace {
+      "onTagEnd, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
+    }
+
     if (exceptionThrown) {
       return
     }
@@ -238,46 +219,36 @@ class HtmlBuilder(
     }
 
     if (Komponent.enableAssertions) {
-      checkTag(tag)
+      checkTag("onTagEnd", tag)
     }
 
-    currentPosition.pop()
-
     if (currentElement != null) {
-      val setAttrs: List<String> = currentElement?.asDynamic()["komp-attributes"] ?: listOf()
+      val setAttrs: Set<String> = currentPosition.currentPosition()?.setAttr ?: setOf()
 
       // remove attributes that where not set
       val element = currentElement
       if (element?.hasAttributes() == true) {
         for (index in 0 until element.attributes.length) {
-          val attr = element.attributes[index]
-          if (attr != null) {
+          val attribute = element.attributes[index]
+          if (attribute?.name != null) {
+            val attr = attribute.name
 
-            if (element is HTMLElement && attr.name == "data-has-focus" && "true" == attr.value) {
-              element.focus()
-            }
-
-            if (attr.name != "style" && !setAttrs.contains(attr.name)) {
-              if (element is HTMLInputElement) {
-                if (attr.name == "checkbox") {
-                  element.checked = false
-                } else if (attr.name == "value") {
-                  element.value = ""
-                } else if (attr.name == "class") {
-                  element.className = ""
-                }
-              } else {
-                if (Komponent.logReplaceEvent) {
-                  console.log("Clear attribute [${attr.name}]  on $element)")
-                }
-                element.removeAttribute(attr.name)
-              }
+            if (
+              !setAttrs.contains(attr) &&
+              attr != "style"
+            ) {
+              element.setKompAttribute(attr, null)
             }
           }
         }
       }
     }
 
+    currentPosition.pop()
+
+    currentNode = currentPosition.currentElement()
+    currentElement = currentNode as? Element ?: currentElement
+
     currentPosition.nextElement()
 
     currentElement = currentElement?.parentElement as? HTMLElement
@@ -351,7 +322,10 @@ class HtmlBuilder(
       //logReplace"onTagContentUnsafe, namespace: [$namespace]")
 
       if (Komponent.unsafeMode == UnsafeMode.UNSAFE_ALLOWED ||
-        (Komponent.unsafeMode == UnsafeMode.UNSAFE_SVG_ONLY && namespace == "http://www.w3.org/2000/svg")
+            (
+              Komponent.unsafeMode == UnsafeMode.UNSAFE_SVG_ONLY &&
+              namespace == "http://www.w3.org/2000/svg"
+            )
       ) {
         if (currentElement?.innerHTML != textContent) {
           currentElement?.innerHTML += textContent
@@ -377,13 +351,13 @@ class HtmlBuilder(
     currentPosition.nextElement()
   }
 
-  override fun onTagError(tag: Tag, exception: Throwable) {
+  fun onTagError(tag: Tag, exception: Throwable) {
     exceptionThrown = true
 
     if (exception !is KomponentException) {
       val position = mutableListOf<Element>()
       var ce = currentElement
-      while(ce != null) {
+      while (ce != null) {
         position.add(ce)
         ce = ce.parentElement
       }
@@ -401,6 +375,7 @@ class HtmlBuilder(
         }
         builder.append(" ")
       }
+
       throw KomponentException(
         komponent,
         currentElement,
@@ -416,13 +391,15 @@ class HtmlBuilder(
 
   override fun finalize(): Element {
     //logReplace"finalize, currentPosition: $currentPosition")
-    return root ?: throw IllegalStateException("We can't finalize as there was no tags")
+    return root ?: throw IllegalStateException(
+      "We can't finalize as there was no tags"
+    )
   }
 
   companion object {
     fun create(content: HtmlBuilder.() -> Unit): Element {
       val container = document.createElement("div") as HTMLElement
-      val consumer = HtmlBuilder(null, container, 0)
+      val consumer = HtmlBuilder(null, container)
       content.invoke(consumer)
       return consumer.root ?: error("No root element found after render!")
     }

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

@@ -7,6 +7,7 @@ import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
 
 private var currentKomponent: Komponent? = null
+
 fun FlowOrMetaDataOrPhrasingContent.currentKomponent(): Komponent =
   currentKomponent ?: error("No current komponent defined! Only call from render code!")
 
@@ -110,8 +111,25 @@ abstract class Komponent {
    *
    * HTMLBuilder.render() is called 1st time the component is rendered, after that this
    * method will be called
+   *
+   * @deprecated
    */
-  open fun update() {
+  @Deprecated(
+    "Deprecated to avoid confusing with requestUpdate, use renderUpdate instead",
+    ReplaceWith("renderUpdate"),
+    level = DeprecationLevel.WARNING
+  )
+  protected fun update() {
+    refresh()
+  }
+
+  /**
+   * This function can be overwritten if you know how to update the Komponent yourself
+   *
+   * HTMLBuilder.render() is called 1st time the component is rendered, after that this
+   * method will be called
+   */
+  open fun renderUpdate() {
     refresh()
   }
 
@@ -137,7 +155,6 @@ abstract class Komponent {
       }
     }
     val builder = HtmlBuilder(this, parent, childIndex)
-    builder.root = null
 
     try {
       currentKomponent = this
@@ -228,7 +245,7 @@ abstract class Komponent {
 
               if (next.memoizeChanged()) {
                 next.onBeforeUpdate()
-                next.update()
+                next.renderUpdate()
                 next.updateMemoizeHash()
                 next.onAfterUpdate()
               } else if (logRenderEvent) {

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

@@ -31,7 +31,7 @@ class MutableCollectionStateDelegate<T>(
   }
 
   // todo: return iterator wrapper to update at changes?
-  // override fun iterator(): MutableIterator<T> = collection.iterator()
+  //override fun iterator(): MutableIterator<T> = collection.iterator()
 
   override fun remove(element: T): Boolean {
     komponent.requestUpdate()

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

@@ -14,8 +14,8 @@ interface Delegate<T> {
     property: KProperty<*>,
     value: T
   )
-}
 
+}
 
 open class StateDelegate<T>(
   val komponent: Komponent,
@@ -51,6 +51,6 @@ open class StateDelegate<T>(
 inline fun <reified T> Komponent.state(
   initialValue: T
 ): Delegate<T> = StateDelegate(
-      this,
-      initialValue
-    )
+  this,
+  initialValue
+)

src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt

@@ -1,9 +1,13 @@
 package nl.astraeus.komp
 
 import kotlinx.browser.document
+import kotlinx.html.DIV
+import kotlinx.html.InputType
+import kotlinx.html.classes
 import kotlinx.html.div
 import kotlinx.html.i
 import kotlinx.html.id
+import kotlinx.html.input
 import kotlinx.html.js.onClickFunction
 import kotlinx.html.p
 import kotlinx.html.span
@@ -35,6 +39,7 @@ class Child1 : Komponent() {
 class Child2 : Komponent() {
   override fun HtmlBuilder.render() {
     div {
+      id ="1234"
       +"Child 2"
     }
   }
@@ -50,6 +55,10 @@ class SimpleKomponent : Komponent() {
 
   override fun HtmlBuilder.render() {
     div("div_class") {
+      input(InputType.checkBox) {
+        name = "helloInput"
+        checked = hello
+      }
       span {
         svg {
           unsafe {
@@ -61,8 +70,6 @@ class SimpleKomponent : Komponent() {
         if (hello) {
           div {
             +"Hello"
-
-            throw IllegalStateException("Bloe")
           }
         } else {
           span {
@@ -119,7 +126,7 @@ class IncludeKomponent(
 }
 
 class ReplaceKomponent : Komponent() {
-  val includeKomponent = IncludeKomponent()
+  val includeKomponent = IncludeKomponent("Other text")
   var includeSpan = true
 
   override fun generateMemoizeHash(): Int = includeSpan.hashCode() * 7 + includeKomponent.generateMemoizeHash()
@@ -130,20 +137,8 @@ class ReplaceKomponent : Komponent() {
 
       div {
         if (includeSpan) {
-          span {
-            i("fas fa-eye") {
-              +"span1"
-            }
-          }
-          span {
-            i("fas fa-eye") {
-              +"span2"
-            }
-          }
-          span {
-            i("fas fa-eye") {
-              +"span3"
-            }
+          for (index in 0 ..< 3) {
+            extracted(index)
           }
         }
 
@@ -151,6 +146,14 @@ class ReplaceKomponent : Komponent() {
       }
     }
   }
+
+  private fun HtmlBuilder.extracted(index: Int) {
+    span {
+      i("fas fa-eye") {
+        + ("span" + (index+1))
+      }
+    }
+  }
 }
 
 class TestUpdate {
@@ -205,7 +208,8 @@ class TestUpdate {
   fun testCreate() {
     var elemTest: Element? = null
     val element = HtmlBuilder.create {
-      div("div_class") {
+      div(classes = "div_class") {
+        classes = classes + "bla'"
         id = "123"
         +"Test"