rnentjes/kotlin-komponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added unsafe option

Browse Source
This commit is contained in:
rnentjes
2018-09-19 15:23:49 +02:00
parent ae3820e86f
commit 3f3988a7fd
4 changed files with 190 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/kotlin/nl/astraeus/komp/DomDiff.kt
View File

@@ -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)
}

163
src/main/kotlin/nl/astraeus/komp/KompElement.kt
View File

@@ -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(
null,
constructor(text: String, type: ElementType) : this(
type,
if (type == ElementType.KOMPONENT) {
throw IllegalStateException("Type KOMPONENT not allowed in String constructor")
} else {
null
},
text,
false,
if (isText) {
null
} else {
if (type == ElementType.TAG) {
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) {
return false
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
}
}
}
@@ -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 {
komponent != null -> {
komponent.element?.also {
Komponent.remove(it)
fun create(): Node = when(type) {
ElementType.KOMPONENT -> {
val komp = komponent
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()
val element = kompElement.create()
komponent.kompElement = kompElement
komponent.element = element
Komponent.define(element, komponent)
element
result ?: throw IllegalStateException("No element found in unsafe content! [$text]")
}
isText() -> document.createTextNode(text)
else -> {
ElementType.TAG -> {
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)

68
src/main/kotlin/nl/astraeus/komp/Komponent.kt
View File

@@ -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
val newElement = it.create()
val kompElement = it.kompElement
val replacedElement = if (kompElement != null) {
DomDiffer.replaceDiff(kompElement, newElement, element)
} else {
newElement.create()
if (logRenderEvent) {
console.log("Rendering", it)
}
it.kompElement = newElement
it.element = replacedElement
//val parent = element.parentElement
val newElement = it.create()
elements.remove(element)
elements[replacedElement] = it
if (updateStrategy == UpdateStrategy.REPLACE) {
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
}