- Keeping it simple, just html element replace

- Updated Kotlin version

build.gradle

@@ -1,5 +1,5 @@
 group 'nl.astraeus'
-version '0.1.6-SNAPSHOT'
+version '0.1.7'
 
 apply plugin: 'kotlin2js'
 apply plugin: 'kotlin-dce-js'
@@ -21,11 +21,11 @@ repositories {
 }
 
 ext {
-    kotlin_version = '1.2.51'
+    kotlin_version = '1.3.50'
 }
 
 buildscript {
-    ext.kotlin_version = '1.2.51'
+    ext.kotlin_version = '1.3.50'
     repositories {
         maven {
             url "http://nexus.astraeus.nl/nexus/content/groups/public"
@@ -39,7 +39,7 @@ buildscript {
 
 dependencies {
     compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
-    compile 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.4'
+    compile 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.10'
 }
 
 uploadArchives {

komp.iml

@@ -1,8 +1,8 @@
 <?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.1.5-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.1.7" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="JavaScript " useProjectSettings="false">
+      <configuration version="3" platform="JavaScript " allPlatforms="JS []" useProjectSettings="false" pureKotlinSourceFolders="$MODULE_DIR$/src/test/kotlin;/home/rnentjes/Development/komp/komp/src/main/kotlin">
         <testOutputPath>$MODULE_DIR$/build/classes/kotlin/test/komp_test.js</testOutputPath>
         <compilerSettings />
         <compilerArguments>
@@ -13,15 +13,14 @@
           <option name="metaInfo" value="true" />
           <option name="target" value="v5" />
           <option name="main" value="call" />
-          <option name="languageVersion" value="1.2" />
-          <option name="apiVersion" value="1.2" />
+          <option name="languageVersion" value="1.3" />
+          <option name="apiVersion" value="1.3" />
           <option name="pluginOptions">
             <array />
           </option>
           <option name="pluginClasspaths">
             <array />
           </option>
-          <option name="coroutinesState" value="warn" />
           <option name="errors">
             <ArgumentParseErrors />
           </option>
@@ -34,18 +33,18 @@
     <output-test url="file://$MODULE_DIR$/out/test/classes" />
     <exclude-output />
     <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/src/test/kotlin" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/kotlin" type="kotlin-test" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" type="kotlin-source" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="kotlin-resource" />
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/out" />
     </content>
     <orderEntry type="jdk" jdkName="Kotlin SDK" jdkType="KotlinSDK" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" level="project" />
-    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.10" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.3.50" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.10" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.50" level="project" />
   </component>
 </module>

komp.ipr

@@ -41,9 +41,12 @@
       <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" />
@@ -53,6 +56,7 @@
           </set>
         </option>
         <option name="resolveModulePerSourceSet" value="false" />
+        <option name="useAutoImport" value="true" />
       </GradleProjectSettings>
     </option>
   </component>
@@ -149,40 +153,40 @@
     <mapping directory="" vcs="Git" />
   </component>
   <component name="libraryTable">
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" type="kotlin.common">
+    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.50" type="kotlin.common">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.2.51/e4a9d4b13ab19ed1e6531fce6df98e8cfa7f7301/kotlin-stdlib-common-1.2.51.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.3.50/3d9cd3e1bc7b92e95f43d45be3bfbcf38e36ab87/kotlin-stdlib-common-1.3.50.jar!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.2.51/e8c91083a5863d94fdc2836459e7e7a555774be9/kotlin-stdlib-common-1.2.51-sources.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.3.50/8ac406cf33e942265c4abb33ee0acdee79292dd6/kotlin-stdlib-common-1.3.50-sources.jar!/" />
       </SOURCES>
     </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" type="kotlin.js">
+    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.3.50" type="kotlin.js">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.51/ac00507005af8df9e3a0957f9169f47cca7cdb72/kotlin-stdlib-js-1.2.51.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.3.50/13eda1d89666eae9da35ba866e4da49b33bf8845/kotlin-stdlib-js-1.3.50.jar!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.51/c00799bfcbee73a3cd1f0d78031de126a0e7c200/kotlin-stdlib-js-1.2.51-sources.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.3.50/8e3bc78ad947ee949e6c3f0e2a7822e34a5c9cf/kotlin-stdlib-js-1.3.50-sources.jar!/" />
       </SOURCES>
     </library>
-    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" type="kotlin.common">
+    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.10" type="kotlin.common">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.4/4ebf5aad41e363f63d196c4bbbee3662840288ca/kotlinx-html-common-0.6.4.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.10/ee88228ee8503ba4d7f3c4d7586f33606547f801/kotlinx-html-common-0.6.10.jar!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.4/ea347822bde2249e8e6fd8361c9596f36d69f7f1/kotlinx-html-common-0.6.4-sources.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.10/7442a7d3d9b24e221ee1309b8b59ea8c8fd5d4ea/kotlinx-html-common-0.6.10-sources.jar!/" />
       </SOURCES>
     </library>
-    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.4" type="kotlin.js">
+    <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.10" type="kotlin.js">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.4/a5a4863f2c5fd25f8bb9a1ddb55bb7def89ea5ed/kotlinx-html-js-0.6.4.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.10/640a321b71d71852f34c502a6af4f8dcc178d5e5/kotlinx-html-js-0.6.10.jar!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.4/5286978d3b689a42a353237f05161288f0e426ac/kotlinx-html-js-0.6.4-sources.jar!/" />
+        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.10/d85e2048d1b3b1f12bb99a0efe038edbba90f814/kotlinx-html-js-0.6.10-sources.jar!/" />
       </SOURCES>
     </library>
   </component>

src/main/kotlin/nl/astraeus/komp/DomDiff.kt

@@ -1,91 +0,0 @@
-package nl.astraeus.komp
-
-import org.w3c.dom.Node
-import org.w3c.dom.get
-
-/**
- * User: rnentjes
- * Date: 10-9-17
- * Time: 13:33
- */
-
-object DomDiffer {
-
-  fun replaceDiff(oldElement: KompElement, newElement: KompElement, element: Node): Node {
-    if (oldElement.isKomponent() && newElement.isKomponent()) {
-      if (oldElement.equals(newElement)) {
-        newElement.komponent?.update()
-
-        return newElement.komponent?.element ?: newElement.komponent?.create()?.create()
-        ?: throw IllegalStateException("Unable to create new element!")
-      } else {
-        return Komponent.replaceNode(newElement, element)
-      }
-    } else if (!oldElement.isKomponent() && newElement.isKomponent()) {
-      return Komponent.replaceNode(newElement, element)
-    } else if (!oldElement.equals(newElement)) {
-      return Komponent.replaceNode(newElement, element)
-    } else {
-      if (oldElement.children == null && newElement.children != null) {
-        for (index in 0 until newElement.children.size) {
-          Komponent.appendElement(element, newElement.children[index])
-        }
-      } else if (oldElement.children != null && newElement.children == null) {
-        while (element.firstChild != null) {
-          if (Komponent.logReplaceEvent) {
-            console.log("Remove", element.firstChild)
-          }
-          element.removeChild(element.firstChild!!)
-        }
-      } else if (oldElement.children != null && newElement.children != null) {
-        if (oldElement.children.size > newElement.children.size) {
-          val toRemove = oldElement.children.size - newElement.children.size
-          var removed = 0
-          var index = 0
-
-          while (index < newElement.children.size) {
-            val childNode = element.childNodes[index]
-
-            if (childNode == null) {
-              println("Warn childNode is null!")
-            } else {
-              if ((!oldElement.children[index + removed].equals(newElement.children[index])) && removed < toRemove) {
-                if (Komponent.logReplaceEvent) {
-                  console.log("Remove", oldElement.children[index + removed], newElement.children[index])
-                }
-                element.removeChild(childNode)
-
-                removed++
-              } else {
-                replaceDiff(oldElement.children[index + removed], newElement.children[index], childNode)
-
-                index++
-              }
-            }
-          }
-
-          while (removed < toRemove) {
-            element.lastChild?.also {
-              Komponent.removeElement(it)
-            }
-
-            removed++
-          }
-        } else {
-          for (index in 0 until newElement.children.size) {
-            val childNode = element.childNodes[index]
-
-            if (childNode == null) {
-              Komponent.appendElement(element, newElement.children[index])
-            } else {
-              replaceDiff(oldElement.children[index], newElement.children[index], childNode)
-            }
-          }
-        }
-      }
-
-      return element
-    }
-  }
-
-}

src/main/kotlin/nl/astraeus/komp/KompElement.kt

@@ -1,359 +0,0 @@
-package nl.astraeus.komp
-
-import kotlinx.html.Entities
-import kotlinx.html.Tag
-import kotlinx.html.TagConsumer
-import kotlinx.html.Unsafe
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.Node
-import org.w3c.dom.events.Event
-import org.w3c.dom.get
-import kotlin.browser.document
-import kotlin.dom.isElement
-
-/**
- * User: rnentjes
- * Date: 8-5-18
- * Time: 21:58
- */
-
-enum class ElementType {
-  KOMPONENT,
-  TAG,
-  TEXT,
-  UNSAFE,
-}
-
-class KompElement(
-    val type: ElementType,
-    val komponent: Komponent,
-    var text: String,
-    var attributes: MutableMap<String, String>? = null,
-    val children: MutableList<KompElement>? = null,
-    val events: MutableMap<String, (Event) -> Unit>? = null
-) {
-
-  constructor(komponent: Komponent, text: String, type: ElementType) : this(
-      type,
-      komponent,
-      text,
-      if (type == ElementType.TAG) {
-        HashMap()
-      } else {
-        null
-      },
-      if (type == ElementType.TAG) {
-        ArrayList()
-      } else {
-        null
-      },
-      if (type == ElementType.TAG) {
-        HashMap()
-      } else {
-        null
-      }
-  )
-
-  constructor(komponent: Komponent) : this(
-      ElementType.KOMPONENT,
-      komponent,
-      "",
-      null,
-      null,
-      null
-  )
-
-  /* shallow equals check */
-  fun equals(other: KompElement): Boolean {
-    if (other.isKomponent() && isKomponent()) {
-      val result = komponent == other.komponent
-      if (!result && Komponent.logEquals) {
-        console.log("!= komponent", this, other)
-      }
-      return result
-    } else if (other.isText() || isText()) {
-      if (other.text != text && Komponent.logEquals) {
-        console.log("!= text", this, other)
-      }
-      return other.text == text
-    } else {
-      if (other.attributes?.size != attributes?.size || other.events?.size != events?.size) {
-        if (Komponent.logEquals) {
-          console.log("!= attr size or event size", this, other)
-        }
-        return false
-      } else {
-        (attributes?.entries)?.forEach { entry ->
-          if (!other.attributes?.get(entry.key).equals(entry.value)) {
-            if (Komponent.logEquals) {
-              console.log("!= attr", this, other)
-            }
-            return false
-          }
-        }
-        (events?.entries)?.forEach { entry ->
-          val thisFunction: dynamic = other.events?.get(entry.key)
-          val otherFunction: dynamic = entry.value
-
-          if (thisFunction != null && thisFunction.callableName != undefined) {
-            val result = thisFunction.callableName == otherFunction.callableName
-            if (!result && Komponent.logEquals) {
-              console.log("!= event", thisFunction, otherFunction)
-            }
-            return result
-          }
-
-          if (Komponent.logEquals) {
-            console.log("!= event, events have no callableName", thisFunction, otherFunction)
-          }
-          return false
-        }
-      }
-    }
-
-    return true
-  }
-
-  fun isText(): Boolean {
-    return type == ElementType.TEXT
-  }
-
-  fun isKomponent(): Boolean {
-    return type == ElementType.KOMPONENT
-  }
-
-  fun create(svg: Boolean = false): Node = when(type) {
-    ElementType.KOMPONENT -> {
-      val komp = komponent
-
-      val kompElement = komp.create()
-      val element = kompElement.create()
-
-      komp.kompElement = kompElement
-      komp.element = element
-
-      element
-    }
-    ElementType.TEXT -> document.createTextNode(text)
-    ElementType.UNSAFE -> {
-      val div = if (svg) {
-        document.createElementNS("http://www.w3.org/2000/svg","svg")
-      } else {
-        document.createElement("div")
-      }
-      var result: Node? = null
-
-      div.innerHTML = text
-
-      //console.log("div element with unsafe innerHTML", div)
-
-      for (index in 0 until div.childNodes.length) {
-        val node = div.childNodes[index]!!
-
-        //console.log("$index -> ", node)
-
-        if (node.isElement) {
-          if (result != null) {
-            throw IllegalStateException("Only one element allowed in unsafe block!")
-          }
-          result = node
-        }
-      }
-
-      result ?: throw IllegalStateException("No element found in unsafe content! [$text]")
-    }
-    ElementType.TAG -> {
-      val svg = text == "svg"
-      val result = if (svg) {
-        document.createElementNS("http://www.w3.org/2000/svg", text)
-      } else {
-        document.createElement(text)
-      }
-
-      (attributes?.entries)?.forEach { entry ->
-        if (entry.key == "class") {
-          val classes = entry.value.split(" ")
-          val classNames = StringBuilder()
-
-          for (cls in classes) {
-            val cssStyle = komponent?.declaredStyles?.get(cls)
-
-            if (cssStyle != null) {
-              if (result is HTMLElement) {
-                for (index in 0 until cssStyle.length) {
-                  val propertyName = cssStyle.item(index)
-                  result.style.setProperty(propertyName, cssStyle.getPropertyValue(propertyName))
-                }
-              }
-            } else {
-              classNames.append(cls)
-              classNames.append(" ")
-            }
-          }
-
-          if (result !is HTMLElement) {
-            result.setAttribute(entry.key, entry.value)
-          } else {
-            result.className = classNames.toString()
-          }
-        } else {
-          result.setAttribute(entry.key, entry.value)
-        }
-      }
-
-      (events?.entries)?.forEach { event ->
-        val key = if (event.key.startsWith("on")) {
-          event.key.substring(2)
-        } else {
-          event.key
-        }
-        result.addEventListener(key, event.value)
-      }
-
-      children?.forEach { child ->
-        result.append(child.create(svg))
-      }
-
-      result
-    }
-  }
-
-  override fun toString(): String {
-    return this.toString("")
-  }
-
-  fun toString(indent: String = ""): String {
-    val result = StringBuilder()
-
-    if (attributes != null) {
-      result.append(indent)
-      result.append("<")
-    }
-    result.append(text)
-    attributes?.also { attributes ->
-      for (entry in attributes.entries) {
-        result.append("\n")
-        result.append(indent)
-        result.append(indent)
-        result.append(entry.key)
-        result.append("=\"")
-        result.append(entry.value)
-        result.append("\"")
-      }
-      events?.apply {
-        for (event in this.entries) {
-          result.append("\n")
-          result.append(indent)
-          result.append(indent)
-          result.append(event.key)
-          result.append("=")
-          result.append(event.value)
-        }
-      }
-      result.append("\n")
-      result.append(indent)
-      result.append(">")
-
-      children?.apply {
-        result.append("\n")
-        result.append(indent)
-        for (child in this) {
-          result.append(child.toString("  $indent"))
-        }
-      }
-
-      result.append("\n")
-      result.append(indent)
-      result.append("</")
-      result.append(text)
-      result.append(">")
-    }
-
-    return result.toString()
-  }
-}
-
-class UnsafeWrapper: Unsafe {
-  var text = ""
-
-  override fun String.unaryPlus() {
-    text += this@unaryPlus
-  }
-}
-
-class KompConsumer(
-    val komponent: Komponent
-) : TagConsumer<KompElement> {
-  val stack = ArrayList<KompElement>()
-  var currentTag: KompElement? = null
-
-  override fun finalize(): KompElement {
-    return currentTag!!
-  }
-
-  override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
-    //console.log("KC.onTagAttributeChange", tag, attribute, value)
-    if (value != null) {
-      currentTag?.attributes?.put(attribute, value)
-    }
-  }
-
-  override fun onTagContent(content: CharSequence) {
-    //console.log("KC.onTagContent", content)
-
-    currentTag?.children?.add(KompElement(komponent, content.toString(), ElementType.TEXT))
-  }
-
-  override fun onTagContentEntity(entity: Entities) {
-    //console.log("KC.onTagContentEntity", entity)
-  }
-
-  override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
-    //console.log("KC.onTagContentUnsafe", block)
-    val txt = UnsafeWrapper()
-
-    block.invoke(txt)
-
-    //console.log("KC.onTagContentUnsafe", txt)
-    currentTag?.children?.add(KompElement(komponent, txt.text, ElementType.UNSAFE))
-  }
-
-  override fun onTagEnd(tag: Tag) {
-    //console.log("KC.onTagEnd", tag)
-
-    check(currentTag != null)
-    check(currentTag?.children != null)
-
-    val ke = currentTag
-    if (stack.isNotEmpty()) {
-      currentTag = stack.removeAt(stack.lastIndex)
-
-      if (ke != null) {
-        currentTag?.children?.add(ke)
-      }
-    }
-  }
-
-  override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
-    //console.log("KC.onTagEvent", tag, event, value)
-
-    currentTag?.events?.put(event, value)
-  }
-
-  override fun onTagStart(tag: Tag) {
-    //console.log("KC.onTagStart", tag)
-
-    currentTag?.apply {
-      stack.add(this)
-    }
-
-    currentTag = KompElement(komponent, tag.tagName, ElementType.TAG)
-
-    currentTag?.attributes = tag.attributes
-  }
-
-  fun appendKomponent(komponent: Komponent) {
-    currentTag?.children?.add(KompElement(komponent))
-  }
-
-}

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

@@ -1,6 +1,8 @@
 package nl.astraeus.komp
 
 import kotlinx.html.HtmlBlockTag
+import kotlinx.html.TagConsumer
+import kotlinx.html.dom.create
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
@@ -8,10 +10,7 @@ import org.w3c.dom.css.CSSStyleDeclaration
 import kotlin.browser.document
 
 fun HtmlBlockTag.include(component: Komponent) {
-  val consumer = this.consumer
-  if (consumer is KompConsumer) {
-    consumer.appendKomponent(component)
-  }
+  component.render(this.consumer as TagConsumer<HTMLElement>)
 }
 
 enum class UpdateStrategy {
@@ -21,16 +20,15 @@ enum class UpdateStrategy {
 
 abstract class Komponent {
   var element: Node? = null
-  var kompElement: KompElement? = null
   val declaredStyles: MutableMap<String, CSSStyleDeclaration> = HashMap()
 
-  open fun create(): KompElement {
-    val result = render(KompConsumer(this))
+  open fun create(): HTMLElement {
+    val result = render(document.create)
 
     return result
   }
 
-  abstract fun render(consumer: KompConsumer): KompElement
+  abstract fun render(consumer: TagConsumer<HTMLElement>): HTMLElement
 
   open fun declareStyle(className: String, block: CSSStyleDeclaration.() -> Unit) {
     val style = (document.createElement("div") as HTMLDivElement).style
@@ -46,20 +44,9 @@ abstract class Komponent {
 
       val newElement = create()
 
-      val replacedElement = if (updateStrategy == UpdateStrategy.REPLACE) {
-        //val replacedElement = replaceNode(newElement, element)
+      element.parentNode?.replaceChild(newElement, element)
 
-        replaceNode(newElement, element)
-      } else if (kompElement != null) {
-        kompElement?.let {
-          DomDiffer.replaceDiff(it, newElement, element)
-        }
-      } else {
-        newElement.create()
-      }
-
-      kompElement = newElement
-      this.element = replacedElement
+      this.element = newElement
     }
   }
 
@@ -67,22 +54,6 @@ abstract class Komponent {
     refresh()
   }
 
-  override fun equals(other: Any?): Boolean {
-    if (this === other) return true
-    if (other == null || this::class.js != other::class.js) return false
-
-    other as Komponent
-
-    if (kompElement != other.kompElement) return false
-
-    return true
-  }
-
-  override fun hashCode(): Int {
-    var result = kompElement?.hashCode() ?: 0
-    return result
-  }
-
   companion object {
 
     var logRenderEvent = false
@@ -90,25 +61,6 @@ abstract class Komponent {
     var logEquals = false
     var updateStrategy = UpdateStrategy.DOM_DIFF
 
-    fun replaceNode(newKomponent: KompElement, oldElement: Node): Node {
-      val newElement = newKomponent.create()
-
-      if (logReplaceEvent) {
-        console.log("Replace", oldElement, newElement)
-      }
-
-      val parent = oldElement.parentElement ?: throw IllegalStateException("oldElement has no parent! $oldElement")
-
-      parent.replaceChild(newElement, oldElement)
-
-      newKomponent.komponent?.also {
-        it.kompElement = newKomponent
-        it.element = newElement
-      }
-
-      return newElement
-    }
-
     fun removeElement(element: Node) {
       val parent = element.parentElement ?: throw IllegalArgumentException("Element has no parent!?")
 
@@ -119,28 +71,16 @@ abstract class Komponent {
       parent.removeChild(element)
     }
 
-    fun appendElement(element: Node, kompElement: KompElement) {
-      val newElement = kompElement.create()
-      if (logReplaceEvent) {
-        console.log("Append", newElement)
-      }
-      element.appendChild(newElement)
-    }
-
     fun create(parent: HTMLElement, component: Komponent, insertAsFirst: Boolean = false) {
+      val element = component.create()
 
-      component.kompElement = component.create()
-      val element = component.kompElement?.create()
-
-      if (element != null) {
-        if (insertAsFirst && parent.childElementCount > 0) {
-          parent.insertBefore(element, parent.firstChild)
-        } else {
-          parent.appendChild(element)
-        }
-
-        component.element = element
+      if (insertAsFirst && parent.childElementCount > 0) {
+        parent.insertBefore(element, parent.firstChild)
+      } else {
+        parent.appendChild(element)
       }
+
+      component.element = element
     }
   }
 }

src/main/kotlin/nl/astraeus/komp/SizedKomponent.kt

@@ -1,55 +0,0 @@
-package nl.astraeus.komp
-
-import kotlinx.html.dom.create
-import kotlinx.html.js.div
-import kotlinx.html.style
-import kotlin.browser.document
-
-/**
- * User: rnentjes
- * Date: 31-1-18
- * Time: 15:58
- */
-
-enum class SizeType {
-  HBAR,
-  VBAR
-}
-
-abstract class SizedKomponent(
-    val left: Int,
-    val top: Int,
-    val width: Int,
-    val height: Int
-): Komponent() {
-  var parent: SizedKomponent? = null
-  var type: SizeType = SizeType.HBAR
-  var size: Int = 0
-
-  constructor(
-      parent: SizedKomponent,
-      type: SizeType,
-      size: Int
-  ) :this(0,0,0,0) {
-    this.parent = parent
-    this.type = type
-    this.size = size
-  }
-
-  override fun create(): KompElement {
-    val innerResult = super.create()
-
-    val result = document.create.div {
-      style = "left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;" // sizing here
-    }
-
-/*
-    result.appendChild(innerResult)
-    this.element = result
-    return result
-*/
-
-    return innerResult
-  }
-
-}