Added unsafe option

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.10-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.0-SNAPSHOT" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="kotlin-language" name="Kotlin">
       <configuration version="3" platform="JavaScript " useProjectSettings="false">
@@ -8,7 +8,6 @@
         <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" />

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

@@ -15,7 +15,9 @@ object DomDiffer {
     if (oldElement.isKomponent() && newElement.isKomponent()) {
       if (oldElement.equals(newElement)) {
         newElement.komponent?.update()
-        return newElement.komponent?.element!!
+
+        return newElement.komponent?.element ?: newElement.komponent?.create()?.create()
+        ?: throw IllegalStateException("Unable to create new element!")
       } else {
         return Komponent.replaceNode(newElement, element)
       }
@@ -29,7 +31,10 @@ object DomDiffer {
           Komponent.appendElement(element, newElement.children[index])
         }
       } else if (oldElement.children != null && newElement.children == null) {
-        while(element.firstChild != 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) {
@@ -38,13 +43,16 @@ object DomDiffer {
           var removed = 0
           var index = 0
 
-          while(index < newElement.children.size) {
+          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 ((!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++
@@ -56,7 +64,7 @@ object DomDiffer {
             }
           }
 
-          while(removed < toRemove) {
+          while (removed < toRemove) {
             element.lastChild?.also {
               Komponent.removeElement(it)
             }
@@ -69,7 +77,6 @@ object DomDiffer {
 
             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)
             }

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

@@ -11,7 +11,9 @@ import kotlinx.html.js.onClickFunction
 import kotlinx.html.span
 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
@@ -19,40 +21,51 @@ import kotlin.browser.document
  * Time: 21:58
  */
 
+enum class ElementType {
+  KOMPONENT,
+  TAG,
+  TEXT,
+  UNSAFE,
+}
+
 class KompElement(
+    val type: ElementType,
     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(
+  constructor(text: String, type: ElementType) : this(
-      null,
+      type,
+      if (type == ElementType.KOMPONENT) {
+        throw IllegalStateException("Type KOMPONENT not allowed in String constructor")
+      } else {
+        null
+      },
       text,
-      false,
+      if (type == ElementType.TAG) {
-      if (isText) {
-        null
-      } else {
         HashMap()
-      },
-      if (isText) {
-        null
       } else {
+        null
+      },
+      if (type == ElementType.TAG) {
         ArrayList()
-      },
-      if (isText) {
-        null
       } else {
+        null
+      },
+      if (type == ElementType.TAG) {
         HashMap()
+      } else {
+        null
       }
   )
 
   constructor(komponent: Komponent) : this(
+      ElementType.KOMPONENT,
       komponent,
       "",
-      false,
       null,
       null,
       null
@@ -61,22 +74,47 @@ class KompElement(
   /* shallow equals check */
   fun equals(other: KompElement): Boolean {
     if (komponent != null) {
-      return komponent == other.komponent
+      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) != entry.value) {
+          if (!other.attributes?.get(entry.key).equals(entry.value)) {
+            if (Komponent.logEquals) {
+              console.log("!= attr", this, other)
+            }
             return false
           }
         }
         (events?.entries)?.forEach { entry ->
-          if (other.events?.get(entry.key) != entry.value) {
+          val thisFunction: dynamic = other.events?.get(entry.key)
-            return false
+          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
         }
       }
     }
@@ -84,28 +122,61 @@ class KompElement(
     return true
   }
 
-  fun isText() = attributes == null && komponent == null
+  fun isText(): Boolean {
+    return type == ElementType.TEXT
+  }
 
-  fun isKomponent() = komponent != null
+  fun isKomponent(): Boolean {
+    return type == ElementType.KOMPONENT
+  }
 
-  fun create(): Node = when {
+  fun create(): Node = when(type) {
-    komponent != null -> {
+    ElementType.KOMPONENT -> {
-      komponent.element?.also {
+      val komp = komponent
-        Komponent.remove(it)
+
+      if (komp == null) {
+        throw IllegalStateException("komponent == null in type Komponent!")
+      } else {
+        komp.element?.also {
+          Komponent.remove(it)
+        }
+
+        val kompElement = komp.create()
+        val element = kompElement.create()
+
+        komp.kompElement = kompElement
+        komp.element = element
+
+        Komponent.define(element, komp)
+
+        element
+      }
+    }
+    ElementType.TEXT -> document.createTextNode(text)
+    ElementType.UNSAFE -> {
+      val div = 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
+        }
       }
 
-      val kompElement = komponent.kompElement ?: komponent.create()
+      result ?: throw IllegalStateException("No element found in unsafe content! [$text]")
-      val element = kompElement.create()
-
-      komponent.kompElement = kompElement
-      komponent.element = element
-
-      Komponent.define(element, komponent)
-
-      element
     }
-    isText() -> document.createTextNode(text)
+    ElementType.TAG -> {
-    else -> {
       val result = document.createElement(text)
 
       (attributes?.entries)?.forEach { entry ->
@@ -184,6 +255,14 @@ class KompElement(
   }
 }
 
+class UnsafeWrapper: Unsafe {
+  var text = ""
+
+  override fun String.unaryPlus() {
+    text += this@unaryPlus
+  }
+}
+
 class KompConsumer : TagConsumer<KompElement> {
   val stack = ArrayList<KompElement>()
   var currentTag: KompElement? = null
@@ -202,7 +281,7 @@ class KompConsumer : TagConsumer<KompElement> {
   override fun onTagContent(content: CharSequence) {
     //console.log("KC.onTagContent", content)
 
-    currentTag?.children?.add(KompElement(content.toString(), true))
+    currentTag?.children?.add(KompElement(content.toString(), ElementType.TEXT))
   }
 
   override fun onTagContentEntity(entity: Entities) {
@@ -211,12 +290,16 @@ class KompConsumer : TagConsumer<KompElement> {
 
   override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
     //console.log("KC.onTagContentUnsafe", block)
+    val txt = UnsafeWrapper()
 
-    throw IllegalStateException("unsafe blocks are not supported atm.")
+    block.invoke(txt)
+
+    console.log("KC.onTagContentUnsafe", txt)
+    currentTag?.children?.add(KompElement(txt.text, ElementType.UNSAFE))
   }
 
   override fun onTagEnd(tag: Tag) {
-    //console.log("KC.onTagEnd", tag)
+    console.log("KC.onTagEnd", tag)
 
     check(currentTag != null)
     check(currentTag?.children != null)
@@ -238,13 +321,13 @@ class KompConsumer : TagConsumer<KompElement> {
   }
 
   override fun onTagStart(tag: Tag) {
-    //console.log("KC.onTagStart", tag)
+    console.log("KC.onTagStart", tag)
 
     currentTag?.apply {
       stack.add(this)
     }
 
-    currentTag = KompElement(tag.tagName, false)
+    currentTag = KompElement(tag.tagName, ElementType.TAG)
 
     for (attr in tag.attributes.entries) {
       currentTag?.attributes?.set(attr.key, attr.value)

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

@@ -14,6 +14,7 @@ fun HtmlBlockTag.include(component: Komponent) {
   }
 
 /*
+          newElement.komponent = it
   val kc = this.consumer
   val result = component.render(kc as KompConsumer)
   val element = result.create()
@@ -23,6 +24,11 @@ fun HtmlBlockTag.include(component: Komponent) {
 */
 }
 
+enum class UpdateStrategy {
+  REPLACE,
+  DOM_DIFF
+}
+
 abstract class Komponent {
   var element: Node? = null
   var kompElement: KompElement? = null
@@ -31,6 +37,8 @@ abstract class Komponent {
   open fun create(): KompElement {
     val result = render(KompConsumer())
 
+    //result.komponent = this
+
     return result
   }
 
@@ -70,9 +78,18 @@ abstract class Komponent {
 
     private val elements: MutableMap<Node, Komponent> = HashMap()
 
+    var logRenderEvent = false
+    var logReplaceEvent = false
+    var logEquals = false
+    var updateStrategy = UpdateStrategy.DOM_DIFF
+
     fun replaceNode(newKomponent: KompElement, oldElement: Node): Node {
       val newElement = newKomponent.create()
 
+      if (Komponent.logReplaceEvent) {
+        console.log("Replace", oldElement, newElement)
+      }
+
       val parent = oldElement.parentElement ?: throw IllegalStateException("oldElement has no parent! $oldElement")
 
       parent.replaceChild(newElement, oldElement)
@@ -82,6 +99,7 @@ abstract class Komponent {
       }
 
       newKomponent.komponent?.also {
+        it.kompElement = newKomponent
         it.element = newElement
 
         elements[newElement] = it
@@ -93,13 +111,21 @@ abstract class Komponent {
     fun removeElement(element: Node) {
       val parent = element.parentElement ?: throw IllegalArgumentException("Element has no parent!?")
 
+      if (Komponent.logReplaceEvent) {
+        console.log("Remove", element)
+      }
+
       parent.removeChild(element)
 
       elements.remove(element)
     }
 
     fun appendElement(element: Node, kompElement: KompElement) {
-      element.appendChild(kompElement.create())
+      val newElement = kompElement.create()
+      if (Komponent.logReplaceEvent) {
+        console.log("Append", newElement)
+      }
+      element.appendChild(newElement)
     }
 
     fun define(element: Node, component: Komponent) {
@@ -123,8 +149,6 @@ abstract class Komponent {
     }
 
     fun remove(element: Node) {
-      val component = elements[element]
-
       elements.remove(element)
     }
 
@@ -144,21 +168,35 @@ abstract class Komponent {
     fun refresh(element: Node?) {
       if (element != null) {
         elements[element]?.let {
-          //val parent = element.parentElement
+          if (logRenderEvent) {
-          val newElement = it.create()
+            console.log("Rendering", it)
-          val kompElement = it.kompElement
-
-          val replacedElement = if (kompElement != null) {
-            DomDiffer.replaceDiff(kompElement, newElement, element)
-          } else {
-            newElement.create()
           }
 
-          it.kompElement = newElement
+          //val parent = element.parentElement
-          it.element = replacedElement
+          val newElement = it.create()
 
-          elements.remove(element)
+          if (updateStrategy == UpdateStrategy.REPLACE) {
-          elements[replacedElement] = it
+            replaceNode(newElement, element)
+/*
+            val replacedElement = replaceNode(newElement, element)
+            it.element = replacedElement
+            elements[replacedElement] = it
+*/
+          } else {
+            val kompElement = it.kompElement
+
+            val replacedElement = if (kompElement != null) {
+              DomDiffer.replaceDiff(kompElement, newElement, element)
+            } else {
+              newElement.create()
+            }
+
+            it.kompElement = newElement
+            it.element = replacedElement
+
+            elements.remove(element)
+            elements[replacedElement] = it
+          }
 
           it.rendered = true
         }