Version 1.2.3-SNAPSHOT

- Fix attr vs property checkbox update

.gitignore

@@ -1,4 +1,11 @@
 # Created by .ignore support plugin (hsz.mobi)
+build
+.gradle
 web/js/generated
 gradle.properties
 local.properties
+*.iml
+*.ipr
+*.iws
+kotlin-js-store
+.idea

build.gradle.kts

@@ -1,83 +1,175 @@
-
 plugins {
-    kotlin("multiplatform") version "1.4.32"
-    `maven-publish`
+  kotlin("multiplatform") version "1.9.23"
+  id("maven-publish")
+  id("signing")
+  id("org.jetbrains.dokka") version "1.5.31"
 }
 
 group = "nl.astraeus"
-version = "0.2.6-SNAPSHOT"
+version = "1.2.3-SNAPSHOT"
 
 repositories {
-    mavenCentral()
-    jcenter()
+  mavenCentral()
 }
 
 kotlin {
-    /* Targets configuration omitted. 
-    *  To find out how to configure the targets, please follow the link:
-    *  https://kotlinlang.org/docs/reference/building-mpp-with-gradle.html#setting-up-targets */
-    js(BOTH) {
-        browser {
-            //produceKotlinLibrary()
-            testTask {
-                useKarma {
-                    useChromeHeadless()
-                }
-            }
+  js(IR) {
+    browser {
+      testTask {
+        useKarma {
+          useChromiumHeadless()
         }
+      }
     }
+  }
+  /*
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    //moduleName = project.name
+    browser()
 
-    sourceSets {
-        val commonMain by getting {
-            dependencies {
-                implementation(kotlin("stdlib-common"))
-
-                api("org.jetbrains.kotlinx:kotlinx-html-js:0.7.2")
-            }
-        }
-        val jsMain by getting {
-            dependencies {
-                implementation(kotlin("stdlib-js"))
-            }
-        }
-        val jsTest by getting {
-            dependencies {
-                implementation(kotlin("test-js"))
-            }
-        }
+    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 {
+        api("org.jetbrains.kotlinx:kotlinx-html:0.11.0")
+      }
+    }
+    val jsMain by getting
+    val jsTest by getting {
+      dependencies {
+        implementation(kotlin("test-js"))
+      }
+    }
+  }
+}
+
+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 {
-        if (project.properties["nexusUsername"] != null) {
-            maven {
-                name = "releases"
-                url = uri("http://nexus.astraeus.nl/nexus/content/repositories/releases")
-                credentials {
-                    val nexusUsername: String by project
-                    val nexusPassword: String by project
+  repositories {
+    mavenLocal()
+    maven {
+      name = "releases"
+      // change to point to your repo, e.g. http://my.org/repo
+      setUrl("https://reposilite.astraeus.nl/releases")
+      credentials {
+        val reposiliteUsername: String? by project
+        val reposilitePassword: String? by project
 
-                    username = nexusUsername
-                    password = nexusPassword
-                }
-            }
-            maven {
-                name = "snapshots"
-                url = uri("http://nexus.astraeus.nl/nexus/content/repositories/snapshots")
-                credentials {
-                    val nexusUsername: String by project
-                    val nexusPassword: String by project
+        username = reposiliteUsername
+        password = reposilitePassword
+      }
+    }
+    maven {
+      name = "snapshots"
+      // change to point to your repo, e.g. http://my.org/repo
+      setUrl("https://reposilite.astraeus.nl/snapshots")
+      credentials {
+        val reposiliteUsername: String? by project
+        val reposilitePassword: String? by project
 
-                    username = nexusUsername
-                    password = nexusPassword
-                }
-            }
-        } else {
-            println("Publishing disabled properties not found.")
+        username = reposiliteUsername
+        password = reposilitePassword
+      }
+    }
+    maven {
+      name = "sonatype"
+      setUrl("https://s01.oss.sonatype.org/service/local/staging/deploy/maven2")
+      credentials {
+        username = ossrhUsername
+        password = ossrhPassword
+      }
+    }
+  }
+
+  // Configure all publications
+  publications.withType<MavenPublication> {
+    // 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")
+      }
     }
-    publications {
-        val kotlinMultiplatform by getting {}
-    }
+  }
+}
+
+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

@@ -0,0 +1,147 @@
+# Table of contents
+
+* [Home](home.md)
+* [Getting started](getting-started.md)
+* [How it works](how-it-works.md)
+
+# Getting started
+
+To get started create a new kotlin project in intellij of the type 'Browser application'
+
+![Create 'Browser Application' project](/docs/img/create-project.png)
+
+Add the 'sourceSets' block with the kotlin-komponent dependency so your build.gradle.kts looks like this:
+
+```gradle
+plugins {
+    kotlin("js") version "1.6.10"
+}
+
+group = "com.test"
+version = "1.0.0-SNAPSHOT"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    api("nl.astraeus:kotlin-komponent-js:1.0.0")
+
+    testImplementation(kotlin("test"))
+}
+
+kotlin {
+    js(IR) {
+        binaries.executable()
+        browser {
+            commonWebpackConfig {
+                cssSupport.enabled = true
+            }
+        }
+    }
+}
+```
+
+Refresh the gradle project to import the dependency.
+
+There is now only one kotlin source file in the project called Simple.kt, it should look something like this:
+
+```kotin
+fun main() {
+  console.log("Hello, ${greet()}")
+}
+
+fun greet() = "world"
+```
+
+Replace the code in the file with the following for a simple click app:
+
+```kotlin
+import kotlinx.browser.document
+import kotlinx.html.button
+import kotlinx.html.div
+import kotlinx.html.hr
+import kotlinx.html.js.onClickFunction
+import nl.astraeus.komp.HtmlBuilder
+import nl.astraeus.komp.Komponent
+import nl.astraeus.komp.mutableCollectionState
+import nl.astraeus.komp.state
+import kotlin.js.Date
+
+fun main() {
+  console.log("Hello, ${greet()}")
+
+  Komponent.create(document.body!!, TestKomponent())
+}
+
+fun greet() = "world"
+
+class TestKomponent : Komponent() {
+  var clicks: Int = 0
+  val lines: MutableCollection<String> = mutableListOf()
+
+  override fun HtmlBuilder.render() {
+    div {
+      div {
+        +"Hello Komponent!"
+      }
+
+      div {
+        +"Clicks $clicks"
+      }
+
+      div {
+        button {
+          +"Click"
+          onClickFunction = {
+            clicks++
+            lines.add("click $clicks at ${Date()}")
+            requestUpdate()
+          }
+        }
+      }
+
+      hr()
+
+      for (line in lines) {
+        div {
+          + line
+        }
+      }
+
+    }
+  }
+}
+```
+
+First in the main we add our TestKomponent to the document body with the following line:
+
+```kotlin
+  Komponent.create(document.body!!, TestKomponent())
+```
+
+The TestKomponent.render method will be called to render our Komponent. 
+As you can see events can be attached inline with the on<event>Function methods.
+The requestUpdate method will call the render method again and update the page accordingly.
+
+After building the application you will find it in /build/distributions.
+
+In the index.html page you will find the following line:
+
+```html
+<div id="root"></div>
+```
+
+This line is not needed for kotlin-komponent.
+
+If you like you can use some helpers that will automatically call the requestUpdate method if
+the data changes, that would look like this:
+
+```kotlin
+  var clicks: Int by state(0)
+  val lines: MutableCollection<String> = mutableCollectionState(mutableListOf())
+```
+
+In that case you can remove the requestUpdate call from the onClickFunction.
+
+You can find a working repository of this example here: [kotlin-komponent-start](https://github.com/rnentjes/kotlin-komponent-start)

docs/home.md

@@ -0,0 +1,6 @@
+# Table of contents
+
+* [Home](home.md)
+* [Getting started](getting-started.md)
+* [How it works](how-it-works.md)
+

docs/how-it-works.md

@@ -0,0 +1,23 @@
+# Table of contents
+
+* [Home](home.md)
+* [Getting started](getting-started.md)
+* [How it works](how-it-works.md)
+
+# How it works
+
+When the requestUpdate call is made to the [Komponent](src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt)
+the update is queued in a callback. The callback will be called after the current event is handled.
+
+If there are multiple updates requested, these are sorted so that the top Komponents get executed first. 
+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
+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-6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists

komp.commonMain.iml

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp:commonMain" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.type="sourceSet" external.system.module.version="0.2.5-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="FacetManager">
-    <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="Common (experimental) " allPlatforms="JS []/JVM [1.6]/Native []/Native [general]" useProjectSettings="false" isTestModule="false" externalProjectId="komp" pureKotlinSourceFolders="$MODULE_DIR$/src/jsMain/kotlin;/home/rnentjes/Development/komp/komp/build/externals/komp-jsLegacy/src;/home/rnentjes/Development/komp/komp/build/externals/komp-jsIr/src;/home/rnentjes/Development/komp/komp/src/jsTest/kotlin;/home/rnentjes/Development/komp/komp/src/commonMain/kotlin">
-        <newMppModelJpsModuleKind>SOURCE_SET_HOLDER</newMppModelJpsModuleKind>
-        <compilerSettings />
-        <compilerArguments>
-          <option name="languageVersion" value="1.4" />
-          <option name="apiVersion" value="1.4" />
-          <option name="pluginOptions">
-            <array />
-          </option>
-          <option name="pluginClasspaths">
-            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.30/7d0085e5781847da84580d16239c1c4e0980bdb0/kotlin-scripting-jvm-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.30/c7896c5c6b504f44e7cf9f5719d4393e20680666/kotlin-scripting-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-coroutines-core/1.3.8/f62be6d4cbf27781c2969867b4ed952f38378492/kotlinx-coroutines-core-1.3.8.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.30/d10d1e10f47006ee08162dde039e38ac487de4ac/kotlin-stdlib-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/bb9a3173350f55732416ee27956ea8f9b81f4dbb/kotlin-stdlib-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains/annotations/13.0/919f0dfe192fb4e063e7dacadee7f8bb9a2672a9/annotations-13.0.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.30/b9c2a1fab9217623fc0fbadf6190e77eed6f054d/kotlin-script-runtime-1.4.30.jar" />
-            </array>
-          </option>
-          <option name="multiPlatform" value="true" />
-        </compilerArguments>
-      </configuration>
-    </facet>
-  </component>
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$/src/commonMain" />
-    <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.30" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.7.2" level="project" />
-  </component>
-</module>

komp.commonTest.iml

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp:commonTest" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.type="sourceSet" external.system.module.version="0.2.5-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="FacetManager">
-    <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="Common (experimental) " allPlatforms="JS []/JVM [1.6]/Native []/Native [general]" useProjectSettings="false" isTestModule="true" externalProjectId="komp" pureKotlinSourceFolders="$MODULE_DIR$/src/jsMain/kotlin;/home/rnentjes/Development/komp/komp/build/externals/komp-jsLegacy/src;/home/rnentjes/Development/komp/komp/build/externals/komp-jsIr/src;/home/rnentjes/Development/komp/komp/src/jsTest/kotlin;/home/rnentjes/Development/komp/komp/src/commonMain/kotlin">
-        <newMppModelJpsModuleKind>SOURCE_SET_HOLDER</newMppModelJpsModuleKind>
-        <externalSystemTestTasks>
-          <externalSystemTestTask>jsLegacyBrowserTest|komp:jsTest|jsLegacy</externalSystemTestTask>
-        </externalSystemTestTasks>
-        <compilerSettings />
-        <compilerArguments>
-          <option name="languageVersion" value="1.4" />
-          <option name="apiVersion" value="1.4" />
-          <option name="pluginOptions">
-            <array />
-          </option>
-          <option name="pluginClasspaths">
-            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.30/7d0085e5781847da84580d16239c1c4e0980bdb0/kotlin-scripting-jvm-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.30/c7896c5c6b504f44e7cf9f5719d4393e20680666/kotlin-scripting-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-coroutines-core/1.3.8/f62be6d4cbf27781c2969867b4ed952f38378492/kotlinx-coroutines-core-1.3.8.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.30/d10d1e10f47006ee08162dde039e38ac487de4ac/kotlin-stdlib-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/bb9a3173350f55732416ee27956ea8f9b81f4dbb/kotlin-stdlib-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains/annotations/13.0/919f0dfe192fb4e063e7dacadee7f8bb9a2672a9/annotations-13.0.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.30/b9c2a1fab9217623fc0fbadf6190e77eed6f054d/kotlin-script-runtime-1.4.30.jar" />
-            </array>
-          </option>
-          <option name="multiPlatform" value="true" />
-        </compilerArguments>
-      </configuration>
-    </facet>
-  </component>
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$/src/commonTest" />
-    <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="module" module-name="komp.commonMain" scope="TEST" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.4.30" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.7.2" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.30" level="project" />
-  </component>
-  <component name="TestModuleProperties" production-module="komp.commonMain" />
-</module>

komp.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.version="0.2.5-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.gradle" />
-      <excludeFolder url="file://$MODULE_DIR$/build" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

komp.ipr

@@ -1,512 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ArtifactManager">
-    <artifact type="jar" name="komp-0.1.16-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-0.1.16-SNAPSHOT.jar">
-        <element id="module-output" name="komp_main" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-0.1.17-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-0.1.17-SNAPSHOT.jar">
-        <element id="module-output" name="komp_main" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-js-0.1.21-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-js-0.1.21-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-js-0.2.1-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-js-0.2.1-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-js-0.2.2-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-js-0.2.2-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-jslegacy-0.2.2-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-jslegacy-0.2.2-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-jslegacy-0.2.3-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-jslegacy-0.2.3-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-jslegacy-0.2.4-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-jslegacy-0.2.4-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-    <artifact type="jar" name="komp-jslegacy-0.2.5-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-jslegacy-0.2.5-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
-  </component>
-  <component name="CheckStyle-IDEA">
-    <option name="configuration">
-      <map>
-        <entry key="checkstyle-version" value="8.5" />
-        <entry key="copy-libs" value="false" />
-        <entry key="location-0" value="BUNDLED:(bundled):Sun Checks" />
-        <entry key="location-1" value="BUNDLED:(bundled):Google Checks" />
-        <entry key="scan-before-checkin" value="false" />
-        <entry key="scanscope" value="JavaOnly" />
-        <entry key="suppress-errors" value="false" />
-      </map>
-    </option>
-  </component>
-  <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="1.8" />
-  </component>
-  <component name="Encoding">
-    <file url="PROJECT" charset="UTF-8" />
-  </component>
-  <component name="FrameworkDetectionExcludesConfiguration">
-    <file type="web" url="file://$PROJECT_DIR$" />
-  </component>
-  <component name="GradleLocalSettings">
-    <option name="modificationStamps">
-      <map>
-        <entry key="$PROJECT_DIR$/../../DestinationSol" value="5718836739744" />
-        <entry key="$PROJECT_DIR$/../../kotlin/kotlin-webgl-test" value="2938763414342" />
-        <entry key="$PROJECT_DIR$/../../music/dawjs" value="2921352917165" />
-        <entry key="$PROJECT_DIR$/../../music/mto" value="7363595652795" />
-        <entry key="$PROJECT_DIR$/../../music/synthesis" value="2936164705438" />
-        <entry key="$PROJECT_DIR$/../../simple/Simple-persistence" value="2890201693583" />
-        <entry key="$PROJECT_DIR$/../../simple/Simple-web" value="2890212261770" />
-        <entry key="$PROJECT_DIR$/../../simple/SimpleDatabase" value="2890191706466" />
-        <entry key="$PROJECT_DIR$/../../simple/Very-simple-templates" value="2890190703434" />
-        <entry key="$PROJECT_DIR$/../../simple/simple-password-manager" value="8877848261147" />
-        <entry key="$PROJECT_DIR$/../../simple/simple-password-manager/client" value="2959282312702" />
-        <entry key="$PROJECT_DIR$/../../simple/simple-password-manager/server" value="2952285414000" />
-        <entry key="$PROJECT_DIR$/../../simple/simple-social-media" value="2954146711424" />
-        <entry key="$PROJECT_DIR$/../../simple/stats/simple-stats-client" value="2941044635281" />
-        <entry key="$PROJECT_DIR$/../../simple/stats/simple-stats-server" value="2909544379158" />
-        <entry key="$PROJECT_DIR$/../../work/Kos/KosConvertBranchcode" value="2904315467504" />
-      </map>
-    </option>
-    <option name="externalProjectsViewState">
-      <projects_view />
-    </option>
-  </component>
-  <component name="GradleMigrationSettings" migrationVersion="1" />
-  <component name="GradleSettings">
-    <option name="linkedExternalProjectsSettings">
-      <GradleProjectSettings>
-        <option name="delegatedBuild" value="false" />
-        <option name="testRunner" value="PLATFORM" />
-        <option name="distributionType" value="DEFAULT_WRAPPED" />
-        <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="1.8" />
-        <option name="modules">
-          <set>
-            <option value="$PROJECT_DIR$" />
-          </set>
-        </option>
-      </GradleProjectSettings>
-    </option>
-  </component>
-  <component name="HotSwapAgentPluginSettingsProvider">
-    <option name="agentPath" value="$APPLICATION_PLUGINS_DIR$/hotswap-agent-intellij-plugin/lib/agent/hotswap-agent-1.3.0.jar" />
-  </component>
-  <component name="InspectionProjectProfileManager">
-    <profile version="1.0">
-      <option name="myName" value="Project Default" />
-    </profile>
-    <version value="1.0" />
-  </component>
-  <component name="MacroExpansionManager">
-    <option name="directoryName" value="qFcQOWli" />
-  </component>
-  <component name="Palette2">
-    <group name="Swing">
-      <item class="com.intellij.uiDesigner.HSpacer" tooltip-text="Horizontal Spacer" icon="/com/intellij/uiDesigner/icons/hspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="1" hsize-policy="6" anchor="0" fill="1" />
-      </item>
-      <item class="com.intellij.uiDesigner.VSpacer" tooltip-text="Vertical Spacer" icon="/com/intellij/uiDesigner/icons/vspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="1" anchor="0" fill="2" />
-      </item>
-      <item class="javax.swing.JPanel" icon="/com/intellij/uiDesigner/icons/panel.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3" />
-      </item>
-      <item class="javax.swing.JScrollPane" icon="/com/intellij/uiDesigner/icons/scrollPane.png" removable="false" auto-create-binding="false" can-attach-label="true">
-        <default-constraints vsize-policy="7" hsize-policy="7" anchor="0" fill="3" />
-      </item>
-      <item class="javax.swing.JButton" icon="/com/intellij/uiDesigner/icons/button.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="3" anchor="0" fill="1" />
-        <initial-values>
-          <property name="text" value="Button" />
-        </initial-values>
-      </item>
-      <item class="javax.swing.JRadioButton" icon="/com/intellij/uiDesigner/icons/radioButton.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
-        <initial-values>
-          <property name="text" value="RadioButton" />
-        </initial-values>
-      </item>
-      <item class="javax.swing.JCheckBox" icon="/com/intellij/uiDesigner/icons/checkBox.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
-        <initial-values>
-          <property name="text" value="CheckBox" />
-        </initial-values>
-      </item>
-      <item class="javax.swing.JLabel" icon="/com/intellij/uiDesigner/icons/label.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="0" anchor="8" fill="0" />
-        <initial-values>
-          <property name="text" value="Label" />
-        </initial-values>
-      </item>
-      <item class="javax.swing.JTextField" icon="/com/intellij/uiDesigner/icons/textField.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
-          <preferred-size width="150" height="-1" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JPasswordField" icon="/com/intellij/uiDesigner/icons/passwordField.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
-          <preferred-size width="150" height="-1" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JFormattedTextField" icon="/com/intellij/uiDesigner/icons/formattedTextField.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
-          <preferred-size width="150" height="-1" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JTextArea" icon="/com/intellij/uiDesigner/icons/textArea.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JTextPane" icon="/com/intellij/uiDesigner/icons/textPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JEditorPane" icon="/com/intellij/uiDesigner/icons/editorPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JComboBox" icon="/com/intellij/uiDesigner/icons/comboBox.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="0" hsize-policy="2" anchor="8" fill="1" />
-      </item>
-      <item class="javax.swing.JTable" icon="/com/intellij/uiDesigner/icons/table.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JList" icon="/com/intellij/uiDesigner/icons/list.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="2" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JTree" icon="/com/intellij/uiDesigner/icons/tree.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
-          <preferred-size width="150" height="50" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JTabbedPane" icon="/com/intellij/uiDesigner/icons/tabbedPane.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
-          <preferred-size width="200" height="200" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JSplitPane" icon="/com/intellij/uiDesigner/icons/splitPane.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
-          <preferred-size width="200" height="200" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JSpinner" icon="/com/intellij/uiDesigner/icons/spinner.png" removable="false" auto-create-binding="true" can-attach-label="true">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
-      </item>
-      <item class="javax.swing.JSlider" icon="/com/intellij/uiDesigner/icons/slider.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
-      </item>
-      <item class="javax.swing.JSeparator" icon="/com/intellij/uiDesigner/icons/separator.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3" />
-      </item>
-      <item class="javax.swing.JProgressBar" icon="/com/intellij/uiDesigner/icons/progressbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1" />
-      </item>
-      <item class="javax.swing.JToolBar" icon="/com/intellij/uiDesigner/icons/toolbar.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1">
-          <preferred-size width="-1" height="20" />
-        </default-constraints>
-      </item>
-      <item class="javax.swing.JToolBar$Separator" icon="/com/intellij/uiDesigner/icons/toolbarSeparator.png" removable="false" auto-create-binding="false" can-attach-label="false">
-        <default-constraints vsize-policy="0" hsize-policy="0" anchor="0" fill="1" />
-      </item>
-      <item class="javax.swing.JScrollBar" icon="/com/intellij/uiDesigner/icons/scrollbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
-        <default-constraints vsize-policy="6" hsize-policy="0" anchor="0" fill="2" />
-      </item>
-    </group>
-  </component>
-  <component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/komp.iml" filepath="$PROJECT_DIR$/komp.iml" />
-      <module fileurl="file://$PROJECT_DIR$/komp.commonMain.iml" filepath="$PROJECT_DIR$/komp.commonMain.iml" />
-      <module fileurl="file://$PROJECT_DIR$/komp.commonTest.iml" filepath="$PROJECT_DIR$/komp.commonTest.iml" />
-      <module fileurl="file://$PROJECT_DIR$/komp.jsMain.iml" filepath="$PROJECT_DIR$/komp.jsMain.iml" />
-      <module fileurl="file://$PROJECT_DIR$/komp.jsTest.iml" filepath="$PROJECT_DIR$/komp.jsTest.iml" />
-      <module fileurl="file://$PROJECT_DIR$/komp_main.iml" filepath="$PROJECT_DIR$/komp_main.iml" group="komp" />
-      <module fileurl="file://$PROJECT_DIR$/komp_test.iml" filepath="$PROJECT_DIR$/komp_test.iml" group="komp" />
-    </modules>
-  </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
-    <output url="file://$PROJECT_DIR$/classes" />
-  </component>
-  <component name="PropertiesComponent">
-    <property name="GoToClass.includeLibraries" value="false" />
-    <property name="GoToClass.toSaveIncludeLibraries" value="false" />
-    <property name="GoToFile.includeJavaFiles" value="false" />
-    <property name="MemberChooser.sorted" value="false" />
-    <property name="MemberChooser.showClasses" value="true" />
-    <property name="MemberChooser.copyJavadoc" value="false" />
-    <property name="nodejs_interpreter_path" value="/usr/bin/node" />
-  </component>
-  <component name="RemoteRepositoriesConfiguration">
-    <remote-repository>
-      <option name="id" value="central" />
-      <option name="name" value="Maven Central repository" />
-      <option name="url" value="https://repo1.maven.org/maven2" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="jboss.community" />
-      <option name="name" value="JBoss Community repository" />
-      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="MavenRepo" />
-      <option name="name" value="MavenRepo" />
-      <option name="url" value="https://repo.maven.apache.org/maven2/" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="maven" />
-      <option name="name" value="maven" />
-      <option name="url" value="http://nexus.astraeus.nl/nexus/content/groups/public" />
-    </remote-repository>
-    <remote-repository>
-      <option name="id" value="BintrayJCenter" />
-      <option name="name" value="BintrayJCenter" />
-      <option name="url" value="https://jcenter.bintray.com/" />
-    </remote-repository>
-  </component>
-  <component name="RunManager">
-    <configuration default="true" type="Applet" factoryName="Applet">
-      <option name="WIDTH" value="400" />
-      <option name="HEIGHT" value="300" />
-      <option name="POLICY_FILE" value="$APPLICATION_HOME_DIR$/bin/appletviewer.policy" />
-      <module />
-    </configuration>
-    <configuration default="true" type="Application" factoryName="Application">
-      <option name="MAIN_CLASS_NAME" />
-      <option name="VM_PARAMETERS" />
-      <option name="PROGRAM_PARAMETERS" />
-      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
-      <option name="ALTERNATIVE_JRE_PATH" />
-      <option name="ENABLE_SWING_INSPECTOR" value="false" />
-      <option name="ENV_VARIABLES" />
-      <option name="PASS_PARENT_ENVS" value="true" />
-      <module name="" />
-      <envs />
-    </configuration>
-    <configuration default="true" type="JUnit" factoryName="JUnit">
-      <module name="" />
-      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
-      <option name="ALTERNATIVE_JRE_PATH" />
-      <option name="PACKAGE_NAME" />
-      <option name="MAIN_CLASS_NAME" />
-      <option name="METHOD_NAME" />
-      <option name="TEST_OBJECT" value="class" />
-      <option name="VM_PARAMETERS" value="-ea" />
-      <option name="PARAMETERS" />
-      <option name="WORKING_DIRECTORY" value="$MODULE_DIR$" />
-      <option name="ENV_VARIABLES" />
-      <option name="PASS_PARENT_ENVS" value="true" />
-      <option name="TEST_SEARCH_SCOPE">
-        <value defaultName="singleModule" />
-      </option>
-      <envs />
-      <patterns />
-    </configuration>
-    <configuration default="true" type="#org.jetbrains.idea.devkit.run.PluginConfigurationType" factoryName="Plugin">
-      <module name="" />
-      <option name="VM_PARAMETERS" value="-Xmx512m -Xms256m -XX:MaxPermSize=250m -ea" />
-      <option name="PROGRAM_PARAMETERS" />
-      <predefined_log_file id="idea.log" enabled="true" />
-    </configuration>
-    <configuration default="true" type="Remote" factoryName="Remote">
-      <option name="USE_SOCKET_TRANSPORT" value="true" />
-      <option name="SERVER_MODE" value="false" />
-      <option name="SHMEM_ADDRESS" value="javadebug" />
-      <option name="HOST" value="localhost" />
-      <option name="PORT" value="5005" />
-    </configuration>
-    <configuration name="&lt;template&gt;" type="TestNG" default="true" selected="false">
-      <option name="MAIN_CLASS_NAME" />
-      <option name="VM_PARAMETERS" value="-ea" />
-      <option name="PARAMETERS" />
-      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-    </configuration>
-  </component>
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-  <component name="accountSettings">
-    <option name="activeRegion" value="us-east-1" />
-    <option name="recentlyUsedRegions">
-      <list>
-        <option value="us-east-1" />
-      </list>
-    </option>
-  </component>
-  <component name="libraries-with-intellij-classes">
-    <option name="intellijApiContainingLibraries">
-      <list>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="ideaIU" />
-          <option name="groupId" value="com.jetbrains.intellij.idea" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="ideaIU" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="ideaIC" />
-          <option name="groupId" value="com.jetbrains.intellij.idea" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="ideaIC" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="pycharmPY" />
-          <option name="groupId" value="com.jetbrains.intellij.pycharm" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="pycharmPY" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="pycharmPC" />
-          <option name="groupId" value="com.jetbrains.intellij.pycharm" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="pycharmPC" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="clion" />
-          <option name="groupId" value="com.jetbrains.intellij.clion" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="clion" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="riderRD" />
-          <option name="groupId" value="com.jetbrains.intellij.rider" />
-        </LibraryCoordinatesState>
-        <LibraryCoordinatesState>
-          <option name="artifactId" value="riderRD" />
-          <option name="groupId" value="com.jetbrains" />
-        </LibraryCoordinatesState>
-      </list>
-    </option>
-  </component>
-  <component name="libraryTable">
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.30" type="kotlin.common">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/bb9a3173350f55732416ee27956ea8f9b81f4dbb/kotlin-stdlib-common-1.4.30.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/9427471650876e86fdb0dd878f147ff15c57eac0/kotlin-stdlib-common-1.4.30-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.4.30" type="kotlin.js">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.4.30/6c66d1db9c724b087c3a6f37aecffd24d0b14f26/kotlin-stdlib-js-1.4.30.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.4.30/5729944dc91bf28689461fe44b9e401fd41a84a7/kotlin-stdlib-js-1.4.30-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-test-annotations-common:1.4.30" type="kotlin.common">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-annotations-common/1.4.30/e77a76b23fc3007baf57a9d3354fdd318fe1fa88/kotlin-test-annotations-common-1.4.30.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-annotations-common/1.4.30/57512e29ee20defe37d54ce19507d599b0f2113/kotlin-test-annotations-common-1.4.30-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-test-common:1.4.30" type="kotlin.common">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-common/1.4.30/823ed87441680d1334a1f0d23781c0089e16c0a6/kotlin-test-common-1.4.30.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-common/1.4.30/d1818d1bdc457b51289f006884a260b56a55cb77/kotlin-test-common-1.4.30-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-test-js:1.4.30" type="kotlin.js">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-js/1.4.30/5b1cb1ec31a344f6aa1047d6cae3a268825cb724/kotlin-test-js-1.4.30.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-test-js/1.4.30/8e70170db077d3f421c3fb6d24468b3938990f4a/kotlin-test-js-1.4.30-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.7.2" type="kotlin.common">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.7.2/7da838083337896b558cab2884c4118709a58769/kotlinx-html-metadata-0.7.2.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.7.2/866bbbfe0a81d49cdf19fd149adafbb938b35be4/kotlinx-html-common-0.7.2-sources.jar!/" />
-      </SOURCES>
-    </library>
-    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.7.2" type="kotlin.js">
-      <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.7.2/baf7e494e549776d0ae3e0ee225804a513f5dc26/kotlinx-html-jslegacy-0.7.2.jar!/" />
-      </CLASSES>
-      <JAVADOC />
-      <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.7.2/b09bfd3565058174afa3fd0888743f8b8dca5406/kotlinx-html-js-0.7.2-sources.jar!/" />
-      </SOURCES>
-    </library>
-  </component>
-  <component name="masterDetails">
-    <states>
-      <state key="ProjectJDKs.UI">
-        <settings>
-          <last-edited>1.7</last-edited>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.2" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-    </states>
-  </component>
-</project>

komp.jsMain.iml

@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp:jsMain" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.type="sourceSet" external.system.module.version="0.2.5-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="FacetManager">
-    <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="JavaScript " allPlatforms="JS []" useProjectSettings="false" isTestModule="false" externalProjectId="komp" pureKotlinSourceFolders="$MODULE_DIR$/src/jsMain/kotlin;/home/rnentjes/Development/komp/komp/build/externals/komp-jsLegacy/src;/home/rnentjes/Development/komp/komp/build/externals/komp-jsIr/src;/home/rnentjes/Development/komp/komp/src/jsTest/kotlin;/home/rnentjes/Development/komp/komp/src/commonMain/kotlin">
-        <dependsOnModuleNames>komp:commonMain</dependsOnModuleNames>
-        <sourceSets>
-          <sourceSet>komp.commonMain</sourceSet>
-        </sourceSets>
-        <newMppModelJpsModuleKind>COMPILATION_AND_SOURCE_SET_HOLDER</newMppModelJpsModuleKind>
-        <compilerSettings />
-        <compilerArguments>
-          <option name="outputFile" value="$MODULE_DIR$/build/js/packages/komp-jsLegacy/kotlin/komp-jsLegacy.js" />
-          <option name="noStdlib" value="true" />
-          <option name="sourceMap" value="true" />
-          <option name="metaInfo" value="true" />
-          <option name="target" value="v5" />
-          <option name="moduleKind" value="umd" />
-          <option name="main" value="call" />
-          <option name="languageVersion" value="1.4" />
-          <option name="apiVersion" value="1.4" />
-          <option name="pluginOptions">
-            <array />
-          </option>
-          <option name="pluginClasspaths">
-            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.30/b9c2a1fab9217623fc0fbadf6190e77eed6f054d/kotlin-script-runtime-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.30/c7896c5c6b504f44e7cf9f5719d4393e20680666/kotlin-scripting-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.30/7d0085e5781847da84580d16239c1c4e0980bdb0/kotlin-scripting-jvm-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/bb9a3173350f55732416ee27956ea8f9b81f4dbb/kotlin-stdlib-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.30/d10d1e10f47006ee08162dde039e38ac487de4ac/kotlin-stdlib-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-coroutines-core/1.3.8/f62be6d4cbf27781c2969867b4ed952f38378492/kotlinx-coroutines-core-1.3.8.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains/annotations/13.0/919f0dfe192fb4e063e7dacadee7f8bb9a2672a9/annotations-13.0.jar" />
-            </array>
-          </option>
-          <option name="multiPlatform" value="true" />
-          <option name="errors">
-            <ArgumentParseErrors />
-          </option>
-        </compilerArguments>
-      </configuration>
-    </facet>
-  </component>
-  <component name="NewModuleRootManager">
-    <output url="file://$MODULE_DIR$/build/js/packages/komp-jsLegacy/kotlin" />
-    <exclude-output />
-    <content url="file://$MODULE_DIR$/build/externals/komp-jsIr/src" />
-    <content url="file://$MODULE_DIR$/build/externals/komp-jsLegacy/src" />
-    <content url="file://$MODULE_DIR$/src/jsMain">
-      <sourceFolder url="file://$MODULE_DIR$/src/jsMain/kotlin" type="kotlin-source" />
-    </content>
-    <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="module" module-name="komp.commonMain" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.7.2" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.4.30" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.30" level="project" />
-  </component>
-</module>

komp.jsTest.iml

@@ -1,70 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp:jsTest" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.type="sourceSet" external.system.module.version="0.2.5-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="FacetManager">
-    <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="JavaScript " allPlatforms="JS []" useProjectSettings="false" isTestModule="true" externalProjectId="komp" pureKotlinSourceFolders="$MODULE_DIR$/src/jsMain/kotlin;/home/rnentjes/Development/komp/komp/build/externals/komp-jsLegacy/src;/home/rnentjes/Development/komp/komp/build/externals/komp-jsIr/src;/home/rnentjes/Development/komp/komp/src/jsTest/kotlin;/home/rnentjes/Development/komp/komp/src/commonMain/kotlin">
-        <dependsOnModuleNames>komp:commonTest</dependsOnModuleNames>
-        <sourceSets>
-          <sourceSet>komp.jsMain</sourceSet>
-          <sourceSet>komp.commonTest</sourceSet>
-          <sourceSet>komp.commonMain</sourceSet>
-        </sourceSets>
-        <newMppModelJpsModuleKind>COMPILATION_AND_SOURCE_SET_HOLDER</newMppModelJpsModuleKind>
-        <externalSystemTestTasks>
-          <externalSystemTestTask>jsLegacyBrowserTest|komp:jsTest|jsLegacy</externalSystemTestTask>
-        </externalSystemTestTasks>
-        <compilerSettings />
-        <compilerArguments>
-          <option name="outputFile" value="$MODULE_DIR$/build/js/packages/komp-jsLegacy-test/kotlin/komp-jsLegacy-test.js" />
-          <option name="noStdlib" value="true" />
-          <option name="sourceMap" value="true" />
-          <option name="metaInfo" value="true" />
-          <option name="target" value="v5" />
-          <option name="moduleKind" value="umd" />
-          <option name="main" value="call" />
-          <option name="languageVersion" value="1.4" />
-          <option name="apiVersion" value="1.4" />
-          <option name="pluginOptions">
-            <array />
-          </option>
-          <option name="pluginClasspaths">
-            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.30/b9c2a1fab9217623fc0fbadf6190e77eed6f054d/kotlin-script-runtime-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.30/c7896c5c6b504f44e7cf9f5719d4393e20680666/kotlin-scripting-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.30/7d0085e5781847da84580d16239c1c4e0980bdb0/kotlin-scripting-jvm-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.30/bb9a3173350f55732416ee27956ea8f9b81f4dbb/kotlin-stdlib-common-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.30/d10d1e10f47006ee08162dde039e38ac487de4ac/kotlin-stdlib-1.4.30.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-coroutines-core/1.3.8/f62be6d4cbf27781c2969867b4ed952f38378492/kotlinx-coroutines-core-1.3.8.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains/annotations/13.0/919f0dfe192fb4e063e7dacadee7f8bb9a2672a9/annotations-13.0.jar" />
-            </array>
-          </option>
-          <option name="multiPlatform" value="true" />
-          <option name="errors">
-            <ArgumentParseErrors />
-          </option>
-        </compilerArguments>
-      </configuration>
-    </facet>
-  </component>
-  <component name="NewModuleRootManager">
-    <output-test url="file://$MODULE_DIR$/build/js/packages/komp-jsLegacy-test/kotlin" />
-    <exclude-output />
-    <content url="file://$MODULE_DIR$/src/jsTest">
-      <sourceFolder url="file://$MODULE_DIR$/src/jsTest/kotlin" type="kotlin-test" />
-    </content>
-    <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="module" module-name="komp.commonMain" scope="TEST" />
-    <orderEntry type="module" module-name="komp.commonTest" scope="TEST" production-on-test="" />
-    <orderEntry type="module" module-name="komp.jsMain" scope="TEST" />
-    <orderEntry type="module" module-name="komp.jsMain" scope="RUNTIME" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.7.2" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-test-js:1.4.30" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.4.30" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.7.2" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.30" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-test-common:1.4.30" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-test-annotations-common:1.4.30" level="project" />
-  </component>
-  <component name="TestModuleProperties" production-module="komp.jsMain" />
-</module>

readme.md

@@ -1,7 +1,13 @@
 # Komponent
 
+![Gradle CI](https://github.com/rnentjes/komponent/workflows/Gradle%20CI/badge.svg)
+
 Very simple helper to build single page apps with the Kotlin javascript target using static html builders.
 
 See the komp-todo repository for a basic example here: [komp-todo](https://github.com/rnentjes/komp-todo)
 
 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)

settings.gradle.kts

@@ -1,16 +1,2 @@
-pluginManagement {
-    repositories {
 
-        maven { setUrl("https://dl.bintray.com/kotlin/kotlin-dev") }
-
-        maven { setUrl("https://dl.bintray.com/kotlin/kotlin-eap") }
-
-        mavenCentral()
-
-        maven { setUrl("https://plugins.gradle.org/m2/") }
-    }
-}
-
-rootProject.name = "komp"
-
-enableFeaturePreview("GRADLE_METADATA")
+rootProject.name = "kotlin-komponent"

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

@@ -1,298 +0,0 @@
-package nl.astraeus.komp
-
-import org.w3c.dom.*
-import org.w3c.dom.events.Event
-
-const val HASH_VALUE = "komp-hash-value"
-
-//const val HASH_ATTRIBUTE = "data-komp-hash"
-const val EVENT_PROPERTY = "komp-events"
-
-fun Node.getKompHash(): Int = this.asDynamic()[HASH_VALUE] as? Int? ?: -1
-
-fun Node.setKompHash(hash: Int) {
-  this.asDynamic()[HASH_VALUE] = hash
-}
-
-private fun NodeList.findNodeHashIndex(hash: Int): Int {
-  for (index in 0..this.length) {
-    val node = this[index]
-    if (node is HTMLElement && node.getKompHash() == hash) {
-      return index
-    }
-  }
-
-  return -1
-}
-
-object DiffPatch {
-
-  fun hashesMatch(oldNode: Node, newNode: Node): Boolean {
-    return (
-        oldNode is HTMLElement &&
-            newNode is HTMLElement &&
-            oldNode.nodeName == newNode.nodeName &&
-            oldNode.getKompHash() != -1 &&
-            newNode.getKompHash() != -1 &&
-            oldNode.getKompHash() == newNode.getKompHash()
-        )
-  }
-
-  private fun updateKomponentOnNode(oldNode: Node, newNode: Node) {
-    val komponent = newNode.asDynamic()[KOMP_KOMPONENT] as? Komponent
-    if (komponent != null) {
-      if (Komponent.logReplaceEvent) {
-        console.log("Keeping oldNode, set oldNode element on Komponent", oldNode, komponent)
-      }
-      komponent.element = oldNode
-    }
-  }
-
-  fun updateNode(oldNode: Node, newNode: Node): Node {
-    if (hashesMatch(oldNode, newNode)) {
-      if (Komponent.logReplaceEvent) {
-        console.log("Hashes match", oldNode, newNode, oldNode.getKompHash(), newNode.getKompHash())
-      }
-
-      updateKomponentOnNode(oldNode, newNode)
-      return oldNode
-    }
-
-    if (oldNode.nodeType == newNode.nodeType && oldNode.nodeType == 3.toShort()) {
-      if (oldNode.textContent != newNode.textContent) {
-        if (Komponent.logReplaceEvent) {
-          console.log("Updating text content", oldNode, newNode)
-        }
-        oldNode.textContent = newNode.textContent
-      }
-
-      updateKomponentOnNode(oldNode, newNode)
-      return oldNode
-    }
-
-    if (oldNode is HTMLElement && newNode is HTMLElement) {
-      if (oldNode.nodeName == newNode.nodeName) {
-        if (Komponent.logReplaceEvent) {
-          console.log("Update attributes", oldNode.nodeName, newNode.nodeName)
-        }
-        updateAttributes(oldNode, newNode);
-        if (Komponent.logReplaceEvent) {
-          console.log("Update events", oldNode.nodeName, newNode.nodeName)
-        }
-        updateEvents(oldNode, newNode)
-        if (Komponent.logReplaceEvent) {
-          console.log("Update children", oldNode.nodeName, newNode.nodeName)
-        }
-        updateKomponentOnNode(oldNode, newNode)
-        updateChildren(oldNode, newNode)
-        oldNode.setKompHash(newNode.getKompHash())
-
-        return oldNode
-      }
-    }
-
-    if (Komponent.logReplaceEvent) {
-      console.log("Replace node (type)", oldNode.nodeType, oldNode, newNode)
-    }
-
-    oldNode.parentNode?.replaceChild(newNode, oldNode)
-    return newNode
-  }
-
-  private fun updateAttributes(oldNode: HTMLElement, newNode: HTMLElement) {
-    // removed attributes
-    for (name in oldNode.getAttributeNames()) {
-      val attr = oldNode.attributes[name]
-
-      if (attr != null && newNode.getAttribute(name) == null) {
-        oldNode.removeAttribute(name)
-      }
-    }
-
-    for (name in newNode.getAttributeNames()) {
-      val value = newNode.getAttribute(name)
-      val oldValue = oldNode.getAttribute(name)
-
-      if (value != oldValue) {
-        if (value != null) {
-          oldNode.setAttribute(name, value)
-        }else {
-          oldNode.removeAttribute(name)
-        }
-      }
-    }
-
-    if (newNode is HTMLInputElement && oldNode is HTMLInputElement) {
-      oldNode.value = newNode.value
-      oldNode.checked = newNode.checked
-    }
-  }
-
-  private fun updateChildren(oldNode: HTMLElement, newNode: HTMLElement) {
-    var oldIndex = 0
-    var newIndex = 0
-
-    if (Komponent.logReplaceEvent) {
-      console.log(
-          "updateChildren HTML old(${oldNode.childNodes.length})",
-          oldNode.innerHTML
-      )
-      console.log(
-          "updateChildren HTML new(${newNode.childNodes.length})",
-          newNode.innerHTML
-      )
-    }
-
-    while (newIndex < newNode.childNodes.length) {
-      if (Komponent.logReplaceEvent) {
-        console.log("Update Old/new", oldIndex, newIndex)
-      }
-      val newChildNode = newNode.childNodes[newIndex]
-
-      if (oldIndex < oldNode.childNodes.length) {
-        val oldChildNode = oldNode.childNodes[oldIndex]
-
-        if (oldChildNode != null && newChildNode != null) {
-          /*
-                    if (Komponent.logReplaceEvent) {
-                      console.log(">>> updateChildren old/new", oldChildNode, newChildNode)
-                    }
-          */
-
-          if (Komponent.logReplaceEvent) {
-            console.log("Update node Old/new", oldChildNode, newChildNode)
-          }
-
-          if (!hashesMatch(oldChildNode, newChildNode) && newChildNode is HTMLElement && oldChildNode is HTMLElement) {
-            if (Komponent.logReplaceEvent) {
-              console.log("Hashes don't match")
-            }
-
-            val oldHash = oldChildNode.getKompHash()
-            val newHash = newChildNode.getKompHash()
-
-            if (newHash >= 0) {
-              val oldNodeWithNewHashIndex = oldNode.childNodes.findNodeHashIndex(newHash)
-
-              if (Komponent.logReplaceEvent) {
-                console.log("oldNodeWithNewHashIndex", newHash, oldNodeWithNewHashIndex)
-              }
-
-              if (oldNodeWithNewHashIndex > oldIndex) {
-                if (oldHash >= 0) {
-                  val newNodeWithOldHashIndex = newNode.childNodes.findNodeHashIndex(oldHash)
-
-                  // remove i.o. swap
-                  if (newNodeWithOldHashIndex == -1) {
-                    if (Komponent.logReplaceEvent) {
-                      console.log("Old node missing in new tree, remove node", oldChildNode)
-                    }
-                    oldNode.removeChild(oldChildNode)
-                    continue
-                  }
-                }
-                val nodeWithHash = oldNode.childNodes[oldNodeWithNewHashIndex]
-
-                if (Komponent.logReplaceEvent) {
-                  console.log("nodeWithHash", nodeWithHash)
-                }
-                if (nodeWithHash != null) {
-                  if (Komponent.logReplaceEvent) {
-                    console.log(">-> swap nodes", oldNode)
-                  }
-
-                  oldNode.insertBefore(nodeWithHash, oldNode.childNodes[oldIndex])
-
-                  if (Komponent.logReplaceEvent) {
-                    console.log(">-> swapped nodes", oldNode)
-                  }
-                  newIndex++
-                  oldIndex++
-                  continue
-                }
-              } else if (oldHash >= 0 && newNode.childNodes.findNodeHashIndex(oldHash) > newIndex) {
-                if (Komponent.logReplaceEvent) {
-                  console.log("newNodeWithOldHashIndex", oldHash, newNode.childNodes.findNodeHashIndex(oldHash))
-                }
-
-                oldNode.insertBefore(newChildNode, oldChildNode)
-                oldIndex++
-                continue
-              }
-            }
-          }
-
-          val updatedNode = updateNode(oldChildNode, newChildNode)
-          if (updatedNode == newChildNode) {
-            if (oldChildNode is HTMLElement && newChildNode is HTMLElement) {
-              updateEvents(oldChildNode, newChildNode)
-            }
-            oldIndex++
-            continue
-          }
-        } else {
-          if (Komponent.logReplaceEvent) {
-            console.log("Null node", oldChildNode, newChildNode)
-          }
-        }
-
-        oldIndex++
-        newIndex++
-      } else {
-        if (Komponent.logReplaceEvent) {
-          console.log("Append Old/new/node", oldIndex, newIndex, newChildNode)
-        }
-        oldNode.append(newChildNode)
-
-        oldIndex++
-      }
-
-      /*
-            if (Komponent.logReplaceEvent) {
-              console.log("<<< Updated Old/new", oldNode.innerHTML, newNode.innerHTML)
-            }
-      */
-    }
-
-    while (oldIndex < oldNode.childNodes.length) {
-      oldNode.childNodes[oldIndex]?.also {
-        if (Komponent.logReplaceEvent) {
-          console.log("Remove old node", it)
-        }
-
-        oldNode.removeChild(it)
-      }
-    }
-  }
-
-  private fun updateEvents(oldNode: HTMLElement, newNode: HTMLElement) {
-    val oldEvents = (oldNode.asDynamic()[EVENT_PROPERTY] as? MutableList<String>) ?: mutableListOf()
-    val newEvents = (newNode.asDynamic()[EVENT_PROPERTY] as? MutableList<String>) ?: mutableListOf()
-
-    if (Komponent.logReplaceEvent) {
-      console.log("Update events", oldNode.getAttribute(EVENT_PROPERTY), newNode.getAttribute(EVENT_PROPERTY))
-    }
-
-    for (event in oldEvents) {
-      oldNode.removeKompEvent(event)
-    }
-
-    for (event in newEvents) {
-      val newNodeEvent = newNode.asDynamic()["event-$event"]
-
-      if (newNodeEvent != null) {
-        if (Komponent.logReplaceEvent) {
-          console.log("Set event $event on", oldNode)
-        }
-        oldNode.setKompEvent(event, newNodeEvent as ((Event) -> Unit))
-      }
-    }
-
-    if (newEvents.isEmpty()) {
-      oldNode.asDynamic()[EVENT_PROPERTY] = null
-    } else {
-      oldNode.asDynamic()[EVENT_PROPERTY] = newNode.asDynamic()[EVENT_PROPERTY]
-    }
-  }
-
-}

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

@@ -0,0 +1,158 @@
+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.EventListener
+import org.w3c.dom.get
+
+private fun Int.asSpaces(): String {
+  val result = StringBuilder()
+
+  repeat(this) {
+    result.append(" ")
+  }
+  return result.toString()
+}
+
+fun Element.printTree(indent: Int = 0): String {
+  val result = StringBuilder()
+
+  result.append(indent.asSpaces())
+  result.append(tagName)
+  if (this.namespaceURI != "http://www.w3.org/1999/xhtml") {
+    result.append(" [")
+    result.append(namespaceURI)
+    result.append("]")
+  }
+  result.append(" (")
+  var first = true
+  if (hasAttributes()) {
+    for (index in 0 until attributes.length) {
+      if (!first) {
+        result.append(", ")
+      } else {
+        first = false
+      }
+      result.append(attributes[index]?.localName)
+      result.append("=")
+      result.append(attributes[index]?.value)
+    }
+  }
+  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) {
+        result.append(it.printTree(indent + 2))
+      } else {
+        result.append((indent + 2).asSpaces())
+        result.append(it.textContent)
+        result.append("\n")
+      }
+    }
+  }
+  result.append(indent.asSpaces())
+  result.append("}\n")
+
+  return result.toString()
+}
+
+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)
+    }
+  }
+}
+
+internal fun Element.clearKompEvents() {
+  val events = getKompEvents()
+  for ((name, event) in getKompEvents()) {
+    removeEventListener(name, event)
+  }
+  events.clear()
+}
+
+internal fun Element.setKompEvent(name: String, event: (Event) -> Unit) {
+  val eventName: String = if (name.startsWith("on")) {
+    name.substring(2)
+  } else {
+    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) {
+    for (index in 0 until childNodes.length) {
+      if (childNodes[index] == this) {
+        return index
+      }
+    }
+  }
+
+  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

@@ -1,256 +1,407 @@
 package nl.astraeus.komp
 
 import kotlinx.browser.document
-import kotlinx.html.*
-import org.w3c.dom.*
-import org.w3c.dom.css.CSSStyleDeclaration
-import org.w3c.dom.events.Event
+import kotlinx.html.DefaultUnsafe
+import kotlinx.html.Entities
+import kotlinx.html.FlowOrMetaDataOrPhrasingContent
+import kotlinx.html.Tag
+import kotlinx.html.TagConsumer
+import kotlinx.html.Unsafe
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.HTMLSpanElement
+import org.w3c.dom.Node
+import org.w3c.dom.asList
+import org.w3c.dom.get
 
-@Suppress("NOTHING_TO_INLINE")
-inline fun HTMLElement.setKompEvent(name: String, noinline callback: (Event) -> Unit) {
-  val eventName = if (name.startsWith("on")) {
-    name.substring(2)
-  } else {
-    name
-  }
-  addEventListener(eventName, callback, null)
+private var currentElement: Element? = null
 
-  if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-    //asDynamic()[name] = callback
-    val events: MutableList<String> = (asDynamic()[EVENT_PROPERTY] as? MutableList<String>) ?: mutableListOf()
-
-    events.add(eventName)
-    asDynamic()[EVENT_PROPERTY] = events
-    asDynamic()["event-$eventName"] = callback
-  }
+interface HtmlConsumer : TagConsumer<Element> {
+  fun append(node: Element)
+  fun include(komponent: Komponent)
+  fun debug(block: HtmlConsumer.() -> Unit)
 }
 
-@Suppress("NOTHING_TO_INLINE")
-inline fun HTMLElement.removeKompEvent(name: String) {
-  val eventName = if (name.startsWith("on")) {
-    name.substring(2)
-  } else {
-    name
-  }
+fun FlowOrMetaDataOrPhrasingContent.currentElement(): Element =
+  currentElement ?: error("No current element defined!")
 
-  removeEventListener(eventName, asDynamic()["event-$eventName"] as ((Event) -> Unit), null)
-
-  if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-    //asDynamic()[name] = callback
-    val events: MutableList<String> = (asDynamic()[EVENT_PROPERTY] as? MutableList<String>) ?: mutableListOf()
-
-    events.remove(eventName)
-    asDynamic()["event-$eventName"] = null
-  }
-}
-
-fun HTMLElement.clearEvents() {
-  if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-    //asDynamic()[name] = callback
-    val events = getAttribute(EVENT_PROPERTY) ?: ""
-
-    for (eventName in events.split(",")) {
-      if (eventName.isNotBlank()) {
-        val event: (Event) -> Unit = asDynamic()["event-$eventName"]
-        removeEventListener(eventName, event)
-      }
-    }
-  }
-}
-
-interface HtmlConsumer : TagConsumer<HTMLElement> {
-  fun append(node: Node)
-}
-
-fun HTMLElement.setStyles(cssStyle: CSSStyleDeclaration) {
-  for (index in 0 until cssStyle.length) {
-    val propertyName = cssStyle.item(index)
-
-    style.setProperty(propertyName, cssStyle.getPropertyValue(propertyName))
-  }
-}
+private fun Node.asElement() = this as? HTMLElement
 
 class HtmlBuilder(
-  val komponent: Komponent,
-  val document: Document,
-  val baseHash: Int
+  private val komponent: Komponent?,
+  parent: Element,
+  childIndex: Int = 0
 ) : HtmlConsumer {
-  private val path = arrayListOf<HTMLElement>()
-  private var lastLeaved: HTMLElement? = null
+  private var currentPosition = arrayListOf<ElementIndex>()
+  private var inDebug = false
+  private var exceptionThrown = false
+  private var currentNode: Node? = null
+  private var firstTag: Boolean = true
+  var root: Element? = null
+
+  init {
+    currentPosition.add(ElementIndex(parent, childIndex))
+  }
+
+  override fun include(komponent: Komponent) {
+    if (
+      komponent.element != null &&
+      !komponent.memoizeChanged()
+    ) {
+      currentPosition.replace(komponent.element!!)
+      if (Komponent.logRenderEvent) {
+        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
+      )
+    }
+    currentPosition.nextElement()
+  }
+
+  override fun append(node: Element) {
+    currentPosition.replace(node)
+    currentPosition.nextElement()
+  }
+
+  override fun debug(block: HtmlConsumer.() -> Unit) {
+    val enableAssertions = Komponent.enableAssertions
+    Komponent.enableAssertions = true
+    inDebug = true
+
+    try {
+      block.invoke(this)
+    } finally {
+      inDebug = false
+      Komponent.enableAssertions = enableAssertions
+    }
+  }
+
+  private fun logReplace(msg: () -> String) {
+    if (Komponent.logReplaceEvent && inDebug) {
+      console.log(msg.invoke())
+    }
+  }
 
   override fun onTagStart(tag: Tag) {
-    val element: HTMLElement = when {
-      tag.namespace != null -> document.createElementNS(tag.namespace!!, tag.tagName).asDynamic()
-      else                  -> document.createElement(tag.tagName) as HTMLElement
+    logReplace {
+      "onTagStart, [${tag.tagName}, ${tag.namespace ?: ""}], currentPosition: $currentPosition"
     }
 
-    if (path.isNotEmpty()) {
-      path.last().appendChild(element)
+    currentNode = currentPosition.currentElement()
+
+    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" }
+      currentPosition.currentParent().appendChild(currentNode!!)
+    } else if (
+      !currentNode?.asElement()?.tagName.equals(tag.tagName, true) ||
+      (
+          tag.namespace != null &&
+              !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}"
+      }
+
+      currentNode = if (tag.namespace != null) {
+        document.createElementNS(tag.namespace, tag.tagName)
+      } else {
+        document.createElement(tag.tagName)
+      }
+
+      currentPosition.replace(currentNode!!)
     }
 
-    path.add(element)
-  }
+    currentElement = currentNode as? Element ?: currentElement
 
-  override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
-    when {
-      path.isEmpty()                                                 -> throw IllegalStateException("No current tag")
-      path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
-      else                                                           -> path.last().let { node ->
-        if (value == null) {
-          node.removeAttribute(attribute)
-        } else {
-          node.setAttribute(attribute, value)
-        }
+    if (currentNode is Element) {
+      if (firstTag) {
+        logReplace { "Setting root: $currentNode" }
+        root = currentNode as Element
+        firstTag = false
+      }
+
+      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, entry.value)
+        currentPosition.lastOrNull()?.setAttr?.add(entry.key)
       }
     }
+
+    currentPosition.push(currentNode!!)
   }
 
-  override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
-    when {
-      path.isEmpty()                                                 -> throw IllegalStateException("No current tag")
-      path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
-      else -> path.last().setKompEvent(event, value)
+  private fun checkTag(source: String, tag: Tag) {
+    check(currentElement != null) {
+      js("debugger;")
+      "No current tag ($source)"
     }
+    check(currentElement?.tagName.equals(tag.tagName, ignoreCase = true)) {
+      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]" }
+
+    if (Komponent.enableAssertions) {
+      checkTag("onTagAttributeChange", tag)
+    }
+
+    currentElement?.setKompAttribute(attribute, value)
+    if (value == null || value.isEmpty()) {
+      currentPosition.currentPosition()?.setAttr?.remove(attribute)
+    } else {
+      currentPosition.currentPosition()?.setAttr?.add(attribute)
+    }
+  }
+
+  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("onTagEvent", tag)
+    }
+
+    currentElement?.setKompEvent(event.lowercase(), value.asDynamic())
   }
 
   override fun onTagEnd(tag: Tag) {
-    var hash = 0
-    if (path.isEmpty() || path.last().tagName.toLowerCase() != tag.tagName.toLowerCase()) {
-      throw IllegalStateException("We haven't entered tag ${tag.tagName} but trying to leave")
+    logReplace {
+      "onTagEnd, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
     }
 
-    val element = path.last()
+    if (exceptionThrown) {
+      return
+    }
 
-    if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-      for (index in 0 until element.childNodes.length) {
-        val child = element.childNodes[index]
-        if (child is HTMLElement) {
-          hash = hash * 37 + child.getKompHash()
-        } else {
-          hash = hash * 37 + (child?.textContent?.hashCode() ?: 0)
-        }
+    while (currentPosition.currentElement() != null) {
+      currentPosition.currentElement()?.let {
+        it.parentElement?.removeChild(it)
       }
     }
 
-    for ((key, value) in tag.attributesEntries) {
-      if (key == "class") {
-        val classes = value.split(Regex("\\s+"))
-        val classNames = StringBuilder()
+    if (Komponent.enableAssertions) {
+      checkTag("onTagEnd", tag)
+    }
 
-        for (cls in classes) {
-          val cssStyle = komponent.declaredStyles[cls]
+    if (currentElement != null) {
+      val setAttrs: Set<String> = currentPosition.currentPosition()?.setAttr ?: setOf()
 
-          if (cssStyle != null) {
-            if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-              hash = hash * 37 + cssStyle.hashCode()
+      // 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)
             }
-
-            if (cls.endsWith(":hover")) {
-              val oldOnMouseOver = element.onmouseover
-              val oldOnMouseOut = element.onmouseout
-
-              element.onmouseover = {
-                element.setStyles(cssStyle)
-
-                oldOnMouseOver?.invoke(it)
-              }
-              element.onmouseout = {
-                cls.split(':').firstOrNull()?.let {
-                  komponent.declaredStyles[it]?.let { cssStyle ->
-                    element.setStyles(cssStyle)
-                  }
-                }
-
-                oldOnMouseOut?.invoke(it)
-              }
-            } else {
-              element.setStyles(cssStyle)
-            }
-          } else {
-            if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-              hash = hash * 37 + cls.hashCode()
-            }
-
-            classNames.append(cls)
-            classNames.append(" ")
           }
         }
-
-        element.className = classNames.toString()
-
-        if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-          val key_value = "${key}-${classNames}"
-          hash = hash * 37 + key_value.hashCode()
-        }
-      } else {
-        element.setAttribute(key, value)
-
-        if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-          val key_value = "${key}-${value}"
-          hash = hash * 37 + key_value.hashCode()
-        }
       }
     }
 
-    if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
-      element.setKompHash(baseHash * 53 + hash)
-    }
-    lastLeaved = path.removeAt(path.lastIndex)
+    currentPosition.pop()
+
+    currentNode = currentPosition.currentElement()
+    currentElement = currentNode as? Element ?: currentElement
+
+    currentPosition.nextElement()
+
+    currentElement = currentElement?.parentElement as? HTMLElement
+
+    //logReplace"onTagEnd, popped: $currentElement")
   }
 
   override fun onTagContent(content: CharSequence) {
-    if (path.isEmpty()) {
-      throw IllegalStateException("No current DOM node")
+    //logReplace"onTagContent, [$content]")
+
+    check(currentElement != null) {
+      "No current DOM node"
     }
 
-    path.last().appendChild(document.createTextNode(content.toString()))
+    //logReplace"Tag content: $content")
+    if (
+      currentElement?.nodeType != Node.TEXT_NODE ||
+      currentElement?.textContent != content.toString()
+    ) {
+      currentElement?.textContent = content.toString()
+    }
+
+    currentPosition.nextElement()
   }
 
   override fun onTagContentEntity(entity: Entities) {
-    if (path.isEmpty()) {
-      throw IllegalStateException("No current DOM node")
+    //logReplace"onTagContentEntity, [${entity.text}]")
+
+    check(currentElement != null) {
+      "No current DOM node"
     }
 
-    // stupid hack as browsers don't support createEntityReference
-    val s = document.createElement("span") as HTMLElement
+    val s = document.createElement("span") as HTMLSpanElement
     s.innerHTML = entity.text
-    path.last().appendChild(s.childNodes.asList().first { it.nodeType == Node.TEXT_NODE })
-
-    // other solution would be
-    //        pathLast().innerHTML += entity.text
-  }
-
-  override fun append(node: Node) {
-    path.last().appendChild(node)
+    currentPosition.replace(
+      s.childNodes.asList().firstOrNull() ?: document.createTextNode(entity.text)
+    )
+    currentPosition.nextElement()
   }
 
   override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
     with(DefaultUnsafe()) {
       block()
 
-      path.last().innerHTML += toString()
+      val textContent = toString()
+
+      //logReplace"onTagContentUnsafe, [$textContent]")
+
+      var namespace: String? = null
+
+      if (currentPosition.currentParent().nodeType == 1.toShort()) {
+        val element = currentPosition.currentParent() as Element
+
+        namespace = when (Komponent.unsafeMode) {
+          UnsafeMode.UNSAFE_ALLOWED -> {
+            element.namespaceURI
+          }
+          UnsafeMode.UNSAFE_SVG_ONLY -> {
+            if (element.namespaceURI == "http://www.w3.org/2000/svg") {
+              element.namespaceURI
+            } else {
+              null
+            }
+          }
+          else -> {
+            null
+          }
+        }
+      }
+
+      //logReplace"onTagContentUnsafe, namespace: [$namespace]")
+
+      if (Komponent.unsafeMode == UnsafeMode.UNSAFE_ALLOWED ||
+            (
+              Komponent.unsafeMode == UnsafeMode.UNSAFE_SVG_ONLY &&
+              namespace == "http://www.w3.org/2000/svg"
+            )
+      ) {
+        if (currentElement?.innerHTML != textContent) {
+          currentElement?.innerHTML += textContent
+        }
+      } else if (currentElement?.textContent != textContent) {
+        currentElement?.textContent = textContent
+      }
+
+      currentPosition.nextElement()
     }
   }
 
   override fun onTagComment(content: CharSequence) {
-    if (path.isEmpty()) {
-      throw IllegalStateException("No current DOM node")
-    }
+    //logReplace"onTagComment, [$content]")
 
-    path.last().appendChild(document.createComment(content.toString()))
+    check(currentElement != null) {
+      "No current DOM node"
+    }
+    currentElement?.appendChild(
+      document.createComment(content.toString())
+    )
+
+    currentPosition.nextElement()
   }
 
-  override fun finalize(): HTMLElement = lastLeaved?.asR() ?: throw IllegalStateException("We can't finalize as there was no tags")
+  fun onTagError(tag: Tag, exception: Throwable) {
+    exceptionThrown = true
 
-  @Suppress("UNCHECKED_CAST")
-  private fun HTMLElement.asR(): HTMLElement = this.asDynamic()
+    if (exception !is KomponentException) {
+      val position = mutableListOf<Element>()
+      var ce = currentElement
+      while (ce != null) {
+        position.add(ce)
+        ce = ce.parentElement
+      }
+      val builder = StringBuilder()
+      for (element in position.reversed()) {
+        builder.append("> ")
+        builder.append(element.tagName)
+        builder.append("[")
+        builder.append(element.findElementIndex())
+        builder.append("]")
+        if (element.hasAttribute("class")) {
+          builder.append("(")
+          builder.append(element.getAttribute("class"))
+          builder.append(")")
+        }
+        builder.append(" ")
+      }
+
+      throw KomponentException(
+        komponent,
+        currentElement,
+        tag,
+        builder.toString(),
+        exception.message ?: "error",
+        exception
+      )
+    } else {
+      throw exception
+    }
+  }
+
+  override fun finalize(): Element {
+    //logReplace"finalize, currentPosition: $currentPosition")
+    return root ?: throw IllegalStateException(
+      "We can't finalize as there was no tags"
+    )
+  }
 
   companion object {
-    fun create(content: HtmlBuilder.() -> Unit): HTMLElement {
-      val komponent = DummyKomponent()
-      val consumer = HtmlBuilder(komponent, document, komponent.hashCode())
+    fun create(content: HtmlBuilder.() -> Unit): Element {
+      val container = document.createElement("div") as HTMLElement
+      val consumer = HtmlBuilder(null, container)
       content.invoke(consumer)
-      return consumer.finalize()
+      return consumer.root ?: error("No root element found after render!")
     }
   }
 }

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

@@ -1,176 +1,211 @@
 package nl.astraeus.komp
 
-import kotlinx.browser.document
 import kotlinx.browser.window
-import kotlinx.html.div
-import org.w3c.dom.HTMLDivElement
+import kotlinx.html.FlowOrMetaDataOrPhrasingContent
+import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
-import org.w3c.dom.Node
-import org.w3c.dom.css.CSSStyleDeclaration
-import kotlin.reflect.KProperty
+import org.w3c.dom.get
 
-const val KOMP_KOMPONENT = "komp-komponent"
+private var currentKomponent: Komponent? = null
 
-typealias CssStyle = CSSStyleDeclaration.() -> Unit
+fun FlowOrMetaDataOrPhrasingContent.currentKomponent(): Komponent =
+  currentKomponent ?: error("No current komponent defined! Only call from render code!")
 
-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()
-    }
-  }
+enum class UnsafeMode {
+  UNSAFE_ALLOWED,
+  UNSAFE_DISABLED,
+  UNSAFE_SVG_ONLY
 }
 
-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) {
-      component.update()
+var Element.memoizeHash: String?
+  get() {
+    return getAttribute("memoize-hash")
+  }
+  set(value) {
+    if (value != null) {
+      setAttribute("memoize-hash", value.toString())
     } else {
-      component.refresh()
-    }
-
-    component.element?.also {
-      append(it)
-    }
-  } else {
-    append(component.create())
-  }
-}
-
-class DummyKomponent: Komponent() {
-  override fun HtmlBuilder.render() {
-    div {
-      + "dummy"
+      removeAttribute("memoize-hash")
     }
   }
-}
-
-enum class UpdateStrategy {
-  REPLACE,
-  DOM_DIFF
-}
 
 abstract class Komponent {
-  private var createIndex = getNextCreateIndex()
+  val createIndex = getNextCreateIndex()
   private var dirty: Boolean = true
 
-  var element: Node? = null
-  val declaredStyles: MutableMap<String, CSSStyleDeclaration> = HashMap()
+  var element: Element? = null
+
+  open fun create(parent: Element, childIndex: Int? = null) {
+    onBeforeUpdate()
+    val builder = HtmlBuilder(
+      this,
+      parent,
+      childIndex ?: parent.childNodes.length
+    )
 
-  open fun create(): HTMLElement {
-    val consumer = HtmlBuilder(this, document, this.createIndex)
     try {
-      consumer.render()
-    } catch (e: Throwable) {
-      println("Exception occurred in ${this::class.simpleName}.render() call!")
-
-      throw e
-    }
-    val result = consumer.finalize()
-
-    if (result.id.isBlank()) {
-      result.id = "komp_${createIndex}"
+      currentKomponent = this
+      builder.render()
+    } catch(e: KomponentException) {
+      errorHandler(e)
+    } finally {
+      currentKomponent = null
     }
 
-    element = result
-    element.asDynamic()[KOMP_KOMPONENT] = this
+    element = builder.root
+    updateMemoizeHash()
+    onAfterUpdate()
+  }
 
-    dirty = false
+  fun memoizeChanged() = element?.memoizeHash == null || element?.memoizeHash != fullMemoizeHash()
 
-    return result
+  fun updateMemoizeHash() {
+    element?.memoizeHash = fullMemoizeHash()
+  }
+
+  private fun fullMemoizeHash(): String? {
+    val generated = generateMemoizeHash()
+
+    return if (generated != null) {
+      "${this::class.simpleName}:${generateMemoizeHash()}"
+    } else {
+      null
+    }
   }
 
   abstract fun HtmlBuilder.render()
 
+  /**
+   * This method is called after the Komponent is updated
+   *
+   * note: it's also called at first render
+   */
+  open fun onAfterUpdate() {}
+
+  /**
+   * This method is called before the Komponent is updated
+   * and before memoizeHash is checked
+   *
+   * note: it's also called at first render
+   */
+  open fun onBeforeUpdate() {}
+
   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) {
-      imp(style)
-    }
-    block(style)
-    declaredStyles[className] = style
+  /**
+   * Request an immediate update of this Komponent
+   *
+   * This will run immediately, make sure Komponents are not rendered multiple times
+   * Any scheduled updates will be run as well
+   */
+  fun requestImmediateUpdate() {
+    dirty = true
+    runUpdateImmediately(this)
   }
 
-  open fun update() {
+  /**
+   * 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
+   *
+   * @deprecated
+   */
+  @Deprecated(
+    "Deprecated to avoid confusing with requestUpdate, use renderUpdate instead",
+    ReplaceWith("renderUpdate"),
+    level = DeprecationLevel.WARNING
+  )
+  protected fun update() {
     refresh()
   }
 
-  internal fun refresh() {
-    val oldElement = element
+  /**
+   * 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()
+  }
 
-    if (logRenderEvent) {
-      console.log("Rendering", this)
+  /**
+   * If this function returns a value it will be stored and on the next render it will be compared.
+   *
+   * The render will only happen if the hash is not null and has changed
+   */
+  open fun generateMemoizeHash(): Int? = null
+
+  private fun refresh() {
+    val currentElement = element
+
+    check(currentElement != null) {
+      error("element is null")
     }
-    val newElement = create()
 
-    if (oldElement != null) {
-      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)
-        }
-        DiffPatch.updateNode(oldElement, newElement)
+    val parent = currentElement.parentElement as? HTMLElement ?: error("parent is null!?")
+    var childIndex = 0
+    for (index in 0 until parent.childNodes.length) {
+      if (parent.childNodes[index] == currentElement) {
+        childIndex = index
       }
     }
+    val builder = HtmlBuilder(this, parent, childIndex)
 
+    try {
+      currentKomponent = this
+      builder.render()
+    } catch(e: KomponentException) {
+      errorHandler(e)
+    } finally {
+      currentKomponent = null
+    }
+
+    element = builder.root
     dirty = false
   }
 
-  @JsName("remove")
-  fun remove() {
-    check(updateStrategy == UpdateStrategy.REPLACE) {
-      "remote only works with UpdateStrategy.REPLACE"
-    }
-    element?.let {
-      val parent = it.parentElement ?: throw IllegalArgumentException("Element has no parent!?")
-
-      if (logReplaceEvent) {
-        console.log("Remove", it)
-      }
-
-      parent.removeChild(it)
-    }
+  override fun toString(): String {
+    return "${this::class.simpleName}"
   }
 
   companion object {
     private var nextCreateIndex: Int = 1
     private var updateCallback: Int? = null
+    private var errorHandler: (KomponentException) -> Unit = { ke ->
+      console.error("Render error in Komponent", ke)
+
+      ke.element?.innerHTML = """<div class="komponent-error">Render error!</div>"""
+
+      window.alert("""
+        Error in Komponent '${ke.komponent}', ${ke.message}
+        Tag: ${ke.tag.tagName}
+        See console log for details
+        Position: ${ke.position}""".trimIndent()
+      )
+    }
     private var scheduledForUpdate = mutableSetOf<Komponent>()
+    private var interceptor: (Komponent, () -> Unit) -> Unit = { _, block -> block() }
 
     var logRenderEvent = false
     var logReplaceEvent = false
-    var updateStrategy = UpdateStrategy.DOM_DIFF
+    var enableAssertions = false
+    var unsafeMode = UnsafeMode.UNSAFE_DISABLED
 
-    fun create(parent: HTMLElement, component: Komponent, insertAsFirst: Boolean = false) {
-      val element = component.create()
+    fun create(parent: HTMLElement, component: Komponent) {
+      component.create(parent)
+    }
 
-      if (insertAsFirst && parent.childElementCount > 0) {
-        parent.insertBefore(element, parent.firstChild)
-      } else {
-        parent.appendChild(element)
-      }
+    fun setErrorHandler(handler: (KomponentException) -> Unit) {
+      errorHandler = handler
+    }
+
+    fun setUpdateInterceptor(block: (Komponent, () -> Unit) -> Unit) {
+      interceptor = block
     }
 
     private fun getNextCreateIndex() = nextCreateIndex++
@@ -185,6 +220,11 @@ abstract class Komponent {
       }
     }
 
+    private fun runUpdateImmediately(komponent: Komponent) {
+      scheduledForUpdate.add(komponent)
+      runUpdate()
+    }
+
     private fun runUpdate() {
       val todo = scheduledForUpdate.sortedBy { komponent -> komponent.createIndex }
 
@@ -193,20 +233,31 @@ abstract class Komponent {
       }
 
       todo.forEach { next ->
-        val element = next.element
+        interceptor(next) {
+          val element = next.element
 
-        if (element is HTMLElement) {
-          if (document.getElementById(element.id) != null) {
+          if (element is HTMLElement) {
             if (next.dirty) {
               if (logRenderEvent) {
                 console.log("Update dirty ${next.createIndex}")
               }
-              next.update()
+              val memoizeHash = next.generateMemoizeHash()
+
+              if (next.memoizeChanged()) {
+                next.onBeforeUpdate()
+                next.renderUpdate()
+                next.updateMemoizeHash()
+                next.onAfterUpdate()
+              } else if (logRenderEvent) {
+                console.log("Skipped render, memoizeHash is equal $next-[$memoizeHash]")
+              }
             } else {
               if (logRenderEvent) {
                 console.log("Skip ${next.createIndex}")
               }
             }
+          } else {
+            console.log("Komponent element is null", next, element)
           }
         }
       }

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

@@ -0,0 +1,18 @@
+package nl.astraeus.komp
+
+import kotlinx.html.Tag
+import org.w3c.dom.Element
+
+class KomponentException(
+  val komponent: Komponent?,
+  val element: Element?,
+  val tag: Tag,
+  val position: String,
+  message: String,
+  cause: Throwable
+) : RuntimeException(message, cause) {
+
+  override fun toString(): String {
+    return "KompException(message='$message', tag='$tag', position='$position')"
+  }
+}

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

@@ -0,0 +1,54 @@
+package nl.astraeus.komp
+
+inline fun <reified T> Komponent.mutableCollectionState(
+  initialValue: MutableCollection<T>
+): MutableCollection<T> = MutableCollectionStateDelegate(
+  this,
+  initialValue
+)
+
+class MutableCollectionStateDelegate<T>(
+  val komponent: Komponent,
+  val collection: MutableCollection<T>
+): MutableCollection<T> by collection {
+
+  override fun add(element: T): Boolean {
+    komponent.requestUpdate()
+
+    return collection.add(element)
+  }
+
+  override fun addAll(elements: Collection<T>): Boolean {
+    komponent.requestUpdate()
+
+    return collection.addAll(elements)
+  }
+
+  override fun clear() {
+    komponent.requestUpdate()
+
+    collection.clear()
+  }
+
+  // todo: return iterator wrapper to update at changes?
+  //override fun iterator(): MutableIterator<T> = collection.iterator()
+
+  override fun remove(element: T): Boolean {
+    komponent.requestUpdate()
+
+    return collection.remove(element)
+  }
+
+  override fun removeAll(elements: Collection<T>): Boolean {
+    komponent.requestUpdate()
+
+    return collection.removeAll(elements)
+  }
+
+  override fun retainAll(elements: Collection<T>): Boolean {
+    komponent.requestUpdate()
+
+    return collection.retainAll(elements)
+  }
+
+}

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

@@ -0,0 +1,56 @@
+package nl.astraeus.komp
+
+import kotlin.reflect.KProperty
+
+interface Delegate<T> {
+
+  operator fun getValue(
+    thisRef: Any?,
+    property: KProperty<*>
+  ): T
+
+  operator fun setValue(
+    thisRef: Any?,
+    property: KProperty<*>,
+    value: T
+  )
+
+}
+
+open class StateDelegate<T>(
+  val komponent: Komponent,
+  initialValue: T
+) : Delegate<T> {
+  private var value: T = initialValue
+
+  init {
+    if (value is MutableCollection<*>) {
+      error("Use mutableList to create a collection!")
+    }
+  }
+
+  override operator fun getValue(
+    thisRef: Any?,
+    property: KProperty<*>
+  ): T {
+    return value
+  }
+
+  override 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
+): Delegate<T> = StateDelegate(
+  this,
+  initialValue
+)

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

@@ -1,132 +1,244 @@
 package nl.astraeus.komp
 
-import kotlinx.html.*
+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 org.w3c.dom.HTMLElement
-import org.w3c.dom.Node
-import org.w3c.dom.get
+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
-import kotlin.test.assertTrue
 
-fun nodesEqual(node1: Node, node2: Node): Boolean {
-  if (node1.childNodes.length != node1.childNodes.length) {
-    return false
+class TestKomponent : Komponent() {
+  override fun HtmlBuilder.render() {
+    div {
+      +"Test"
+    }
   }
-  if (node1 is HTMLElement && node2 is HTMLElement) {
-    if (node1.attributes.length != node2.attributes.length) {
-      return false
-    }
-    for (index in 0 until node1.attributes.length) {
-      node1.attributes[index]?.also { attr1 ->
-        val attr2 = node2.getAttribute(attr1.name)
+}
 
-        if (attr1.value != attr2) {
-          return false
-        }
-      }
+class Child1 : Komponent() {
+  override fun HtmlBuilder.render() {
+    div {
+      +"Child 1"
     }
-    for (index in 0 until node1.childNodes.length) {
-      node1.childNodes[index]?.also { child1 ->
-        node2.childNodes[index]?.also { child2 ->
-          if (!nodesEqual(child1, child2)) {
-            return false
+  }
+}
+
+class Child2 : Komponent() {
+  override fun HtmlBuilder.render() {
+    div {
+      id ="1234"
+      +"Child 2"
+    }
+  }
+}
+
+class SimpleKomponent : Komponent() {
+  var hello = true
+  var append = HtmlBuilder.create {
+    p {
+      +"Appended"
+    }
+  }
+
+  override fun HtmlBuilder.render() {
+    div("div_class") {
+      input(InputType.checkBox) {
+        name = "helloInput"
+        checked = hello
+      }
+      span {
+        svg {
+          unsafe {
+            +"""
+              <p bla>
+            """.trimIndent()
+          }
+        }
+        if (hello) {
+          div {
+            +"Hello"
+          }
+        } else {
+          span {
+            +"Good bye"
           }
         }
       }
+      div {
+        if (hello) {
+          id = "123"
+          +"div text"
+        } else {
+          +"div text goodbye"
+        }
+
+        onClickFunction = if (hello) {
+          {
+            println("onClick")
+          }
+        } else {
+          {
+            println("onClick 2")
+          }
+        }
+      }
+      if (hello) {
+        span {
+          +"2nd span"
+        }
+      }
+      //append(append)
+      if (hello) {
+        include(Child1())
+      } else {
+        include(Child2())
+      }
+      //append(append)
+    }
+  }
+
+}
+
+class IncludeKomponent(
+  var text: String = "My Text"
+) : Komponent() {
+
+  override fun generateMemoizeHash(): Int = text.hashCode()
+
+  override fun HtmlBuilder.render() {
+    span {
+      +text
+    }
+  }
+}
+
+class ReplaceKomponent : Komponent() {
+  val includeKomponent = IncludeKomponent("Other text")
+  var includeSpan = true
+
+  override fun generateMemoizeHash(): Int = includeSpan.hashCode() * 7 + includeKomponent.generateMemoizeHash()
+
+  override fun HtmlBuilder.render() {
+    div {
+      +"Child 2"
+
+      div {
+        if (includeSpan) {
+          for (index in 0 ..< 3) {
+            extracted(index)
+          }
+        }
+
+        include(includeKomponent)
+      }
+    }
+  }
+
+  private fun HtmlBuilder.extracted(index: Int) {
+    span {
+      i("fas fa-eye") {
+        + ("span" + (index+1))
+      }
     }
   }
-  return true
 }
 
 class TestUpdate {
 
   @Test
-  fun testCompare1() {
-    val dom1 = HtmlBuilder.create {
-      div {
-        div(classes = "bla") {
-          span {
-            +" Some Text "
-          }
-          table {
-            tr {
-              td {
-                +"Table column"
-              }
-            }
-          }
-        }
-      }
-    }
+  fun testUpdateWithEmpty() {
+    val div = document.createElement("div") as HTMLDivElement
+    val rk = ReplaceKomponent()
 
-    val dom2 = HtmlBuilder.create {
-      div {
-        span {
-          id = "123"
+    Komponent.logRenderEvent = true
 
-          +"New dom!"
-        }
-        input {
-          value = "bla"
-        }
-      }
-    }
+    Komponent.create(div, rk)
 
-    DiffPatch.updateNode(dom1, dom2)
+    println("ReplaceKomponent: ${div.printTree()}")
 
-    assertTrue(nodesEqual(dom1, dom2), "Updated dom not equal to original")
+    rk.requestImmediateUpdate()
+
+    println("ReplaceKomponent: ${div.printTree()}")
+
+    rk.requestImmediateUpdate()
+
+    println("ReplaceKomponent: ${div.printTree()}")
+
+    rk.includeSpan = false
+    rk.requestImmediateUpdate()
+
+    println("ReplaceKomponent: ${div.printTree()}")
+
+    rk.includeSpan = true
+    rk.includeKomponent.text = "New Text"
+    rk.requestImmediateUpdate()
+
+    println("ReplaceKomponent: ${div.printTree()}")
   }
 
   @Test
-  fun testCompare2() {
-    val dom1 = HtmlBuilder.create {
-      div {
-        div(classes = "bla") {
-          span {
-            +" Some Text "
-          }
-          table {
-            tr {
-              th {
-                + "Header"
-              }
+  fun testSimpleKomponent() {
+    val sk = SimpleKomponent()
+    val div = document.createElement("div") as HTMLDivElement
+
+    Komponent.create(div, sk)
+
+    println("SimpleKomponent: ${div.printTree()}")
+
+    sk.hello = false
+    sk.requestImmediateUpdate()
+
+    println("SimpleKomponent updated: ${div.printTree()}")
+  }
+
+  @Test
+  fun testCreate() {
+    var elemTest: Element? = null
+    val element = HtmlBuilder.create {
+      div(classes = "div_class") {
+        classes = classes + "bla'"
+        id = "123"
+        +"Test"
+
+        span("span_class") {
+          +"Span"
+
+          elemTest = currentElement()
+        }
+
+        table {
+          tr {
+            td {
+              +"column 1"
             }
-            tr {
-              td {
-                +"Table column"
-              }
+            td {
+              +"column 2"
             }
           }
         }
       }
     }
 
-    val dom2 = HtmlBuilder.create {
-      div {
-        div {
-          span {
-            + "Other text"
-          }
-        }
-        span {
-          id = "123"
-
-          +"New dom!"
-        }
-        input {
-          value = "bla"
-
-          onClickFunction = {
-            println("Clickerdyclick!")
-          }
-        }
-      }
-    }
-
-    Komponent.logReplaceEvent = true
-    DiffPatch.updateNode(dom1, dom2)
-
-    assertTrue(nodesEqual(dom1, dom2), "Updated dom not equal to original")
+    println("Element: ${element.printTree()}")
+    println("divTst: ${elemTest?.printTree()}")
+    println("span class: ${
+      elemTest?.getAttributeNames()?.joinToString
+      { "," }
+    }"
+    )
   }
 
 }