Common code initial

- Fix attr vs property checkbox update

.gitignore

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

build.gradle.kts

@@ -1,12 +1,12 @@
 plugins {
-  kotlin("multiplatform") version "1.6.10"
+  kotlin("multiplatform") version "1.7.20"
   `maven-publish`
   signing
   id("org.jetbrains.dokka") version "1.5.31"
 }
 
 group = "nl.astraeus"
-version = "1.0.2"
+version = "1.0.8-SNAPSHOT"
 
 repositories {
   mavenCentral()

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-7.5.1-all.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists

src/commonMain/kotlin/nl/astraeus/komp/HtmlBuilderCommon.kt

@@ -0,0 +1 @@
+package nl.astraeus.komp

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

@@ -65,66 +65,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 +127,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 +154,4 @@ internal fun Element.findElementIndex(): Int {
   }
 
   return 0
-}
+}

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

@@ -29,7 +29,8 @@ fun FlowOrMetaDataOrPhrasingContent.currentElement(): Element =
 
 private data class ElementIndex(
   val parent: Node,
-  var childIndex: Int
+  var childIndex: Int,
+  var setAttr: MutableSet<String> = mutableSetOf()
 )
 
 private fun ArrayList<ElementIndex>.currentParent(): Node {
@@ -48,8 +49,17 @@ private fun ArrayList<ElementIndex>.currentElement(): Node? {
   return null
 }
 
+private fun ArrayList<ElementIndex>.currentPosition(): ElementIndex? {
+  return if (this.size < 2) {
+    null
+  } else {
+    this[this.size - 2]
+  }
+}
+
 private fun ArrayList<ElementIndex>.nextElement() {
   this.lastOrNull()?.let {
+    it.setAttr.clear()
     it.childIndex++
   }
 }
@@ -64,7 +74,10 @@ private fun ArrayList<ElementIndex>.push(element: Node) {
 
 private fun ArrayList<ElementIndex>.replace(new: Node) {
   if (this.currentElement() != null) {
-    this.currentElement()?.parentElement?.replaceChild(new, this.currentElement()!!)
+    this.currentElement()?.parentElement?.replaceChild(
+      new,
+      this.currentElement()!!
+    )
   } else {
     this.last().parent.appendChild(new)
   }
@@ -73,14 +86,14 @@ private fun ArrayList<ElementIndex>.replace(new: Node) {
 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
   var root: Element? = null
 
   init {
@@ -94,7 +107,9 @@ 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 {
       komponent.create(
@@ -123,18 +138,21 @@ 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 {
@@ -150,8 +168,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,9 +182,6 @@ class HtmlBuilder(
       }
 
       currentPosition.replace(currentNode!!)
-    } else {
-      //logReplace"onTagStart, same node type")
-
     }
 
     currentElement = currentNode as? Element ?: currentElement
@@ -172,22 +192,18 @@ class HtmlBuilder(
         root = currentNode as Element
       }
 
-      currentElement?.clearKompAttributes()
       currentElement?.clearKompEvents()
+      (currentElement as? HTMLInputElement)?.checked = false
 
+      currentPosition.lastOrNull()?.setAttr?.clear()
+
+      // if currentElement = checkbox make sure it's cleared
       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!!)
   }
 
@@ -202,28 +218,37 @@ class HtmlBuilder(
     }
   }
 
-  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)
     }
 
-    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: (Event) -> Unit
+  ) {
+    logReplace { "onTagEvent, ${tag.tagName} [$event, $value]" }
 
     if (Komponent.enableAssertions) {
       checkTag(tag)
     }
 
-    currentElement?.setKompEvent(event.lowercase(), value)
+    currentElement?.setKompEvent(event.toLowerCase(), value)
   }
 
   override fun onTagEnd(tag: Tag) {
@@ -241,43 +266,33 @@ class HtmlBuilder(
       checkTag(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 +366,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
@@ -383,7 +401,7 @@ class HtmlBuilder(
     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 +419,7 @@ class HtmlBuilder(
         }
         builder.append(" ")
       }
+
       throw KomponentException(
         komponent,
         currentElement,
@@ -416,13 +435,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!")
 
@@ -137,7 +138,6 @@ abstract class Komponent {
       }
     }
     val builder = HtmlBuilder(this, parent, childIndex)
-    builder.root = null
 
     try {
       currentKomponent = this

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

@@ -1,9 +1,12 @@
 package nl.astraeus.komp
 
 import kotlinx.browser.document
+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 +38,7 @@ class Child1 : Komponent() {
 class Child2 : Komponent() {
   override fun HtmlBuilder.render() {
     div {
+      id ="1234"
       +"Child 2"
     }
   }
@@ -50,6 +54,10 @@ class SimpleKomponent : Komponent() {
 
   override fun HtmlBuilder.render() {
     div("div_class") {
+      input(InputType.checkBox) {
+        name = "helloInput"
+        checked = hello
+      }
       span {
         svg {
           unsafe {
@@ -61,8 +69,6 @@ class SimpleKomponent : Komponent() {
         if (hello) {
           div {
             +"Hello"
-
-            throw IllegalStateException("Bloe")
           }
         } else {
           span {
@@ -205,7 +211,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"