Update to 0.2.5-SNAPSHOT

0.2.4 Release
Fix new element being referenced in Komponent instead of old not updated one (in DOM_DIFF strategy)
2021-02-10 13:16:02 +01:00 · 2021-02-10 13:15:14 +01:00 · 2021-02-05 11:18:11 +01:00 · 2021-01-01 19:45:05 +01:00
11 changed files with 583 additions and 558 deletions
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,11 +1,11 @@

 plugins {
-    kotlin("multiplatform") version "1.4.32"
+    kotlin("multiplatform") version "1.4.30"
    `maven-publish`
 }

 group = "nl.astraeus"
-version = "0.3.0-SNAPSHOT"
+version = "0.2.5-SNAPSHOT"

 repositories {
    mavenCentral()
@@ -50,34 +50,34 @@ kotlin {

 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
+        maven {
+            name = "releases"
+            // change to point to your repo, e.g. http://my.org/repo
+            url = uri("http://nexus.astraeus.nl/nexus/content/repositories/releases")
+            credentials {
+                val nexusUsername: String by project
+                val nexusPassword: String by project

-                    username = nexusUsername
-                    password = nexusPassword
-                }
+                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
+        }
+        maven {
+            name = "snapshots"
+            // change to point to your repo, e.g. http://my.org/repo
+            url = uri("http://nexus.astraeus.nl/nexus/content/repositories/snapshots")
+            credentials {
+                val nexusUsername: String by project
+                val nexusPassword: String by project

-                    username = nexusUsername
-                    password = nexusPassword
-                }
+                username = nexusUsername
+                password = nexusPassword
            }
-        } else {
-            println("Publishing disabled properties not found.")
        }
    }
    publications {
-        val kotlinMultiplatform by getting {}
+        val kotlinMultiplatform by getting {
+            //artifactId = "kotlin-css-generator"
+        }
    }
 }
--- a/komp.commonMain.iml
+++ b/komp.commonMain.iml
@@ -1,8 +1,8 @@
 <?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.3.0-SNAPSHOT" type="JAVA_MODULE" version="4">
+<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.4-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.8]/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">
+      <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>
@@ -13,13 +13,13 @@
          </option>
          <option name="pluginClasspaths">
            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.32/49656d531bfab9d6e45d3f27bc4d03b542d6766/kotlin-scripting-jvm-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.32/6abda0fe69677f0e46e7539fd185e4bd093b7258/kotlin-scripting-common-1.4.32.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-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.32/461367948840adbb0839c51d91ed74ef4a9ccb52/kotlin-stdlib-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.32/ef50bfa2c0491a11dcc35d9822edbfd6170e1ea2/kotlin-stdlib-common-1.4.32.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.32/bac50b0748be017dbc13fc1cb7231b1c9da0e106/kotlin-script-runtime-1.4.32.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" />
@@ -32,7 +32,7 @@
    <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.32" level="project" />
+    <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>
--- a/komp.commonTest.iml
+++ b/komp.commonTest.iml
@@ -1,8 +1,8 @@
 <?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.3.0-SNAPSHOT" type="JAVA_MODULE" version="4">
+<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.4-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.8]/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">
+      <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>
@@ -16,13 +16,13 @@
          </option>
          <option name="pluginClasspaths">
            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.32/49656d531bfab9d6e45d3f27bc4d03b542d6766/kotlin-scripting-jvm-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.32/6abda0fe69677f0e46e7539fd185e4bd093b7258/kotlin-scripting-common-1.4.32.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-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.32/461367948840adbb0839c51d91ed74ef4a9ccb52/kotlin-stdlib-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.32/ef50bfa2c0491a11dcc35d9822edbfd6170e1ea2/kotlin-stdlib-common-1.4.32.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.32/bac50b0748be017dbc13fc1cb7231b1c9da0e106/kotlin-script-runtime-1.4.32.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" />
@@ -36,9 +36,9 @@
    <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.32" 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.32" 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>
--- a/komp.iml
+++ b/komp.iml
@@ -1,5 +1,5 @@
 <?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.3.0-SNAPSHOT" type="JAVA_MODULE" version="4">
+<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.4-SNAPSHOT" type="JAVA_MODULE" version="4">
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <content url="file://$MODULE_DIR$">
--- a/komp.ipr
+++ b/komp.ipr
@@ -49,18 +49,6 @@
        <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>
-    <artifact type="jar" name="komp-jslegacy-0.3.0-SNAPSHOT">
-      <output-path>$PROJECT_DIR$/build/libs</output-path>
-      <root id="archive" name="komp-jslegacy-0.3.0-SNAPSHOT.jar">
-        <element id="module-output" name="komp.jsMain" />
-      </root>
-    </artifact>
  </component>
  <component name="CheckStyle-IDEA">
    <option name="configuration">
@@ -267,8 +255,6 @@
      <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">
@@ -380,104 +366,50 @@
      </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.32" type="kotlin.common">
+    <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.32/ef50bfa2c0491a11dcc35d9822edbfd6170e1ea2/kotlin-stdlib-common-1.4.32.jar!/" />
+        <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.32/f3e47c26a177728549b3dd2a624fec333aa17b36/kotlin-stdlib-common-1.4.32-sources.jar!/" />
+        <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.32" type="kotlin.js">
+    <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.32/8dca0e318b64909eecfb2d00a9d045562f3e66f8/kotlin-stdlib-js-1.4.32.jar!/" />
+        <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.32/5729944dc91bf28689461fe44b9e401fd41a84a7/kotlin-stdlib-js-1.4.32-sources.jar!/" />
+        <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.32" type="kotlin.common">
+    <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.32/f242cb223feb6d44e79588c26ca66bf57b0bc3a8/kotlin-test-annotations-common-1.4.32.jar!/" />
+        <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.32/57512e29ee20defe37d54ce19507d599b0f2113/kotlin-test-annotations-common-1.4.32-sources.jar!/" />
+        <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.32" type="kotlin.common">
+    <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.32/a10168dd408319a4af03763ad11f12e0fc1fc5ba/kotlin-test-common-1.4.32.jar!/" />
+        <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.32/d1818d1bdc457b51289f006884a260b56a55cb77/kotlin-test-common-1.4.32-sources.jar!/" />
+        <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.32" type="kotlin.js">
+    <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.32/f4b4bf663acffeff2a664677b9e780f206f6842f/kotlin-test-js-1.4.32.jar!/" />
+        <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.32/8e70170db077d3f421c3fb6d24468b3938990f4a/kotlin-test-js-1.4.32-sources.jar!/" />
+        <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">
--- a/komp.jsMain.iml
+++ b/komp.jsMain.iml
@@ -1,8 +1,8 @@
 <?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.3.0-SNAPSHOT" type="JAVA_MODULE" version="4">
+<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.4-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">
+      <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>
@@ -24,11 +24,11 @@
          </option>
          <option name="pluginClasspaths">
            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.32/bac50b0748be017dbc13fc1cb7231b1c9da0e106/kotlin-script-runtime-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.32/6abda0fe69677f0e46e7539fd185e4bd093b7258/kotlin-scripting-common-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.32/49656d531bfab9d6e45d3f27bc4d03b542d6766/kotlin-scripting-jvm-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.32/ef50bfa2c0491a11dcc35d9822edbfd6170e1ea2/kotlin-stdlib-common-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.32/461367948840adbb0839c51d91ed74ef4a9ccb52/kotlin-stdlib-1.4.32.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" />
+              <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>
@@ -53,7 +53,7 @@
    <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.32" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.4.32" 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>
--- a/komp.jsTest.iml
+++ b/komp.jsTest.iml
@@ -1,12 +1,12 @@
 <?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.3.0-SNAPSHOT" type="JAVA_MODULE" version="4">
+<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.4-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">
+      <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.commonTest</sourceSet>
          <sourceSet>komp.jsMain</sourceSet>
+          <sourceSet>komp.commonTest</sourceSet>
          <sourceSet>komp.commonMain</sourceSet>
        </sourceSets>
        <newMppModelJpsModuleKind>COMPILATION_AND_SOURCE_SET_HOLDER</newMppModelJpsModuleKind>
@@ -29,11 +29,11 @@
          </option>
          <option name="pluginClasspaths">
            <array>
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-script-runtime/1.4.32/bac50b0748be017dbc13fc1cb7231b1c9da0e106/kotlin-script-runtime-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-common/1.4.32/6abda0fe69677f0e46e7539fd185e4bd093b7258/kotlin-scripting-common-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-scripting-jvm/1.4.32/49656d531bfab9d6e45d3f27bc4d03b542d6766/kotlin-scripting-jvm-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.4.32/ef50bfa2c0491a11dcc35d9822edbfd6170e1ea2/kotlin-stdlib-common-1.4.32.jar" />
-              <option value="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.4.32/461367948840adbb0839c51d91ed74ef4a9ccb52/kotlin-stdlib-1.4.32.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" />
+              <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>
@@ -59,12 +59,12 @@
    <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.32" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.4.32" 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.32" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-test-common:1.4.32" level="project" />
-    <orderEntry type="library" scope="TEST" name="Gradle: org.jetbrains.kotlin:kotlin-test-annotations-common:1.4.32" 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>
--- a/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt
+++ b/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt
@@ -3,203 +3,365 @@ package nl.astraeus.komp
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.Node
+import org.w3c.dom.NodeList
+import org.w3c.dom.events.Event
 import org.w3c.dom.get

-object DiffPatch {
+const val HASH_VALUE = "komp-hash-value"

-  private fun updateKomponentOnNode(element: Node, newVdom: VDOMElement) {
-    val komponent = newVdom.komponent
-    if (komponent != null) {
-      if (Komponent.logReplaceEvent) {
-        console.log("Keeping oldNode, set oldNode element on Komponent", element, komponent)
-      }
-      komponent.element = element
+//const val HASH_ATTRIBUTE = "data-komp-hash"
+const val EVENT_ATTRIBUTE = "data-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
    }
  }

-  fun updateNode(element: Node, oldVdom: VDOMElement, newVdom: VDOMElement): Node {
-    if (oldVdom.hash == newVdom.hash) {
+  return -1
+}
+
+object DiffPatch {
+
+  fun hashesMatch(oldNode: Node, newNode: Node): Boolean {
+    return (
+        oldNode is HTMLElement &&
+        newNode is HTMLElement &&
+        oldNode.nodeName == newNode.nodeName &&
+        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("Hashes match", oldVdom, newVdom, oldVdom.hash, newVdom.hash)
+        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())
      }

-      // no change
-      return element
+      updateKomponentOnNode(oldNode, newNode)
+      return oldNode
    }

-    if (oldVdom.type == newVdom.type && oldVdom.type == VDOMElementType.TEXT) {
-      if (oldVdom.content != newVdom.content) {
+    if (oldNode.nodeType == newNode.nodeType && oldNode.nodeType == 3.toShort()) {
+      if (oldNode.textContent != newNode.textContent) {
        if (Komponent.logReplaceEvent) {
-          console.log("Updating text content", oldVdom, newVdom)
+          console.log("Updating text content", oldNode, newNode)
        }
-        element.textContent = newVdom.content
+        oldNode.textContent = newNode.textContent
      }

-      return element
+      updateKomponentOnNode(oldNode, newNode)
+      return oldNode
    }

-    if (oldVdom.type == newVdom.type && oldVdom.type == VDOMElementType.TAG) {
-      if (oldVdom.content == newVdom.content) {
+    if (oldNode is HTMLElement && newNode is HTMLElement) {
+      if (oldNode.nodeName == newNode.nodeName) {
        if (Komponent.logReplaceEvent) {
-          console.log("Update attributes", oldVdom.content, newVdom.content)
+          console.log("Update attributes", oldNode.nodeName, newNode.nodeName)
        }
-        updateAttributes(element as HTMLElement, oldVdom, newVdom)
+        updateAttributes(oldNode, newNode);
        if (Komponent.logReplaceEvent) {
-          console.log("Update events", oldVdom.content, newVdom.content)
+          console.log("Update events", oldNode.nodeName, newNode.nodeName)
        }
-        updateEvents(element as HTMLElement, oldVdom, newVdom)
+        updateEvents(oldNode, newNode)
        if (Komponent.logReplaceEvent) {
-          console.log("Update children", oldVdom.content, newVdom.content)
+          console.log("Update children", oldNode.nodeName, newNode.nodeName)
        }
-        updateKomponentOnNode(element, newVdom)
-        updateChildren(element, oldVdom, newVdom)
+        updateChildren(oldNode, newNode)
+        oldNode.setKompHash(newNode.getKompHash())

-        return element
+        updateKomponentOnNode(oldNode, newNode)
+        return oldNode
      }
    }

    if (Komponent.logReplaceEvent) {
-      console.log("Replace node (type)", newVdom.type, oldVdom, newVdom)
+      console.log("Replace node (type)", oldNode.nodeType, oldNode, newNode)
    }

-    val newNode = newVdom.createElement()
-    updateKomponentOnNode(newNode, newVdom)
-    element.parentNode?.replaceChild(newNode, element)
+    oldNode.parentNode?.replaceChild(newNode, oldNode)
+    //replaceNode(oldNode, newNode)
    return newNode
  }

-  private fun updateAttributes(element: HTMLElement, oldVdom: VDOMElement, newVdom: VDOMElement) {
+  private fun updateAttributes(oldNode: HTMLElement, newNode: HTMLElement) {
    // removed attributes
-    for ((name, attr) in oldVdom.attributes) {
-      if (newVdom.attributes[name] == null) {
-        element.removeAttribute(name)
+    for (name in oldNode.getAttributeNames()) {
+      val attr = oldNode.attributes[name]
+
+      if (attr != null && newNode.getAttribute(name) == null) {
+        oldNode.removeAttribute(name)
      }
    }

-    for ((name, value) in newVdom.attributes) {
-      val oldValue = oldVdom.attributes[name]
+    for (name in newNode.getAttributeNames()) {
+      val value = newNode.getAttribute(name)
+      val oldValue = oldNode.getAttribute(name)

      if (value != oldValue) {
-        element.setAttribute(name, value)
+        if (value != null) {
+          oldNode.setAttribute(name, value)
+        }else {
+          oldNode.removeAttribute(name)
+        }
      }
    }

-    if (newVdom.content == "input" && oldVdom.content == "input") {
-      if (element is HTMLInputElement) {
-        element.value = newVdom.attributes["value"] ?: ""
-        element.checked = newVdom.attributes["checked"] == "true"
+    if (newNode is HTMLInputElement && oldNode is HTMLInputElement) {
+      oldNode.value = newNode.value
+    }
+
+/*
+    for (index in 0 until newNode.attributes.length) {
+      val attr = newNode.attributes[index]
+
+      if (attr != null) {
+        val oldAttr = oldNode.attributes[attr.name]
+
+        if (oldAttr == null || oldAttr.value != attr.value) {
+          oldNode.setAttribute(attr.name, attr.value)
+        }
      }
    }
+*/
  }

-  private fun updateChildren(
-    element: HTMLElement,
-    oldVdom: VDOMElement,
-    newVdom: VDOMElement
-  ) {
+  private fun updateChildren(oldNode: HTMLElement, newNode: HTMLElement) {
    var oldIndex = 0
    var newIndex = 0

    if (Komponent.logReplaceEvent) {
      console.log(
-        "updateChildren HTML old(${oldVdom.childNodes.size})",
-        oldVdom.toString()
+          "updateChildren HTML old(${oldNode.childNodes.length})",
+          oldNode.innerHTML
      )
      console.log(
-        "updateChildren HTML new(${newVdom.childNodes.size})",
-        newVdom.toString()
+          "updateChildren HTML new(${newNode.childNodes.length})",
+          newNode.innerHTML
      )
    }

-    while (oldIndex < oldVdom.childNodes.size && newIndex < newVdom.childNodes.size) {
+    while (newIndex < newNode.childNodes.length) {
      if (Komponent.logReplaceEvent) {
        console.log("Update Old/new", oldIndex, newIndex)
      }
-      val oldChildNode = oldVdom.childNodes[oldIndex]
-      val newChildNode = newVdom.childNodes[newIndex]
+      val newChildNode = newNode.childNodes[newIndex]

-      if (Komponent.logReplaceEvent) {
-        console.log("Update node Old/new", oldChildNode, newChildNode)
-      }
+      if (oldIndex < oldNode.childNodes.length) {
+        val oldChildNode = oldNode.childNodes[oldIndex]

-      // scenarios:
-      // - hashes match, next
-      // - hashes don't match:
-      // -- old hash is down in new list
-      // --- delta == 1, insert new node
-      // -- new hash is down in old list
-      // --- delta == 1, remove current else swap?
-      // else: replace current node with new
+        if (oldChildNode != null && newChildNode != null) {
+          /*
+                    if (Komponent.logReplaceEvent) {
+                      console.log(">>> updateChildren old/new", oldChildNode, newChildNode)
+                    }
+          */

-      if (oldVdom.hash != newVdom.hash &&
-        newChildNode.type == VDOMElementType.TAG &&
-        oldChildNode.type == VDOMElementType.TAG
-      ) {
+          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("Hashes don't match")
+          console.log("Append Old/new/node", oldIndex, newIndex, newChildNode)
        }
+        oldNode.append(newChildNode)

-        val oldHash = oldChildNode.hash.hashCode()
-        val newHash = newChildNode.hash.hashCode()
-
-        val newHashIndexInOld = oldVdom.findNodeHashIndex(newHash)
-        val oldHashIndexInNew = newVdom.findNodeHashIndex(oldHash)
-
-        if (newHashIndexInOld == oldIndex + 1 && oldHashIndexInNew == newIndex) {
-          // remove
-          element.removeChild(element.childNodes[oldIndex]!!)
-          oldIndex++
-          continue
-        } else if (newHashIndexInOld == oldIndex && oldHashIndexInNew == newIndex + 1) {
-          // insert
-          element.insertBefore(newChildNode.createElement(), element.childNodes[oldIndex]!!)
-          newIndex++
-          oldIndex++
-          continue
-        }
+        oldIndex++
      }

-      // update
-      updateNode(element.childNodes[oldIndex]!!, oldChildNode, newChildNode)
-      oldIndex++
-      newIndex++
+      /*
+            if (Komponent.logReplaceEvent) {
+              console.log("<<< Updated Old/new", oldNode.innerHTML, newNode.innerHTML)
+            }
+      */
    }

-    while (element.childNodes.length > newVdom.childNodes.size) {
-      element.childNodes[element.childNodes.length - 1]?.also {
+    while (oldIndex < oldNode.childNodes.length) {
+      oldNode.childNodes[oldIndex]?.also {
        if (Komponent.logReplaceEvent) {
          console.log("Remove old node", it)
        }

-        element.removeChild(it)
+        oldNode.removeChild(it)
      }
    }
-
-    while (newIndex < newVdom.childNodes.size) {
-      newVdom.childNodes[newIndex].also {
-        element.appendChild(it.createElement())
-      }
-      newIndex++
-    }
  }

-  private fun updateEvents(element: HTMLElement, oldVdom: VDOMElement, newVdom: VDOMElement) {
-    val oldEvents = oldVdom.events
-    val newEvents = newVdom.events
+  private fun updateEvents(oldNode: HTMLElement, newNode: HTMLElement) {
+    val oldEvents = mutableListOf<String>()
+    oldEvents.addAll((oldNode.getAttribute(EVENT_ATTRIBUTE) ?: "").split(","))
+
+    val newEvents = (newNode.getAttribute(EVENT_ATTRIBUTE) ?: "").split(",")

    if (Komponent.logReplaceEvent) {
-      console.log("Update events", oldEvents, newEvents)
+      console.log("Update events", oldNode.getAttribute(EVENT_ATTRIBUTE), newNode.getAttribute(EVENT_ATTRIBUTE))
    }

-    for ((name, event) in oldEvents) {
-      element.removeEventListener(name, event)
-    }
-
-    for ((name, event) in newEvents) {
-      if (Komponent.logReplaceEvent) {
-        console.log("Set event $event on", element)
+    for (event in newEvents) {
+      if (event.isNotBlank()) {
+        val oldNodeEvent = oldNode.asDynamic()["event-$event"]
+        val newNodeEvent = newNode.asDynamic()["event-$event"]
+        if (oldNodeEvent != null) {
+          if (Komponent.logReplaceEvent) {
+            console.log("Remove old event $event")
+          }
+          oldNode.removeEventListener(event, oldNodeEvent as ((Event) -> Unit), null)
+        }
+        if (newNodeEvent != null) {
+          if (Komponent.logReplaceEvent) {
+            console.log("Set event $event on", oldNode)
+          }
+          oldNode.setEvent(event, newNodeEvent as ((Event) -> Unit))
+        }
+        oldEvents.remove(event)
+      }
+    }
+
+    for (event in oldEvents) {
+      if (event.isNotBlank()) {
+        val oldNodeEvent = oldNode.asDynamic()["event-$event"]
+        if (oldNodeEvent != null) {
+          oldNode.removeEventListener(event, oldNodeEvent as ((Event) -> Unit), null)
+        }
+      }
+    }
+
+    newNode.getAttribute(EVENT_ATTRIBUTE)?.also {
+      oldNode.setAttribute(EVENT_ATTRIBUTE, it)
+    }
+  }
+
+  private fun replaceNode(oldNode: Node, newNode: Node) {
+    oldNode.parentNode?.also { parent ->
+      val clone = newNode.cloneNode(true)
+      cloneEvents(clone, newNode)
+      parent.replaceChild(clone, oldNode)
+    }
+  }
+
+  private fun cloneEvents(destination: Node, source: Node) {
+    if (source is HTMLElement && destination is HTMLElement) {
+      val events = (source.getAttribute(EVENT_ATTRIBUTE) ?: "").split(",")
+      for (event in events) {
+        if (event.isNotBlank()) {
+          if (Komponent.logReplaceEvent) {
+            console.log("Clone event $event on", source)
+          }
+
+          val foundEvent = source.asDynamic()["event-$event"]
+          if (foundEvent != null) {
+            if (Komponent.logReplaceEvent) {
+              console.log("Clone add eventlistener", foundEvent)
+            }
+            destination.setEvent(event, foundEvent as ((Event) -> Unit))
+          } else {
+            if (Komponent.logReplaceEvent) {
+              console.log("Event not found $event", source)
+            }
+          }
+        }
+      }
+    }
+    for (index in 0 until source.childNodes.length) {
+      destination.childNodes[index]?.also { destinationChild ->
+        source.childNodes[index]?.also { sourceChild ->
+          cloneEvents(destinationChild, sourceChild)
+        }
      }
-      element.addEventListener(name, event)
    }
  }

--- a/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt
+++ b/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt
@@ -1,224 +1,58 @@
 package nl.astraeus.komp

+import org.w3c.dom.*
+import org.w3c.dom.css.CSSStyleDeclaration
+import org.w3c.dom.events.Event
 import kotlinx.browser.document
 import kotlinx.html.*
-import org.w3c.dom.Element
-import org.w3c.dom.Node
-import org.w3c.dom.events.Event
-import kotlin.collections.MutableList
-import kotlin.collections.MutableMap
-import kotlin.collections.arrayListOf
-import kotlin.collections.component1
-import kotlin.collections.component2
-import kotlin.collections.isNotEmpty
-import kotlin.collections.iterator
-import kotlin.collections.last
-import kotlin.collections.lastIndex
-import kotlin.collections.mutableListOf
-import kotlin.collections.mutableMapOf
-import kotlin.collections.set
-import kotlin.collections.withIndex

-private fun attributeHash(key: String, value: String): Int =
-  3 * key.hashCode() +
-      5 * value.hashCode()
-
-private fun MutableMap<String, String>.kompHash(): Int {
-  var result = 0
-
-  for ((name, value) in this) {
-    result += attributeHash(name, value)
+@Suppress("NOTHING_TO_INLINE")
+inline fun HTMLElement.setEvent(name: String, noinline callback: (Event) -> Unit) {
+  val eventName = if (name.startsWith("on")) {
+    name.substring(2)
+  } else {
+    name
  }
+  addEventListener(eventName, callback, null)
+  if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
+    //asDynamic()[name] = callback
+    val events = getAttribute(EVENT_ATTRIBUTE) ?: ""

-  return result
-}
-
-private fun MutableMap<String, (Event) -> Unit>.kompHash(): Int {
-  var result = 0
-
-  for ((name, event) in this) {
-    result += attributeHash(name, event.toString())
-  }
-
-  return result
-}
-
-private fun MutableList<VDOMElement>.kompHash(): Int {
-  var result = 0
-
-  for (vdom in this) {
-    result += 3 * vdom.hash.hashCode()
-  }
-
-  return result
-}
-
-enum class VDOMElementType {
-  TAG,
-  TEXT,
-  ENTITY,
-  UNSAFE,
-  COMMENT
-}
-
-class VDOMElementHash(
-  var baseHash: Int,
-  var contentHash: Int,
-  var typeHash: Int,
-  var namespaceHash: Int = 0,
-  var attributesHash: Int = 0,
-  var eventsHash: Int = 0,
-  var childNodesHash: Int = 0
-) {
-
-  override fun hashCode(): Int = baseHash +
-      3 * contentHash +
-      5 * typeHash +
-      7 * namespaceHash +
-      11 * attributesHash +
-      13 * eventsHash +
-      15 * childNodesHash
-
-  override fun equals(other: Any?): Boolean {
-    if (this === other) return true
-    if (other !is VDOMElementHash) return false
-
-    return other.hashCode() == this.hashCode()
-  }
-
-}
-
-class VDOMElement(
-  val baseHash: Int,
-  var content: String,
-  var namespace: String? = null,
-  var type: VDOMElementType = VDOMElementType.TAG,
-) {
-  val attributes: MutableMap<String, String> = mutableMapOf()
-  val events: MutableMap<String, (Event) -> Unit> = mutableMapOf()
-  val childNodes: MutableList<VDOMElement> = mutableListOf()
-
-  val hash = VDOMElementHash(
-    baseHash,
-    content.hashCode(),
-    type.hashCode()
-  )
-
-  var id: String = ""
-    set(value) {
-      field = value
-      attributes["id"] = value
-    }
-  var komponent: Komponent? = null
-
-  fun setKompEvent(event: String, value: (Event) -> Unit) {
-    val eventName = if (event.startsWith("on")) {
-      event.substring(2)
-    } else {
-      event
-    }
-    val recalculate = events.containsKey(eventName)
-    events[eventName] = value
-    if (recalculate) {
-      hash.eventsHash = events.kompHash()
-    } else {
-      hash.eventsHash += attributeHash(eventName, value.toString())
-    }
-  }
-
-  fun appendChild(element: VDOMElement) {
-    childNodes.add(element)
-    //hash.childNodesHash += element.hash.hashCode()
-  }
-
-  fun updateChildHash() {
-    hash.childNodesHash = childNodes.kompHash()
-  }
-
-  fun removeAttribute(attr: String) {
-    if (attributes.containsKey(attr)) {
-      hash.attributesHash -= attributeHash(attr, attributes[attr] ?: "")
-    }
-    attributes.remove(attr)
-  }
-
-  fun setAttribute(attr: String, value: String) {
-    if (attributes.containsKey(attr)) {
-      hash.attributesHash -= attributeHash(attr, attributes[attr] ?: "")
-    }
-    if (attr.toLowerCase() == "id") {
-      id = value
-    }
-    attributes[attr] = value
-    hash.attributesHash += attributeHash(attr, value)
-  }
-
-  fun findNodeHashIndex(hash: Int): Int {
-    for ((index, node) in this.childNodes.withIndex()) {
-      if (node.type == VDOMElementType.TAG && node.hash.hashCode() == hash) {
-        return index
-      }
-    }
-
-    return -2
-  }
-
-  fun createElement(): Node {
-    val result = when (type) {
-      VDOMElementType.TAG -> {
-        val result: Element = if (namespace != null) {
-          document.createElementNS(namespace, content)
+    setAttribute(
+      EVENT_ATTRIBUTE,
+        if (events.isBlank()) {
+          eventName
        } else {
-          document.createElement(content)
+          "$events,$eventName"
        }
-
-        for ((name, value) in attributes) {
-          result.setAttribute(name, value)
-        }
-
-        for ((name, value) in events) {
-          result.addEventListener(name, value)
-        }
-
-        for (child in childNodes) {
-          result.appendChild(child.createElement())
-        }
-
-        result
-      }
-      VDOMElementType.ENTITY,
-      VDOMElementType.UNSAFE,
-      VDOMElementType.TEXT -> {
-        document.createTextNode(content)
-      }
-      VDOMElementType.COMMENT -> {
-        document.createComment(content)
-      }
-    }
-
-    komponent?.also {
-      it.element = result
-    }
-
-    return result
+    )
+    asDynamic()["event-$eventName"] = callback
  }
 }

-interface HtmlConsumer : TagConsumer<VDOMElement> {
-  fun append(node: VDOMElement)
+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))
+  }
 }

 class HtmlBuilder(
-  val baseHash: Int
+    val komponent: Komponent,
+    val document: Document
 ) : HtmlConsumer {
-  private val path = arrayListOf<VDOMElement>()
-  private var lastLeaved: VDOMElement? = null
+  private val path = arrayListOf<HTMLElement>()
+  private var lastLeaved: HTMLElement? = null

  override fun onTagStart(tag: Tag) {
-    val element = VDOMElement(baseHash, tag.tagName, tag.namespace)
-
-    for (entry in tag.attributesEntries) {
-      element.setAttribute(entry.key, entry.value)
+    val element: HTMLElement = when {
+      tag.namespace != null -> document.createElementNS(tag.namespace!!, tag.tagName).asDynamic()
+      else                  -> document.createElement(tag.tagName) as HTMLElement
    }

    if (path.isNotEmpty()) {
@@ -230,9 +64,9 @@ class HtmlBuilder(

  override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
    when {
-      path.isEmpty() -> throw IllegalStateException("No current tag")
-      path.last().content.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
-      else -> path.last().let { node ->
+      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 {
@@ -244,19 +78,98 @@ class HtmlBuilder(

  override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
    when {
-      path.isEmpty() -> throw IllegalStateException("No current tag")
-      path.last().content.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
-      else -> path.last().setKompEvent(event, value)
+      path.isEmpty()                                                 -> throw IllegalStateException("No current tag")
+      path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
+      else                                                           -> path.last().setEvent(event, value)
    }
  }

  override fun onTagEnd(tag: Tag) {
-    if (path.isEmpty() || path.last().content.toLowerCase() != tag.tagName.toLowerCase()) {
+    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")
    }

+    val element = path.last()
+
+    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)
+        }
+      }
+    }
+
+    for ((key, value) in tag.attributesEntries) {
+      if (key == "class") {
+        val classes = value.split(Regex("\\s+"))
+        val classNames = StringBuilder()
+
+        for (cls in classes) {
+          val cssStyle = komponent.declaredStyles[cls]
+
+          if (cssStyle != null) {
+            if (Komponent.updateStrategy == UpdateStrategy.DOM_DIFF) {
+              hash = hash * 37 + cssStyle.hashCode()
+            }
+
+            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(hash)
+      //element.setAttribute(DiffPatch.HASH_ATTRIBUTE, hash.toString(16))
+    }
    lastLeaved = path.removeAt(path.lastIndex)
-    lastLeaved?.updateChildHash()
  }

  override fun onTagContent(content: CharSequence) {
@@ -264,7 +177,7 @@ class HtmlBuilder(
      throw IllegalStateException("No current DOM node")
    }

-    path.last().appendChild(VDOMElement(baseHash, content.toString(), type = VDOMElementType.TEXT))
+    path.last().appendChild(document.createTextNode(content.toString()))
  }

  override fun onTagContentEntity(entity: Entities) {
@@ -273,10 +186,15 @@ class HtmlBuilder(
    }

    // stupid hack as browsers don't support createEntityReference
-    path.last().appendChild(VDOMElement(baseHash, entity.text, type = VDOMElementType.ENTITY))
+    val s = document.createElement("span") as HTMLElement
+    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: VDOMElement) {
+  override fun append(node: Node) {
    path.last().appendChild(node)
  }

@@ -284,7 +202,7 @@ class HtmlBuilder(
    with(DefaultUnsafe()) {
      block()

-      path.last().appendChild(VDOMElement(baseHash, toString(), type = VDOMElementType.UNSAFE))
+      path.last().innerHTML += toString()
    }
  }

@@ -293,17 +211,17 @@ class HtmlBuilder(
      throw IllegalStateException("No current DOM node")
    }

-    path.last().appendChild(VDOMElement(baseHash, content.toString(), type = VDOMElementType.COMMENT))
+    path.last().appendChild(document.createComment(content.toString()))
  }

-  override fun finalize(): VDOMElement {
-    return lastLeaved ?: throw IllegalStateException("We can't finalize as there was no tags")
-  }
+  override fun finalize(): HTMLElement = lastLeaved?.asR() ?: throw IllegalStateException("We can't finalize as there was no tags")
+
+  @Suppress("UNCHECKED_CAST")
+  private fun HTMLElement.asR(): HTMLElement = this.asDynamic()

  companion object {
-    fun create(content: HtmlBuilder.() -> Unit): VDOMElement {
-      val komponent = DummyKomponent()
-      val consumer = HtmlBuilder(komponent.hashCode())
+    fun create(content: HtmlBuilder.() -> Unit): HTMLElement {
+      val consumer = HtmlBuilder(DummyKomponent(), document)
      content.invoke(consumer)
      return consumer.finalize()
    }
--- a/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt
+++ b/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt
@@ -1,14 +1,16 @@
 package nl.astraeus.komp

-import kotlinx.browser.document
-import kotlinx.browser.window
-import kotlinx.html.div
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
 import org.w3c.dom.css.CSSStyleDeclaration
+import kotlinx.browser.document
+import kotlinx.browser.window
+import kotlinx.html.div
 import kotlin.reflect.KProperty

+const val KOMP_KOMPONENT = "komp-komponent"
+
 typealias CssStyle = CSSStyleDeclaration.() -> Unit

 class StateDelegate<T>(
@@ -32,7 +34,19 @@ class StateDelegate<T>(
 inline fun <reified T> Komponent.state(initialValue: T): StateDelegate<T> = StateDelegate(this, initialValue)

 fun HtmlConsumer.include(component: Komponent) {
-  append(component.create())
+  if (Komponent.updateStrategy == UpdateStrategy.REPLACE) {
+    if (component.element != null) {
+      component.update()
+    } else {
+      component.refresh()
+    }
+
+    component.element?.also {
+      append(it)
+    }
+  } else {
+    append(component.create())
+  }
 }

 class DummyKomponent: Komponent() {
@@ -43,32 +57,29 @@ class DummyKomponent: Komponent() {
  }
 }

+enum class UpdateStrategy {
+  REPLACE,
+  DOM_DIFF
+}
+
 abstract class Komponent {
  private var createIndex = getNextCreateIndex()
  private var dirty: Boolean = true

-  var vdom: VDOMElement? = null
  var element: Node? = null
  val declaredStyles: MutableMap<String, CSSStyleDeclaration> = HashMap()

-  open fun create(): VDOMElement {
-    val consumer = HtmlBuilder(this.createIndex)
-    try {
-      consumer.render()
-    } catch (e: Throwable) {
-      println("Exception occurred in ${this::class.simpleName}.render() call!")
-
-      throw e
-    }
+  open fun create(): HTMLElement {
+    val consumer = HtmlBuilder(this, document)
+    consumer.render()
    val result = consumer.finalize()

    if (result.id.isBlank()) {
      result.id = "komp_${createIndex}"
    }

-    result.komponent = this
-
-    vdom = result
+    element = result
+    element.asDynamic()[KOMP_KOMPONENT] = this

    dirty = false

@@ -96,29 +107,47 @@ abstract class Komponent {
  }

  internal fun refresh() {
-    val oldElement = vdom
+    val oldElement = element

    if (logRenderEvent) {
      console.log("Rendering", this)
    }
    val newElement = create()

-    element = if (oldElement != null && element != null) {
-      if (logReplaceEvent) {
-        console.log("DomDiffing", oldElement, newElement)
+    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)
      }
-      DiffPatch.updateNode(element!!, oldElement, newElement)
-    } else {
-      if (logReplaceEvent) {
-        console.log("Create", newElement)
-      }
-      newElement.createElement()
    }

-    vdom = newElement
    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)
+    }
+  }
+
  companion object {
    private var nextCreateIndex: Int = 1
    private var updateCallback: Int? = null
@@ -126,11 +155,10 @@ abstract class Komponent {

    var logRenderEvent = false
    var logReplaceEvent = false
+    var updateStrategy = UpdateStrategy.DOM_DIFF

    fun create(parent: HTMLElement, component: Komponent, insertAsFirst: Boolean = false) {
-      val vdomElement = component.create()
-      val element = vdomElement.createElement()
-      component.element = element
+      val element = component.create()

      if (insertAsFirst && parent.childElementCount > 0) {
        parent.insertBefore(element, parent.firstChild)
@@ -160,8 +188,9 @@ abstract class Komponent {

      todo.forEach { next ->
        val element = next.element
-
+        console.log("update element", element)
        if (element is HTMLElement) {
+          console.log("by id", document.getElementById(element.id))
          if (document.getElementById(element.id) != null) {
            if (next.dirty) {
              if (logRenderEvent) {
@@ -173,11 +202,7 @@ abstract class Komponent {
                console.log("Skip ${next.createIndex}")
              }
            }
-          } else {
-            console.log("Komponent element has no id, ", next, element)
          }
-        } else {
-          console.log("Komponent element is null", next)
        }
      }

--- a/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt
+++ b/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt
@@ -2,49 +2,46 @@ package nl.astraeus.komp

 import kotlinx.html.*
 import kotlinx.html.js.onClickFunction
-import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
+import org.w3c.dom.Node
 import org.w3c.dom.get
 import kotlin.test.Test
 import kotlin.test.assertTrue

-fun nodesEqual(element: Element, vdom: VDOMElement): Boolean {
-  if (element.childNodes.length != vdom.childNodes.size) {
+fun nodesEqual(node1: Node, node2: Node): Boolean {
+  if (node1.childNodes.length != node1.childNodes.length) {
    return false
  }
-  if (element.attributes.length != vdom.attributes.size) {
-    return false
-  }
-  for ((name, value) in vdom.attributes) {
-    if (value != element.getAttribute(name)) {
+  if (node1 is HTMLElement && node2 is HTMLElement) {
+    if (node1.attributes.length != node2.attributes.length) {
      return false
    }
-  }
-  for ((index, child) in vdom.childNodes.withIndex()) {
-    if (index < element.childNodes.length) {
-      val elementChild = element.childNodes[index]
+    for (index in 0 until node1.attributes.length) {
+      node1.attributes[index]?.also { attr1 ->
+        val attr2 = node2.getAttribute(attr1.name)

-      if (child.type == VDOMElementType.TAG) {
-        if (!nodesEqual(elementChild as HTMLElement, child)) {
-          return false
-        }
-      } else if (child.type == VDOMElementType.TEXT) {
-        if (child.content != element.textContent) {
+        if (attr1.value != attr2) {
          return false
        }
      }
-    } else {
-      return false
+    }
+    for (index in 0 until node1.childNodes.length) {
+      node1.childNodes[index]?.also { child1 ->
+        node2.childNodes[index]?.also { child2 ->
+          if (!nodesEqual(child1, child2)) {
+            return false
+          }
+        }
+      }
    }
  }
-
  return true
 }

 class TestUpdate {

  @Test
-  fun testCompare() {
+  fun testCompare1() {
    val dom1 = HtmlBuilder.create {
      div {
        div(classes = "bla") {
@@ -75,13 +72,9 @@ class TestUpdate {
      }
    }

-    var element = dom1.createElement()
+    DiffPatch.updateNode(dom1, dom2)

-    assertTrue(nodesEqual(element as Element, dom1), "Created dom not equal to original")
-
-    element = DiffPatch.updateNode(element, dom1, dom2) as HTMLElement
-
-    assertTrue(nodesEqual(element, dom2), "Updated dom not equal to original")
+    assertTrue(nodesEqual(dom1, dom2), "Updated dom not equal to original")
  }

  @Test
@@ -95,7 +88,7 @@ class TestUpdate {
          table {
            tr {
              th {
-                +"Header"
+                + "Header"
              }
            }
            tr {
@@ -112,7 +105,7 @@ class TestUpdate {
      div {
        div {
          span {
-            +"Other text"
+            + "Other text"
          }
        }
        span {
@@ -130,15 +123,10 @@ class TestUpdate {
      }
    }

-    Komponent.logRenderEvent = true
+    Komponent.logReplaceEvent = true
+    DiffPatch.updateNode(dom1, dom2)

-    var element = dom1.createElement()
-
-    assertTrue(nodesEqual(element as Element, dom1), "Created dom not equal to original")
-
-    element = DiffPatch.updateNode(element, dom1, dom2) as HTMLElement
-
-    assertTrue(nodesEqual(element, dom2), "Updated dom not equal to original")
+    assertTrue(nodesEqual(dom1, dom2), "Updated dom not equal to original")
  }

 }
Author	SHA1	Message	Date
rnentjes	b0b325fea5	Update to 0.2.5-SNAPSHOT	2021-02-10 13:16:02 +01:00
rnentjes	0c14a9a7db	0.2.4 Release	2021-02-10 13:15:14 +01:00
rnentjes	1c1cb8eaba	Fix new element being referenced in Komponent instead of old not updated one (in DOM_DIFF strategy)	2021-02-05 11:18:11 +01:00
rnentjes	01a30c9645	Testing state komponent	2021-01-01 19:45:05 +01:00