Add faster update option, v 0.1.9

build.gradle

@@ -1,5 +1,5 @@
 group 'nl.astraeus'
-version '0.1.9-SNAPSHOT'
+version '0.1.9'
 
 apply plugin: 'kotlin2js'
 apply plugin: 'kotlin-dce-js'

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.1.8" 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.9-SNAPSHOT" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="kotlin-language" name="Kotlin">
       <configuration version="3" platform="JavaScript " allPlatforms="JS []" useProjectSettings="false" pureKotlinSourceFolders="$MODULE_DIR$/src/test/kotlin;/home/rnentjes/Development/komp/komp/src/main/kotlin">
@@ -34,8 +34,8 @@
     <exclude-output />
     <content url="file://$MODULE_DIR$">
       <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/kotlin" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="kotlin-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/out" />

komp.ipr

@@ -72,6 +72,127 @@
   <component name="MacroExpansionManager">
     <option name="directoryName" value="qFcQOWli" />
   </component>
+  <component name="Palette2">
+    <group name="Swing">
+      <item class="com.intellij.uiDesigner.HSpacer" tooltip-text="Horizontal Spacer" icon="/com/intellij/uiDesigner/icons/hspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="1" hsize-policy="6" anchor="0" fill="1" />
+      </item>
+      <item class="com.intellij.uiDesigner.VSpacer" tooltip-text="Vertical Spacer" icon="/com/intellij/uiDesigner/icons/vspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="1" anchor="0" fill="2" />
+      </item>
+      <item class="javax.swing.JPanel" icon="/com/intellij/uiDesigner/icons/panel.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3" />
+      </item>
+      <item class="javax.swing.JScrollPane" icon="/com/intellij/uiDesigner/icons/scrollPane.png" removable="false" auto-create-binding="false" can-attach-label="true">
+        <default-constraints vsize-policy="7" hsize-policy="7" anchor="0" fill="3" />
+      </item>
+      <item class="javax.swing.JButton" icon="/com/intellij/uiDesigner/icons/button.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="3" anchor="0" fill="1" />
+        <initial-values>
+          <property name="text" value="Button" />
+        </initial-values>
+      </item>
+      <item class="javax.swing.JRadioButton" icon="/com/intellij/uiDesigner/icons/radioButton.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
+        <initial-values>
+          <property name="text" value="RadioButton" />
+        </initial-values>
+      </item>
+      <item class="javax.swing.JCheckBox" icon="/com/intellij/uiDesigner/icons/checkBox.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
+        <initial-values>
+          <property name="text" value="CheckBox" />
+        </initial-values>
+      </item>
+      <item class="javax.swing.JLabel" icon="/com/intellij/uiDesigner/icons/label.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="0" anchor="8" fill="0" />
+        <initial-values>
+          <property name="text" value="Label" />
+        </initial-values>
+      </item>
+      <item class="javax.swing.JTextField" icon="/com/intellij/uiDesigner/icons/textField.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
+          <preferred-size width="150" height="-1" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JPasswordField" icon="/com/intellij/uiDesigner/icons/passwordField.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
+          <preferred-size width="150" height="-1" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JFormattedTextField" icon="/com/intellij/uiDesigner/icons/formattedTextField.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
+          <preferred-size width="150" height="-1" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JTextArea" icon="/com/intellij/uiDesigner/icons/textArea.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JTextPane" icon="/com/intellij/uiDesigner/icons/textPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JEditorPane" icon="/com/intellij/uiDesigner/icons/editorPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JComboBox" icon="/com/intellij/uiDesigner/icons/comboBox.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="0" hsize-policy="2" anchor="8" fill="1" />
+      </item>
+      <item class="javax.swing.JTable" icon="/com/intellij/uiDesigner/icons/table.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JList" icon="/com/intellij/uiDesigner/icons/list.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="2" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JTree" icon="/com/intellij/uiDesigner/icons/tree.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
+          <preferred-size width="150" height="50" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JTabbedPane" icon="/com/intellij/uiDesigner/icons/tabbedPane.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
+          <preferred-size width="200" height="200" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JSplitPane" icon="/com/intellij/uiDesigner/icons/splitPane.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
+          <preferred-size width="200" height="200" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JSpinner" icon="/com/intellij/uiDesigner/icons/spinner.png" removable="false" auto-create-binding="true" can-attach-label="true">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
+      </item>
+      <item class="javax.swing.JSlider" icon="/com/intellij/uiDesigner/icons/slider.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
+      </item>
+      <item class="javax.swing.JSeparator" icon="/com/intellij/uiDesigner/icons/separator.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3" />
+      </item>
+      <item class="javax.swing.JProgressBar" icon="/com/intellij/uiDesigner/icons/progressbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1" />
+      </item>
+      <item class="javax.swing.JToolBar" icon="/com/intellij/uiDesigner/icons/toolbar.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1">
+          <preferred-size width="-1" height="20" />
+        </default-constraints>
+      </item>
+      <item class="javax.swing.JToolBar$Separator" icon="/com/intellij/uiDesigner/icons/toolbarSeparator.png" removable="false" auto-create-binding="false" can-attach-label="false">
+        <default-constraints vsize-policy="0" hsize-policy="0" anchor="0" fill="1" />
+      </item>
+      <item class="javax.swing.JScrollBar" icon="/com/intellij/uiDesigner/icons/scrollbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
+        <default-constraints vsize-policy="6" hsize-policy="0" anchor="0" fill="2" />
+      </item>
+    </group>
+  </component>
   <component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
   <component name="ProjectModuleManager">
     <modules>

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

@@ -0,0 +1,169 @@
+package nl.astraeus.komp
+
+import kotlinx.html.DefaultUnsafe
+import kotlinx.html.Entities
+import kotlinx.html.Tag
+import kotlinx.html.TagConsumer
+import kotlinx.html.Unsafe
+import kotlinx.html.consumers.onFinalize
+import org.w3c.dom.Document
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.Node
+import org.w3c.dom.asList
+import org.w3c.dom.events.Event
+
+@Suppress("NOTHING_TO_INLINE")
+private inline fun HTMLElement.setEvent(name: String, noinline callback : (Event) -> Unit) : Unit {
+  asDynamic()[name] = callback
+}
+
+interface HtmlConsumer : TagConsumer<HTMLElement> {
+  fun append(node: Node)
+}
+
+class HtmlBuilder(val document : Document) : HtmlConsumer {
+  private val path = arrayListOf<HTMLElement>()
+  private var lastLeaved : HTMLElement? = null
+
+  override fun onTagStart(tag: Tag) {
+    val element: HTMLElement = when {
+      tag.namespace != null -> document.createElementNS(tag.namespace!!, tag.tagName).asDynamic()
+      else -> document.createElement(tag.tagName) as HTMLElement
+    }
+
+    tag.attributesEntries.forEach {
+      element.setAttribute(it.key, it.value)
+    }
+
+    if (path.isNotEmpty()) {
+      path.last().appendChild(element)
+    }
+
+    path.add(element)
+  }
+
+  override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
+    when {
+      path.isEmpty() -> throw IllegalStateException("No current tag")
+      path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
+      else -> path.last().let { node ->
+        if (value == null) {
+          node.removeAttribute(attribute)
+        } else {
+          node.setAttribute(attribute, value)
+        }
+      }
+    }
+  }
+
+  override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
+    when {
+      path.isEmpty() -> throw IllegalStateException("No current tag")
+      path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
+      else -> path.last().setEvent(event, value)
+    }
+  }
+
+  override fun onTagEnd(tag: Tag) {
+    if (path.isEmpty() || path.last().tagName.toLowerCase() != tag.tagName.toLowerCase()) {
+      throw IllegalStateException("We haven't entered tag ${tag.tagName} but trying to leave")
+    }
+
+    lastLeaved = path.removeAt(path.lastIndex)
+  }
+
+  override fun onTagContent(content: CharSequence) {
+    if (path.isEmpty()) {
+      throw IllegalStateException("No current DOM node")
+    }
+
+    path.last().appendChild(document.createTextNode(content.toString()))
+  }
+
+  override fun onTagContentEntity(entity: Entities) {
+    if (path.isEmpty()) {
+      throw IllegalStateException("No current DOM node")
+    }
+
+    // stupid hack as browsers doesn't support createEntityReference
+    val s = document.createElement("span") as HTMLElement
+    s.innerHTML = entity.text
+    path.last().appendChild(s.childNodes.asList().filter { it.nodeType == Node.TEXT_NODE }.first())
+
+    // other solution would be
+    //        pathLast().innerHTML += entity.text
+  }
+
+  override fun append(node: Node) {
+    path.last().appendChild(node)
+  }
+
+  override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
+    with(DefaultUnsafe()) {
+      block()
+
+      path.last().innerHTML += toString()
+    }
+  }
+
+  override fun onTagComment(content: CharSequence) {
+    if (path.isEmpty()) {
+      throw IllegalStateException("No current DOM node")
+    }
+
+    path.last().appendChild(document.createComment(content.toString()))
+  }
+
+  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()
+
+}
+
+fun Document.createTree() : TagConsumer<HTMLElement> = HtmlBuilder(this)
+val Document.create : TagConsumer<HTMLElement>
+  get() = HtmlBuilder(this)
+
+fun Node.append(block: TagConsumer<HTMLElement>.() -> Unit): List<HTMLElement> =
+    ArrayList<HTMLElement>().let { result ->
+      ownerDocumentExt.createTree().onFinalize { it, partial ->
+        if (!partial) {
+          result.add(it); appendChild(it)
+        }
+      }.block()
+
+      result
+    }
+
+fun Node.prepend(block: TagConsumer<HTMLElement>.() -> Unit): List<HTMLElement> =
+    ArrayList<HTMLElement>().let { result ->
+      ownerDocumentExt.createTree().onFinalize { it, partial ->
+        if (!partial) {
+          result.add(it)
+          insertBefore(it, firstChild)
+        }
+      }.block()
+
+      result
+    }
+
+val HTMLElement.append: TagConsumer<HTMLElement>
+  get() = ownerDocumentExt.createTree().onFinalize { element, partial ->
+    if (!partial) {
+      this@append.appendChild(element)
+    }
+  }
+
+val HTMLElement.prepend: TagConsumer<HTMLElement>
+  get() = ownerDocumentExt.createTree().onFinalize { element, partial ->
+    if (!partial) {
+      this@prepend.insertBefore(element, this@prepend.firstChild)
+    }
+  }
+
+private val Node.ownerDocumentExt: Document
+  get() = when {
+    this is Document -> this
+    else             -> ownerDocument ?: throw IllegalStateException("Node has no ownerDocument")
+  }

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

@@ -1,52 +1,52 @@
 package nl.astraeus.komp
 
-import kotlinx.html.HtmlBlockTag
+import kotlinx.html.Tag
-import kotlinx.html.TagConsumer
-import kotlinx.html.dom.create
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
 import kotlin.browser.document
 
-fun HtmlBlockTag.include(component: Komponent) {
+fun Tag.include(component: Komponent) {
-  component.element = component.render(this.consumer as TagConsumer<HTMLElement>)
+  component.update()
+
+  val consumer = this.consumer
+  val element = component.element
+
+  if (consumer is HtmlBuilder && element != null) {
+    consumer.append(element)
+  }
 }
 
 abstract class Komponent {
   var element: Node? = null
 
   open fun create(): HTMLElement {
-    val result = render(document.create)
+    val consumer = HtmlBuilder(document)
+    val result = render(consumer)
 
     element = result
 
     return result
   }
 
-  abstract fun render(consumer: TagConsumer<HTMLElement>): HTMLElement
+  abstract fun render(consumer: HtmlBuilder): HTMLElement
+
+  open fun update() = refresh()
 
   open fun refresh() {
-    if (element == null) {
+    val oldElement = element
-      console.log("Unable to refresh, element == null", this)
+    if (logRenderEvent) {
+      console.log("Rendering", this)
     }
-    element?.let { element ->
+    val newElement = create()
-      if (logRenderEvent) {
-        console.log("Rendering", this)
-      }
 
-      val oldElement = element
+    if (oldElement != null) {
-      val newElement = create()
+        if (logReplaceEvent) {
-
+          console.log("Replacing", oldElement, newElement)
-      if (logReplaceEvent) {
+        }
-        console.log("Replacing", oldElement, newElement)
+        oldElement.parentNode?.replaceChild(newElement, oldElement)
-      }
-      element.parentNode?.replaceChild(newElement, oldElement)
     }
   }
 
-  open fun update() {
-    refresh()
-  }
-
   @JsName("remove")
   fun remove() {
     element?.let {
@@ -61,7 +61,6 @@ abstract class Komponent {
   }
 
   companion object {
-
     var logRenderEvent = false
     var logReplaceEvent = false