Testing vdom

build.gradle

@@ -1,7 +1,8 @@
 group 'nl.astraeus'
-version '0.0.8-SNAPSHOT'
+version '0.1.0-SNAPSHOT'
 
 apply plugin: 'kotlin2js'
+apply plugin: 'kotlin-dce-js'
 apply plugin: 'idea'
 apply plugin: 'maven'
 apply plugin: 'maven-publish'
@@ -20,11 +21,11 @@ repositories {
 }
 
 ext {
-    kotlin_version = '1.2.21'
+    kotlin_version = '1.2.51'
 }
 
 buildscript {
-    ext.kotlin_version = '1.2.21'
+    ext.kotlin_version = '1.2.51'
     repositories {
         maven {
             url "http://nexus.astraeus.nl/nexus/content/groups/public"
@@ -42,6 +43,7 @@ dependencies {
 }
 
 uploadArchives {
+    println 'user: ' + nexusUsername
     repositories {
         mavenDeployer {
             repository(url: "http://nexus.astraeus.nl/nexus/content/repositories/releases") {
@@ -53,3 +55,10 @@ uploadArchives {
         }
     }
 }
+
+compileKotlin2Js {
+    kotlinOptions.sourceMap = true
+    kotlinOptions.sourceMapEmbedSources = "always"
+
+    // remaining configuration options
+}

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
+#Sun Apr 15 12:16:01 CEST 2018
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.5-all.zip

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.0.8-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.0.10-SNAPSHOT" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="kotlin-language" name="Kotlin">
       <configuration version="3" platform="JavaScript " useProjectSettings="false">
@@ -8,6 +8,8 @@
         <compilerArguments>
           <option name="outputFile" value="$MODULE_DIR$/build/classes/kotlin/main/komp.js" />
           <option name="noStdlib" value="true" />
+          <option name="sourceMapPrefix" value="" />
+          <option name="sourceMapEmbedSources" value="inlining" />
           <option name="metaInfo" value="true" />
           <option name="target" value="v5" />
           <option name="main" value="call" />
@@ -31,16 +33,15 @@
       <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/resources" type="java-test-resource" />
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/out" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
     <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.21" 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.1.4" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" level="project" />
   </component>
 </module>

komp.ipr

@@ -5,7 +5,6 @@
       <map>
         <entry key="checkstyle-version" value="8.4" />
         <entry key="copy-libs" value="false" />
-        <entry key="last-active-plugin-version" value="5.16.3" />
         <entry key="location-0" value="BUNDLED:(bundled):Sun Checks" />
         <entry key="location-1" value="BUNDLED:(bundled):Google Checks" />
         <entry key="scan-before-checkin" value="false" />
@@ -58,7 +57,7 @@
     </option>
   </component>
   <component name="HotSwapAgentPluginSettingsProvider">
-    <option name="agentPath" value="$APPLICATION_PLUGINS_DIR$/hotswap-agent-intellij-plugin/lib/agent/hotswap-agent-1.0.jar" />
+    <option name="agentPath" value="$APPLICATION_PLUGINS_DIR$/hotswap-agent-intellij-plugin/lib/agent/hotswap-agent-1.3.0.jar" />
   </component>
   <component name="InspectionProjectProfileManager">
     <profile version="1.0">
@@ -151,27 +150,22 @@
     <mapping directory="" vcs="Git" />
   </component>
   <component name="libraryTable">
-    <library name="Flutter Plugins">
+    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.2.51" type="kotlin.common">
-      <CLASSES />
-      <JAVADOC />
-      <SOURCES />
-    </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.4" type="kotlin.common">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.4/dc47c809e549ff5e48be235b682e2d6eaf9b1d9e/kotlin-stdlib-common-1.1.4.jar!/" />
+        <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!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.4/ee299091d089dbc770eac2d3b59383917dc14cc2/kotlin-stdlib-common-1.1.4-sources.jar!/" />
+        <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!/" />
       </SOURCES>
     </library>
-    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.21" type="kotlin.js">
+    <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.2.51" type="kotlin.js">
       <CLASSES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.21/ff3f8ae5d1bd662bbb89dfc7a4ca70a8d663733/kotlin-stdlib-js-1.2.21.jar!/" />
+        <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!/" />
       </CLASSES>
       <JAVADOC />
       <SOURCES>
-        <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.2.21/16a3f8f3704502ea2fd666e8aaffb3a33a095c2d/kotlin-stdlib-js-1.2.21-sources.jar!/" />
+        <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!/" />
       </SOURCES>
     </library>
     <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.4" type="kotlin.common">

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

@@ -1,6 +1,5 @@
 package nl.astraeus.komp
 
-import org.w3c.dom.Element
 import org.w3c.dom.Node
 import org.w3c.dom.get
 
@@ -12,32 +11,74 @@ import org.w3c.dom.get
 
 object DomDiffer {
 
-    fun replaceDiff(newElement: Element, oldElement: Element): Element {
+  fun replaceDiff(oldElement: KompElement, newElement: KompElement, element: Node): Node {
-        if (!newElement.isEqualNode(oldElement)) {
+    if (oldElement.isKomponent() && newElement.isKomponent()) {
-            replaceNode(newElement, oldElement)
+      if (oldElement.equals(newElement)) {
-
+        newElement.komponent?.update()
-            return newElement
+        return newElement.komponent?.element!!
       } else {
-            // think of the children!
+        return Komponent.replaceNode(newElement, element)
-            for (index in 0 until newElement.children.length) {
+      }
-                val newChild = newElement.children[index]
+    } else if (!oldElement.isKomponent() && newElement.isKomponent()) {
-                val oldChild = oldElement.children[index]
+      return Komponent.replaceNode(newElement, element)
-
+    } else if (!oldElement.equals(newElement)) {
-                if (newChild is Element && oldChild is Element) {
+      return Komponent.replaceNode(newElement, element)
-                    replaceDiff(newChild, oldChild)
     } else {
-                    throw IllegalStateException("Children are not nodes! $newChild, $oldChild")
+      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) {
+          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) {
+                element.removeChild(childNode)
+
+                removed++
+              } else {
+                replaceDiff(oldElement.children[index + removed], newElement.children[index], childNode)
+
+                index++
+              }
             }
           }
 
-            return oldElement
+          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 if (!oldElement.children[index + removed].equals(newElement.children[index]) && removed < toRemove) {
+            } else {
+              replaceDiff(oldElement.children[index], newElement.children[index], childNode)
+            }
+          }
         }
       }
 
-    private fun replaceNode(newElement: Node, oldElement: Node) {
+      return element
-        val parent = oldElement.parentElement ?: throw IllegalStateException("oldElement has no parent! $oldElement")
+    }
-
-        parent.replaceChild(newElement, oldElement)
   }
 
 }

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

@@ -0,0 +1,324 @@
+package nl.astraeus.komp
+
+import kotlinx.html.Entities
+import kotlinx.html.Tag
+import kotlinx.html.TagConsumer
+import kotlinx.html.Unsafe
+import kotlinx.html.div
+import kotlinx.html.h1
+import kotlinx.html.hr
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.span
+import org.w3c.dom.Node
+import org.w3c.dom.events.Event
+import kotlin.browser.document
+
+/**
+ * User: rnentjes
+ * Date: 8-5-18
+ * Time: 21:58
+ */
+
+class KompElement(
+    val komponent: Komponent?,
+    var text: String,
+    var unsafe: Boolean = false,
+    val attributes: MutableMap<String, String>? = null,
+    val children: MutableList<KompElement>? = null,
+    val events: MutableMap<String, (Event) -> Unit>? = null
+) {
+
+  constructor(text: String, isText: Boolean = true) : this(
+      null,
+      text,
+      false,
+      if (isText) {
+        null
+      } else {
+        HashMap()
+      },
+      if (isText) {
+        null
+      } else {
+        ArrayList()
+      },
+      if (isText) {
+        null
+      } else {
+        HashMap()
+      }
+  )
+
+  constructor(komponent: Komponent) : this(
+      komponent,
+      "",
+      false,
+      null,
+      null,
+      null
+  )
+
+  /* shallow equals check */
+  fun equals(other: KompElement): Boolean {
+    if (komponent != null) {
+      return komponent == other.komponent
+    } else if (other.isText() || isText()) {
+      return other.text == text
+    } else {
+      if (other.attributes?.size != attributes?.size || other.events?.size != events?.size) {
+        return false
+      } else {
+        (attributes?.entries)?.forEach { entry ->
+          if (other.attributes?.get(entry.key) != entry.value) {
+            return false
+          }
+        }
+        (events?.entries)?.forEach { entry ->
+          if (other.events?.get(entry.key) != entry.value) {
+            return false
+          }
+        }
+      }
+    }
+
+    return true
+  }
+
+  fun isText() = attributes == null && komponent == null
+
+  fun isKomponent() = komponent != null
+
+  fun create(): Node = when {
+    komponent != null -> {
+      komponent.element?.also {
+        Komponent.remove(it)
+      }
+
+      val kompElement = komponent.kompElement ?: komponent.create()
+      val element = kompElement.create()
+
+      komponent.kompElement = kompElement
+      komponent.element = element
+
+      Komponent.define(element, komponent)
+
+      element
+    }
+    isText() -> document.createTextNode(text)
+    else -> {
+      val result = document.createElement(text)
+
+      (attributes?.entries)?.forEach { entry ->
+        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())
+      }
+
+      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)
+    if (attributes != null) {
+      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 KompConsumer : 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(content.toString(), true))
+  }
+
+  override fun onTagContentEntity(entity: Entities) {
+    console.log("KC.onTagContentEntity", entity)
+  }
+
+  override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
+    //console.log("KC.onTagContentUnsafe", block)
+
+    throw IllegalStateException("unsafe blocks are not supported atm.")
+  }
+
+  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(tag.tagName, false)
+
+    for (attr in tag.attributes.entries) {
+      currentTag?.attributes?.set(attr.key, attr.value)
+    }
+  }
+
+  fun appendKomponent(komponent: Komponent) {
+    currentTag?.children?.add(KompElement(komponent))
+  }
+
+}
+
+class KompTest : Komponent() {
+  var counter = 0
+  var show = false
+  var child: KompTest? = null
+
+  override fun render(consumer: KompConsumer) = consumer.div {
+    h1 {
+      +"Test"
+    }
+    hr { }
+    span {
+      +"Clicks $counter"
+
+      onClickFunction = {
+        println("click")
+        counter++
+
+        update()
+      }
+    }
+    if (show) {
+      hr {}
+
+      span {
+        +"Hide element"
+
+        onClickFunction = {
+          show = false
+
+          update()
+        }
+      }
+
+      if (child == null) {
+        child = KompTest()
+      }
+
+      include(child!!)
+    } else {
+      hr {}
+
+      span {
+        +"Show element"
+
+        onClickFunction = {
+          show = true
+
+          console.log("show", this)
+
+          update()
+        }
+      }
+    }
+  }
+}
+
+/*
+fun main(args: Array<String>) {
+  val test = KompTest()
+
+  println(test.create())
+
+  Komponent.create(document.body!!, KompTest())
+}
+*/

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

@@ -1,43 +1,43 @@
 package nl.astraeus.komp
 
 import kotlinx.html.HtmlBlockTag
-import kotlinx.html.TagConsumer
-import kotlinx.html.dom.create
-import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
-import kotlin.browser.document
+import org.w3c.dom.Node
+import kotlin.collections.component1
+import kotlin.collections.component2
+import kotlin.collections.set
 
 fun HtmlBlockTag.include(component: Komponent) {
-    val result = component.render(this.consumer as TagConsumer<HTMLElement>)
+  val consumer = this.consumer
+  if (consumer is KompConsumer) {
+    consumer.appendKomponent(component)
+  }
 
-    component.element = result
+/*
-    nl.astraeus.komp.Komponent.define(result, component)
+  val kc = this.consumer
+  val result = component.render(kc as KompConsumer)
+  val element = result.create()
+
+  component.element = element
+  Komponent.define(element, component, result)
+*/
 }
 
 abstract class Komponent {
-    var element: Element? = null
+  var element: Node? = null
+  var kompElement: KompElement? = null
   var rendered = false
 
-    open fun create(): HTMLElement {
+  open fun create(): KompElement {
-        var elem =element
+    val result = render(KompConsumer())
-        if (elem != null) {
+
-            remove(elem)
+    return result
   }
 
-        elem = render(document.create)
+  abstract fun render(consumer: KompConsumer): KompElement
-        rendered = true
-
-        define(elem, this)
-
-        this.element = elem
-
-        return elem
-    }
-
-    abstract fun render(consumer: TagConsumer<HTMLElement>): HTMLElement
 
   open fun refresh() {
-        if (rendered) {
+    if (!rendered) {
       refresh(element)
     } else {
       update()
@@ -48,34 +48,84 @@ abstract class Komponent {
     refresh(element)
   }
 
+  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
+    if (rendered != other.rendered) return false
+
+    return true
+  }
+
+  override fun hashCode(): Int {
+    var result = kompElement?.hashCode() ?: 0
+    result = 31 * result + rendered.hashCode()
+    return result
+  }
+
   companion object {
 
-        private val elements: MutableMap<Element, Komponent> = HashMap()
+    private val elements: MutableMap<Node, Komponent> = HashMap()
-        private val elementList: MutableList<Komponent> = ArrayList()
 
-        fun define(element: HTMLElement, component: Komponent) {
+    fun replaceNode(newKomponent: KompElement, oldElement: Node): Node {
+      val newElement = newKomponent.create()
+
+      val parent = oldElement.parentElement ?: throw IllegalStateException("oldElement has no parent! $oldElement")
+
+      parent.replaceChild(newElement, oldElement)
+
+      elements[oldElement]?.also {
+        elements.remove(oldElement)
+      }
+
+      newKomponent.komponent?.also {
+        it.element = newElement
+
+        elements[newElement] = it
+      }
+
+      return newElement
+    }
+
+    fun removeElement(element: Node) {
+      val parent = element.parentElement ?: throw IllegalArgumentException("Element has no parent!?")
+
+      parent.removeChild(element)
+
+      elements.remove(element)
+    }
+
+    fun appendElement(element: Node, kompElement: KompElement) {
+      element.appendChild(kompElement.create())
+    }
+
+    fun define(element: Node, component: Komponent) {
       elements[element] = component
-            elementList.add(component)
     }
 
     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
         elements[element] = component
-            elementList.add(component)
+      }
     }
 
-        fun remove(element: Element) {
+    fun remove(element: Node) {
       val component = elements[element]
 
       elements.remove(element)
-            elementList.remove(component)
     }
 
     @JsName("remove")
@@ -85,26 +135,32 @@ abstract class Komponent {
           elements.remove(key)
         }
       }
-            elementList.remove(component)
     }
 
     fun refresh(component: Komponent) {
       refresh(component.element)
     }
 
-        fun refresh(element: Element?) {
+    fun refresh(element: Node?) {
       if (element != null) {
         elements[element]?.let {
           //val parent = element.parentElement
           val newElement = it.create()
+          val kompElement = it.kompElement
 
-                    //parent?.replaceChild(newElement, element)
+          val replacedElement = if (kompElement != null) {
-                    val replacedElement = DomDiffer.replaceDiff(newElement, element)
+            DomDiffer.replaceDiff(kompElement, newElement, element)
+          } else {
+            newElement.create()
+          }
 
+          it.kompElement = newElement
           it.element = replacedElement
 
-                    elements.remove(replacedElement)
+          elements.remove(element)
           elements[replacedElement] = it
+
+          it.rendered = true
         }
       }
     }

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

@@ -3,7 +3,6 @@ package nl.astraeus.komp
 import kotlinx.html.dom.create
 import kotlinx.html.js.div
 import kotlinx.html.style
-import org.w3c.dom.HTMLElement
 import kotlin.browser.document
 
 /**
@@ -37,16 +36,20 @@ abstract class SizedKomponent(
     this.size = size
   }
 
-  override fun create(): HTMLElement {
+  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
   }
 
 }

src/main/resources/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Bla</title>
+</head>
+<body>
+
+    <script src="../../kotlin-js-min/main/kotlin.js"></script>
+    <script src="../../kotlin-js-min/main/kotlinx-html-js.js"></script>
+    <script src="../../kotlin-js-min/main/komp.js"></script>
+</body>
+</html>