diff --git a/build.gradle.kts b/build.gradle.kts index cc0e7f5..3c30ab4 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -1,11 +1,11 @@ plugins { - kotlin("multiplatform") version "1.4.30-M1" + kotlin("multiplatform") version "1.4.30" `maven-publish` } group = "nl.astraeus" -version = "0.2.3-SNAPSHOT" +version = "0.2.4-SNAPSHOT" repositories { mavenCentral() diff --git a/komp.commonMain.iml b/komp.commonMain.iml index e043417..6483ec9 100644 --- a/komp.commonMain.iml +++ b/komp.commonMain.iml @@ -1,5 +1,5 @@ - + @@ -13,13 +13,13 @@ - - + - + \ No newline at end of file diff --git a/komp.commonTest.iml b/komp.commonTest.iml index 1044866..2f7a8df 100644 --- a/komp.commonTest.iml +++ b/komp.commonTest.iml @@ -1,5 +1,5 @@ - + @@ -16,13 +16,13 @@ - - + - + - + \ No newline at end of file diff --git a/komp.iml b/komp.iml index bb96ad8..d2fc7a2 100644 --- a/komp.iml +++ b/komp.iml @@ -1,5 +1,5 @@ - + diff --git a/komp.ipr b/komp.ipr index e3ed064..9d303da 100644 --- a/komp.ipr +++ b/komp.ipr @@ -43,6 +43,12 @@ + + $PROJECT_DIR$/build/libs + + + + - @@ -362,49 +367,49 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/komp.jsMain.iml b/komp.jsMain.iml index c4fc494..1eea68d 100644 --- a/komp.jsMain.iml +++ b/komp.jsMain.iml @@ -1,5 +1,5 @@ - + @@ -24,11 +24,11 @@ \ No newline at end of file diff --git a/komp.jsTest.iml b/komp.jsTest.iml index 52f9ec0..60f30dc 100644 --- a/komp.jsTest.iml +++ b/komp.jsTest.iml @@ -1,13 +1,13 @@ - + komp:commonTest - komp.commonMain komp.jsMain komp.commonTest + komp.commonMain COMPILATION_AND_SOURCE_SET_HOLDER @@ -29,11 +29,11 @@ \ No newline at end of file diff --git a/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt b/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt index 8d1f17d..e328a0f 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/DiffPatch.kt @@ -40,11 +40,23 @@ object DiffPatch { ) } + private fun updateKomponentOnNode(oldNode: Node, newNode: Node) { + val komponent = newNode.asDynamic()[KOMP_KOMPONENT] as? Komponent + if (komponent != null) { + if (Komponent.logReplaceEvent) { + console.log("Keeping oldNode, set oldNode element on Komponent", oldNode, komponent) + } + komponent.element = oldNode + } + } + fun updateNode(oldNode: Node, newNode: Node): Node { if (hashesMatch(oldNode, newNode)) { if (Komponent.logReplaceEvent) { console.log("Hashes match", oldNode, newNode, oldNode.getKompHash(), newNode.getKompHash()) } + + updateKomponentOnNode(oldNode, newNode) return oldNode } @@ -55,6 +67,8 @@ object DiffPatch { } oldNode.textContent = newNode.textContent } + + updateKomponentOnNode(oldNode, newNode) return oldNode } @@ -73,6 +87,8 @@ object DiffPatch { } updateChildren(oldNode, newNode) oldNode.setKompHash(newNode.getKompHash()) + + updateKomponentOnNode(oldNode, newNode) return oldNode } } diff --git a/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt b/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt index e19cbed..7adf18e 100644 --- a/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt +++ b/src/jsMain/kotlin/nl/astraeus/komp/Komponent.kt @@ -9,6 +9,8 @@ import kotlinx.browser.window import kotlinx.html.div import kotlin.reflect.KProperty +const val KOMP_KOMPONENT = "komp-komponent" + typealias CssStyle = CSSStyleDeclaration.() -> Unit class StateDelegate( @@ -72,7 +74,12 @@ abstract class Komponent { consumer.render() val result = consumer.finalize() + if (result.id.isBlank()) { + result.id = "komp_${createIndex}" + } + element = result + element.asDynamic()[KOMP_KOMPONENT] = this dirty = false @@ -101,6 +108,7 @@ abstract class Komponent { internal fun refresh() { val oldElement = element + if (logRenderEvent) { console.log("Rendering", this) } @@ -126,6 +134,9 @@ abstract class Komponent { @JsName("remove") fun remove() { + check(updateStrategy == UpdateStrategy.REPLACE) { + "remote only works with UpdateStrategy.REPLACE" + } element?.let { val parent = it.parentElement ?: throw IllegalArgumentException("Element has no parent!?") @@ -176,14 +187,21 @@ abstract class Komponent { } todo.forEach { next -> - if (next.dirty) { - if (logRenderEvent) { - console.log("Update dirty ${next.createIndex}") - } - next.update() - } else { - if (logRenderEvent) { - console.log("Skip ${next.createIndex}") + val element = next.element + console.log("update element", element) + if (element is HTMLElement) { + console.log("by id", document.getElementById(element.id)) + if (document.getElementById(element.id) != null) { + if (next.dirty) { + if (logRenderEvent) { + console.log("Update dirty ${next.createIndex}") + } + next.update() + } else { + if (logRenderEvent) { + console.log("Skip ${next.createIndex}") + } + } } } }