Bump version to 1.2.10, simplify attribute and event handling in ElementExtensions, and remove deprecated logic in HtmlBuilder.

Re-enabled previously commented-out logic for managing the "class" attribute in ElementExtensions to ensure proper updates and removals. Added comprehensive unit tests in `TestClassUpdate` to verify behavior, including class addition, removal, and name changes. Bumped the project version to 1.2.6.

.github/workflows/gradle.yml

@@ -9,9 +9,9 @@ jobs:
 
     steps:
     - uses: actions/checkout@v1
-    - name: Set up JDK 1.8
+    - name: Set up JDK 11
       uses: actions/setup-java@v1
       with:
-        java-version: 1.8
+        java-version: 11
     - name: Build with Gradle
       run: ./gradlew build

.junie/guidelines.md

@@ -0,0 +1,144 @@
+# Kotlin Komponent (Komp) Development Guidelines
+
+This document provides specific information for developing with the Kotlin Komponent (Komp) library, a component-based UI library for Kotlin/JS.
+
+## Build/Configuration Instructions
+
+### Prerequisites
+- Kotlin 2.1.10 or higher
+- Gradle 7.0 or higher
+
+### Building the Project
+
+The project uses Kotlin Multiplatform with a focus on JavaScript (and potentially WebAssembly in the future).
+
+```bash
+# Build the project
+./gradlew build
+
+# Build only JS target
+./gradlew jsJar
+
+# Publish to Maven Local for local development
+./gradlew publishToMavenLocal
+```
+
+### Configuration
+
+The project uses the following Gradle plugins:
+- Kotlin Multiplatform
+- Maven Publish
+- Dokka for documentation
+
+Key configuration files:
+- `build.gradle.kts` - Main build configuration
+- `gradle.properties` - Contains publishing credentials and signing configuration
+- `settings.gradle.kts` - Project settings and repository configuration
+
+## Testing Information
+
+### Running Tests
+
+Tests are written using the Kotlin Test library and run with Karma using Chrome Headless.
+
+```bash
+# Run all tests
+./gradlew jsTest
+
+# Run browser tests
+./gradlew jsBrowserTest
+```
+
+### Test Structure
+
+Tests are located in the `src/jsTest` directory. The project uses the standard Kotlin Test library with annotations:
+
+```kotlin
+@Test
+fun testSomething() {
+    // Test code here
+}
+```
+
+### Writing New Tests
+
+When writing tests for Komponents:
+
+1. Create a test class in the `src/jsTest/kotlin/nl/astraeus/komp` directory
+2. Use the `@Test` annotation for test methods
+3. For UI component tests:
+   - Create a test DOM element using `document.createElement("div")`
+   - Create your Komponent instance
+   - Render it using `Komponent.create(element, komponent)`
+   - Modify state and call `requestImmediateUpdate()` to test updates
+   - Verify the DOM structure using assertions
+
+### Example Test
+
+Here's a simple test example:
+
+```kotlin
+@Test
+fun testSimpleComponent() {
+    // Create a test component
+    val component = SimpleKomponent()
+    val div = document.createElement("div") as HTMLDivElement
+    
+    // Render it
+    Komponent.create(div, component)
+    
+    // Verify initial state
+    assertEquals("Hello", div.querySelector("div")?.textContent)
+    
+    // Update state and re-render
+    component.hello = false
+    component.requestImmediateUpdate()
+    
+    // Verify updated state
+    assertEquals("Good bye", div.querySelector("span")?.textContent)
+}
+```
+
+## Additional Development Information
+
+### Project Structure
+
+- `src/commonMain` - Common Kotlin code
+- `src/jsMain` - JavaScript-specific implementation
+- `src/wasmJsMain` - WebAssembly JavaScript implementation (experimental)
+- `src/jsTest` - JavaScript tests
+
+### Key Components
+
+1. **Komponent** - Base class for all UI components
+   - Override `HtmlBuilder.render()` to define the component's UI
+   - Use `requestUpdate()` for scheduled updates
+   - Use `requestImmediateUpdate()` for immediate updates
+   - Override `generateMemoizeHash()` to optimize re-renders
+
+2. **HtmlBuilder** - Handles DOM creation and updates
+   - Uses a virtual DOM-like approach to update only what changed
+   - Supports including child components with `include()`
+   - Handles attribute and event binding
+
+3. **ElementExtensions** - Utility functions for DOM manipulation
+
+### Optimization Features
+
+- **Memoization**: Components can implement `generateMemoizeHash()` to avoid unnecessary re-renders
+- **Batched Updates**: Multiple `requestUpdate()` calls are batched for performance
+- **Efficient DOM Updates**: Only changed elements are updated in the DOM
+
+### Error Handling
+
+The library provides detailed error information when rendering fails:
+- Set custom error handlers with `Komponent.setErrorHandler()`
+- Enable debug logging with `Komponent.logRenderEvent = true`
+- Use `debug {}` blocks in render functions for additional validation
+
+### Code Style
+
+- Follow Kotlin's official code style (`kotlin.code.style=official`)
+- Use functional programming patterns where appropriate
+- Prefer immutable state when possible
+- Use descriptive names for components and methods

build.gradle.kts

@@ -1,138 +1,139 @@
+@file:OptIn(ExperimentalWasmDsl::class)
+
+import com.vanniktech.maven.publish.SonatypeHost
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+
 plugins {
-  kotlin("multiplatform") version "1.7.20"
+  kotlin("multiplatform") version "2.1.10"
-  `maven-publish`
   signing
-  id("org.jetbrains.dokka") version "1.5.31"
+  id("org.jetbrains.dokka") version "2.0.0"
+  id("com.vanniktech.maven.publish") version "0.31.0"
 }
 
 group = "nl.astraeus"
-version = "1.0.8-SNAPSHOT"
+version = "1.2.10"
 
 repositories {
   mavenCentral()
+  maven {
+    name = "Sonatype Releases"
+    url = uri("https://central.sonatype.com/api/v1/publisher/deployments/download/")
+  }
 }
 
+/*
+tasks.withType<Test>(Test::class.java) {
+  useJUnitPlatform()
+}
+*/
+
 kotlin {
-  js(BOTH) {
+  js {
     browser {
       testTask {
         useKarma {
-          useChromiumHeadless()
+          useChromeHeadless()
         }
       }
     }
   }
+  /*  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:0.12.0")
-
-        api("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
       }
     }
-    val jsMain by getting {
+    val commonTest by getting {
       dependencies {
-        implementation(kotlin("stdlib-js"))
+        implementation(kotlin("test"))
       }
     }
+    val jsMain by getting
     val jsTest by getting {
       dependencies {
-        implementation(kotlin("test-js"))
+        implementation(kotlin("test"))
       }
     }
+    //val wasmJsMain by getting
   }
 }
 
-extra["PUBLISH_GROUP_ID"] = group
-extra["PUBLISH_VERSION"] = version
-extra["PUBLISH_ARTIFACT_ID"] = name
-
-// Stub secrets to let the project sync and build without the publication values set up
-val signingKeyId: String? by project
-val signingPassword: String? by project
-val signingSecretKeyRingFile: String? by project
-val ossrhUsername: String? by project
-val ossrhPassword: String? by project
-
-extra["signing.keyId"] = signingKeyId
-extra["signing.password"] = signingPassword
-extra["signing.secretKeyRingFile"] = signingSecretKeyRingFile
-extra["ossrhUsername"] = ossrhUsername
-extra["ossrhPassword"] = ossrhPassword
-
-val javadocJar by tasks.registering(Jar::class) {
-  archiveClassifier.set("javadoc")
-}
-
 publishing {
   repositories {
     mavenLocal()
     maven {
-      name = "releases"
+      name = "gitea"
-      // change to point to your repo, e.g. http://my.org/repo
+      setUrl("https://gitea.astraeus.nl/api/packages/rnentjes/maven")
-      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/releases")
-      credentials {
-        val nexusUsername: String? by project
-        val nexusPassword: String? by project
 
-        username = nexusUsername
-        password = nexusPassword
-      }
-    }
-    maven {
-      name = "snapshots"
-      // change to point to your repo, e.g. http://my.org/repo
-      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/snapshots")
       credentials {
-        val nexusUsername: String? by project
+        val giteaUsername: String? by project
-        val nexusPassword: String? by project
+        val giteaPassword: String? by project
 
-        username = nexusUsername
+        username = giteaUsername
-        password = nexusPassword
+        password = giteaPassword
-      }
-    }
-    maven {
-      name = "sonatype"
-      setUrl("https://s01.oss.sonatype.org/service/local/staging/deploy/maven2")
-      credentials {
-        username = ossrhUsername
-        password = ossrhPassword
       }
     }
   }
+}
 
-  // Configure all publications
+tasks.withType<AbstractPublishToMaven> {
-  publications.withType<MavenPublication> {
+  dependsOn(tasks.withType<Sign>())
-    // Stub javadoc.jar artifact
-    artifact(javadocJar.get())
-
-    // Provide artifacts information requited by Maven Central
-    pom {
-      name.set("kotlin-komponent")
-      description.set("Kotlin komponent")
-      url.set("https://github.com/rnentjes/komponent")
-
-      licenses {
-        license {
-          name.set("MIT")
-          url.set("https://opensource.org/licenses/MIT")
-        }
-      }
-      developers {
-        developer {
-          id.set("rnentjes")
-          name.set("Rien Nentjes")
-          email.set("info@nentjes.com")
-        }
-      }
-      scm {
-        url.set("https://github.com/rnentjes/komponent")
-      }
-    }
-  }
 }
 
 signing {
   sign(publishing.publications)
 }
+
+mavenPublishing {
+  publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL)
+
+  signAllPublications()
+
+  coordinates(group.toString(), name, version.toString())
+
+  pom {
+    name = "kotlin-komponent"
+    description = "Kotlin komponent"
+    inceptionYear = "2017"
+    url = "https://github.com/rnentjes/komponent"
+    licenses {
+      license {
+        name = "MIT"
+        url = "https://opensource.org/licenses/MIT"
+      }
+    }
+    developers {
+      developer {
+        id = "rnentjes"
+        name = "Rien Nentjes"
+        email = "info@nentjes.com"
+      }
+    }
+    scm {
+      url = "https://github.com/rnentjes/komponent"
+    }
+  }
+}

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
+In these functions the HtmlBuilder will compare the dom against the call being made, and it will update the DOM
-if needed.
+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.5.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-all.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists

readme.md

@@ -8,4 +8,6 @@ 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"
+Available on maven central: "nl.astraeus:kotlin-komponent-js:1.2.7"
+
+Some getting started documentation can be found [here](docs/getting-started.md)

settings.gradle.kts

@@ -1,2 +1,17 @@
 
+pluginManagement {
+  repositories {
+    google()
+    mavenCentral()
+    gradlePluginPortal()
+  }
+}
+
+dependencyResolutionManagement {
+  repositories {
+    google()
+    mavenCentral()
+  }
+}
+
 rootProject.name = "kotlin-komponent"

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

@@ -40,14 +40,6 @@ fun Element.printTree(indent: Int = 0): String {
   }
   result.append(") {")
   result.append("\n")
-  for ((name, event) in getKompEvents()) {
-    result.append(indent.asSpaces())
-    result.append("on")
-    result.append(name)
-    result.append(" -> ")
-    result.append(event)
-    result.append("\n")
-  }
   for (index in 0 until childNodes.length) {
     childNodes[index]?.let {
       if (it is Element) {
@@ -65,59 +57,52 @@ fun Element.printTree(indent: Int = 0): String {
   return result.toString()
 }
 
-internal fun Element.setKompAttribute(attributeName: String, value: String?) {
+internal fun Element.setKompAttribute(attributeName: String, value: String) {
-  //val attributeName = name.lowercase()
+  if (this is HTMLInputElement) {
-  if (value == null || value.isBlank()) {
+    when (attributeName) {
-    if (this is HTMLInputElement) {
+      "checked" -> {
-      when (attributeName) {
+        checked = "checked" == value
-        "checked" -> {
-          checked = false
-        }
-/*
-        "class" -> {
-          className = ""
-        }
-*/
-        "value" -> {
-          this.value = ""
-        }
-        else -> {
-          removeAttribute(attributeName)
-        }
       }
-    } else {
+
-      removeAttribute(attributeName)
+      "class" -> {
-    }
+        className = value
-  } else {
+      }
-    if (this is HTMLInputElement) {
+
-      when (attributeName) {
+      "value" -> {
-        "checked" -> {
+        this.value = value
-          checked = "checked" == value
+      }
-        }
+
-/*
+      else -> {
-        "class" -> {
+        setAttribute(attributeName, value)
-          className = value
-        }
-*/
-        "value" -> {
-          this.value = value
-        }
-        else -> {
-          setAttribute(attributeName, value)
-        }
       }
-    } else if (this.getAttribute(attributeName) != value) {
-      setAttribute(attributeName, value)
     }
+  } else if (this.getAttribute(attributeName) != value) {
+    setAttribute(attributeName, value)
   }
 }
 
-internal fun Element.clearKompEvents() {
+internal fun Element.clearKompAttribute(attributeName: String) {
-  val events = getKompEvents()
+  if (this is HTMLInputElement) {
-  for ((name, event) in getKompEvents()) {
+    when (attributeName) {
-    removeEventListener(name, event)
+      "checked" -> {
+        checked = false
+      }
+
+      "class" -> {
+        className = ""
+      }
+
+      "value" -> {
+        this.value = ""
+      }
+
+      else -> {
+        removeAttribute(attributeName)
+      }
+    }
+  } else {
+    removeAttribute(attributeName)
   }
-  events.clear()
 }
 
 internal fun Element.setKompEvent(name: String, event: (Event) -> Unit) {
@@ -127,22 +112,9 @@ internal fun Element.setKompEvent(name: String, event: (Event) -> Unit) {
     name
   }
 
-  getKompEvents()[eventName] = event
-
   this.addEventListener(eventName, event)
 }
 
-internal fun Element.getKompEvents(): MutableMap<String, (Event) -> Unit> {
-  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 {
   val childNodes = parentElement?.children
   if (childNodes != null) {

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

@@ -0,0 +1,62 @@
+package nl.astraeus.komp
+
+import org.w3c.dom.Node
+import org.w3c.dom.get
+
+data class ElementIndex(
+  val parent: Node,
+  var childIndex: Int,
+) {
+  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.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,63 +26,7 @@ interface HtmlConsumer : TagConsumer<Element> {
 fun FlowOrMetaDataOrPhrasingContent.currentElement(): Element =
   currentElement ?: error("No current element defined!")
 
-private data class ElementIndex(
+private fun Node?.asElement() = this as? HTMLElement
-  val parent: Node,
-  var childIndex: Int,
-  var setAttr: MutableSet<String> = mutableSetOf()
-)
-
-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>.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++
-  }
-}
-
-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(
   private val komponent: Komponent?,
@@ -94,6 +37,7 @@ class HtmlBuilder(
   private var inDebug = false
   private var exceptionThrown = false
   private var currentNode: Node? = null
+  private var firstTag: Boolean = true
   var root: Element? = null
 
   init {
@@ -112,6 +56,7 @@ class HtmlBuilder(
         )
       }
     } else {
+      // current element should become parent
       komponent.create(
         currentPosition.last().parent as Element,
         currentPosition.last().childIndex
@@ -146,75 +91,56 @@ class HtmlBuilder(
 
   override fun onTagStart(tag: Tag) {
     logReplace {
-      "onTagStart, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
+      "onTagStart, [${tag.tagName}, ${tag.namespace ?: ""}], currentPosition: $currentPosition"
     }
 
-    currentNode = currentPosition.currentElement()
+    currentNode = if (tag.namespace != null) {
+      document.createElementNS(tag.namespace, tag.tagName)
+    } else {
+      document.createElement(tag.tagName)
+    }
 
     if (currentNode == null) {
       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 (
+    } else {
-      !currentNode?.asElement()?.tagName.equals(tag.tagName, true) ||
+        logReplace {
-      (
+          "onTagStart, currentElement, namespace: ${currentNode?.asElement()?.namespaceURI} -> ${tag.namespace}"
-          tag.namespace != null &&
+        }
-              !currentNode?.asElement()?.namespaceURI.equals(tag.namespace, true)
+        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) {
+        currentPosition.replace(currentNode!!)
-        document.createElementNS(tag.namespace, tag.tagName)
-      } else {
-        document.createElement(tag.tagName)
-      }
-
-      currentPosition.replace(currentNode!!)
     }
 
     currentElement = currentNode as? Element ?: currentElement
 
     if (currentNode is Element) {
-      if (root == null) {
+      if (firstTag) {
-        //logReplace"Setting root: $currentNode")
+        logReplace { "Setting root: $currentNode" }
         root = currentNode as Element
+        firstTag = false
       }
 
-      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, entry.value)
+        currentElement?.setKompAttribute(entry.key, entry.value)
-        currentPosition.lastOrNull()?.setAttr?.add(entry.key)
       }
     }
 
     currentPosition.push(currentNode!!)
   }
 
-  private fun checkTag(tag: Tag) {
+  private fun checkTag(source: String, tag: Tag) {
     check(currentElement != null) {
-      js("debugger")
+      js("debugger;")
-      "No current tag"
+      "No current tag ($source)"
     }
     check(currentElement?.tagName.equals(tag.tagName, ignoreCase = true)) {
-      js("debugger")
+      js("debugger;")
-      "Wrong current tag"
+      "Wrong current tag ($source), got: ${tag.tagName} expected ${currentElement?.tagName}"
     }
   }
 
@@ -226,32 +152,35 @@ class HtmlBuilder(
     logReplace { "onTagAttributeChange, ${tag.tagName} [$attribute, $value]" }
 
     if (Komponent.enableAssertions) {
-      checkTag(tag)
+      checkTag("onTagAttributeChange", tag)
     }
 
-    currentElement?.setKompAttribute(attribute, value)
     if (value == null || value.isEmpty()) {
-      currentPosition.currentPosition()?.setAttr?.remove(attribute)
+      currentElement?.clearKompAttribute(attribute)
     } else {
-      currentPosition.currentPosition()?.setAttr?.add(attribute)
+      currentElement?.setKompAttribute(attribute, value)
     }
   }
 
   override fun onTagEvent(
     tag: Tag,
     event: String,
-    value: (Event) -> Unit
+    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.toLowerCase(), value)
+    currentElement?.setKompEvent(event.lowercase(), value)
   }
 
   override fun onTagEnd(tag: Tag) {
+    logReplace {
+      "onTagEnd, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
+    }
+
     if (exceptionThrown) {
       return
     }
@@ -263,29 +192,7 @@ class HtmlBuilder(
     }
 
     if (Komponent.enableAssertions) {
-      checkTag(tag)
+      checkTag("onTagEnd", tag)
-    }
-
-    if (currentElement != null) {
-      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 attribute = element.attributes[index]
-          if (attribute?.name != null) {
-            val attr = attribute.name
-
-            if (
-              !setAttrs.contains(attr) &&
-              attr != "style"
-            ) {
-              element.setKompAttribute(attr, null)
-            }
-          }
-        }
-      }
     }
 
     currentPosition.pop()
@@ -371,9 +278,7 @@ class HtmlBuilder(
               namespace == "http://www.w3.org/2000/svg"
             )
       ) {
-        if (currentElement?.innerHTML != textContent) {
+        currentElement?.innerHTML += textContent.trim()
-          currentElement?.innerHTML += textContent
-        }
       } else if (currentElement?.textContent != textContent) {
         currentElement?.textContent = textContent
       }
@@ -395,7 +300,7 @@ class HtmlBuilder(
     currentPosition.nextElement()
   }
 
-  override fun onTagError(tag: Tag, exception: Throwable) {
+  fun onTagError(tag: Tag, exception: Throwable) {
     exceptionThrown = true
 
     if (exception !is KomponentException) {

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

@@ -111,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()
   }
 
@@ -174,6 +191,7 @@ abstract class Komponent {
     private var scheduledForUpdate = mutableSetOf<Komponent>()
     private var interceptor: (Komponent, () -> Unit) -> Unit = { _, block -> block() }
 
+    var logUpdateEvent = false
     var logRenderEvent = false
     var logReplaceEvent = false
     var enableAssertions = false
@@ -197,7 +215,7 @@ abstract class Komponent {
       scheduledForUpdate.add(komponent)
 
       if (updateCallback == null) {
-        window.setTimeout({
+        updateCallback = window.setTimeout({
           runUpdate()
         }, 0)
       }
@@ -227,8 +245,11 @@ abstract class Komponent {
               val memoizeHash = next.generateMemoizeHash()
 
               if (next.memoizeChanged()) {
+                if (logUpdateEvent) {
+                  console.log("Rendering", next)
+                }
                 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,
+  this,
-      initialValue
+  initialValue
-    )
+)

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

@@ -0,0 +1,73 @@
+package nl.astraeus.komp
+
+import kotlinx.browser.document
+import kotlinx.html.div
+import kotlinx.html.classes
+import org.w3c.dom.HTMLDivElement
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlin.test.assertFalse
+import kotlin.test.assertTrue
+
+/**
+ * Test class for verifying class attribute updates and removals
+ */
+class ClassKomponent : Komponent() {
+    var includeClass = true
+    var className = "test-class"
+
+    override fun HtmlBuilder.render() {
+        div {
+            if (includeClass) {
+                classes = setOf(className)
+            }
+            +"Content"
+        }
+    }
+}
+
+class TestClassUpdate {
+
+    @Test
+    fun testClassRemoval() {
+        // Create a test component
+        val classComponent = ClassKomponent()
+        val div = document.createElement("div") as HTMLDivElement
+
+        // Render it
+        Komponent.create(div, classComponent)
+
+        // Verify initial state - should have the class
+        var contentDiv = div.querySelector("div")
+        println("[DEBUG_LOG] Initial DOM: ${div.printTree()}")
+        assertTrue(contentDiv?.classList?.contains("test-class") ?: false, "Div should have the class initially")
+
+        // Update to remove the class
+        classComponent.includeClass = false
+        classComponent.requestImmediateUpdate()
+
+        // Verify the class was removed
+        contentDiv = div.querySelector("div")
+        println("[DEBUG_LOG] After class removal: ${div.printTree()}")
+        assertFalse(contentDiv?.classList?.contains("test-class") ?: true, "Class should be removed after update")
+
+        // Add the class back
+        classComponent.includeClass = true
+        classComponent.requestImmediateUpdate()
+
+        // Verify the class was added back
+        contentDiv = div.querySelector("div")
+        println("[DEBUG_LOG] After class added back: ${div.printTree()}")
+        assertTrue(contentDiv?.classList?.contains("test-class") ?: false, "Class should be added back")
+
+        // Change the class name
+        classComponent.className = "new-class"
+        classComponent.requestImmediateUpdate()
+
+        // Verify the class was changed
+        contentDiv = div.querySelector("div")
+        println("[DEBUG_LOG] After class name change: ${div.printTree()}")
+        assertFalse(contentDiv?.classList?.contains("test-class") ?: true, "Old class should be removed")
+        assertTrue(contentDiv?.classList?.contains("new-class") ?: false, "New class should be added")
+    }
+}

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

@@ -0,0 +1,100 @@
+package nl.astraeus.komp
+
+import kotlinx.browser.document
+import kotlinx.html.div
+import kotlinx.html.table
+import kotlinx.html.tbody
+import kotlinx.html.td
+import kotlinx.html.tr
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLTableElement
+import org.w3c.dom.HTMLTableRowElement
+import org.w3c.dom.HTMLTableCellElement
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlin.test.assertNotNull
+
+/**
+ * A Komponent that renders a table with rows
+ */
+class TableKomponent : Komponent() {
+    val rows = mutableListOf<RowKomponent>()
+
+    fun addRow(text: String) {
+        rows.add(RowKomponent(text))
+        requestImmediateUpdate()
+    }
+
+    override fun HtmlBuilder.render() {
+        div {
+            table {
+                tbody {
+                    for (row in rows) {
+                        include(row)
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A Komponent that represents a single row in a table
+ */
+class RowKomponent(val text: String) : Komponent() {
+    override fun generateMemoizeHash(): Int = text.hashCode()
+
+    override fun HtmlBuilder.render() {
+        tr {
+            td {
+                +text
+            }
+        }
+    }
+}
+
+/**
+ * Test class for inserting rows in the DOM with a Komponent
+ */
+class TestInsert {
+
+    @Test
+    fun testInsertRow() {
+        // Create a test component
+        val tableComponent = TableKomponent()
+        val div = document.createElement("div") as HTMLDivElement
+
+        // Render it
+        Komponent.create(div, tableComponent)
+
+        // Verify initial state - should be an empty table
+        val table = div.querySelector("table")
+        assertNotNull(table, "Table should be rendered")
+        val initialRows = table.querySelectorAll("tr")
+        assertEquals(0, initialRows.length, "Table should initially have no rows")
+
+        // Add a row and verify it was inserted
+        tableComponent.addRow("First Row")
+
+        // Verify the row was added
+        val rowsAfterFirstInsert = div.querySelector("table")?.querySelectorAll("tr")
+        assertEquals(1, rowsAfterFirstInsert?.length, "Table should have one row after insertion")
+        val firstRowCell = div.querySelector("table")?.querySelector("tr td")
+        assertNotNull(firstRowCell, "First row cell should exist")
+        assertEquals("First Row", firstRowCell.textContent, "Row content should match")
+
+        // Add another row and verify it was inserted
+        tableComponent.addRow("Second Row")
+
+        // Verify both rows are present
+        val rowsAfterSecondInsert = div.querySelector("table")?.querySelectorAll("tr")
+        assertEquals(2, rowsAfterSecondInsert?.length, "Table should have two rows after second insertion")
+        val allCells = div.querySelector("table")?.querySelectorAll("tr td")
+        assertEquals(2, allCells?.length, "Table should have two cells")
+        assertEquals("First Row", allCells?.item(0)?.textContent, "First row content should match")
+        assertEquals("Second Row", allCells?.item(1)?.textContent, "Second row content should match")
+
+        // Print the DOM tree for debugging
+        println("Table DOM: ${div.printTree()}")
+    }
+}

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

@@ -0,0 +1,79 @@
+package nl.astraeus.komp
+
+import kotlinx.browser.document
+import kotlinx.html.div
+import kotlinx.html.style
+import org.w3c.dom.HTMLDivElement
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlin.test.assertNull
+
+/**
+ * Test class for verifying style attribute updates and removals
+ */
+class StyleKomponent : Komponent() {
+  var includeStyle = true
+  var styleValue = "color: red;"
+
+  override fun HtmlBuilder.render() {
+    div {
+      if (includeStyle) {
+        style = styleValue
+      }
+      +"Content"
+    }
+  }
+}
+
+class TestStyleUpdate {
+
+  @Test
+  fun testStyleRemoval() {
+    // Create a test component
+    val styleComponent = StyleKomponent()
+    val div = document.createElement("div") as HTMLDivElement
+
+    // Render it
+    Komponent.create(div, styleComponent)
+
+    // Verify initial state - should have the style
+    var contentDiv = div.querySelector("div")
+    println("[DEBUG_LOG] Initial DOM: ${div.printTree()}")
+    assertEquals(
+      "color: red;",
+      contentDiv?.getAttribute("style"),
+      "Div should have the style initially"
+    )
+
+    // Update to remove the style
+    styleComponent.includeStyle = false
+    styleComponent.requestImmediateUpdate()
+
+    // Verify the style was removed
+    contentDiv = div.querySelector("div")
+    println("[DEBUG_LOG] After style removal: ${div.printTree()}")
+    assertNull(contentDiv?.getAttribute("style"), "Style should be removed after update")
+
+    // Add the style back
+    styleComponent.includeStyle = true
+    styleComponent.requestImmediateUpdate()
+
+    // Verify the style was added back
+    contentDiv = div.querySelector("div")
+    println("[DEBUG_LOG] After style added back: ${div.printTree()}")
+    assertEquals("color: red;", contentDiv?.getAttribute("style"), "Style should be added back")
+
+    // Change the style value
+    styleComponent.styleValue = "color: blue;"
+    styleComponent.requestImmediateUpdate()
+
+    // Verify the style was changed
+    contentDiv = div.querySelector("div")
+    println("[DEBUG_LOG] After style value change: ${div.printTree()}")
+    assertEquals(
+      "color: blue;",
+      contentDiv?.getAttribute("style"),
+      "Style should be updated to new value"
+    )
+  }
+}

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

@@ -0,0 +1,50 @@
+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
+import kotlinx.html.svg
+import kotlinx.html.table
+import kotlinx.html.td
+import kotlinx.html.tr
+import kotlinx.html.unsafe
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLDivElement
+import kotlin.test.Test
+
+class TestSvgKomponent : Komponent() {
+  override fun HtmlBuilder.render() {
+    div {
+      +"Test"
+
+      svg("my-class") {
+        classes += "added-class"
+        unsafe {
+          +"""arc(1,2)"""
+        }
+      }
+    }
+  }
+}
+
+class TestSvg {
+
+  @Test
+  fun testUpdateWithEmpty() {
+    val div = document.createElement("div") as HTMLDivElement
+    val rk = TestSvgKomponent()
+
+    Komponent.logRenderEvent = true
+
+    Komponent.create(div, rk)
+
+    println("SvgKomponent: ${div.printTree()}")
+  }
+}

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

@@ -125,7 +125,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()
@@ -136,20 +136,8 @@ class ReplaceKomponent : Komponent() {
 
       div {
         if (includeSpan) {
-          span {
+          for (index in 0 ..< 3) {
-            i("fas fa-eye") {
+            extracted(index)
-              +"span1"
-            }
-          }
-          span {
-            i("fas fa-eye") {
-              +"span2"
-            }
-          }
-          span {
-            i("fas fa-eye") {
-              +"span3"
-            }
           }
         }
 
@@ -157,6 +145,14 @@ class ReplaceKomponent : Komponent() {
       }
     }
   }
+
+  private fun HtmlBuilder.extracted(index: Int) {
+    span {
+      i("fas fa-eye") {
+        + ("span" + (index+1))
+      }
+    }
+  }
 }
 
 class TestUpdate {