diff --git a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt index 6fc132c..a362ee1 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt @@ -40,14 +40,6 @@ } result.append(") {") result.append("\n") - for ((name, event) in getKompEvents()) { - result.append(indent.asSpaces()) - result.append("on") - result.append(name) - result.append(" -> ") - result.append(event) - result.append("\n") - } for (index in 0 until childNodes.length) { childNodes[index]?.let { if (it is Element) { @@ -65,65 +57,36 @@ return result.toString() } -internal fun Element.clearKompAttributes() { - val attributes = this.asDynamic()["komp-attributes"] as MutableSet? +internal fun Element.setKompAttribute(name: String, value: String?) { +// val setAttrs: MutableSet = getKompAttributes() +// setAttrs.add(name) + //getNewAttributes().add(name) - if (attributes == null) { - this.asDynamic()["komp-attributes"] = mutableSetOf() - } else { - attributes.clear() - } - - if (this is HTMLInputElement) { - this.checked = false - } -} - -internal fun Element.getKompAttributes(): MutableSet { - var result: MutableSet? = this.asDynamic()["komp-attributes"] as MutableSet? - - if (result == null) { - result = mutableSetOf() - - this.asDynamic()["komp-attributes"] = result - } - - return result -} - -internal fun Element.setKompAttribute(name: String, value: String) { - val setAttrs: MutableSet = getKompAttributes() - setAttrs.add(name) - - if (this is HTMLInputElement) { - when (name) { - "checked" -> { - this.checked = value == "checked" - } - "value" -> { - this.value = value - - } - else -> { - setAttribute(name, value) - } + if (value == null || value.isBlank()) { + if (this is HTMLInputElement) { + checked = false + } else { + removeAttribute(name) } - } else if (this.getAttribute(name) != value) { - setAttribute(name, value) - } -} - -internal fun Element.clearKompEvents() { - for ((name, event) in getKompEvents()) { - removeEventListener(name, event) - } - - val events = this.asDynamic()["komp-events"] as MutableMap Unit>? - - if (events == null) { - this.asDynamic()["komp-events"] = mutableMapOf Unit>() } else { - events.clear() + if (this is HTMLInputElement) { + when (name) { + "checked" -> { + checked = "checked" == value + } + "class" -> { + className = value + } + "value" -> { + this.value = value + } + else -> { + setAttribute(name, value) + } + } + } else if (this.getAttribute(name) != value) { + setAttribute(name, value) + } } } @@ -134,24 +97,9 @@ name } - val events: MutableMap Unit> = getKompEvents() - - events[eventName]?.let { - println("Warn event '$eventName' already defined!") - removeEventListener(eventName, it) - } - - events[eventName] = event - - this.asDynamic()["komp-events"] = events - this.addEventListener(eventName, event) } -internal fun Element.getKompEvents(): MutableMap Unit> { - return this.asDynamic()["komp-events"] ?: mutableMapOf() -} - internal fun Element.findElementIndex(): Int { val childNodes = parentElement?.children if (childNodes != null) { @@ -163,4 +111,4 @@ } return 0 -} \ No newline at end of file +} diff --git a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt index 6fc132c..a362ee1 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt @@ -40,14 +40,6 @@ } result.append(") {") result.append("\n") - for ((name, event) in getKompEvents()) { - result.append(indent.asSpaces()) - result.append("on") - result.append(name) - result.append(" -> ") - result.append(event) - result.append("\n") - } for (index in 0 until childNodes.length) { childNodes[index]?.let { if (it is Element) { @@ -65,65 +57,36 @@ return result.toString() } -internal fun Element.clearKompAttributes() { - val attributes = this.asDynamic()["komp-attributes"] as MutableSet? +internal fun Element.setKompAttribute(name: String, value: String?) { +// val setAttrs: MutableSet = getKompAttributes() +// setAttrs.add(name) + //getNewAttributes().add(name) - if (attributes == null) { - this.asDynamic()["komp-attributes"] = mutableSetOf() - } else { - attributes.clear() - } - - if (this is HTMLInputElement) { - this.checked = false - } -} - -internal fun Element.getKompAttributes(): MutableSet { - var result: MutableSet? = this.asDynamic()["komp-attributes"] as MutableSet? - - if (result == null) { - result = mutableSetOf() - - this.asDynamic()["komp-attributes"] = result - } - - return result -} - -internal fun Element.setKompAttribute(name: String, value: String) { - val setAttrs: MutableSet = getKompAttributes() - setAttrs.add(name) - - if (this is HTMLInputElement) { - when (name) { - "checked" -> { - this.checked = value == "checked" - } - "value" -> { - this.value = value - - } - else -> { - setAttribute(name, value) - } + if (value == null || value.isBlank()) { + if (this is HTMLInputElement) { + checked = false + } else { + removeAttribute(name) } - } else if (this.getAttribute(name) != value) { - setAttribute(name, value) - } -} - -internal fun Element.clearKompEvents() { - for ((name, event) in getKompEvents()) { - removeEventListener(name, event) - } - - val events = this.asDynamic()["komp-events"] as MutableMap Unit>? - - if (events == null) { - this.asDynamic()["komp-events"] = mutableMapOf Unit>() } else { - events.clear() + if (this is HTMLInputElement) { + when (name) { + "checked" -> { + checked = "checked" == value + } + "class" -> { + className = value + } + "value" -> { + this.value = value + } + else -> { + setAttribute(name, value) + } + } + } else if (this.getAttribute(name) != value) { + setAttribute(name, value) + } } } @@ -134,24 +97,9 @@ name } - val events: MutableMap Unit> = getKompEvents() - - events[eventName]?.let { - println("Warn event '$eventName' already defined!") - removeEventListener(eventName, it) - } - - events[eventName] = event - - this.asDynamic()["komp-events"] = events - this.addEventListener(eventName, event) } -internal fun Element.getKompEvents(): MutableMap Unit> { - return this.asDynamic()["komp-events"] ?: mutableMapOf() -} - internal fun Element.findElementIndex(): Int { val childNodes = parentElement?.children if (childNodes != null) { @@ -163,4 +111,4 @@ } return 0 -} \ No newline at end of file +} diff --git a/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt b/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt index c9b77c6..d21f2f7 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt @@ -9,7 +9,6 @@ import kotlinx.html.Unsafe import org.w3c.dom.Element import org.w3c.dom.HTMLElement -import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLSpanElement import org.w3c.dom.Node import org.w3c.dom.asList @@ -143,15 +142,10 @@ //logReplace"onTagStart, currentElement1.1: $currentNode") currentPosition.currentParent().appendChild(currentNode!!) - } else if ( - !currentNode?.asElement()?.tagName.equals(tag.tagName, true) || - ( - tag.namespace != null && - !currentNode?.asElement()?.namespaceURI.equals(tag.namespace, true) - ) - ) { + } else { logReplace("onTagStart, currentElement, namespace: ${currentNode?.asElement()?.namespaceURI} -> ${tag.namespace}") logReplace("onTagStart, currentElement, replace: ${currentNode?.asElement()?.tagName} -> ${tag.tagName}") + currentNode = if (tag.namespace != null) { document.createElementNS(tag.namespace, tag.tagName) } else { @@ -159,9 +153,6 @@ } currentPosition.replace(currentNode!!) - } else { - //logReplace"onTagStart, same node type") - } currentElement = currentNode as? Element ?: currentElement @@ -172,11 +163,9 @@ root = currentNode as Element } - currentElement?.clearKompAttributes() - currentElement?.clearKompEvents() - for (entry in tag.attributesEntries) { - currentElement!!.setKompAttribute(entry.key.lowercase(), entry.value) + val attributeName = entry.key.lowercase() + currentElement!!.setKompAttribute(attributeName, entry.value) } if (tag.namespace != null) { @@ -186,8 +175,6 @@ } } - //logReplace"onTagStart, currentElement2: $currentNode") - currentPosition.push(currentNode!!) } @@ -209,11 +196,9 @@ checkTag(tag) } - if (value == null) { - currentElement?.removeAttribute(attribute.lowercase()) - } else { - currentElement?.setKompAttribute(attribute.lowercase(), value) - } + val attributeName = attribute.lowercase() + + currentElement?.setKompAttribute(attributeName, value) } override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) { @@ -243,41 +228,6 @@ currentPosition.pop() - if (currentElement != null) { - val setAttrs: List = currentElement?.asDynamic()["komp-attributes"] ?: listOf() - - // remove attributes that where not set - val element = currentElement - if (element?.hasAttributes() == true) { - for (index in 0 until element.attributes.length) { - val attr = element.attributes[index] - if (attr != null) { - - if (element is HTMLElement && attr.name == "data-has-focus" && "true" == attr.value) { - element.focus() - } - - if (attr.name != "style" && !setAttrs.contains(attr.name)) { - if (element is HTMLInputElement) { - if (attr.name == "checkbox") { - element.checked = false - } else if (attr.name == "value") { - element.value = "" - } else if (attr.name == "class") { - element.className = "" - } - } else { - if (Komponent.logReplaceEvent) { - console.log("Clear attribute [${attr.name}] on $element)") - } - element.removeAttribute(attr.name) - } - } - } - } - } - } - currentPosition.nextElement() currentElement = currentElement?.parentElement as? HTMLElement diff --git a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt index 6fc132c..a362ee1 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt @@ -40,14 +40,6 @@ } result.append(") {") result.append("\n") - for ((name, event) in getKompEvents()) { - result.append(indent.asSpaces()) - result.append("on") - result.append(name) - result.append(" -> ") - result.append(event) - result.append("\n") - } for (index in 0 until childNodes.length) { childNodes[index]?.let { if (it is Element) { @@ -65,65 +57,36 @@ return result.toString() } -internal fun Element.clearKompAttributes() { - val attributes = this.asDynamic()["komp-attributes"] as MutableSet? +internal fun Element.setKompAttribute(name: String, value: String?) { +// val setAttrs: MutableSet = getKompAttributes() +// setAttrs.add(name) + //getNewAttributes().add(name) - if (attributes == null) { - this.asDynamic()["komp-attributes"] = mutableSetOf() - } else { - attributes.clear() - } - - if (this is HTMLInputElement) { - this.checked = false - } -} - -internal fun Element.getKompAttributes(): MutableSet { - var result: MutableSet? = this.asDynamic()["komp-attributes"] as MutableSet? - - if (result == null) { - result = mutableSetOf() - - this.asDynamic()["komp-attributes"] = result - } - - return result -} - -internal fun Element.setKompAttribute(name: String, value: String) { - val setAttrs: MutableSet = getKompAttributes() - setAttrs.add(name) - - if (this is HTMLInputElement) { - when (name) { - "checked" -> { - this.checked = value == "checked" - } - "value" -> { - this.value = value - - } - else -> { - setAttribute(name, value) - } + if (value == null || value.isBlank()) { + if (this is HTMLInputElement) { + checked = false + } else { + removeAttribute(name) } - } else if (this.getAttribute(name) != value) { - setAttribute(name, value) - } -} - -internal fun Element.clearKompEvents() { - for ((name, event) in getKompEvents()) { - removeEventListener(name, event) - } - - val events = this.asDynamic()["komp-events"] as MutableMap Unit>? - - if (events == null) { - this.asDynamic()["komp-events"] = mutableMapOf Unit>() } else { - events.clear() + if (this is HTMLInputElement) { + when (name) { + "checked" -> { + checked = "checked" == value + } + "class" -> { + className = value + } + "value" -> { + this.value = value + } + else -> { + setAttribute(name, value) + } + } + } else if (this.getAttribute(name) != value) { + setAttribute(name, value) + } } } @@ -134,24 +97,9 @@ name } - val events: MutableMap Unit> = getKompEvents() - - events[eventName]?.let { - println("Warn event '$eventName' already defined!") - removeEventListener(eventName, it) - } - - events[eventName] = event - - this.asDynamic()["komp-events"] = events - this.addEventListener(eventName, event) } -internal fun Element.getKompEvents(): MutableMap Unit> { - return this.asDynamic()["komp-events"] ?: mutableMapOf() -} - internal fun Element.findElementIndex(): Int { val childNodes = parentElement?.children if (childNodes != null) { @@ -163,4 +111,4 @@ } return 0 -} \ No newline at end of file +} diff --git a/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt b/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt index c9b77c6..d21f2f7 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/HtmlBuilder.kt @@ -9,7 +9,6 @@ import kotlinx.html.Unsafe import org.w3c.dom.Element import org.w3c.dom.HTMLElement -import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLSpanElement import org.w3c.dom.Node import org.w3c.dom.asList @@ -143,15 +142,10 @@ //logReplace"onTagStart, currentElement1.1: $currentNode") currentPosition.currentParent().appendChild(currentNode!!) - } else if ( - !currentNode?.asElement()?.tagName.equals(tag.tagName, true) || - ( - tag.namespace != null && - !currentNode?.asElement()?.namespaceURI.equals(tag.namespace, true) - ) - ) { + } else { logReplace("onTagStart, currentElement, namespace: ${currentNode?.asElement()?.namespaceURI} -> ${tag.namespace}") logReplace("onTagStart, currentElement, replace: ${currentNode?.asElement()?.tagName} -> ${tag.tagName}") + currentNode = if (tag.namespace != null) { document.createElementNS(tag.namespace, tag.tagName) } else { @@ -159,9 +153,6 @@ } currentPosition.replace(currentNode!!) - } else { - //logReplace"onTagStart, same node type") - } currentElement = currentNode as? Element ?: currentElement @@ -172,11 +163,9 @@ root = currentNode as Element } - currentElement?.clearKompAttributes() - currentElement?.clearKompEvents() - for (entry in tag.attributesEntries) { - currentElement!!.setKompAttribute(entry.key.lowercase(), entry.value) + val attributeName = entry.key.lowercase() + currentElement!!.setKompAttribute(attributeName, entry.value) } if (tag.namespace != null) { @@ -186,8 +175,6 @@ } } - //logReplace"onTagStart, currentElement2: $currentNode") - currentPosition.push(currentNode!!) } @@ -209,11 +196,9 @@ checkTag(tag) } - if (value == null) { - currentElement?.removeAttribute(attribute.lowercase()) - } else { - currentElement?.setKompAttribute(attribute.lowercase(), value) - } + val attributeName = attribute.lowercase() + + currentElement?.setKompAttribute(attributeName, value) } override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) { @@ -243,41 +228,6 @@ currentPosition.pop() - if (currentElement != null) { - val setAttrs: List = currentElement?.asDynamic()["komp-attributes"] ?: listOf() - - // remove attributes that where not set - val element = currentElement - if (element?.hasAttributes() == true) { - for (index in 0 until element.attributes.length) { - val attr = element.attributes[index] - if (attr != null) { - - if (element is HTMLElement && attr.name == "data-has-focus" && "true" == attr.value) { - element.focus() - } - - if (attr.name != "style" && !setAttrs.contains(attr.name)) { - if (element is HTMLInputElement) { - if (attr.name == "checkbox") { - element.checked = false - } else if (attr.name == "value") { - element.value = "" - } else if (attr.name == "class") { - element.className = "" - } - } else { - if (Komponent.logReplaceEvent) { - console.log("Clear attribute [${attr.name}] on $element)") - } - element.removeAttribute(attr.name) - } - } - } - } - } - } - currentPosition.nextElement() currentElement = currentElement?.parentElement as? HTMLElement diff --git a/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt b/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt index 4deaa0f..ad82737 100644 --- a/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt +++ b/src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt @@ -1,9 +1,11 @@ package nl.astraeus.komp import kotlinx.browser.document +import kotlinx.html.InputType import kotlinx.html.div import kotlinx.html.i import kotlinx.html.id +import kotlinx.html.input import kotlinx.html.js.onClickFunction import kotlinx.html.p import kotlinx.html.span @@ -50,6 +52,10 @@ override fun HtmlBuilder.render() { div("div_class") { + input(InputType.checkBox) { + name = "helloInput" + checked = hello + } span { svg { unsafe { @@ -61,8 +67,6 @@ if (hello) { div { +"Hello" - - throw IllegalStateException("Bloe") } } else { span {