From 7373fef9647da8bdcd95a2d902cdab6e020bff31 Mon Sep 17 00:00:00 2001
From: InsanusMokrassar <ovsyannikov.alexey95@gmail.com>
Date: Thu, 17 Mar 2022 14:55:47 +0600
Subject: [PATCH] add js onRemoved for nodes and different extensions for
 Composition

---
 CHANGELOG.md                                  |  8 +++++++
 .../AttachCompositionToElementRemoving.kt     |  9 ++++++++
 .../common/HTMLElementDomChanged.kt           | 21 +++++++++++++++++++
 coroutines/compose/build.gradle               |  1 +
 .../RenderComposableWithLinkToContext.kt      | 10 +++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/AttachCompositionToElementRemoving.kt
 create mode 100644 common/src/jsMain/kotlin/dev/inmo/micro_utils/common/HTMLElementDomChanged.kt

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c57ce273f2d..3d8a8572ac1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## 0.9.16
 
+* `Common`:
+    * New extension `Node#onRemoved`
+    * `Compose`:
+        * New extension `Composition#linkWithRoot` for removing of composition with root element
+* `Coroutines`:
+    * `Compose`:
+        * New function `renderComposableAndLinkToContextAndRoot` with linking of composition to root element
+
 ## 0.9.15
 
 * `FSM`:
diff --git a/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/AttachCompositionToElementRemoving.kt b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/AttachCompositionToElementRemoving.kt
new file mode 100644
index 00000000000..a476c4c9aa3
--- /dev/null
+++ b/common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/AttachCompositionToElementRemoving.kt
@@ -0,0 +1,9 @@
+package dev.inmo.micro_utils.common.compose
+
+import androidx.compose.runtime.Composition
+import dev.inmo.micro_utils.common.onRemoved
+import org.w3c.dom.Element
+
+fun Composition.linkWithElement(element: Element) {
+    element.onRemoved { dispose() }
+}
diff --git a/common/src/jsMain/kotlin/dev/inmo/micro_utils/common/HTMLElementDomChanged.kt b/common/src/jsMain/kotlin/dev/inmo/micro_utils/common/HTMLElementDomChanged.kt
new file mode 100644
index 00000000000..5d803dca1fb
--- /dev/null
+++ b/common/src/jsMain/kotlin/dev/inmo/micro_utils/common/HTMLElementDomChanged.kt
@@ -0,0 +1,21 @@
+package dev.inmo.micro_utils.common
+
+import kotlinx.browser.document
+import org.w3c.dom.*
+
+fun Node.onRemoved(block: () -> Unit) {
+    lateinit var observer: MutationObserver
+
+    observer = MutationObserver { _, _ ->
+        fun checkIfRemoved(node: Node): Boolean {
+            return node.parentNode != document && (node.parentNode ?.let { checkIfRemoved(it) } ?: true)
+        }
+
+        if (checkIfRemoved(this)) {
+            observer.disconnect()
+            block()
+        }
+    }
+
+    observer.observe(document, MutationObserverInit(childList = true, subtree = true))
+}
diff --git a/coroutines/compose/build.gradle b/coroutines/compose/build.gradle
index c71171b88f3..7405e30efa0 100644
--- a/coroutines/compose/build.gradle
+++ b/coroutines/compose/build.gradle
@@ -13,6 +13,7 @@ kotlin {
             dependencies {
                 api libs.kt.coroutines
                 api project(":micro_utils.coroutines")
+                api project(":micro_utils.common.compose")
             }
         }
     }
diff --git a/coroutines/compose/src/jsMain/kotlin/dev/inmo/micro_utils/coroutines/compose/RenderComposableWithLinkToContext.kt b/coroutines/compose/src/jsMain/kotlin/dev/inmo/micro_utils/coroutines/compose/RenderComposableWithLinkToContext.kt
index 85d78e4011b..f78ae088f76 100644
--- a/coroutines/compose/src/jsMain/kotlin/dev/inmo/micro_utils/coroutines/compose/RenderComposableWithLinkToContext.kt
+++ b/coroutines/compose/src/jsMain/kotlin/dev/inmo/micro_utils/coroutines/compose/RenderComposableWithLinkToContext.kt
@@ -1,6 +1,7 @@
 package dev.inmo.micro_utils.coroutines.compose
 
 import androidx.compose.runtime.*
+import dev.inmo.micro_utils.common.compose.linkWithElement
 import kotlinx.coroutines.*
 import org.jetbrains.compose.web.dom.DOMScope
 import org.w3c.dom.Element
@@ -14,3 +15,12 @@ suspend fun <TElement : Element> renderComposableAndLinkToContext(
         currentCoroutineContext()
     )
 }
+
+suspend fun <TElement : Element> renderComposableAndLinkToContextAndRoot(
+    root: TElement,
+    monotonicFrameClock: MonotonicFrameClock = DefaultMonotonicFrameClock,
+    content: @Composable DOMScope<TElement>.() -> Unit
+): Composition = org.jetbrains.compose.web.renderComposable(root, monotonicFrameClock, content).apply {
+    linkWithContext(currentCoroutineContext())
+    linkWithElement(root)
+}