unbuildable version

client/src/jsMain/kotlin/dev/inmo/postssystem/client/fsm/ui/PostCreateView.kt

@@ -4,6 +4,7 @@ import androidx.compose.runtime.*
 import dev.inmo.jsuikit.elements.*
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.micro_utils.common.compose.DefaultDisposableEffectResult
 import dev.inmo.micro_utils.coroutines.launchSafelyWithoutExceptions
 import dev.inmo.micro_utils.fsm.common.StatesMachine
 import dev.inmo.postssystem.client.ui.fsm.CreatePostUIFSMState
@@ -14,6 +15,7 @@ import dev.inmo.postssystem.features.content.common.Content
 import dev.inmo.postssystem.services.posts.client.ui.create.PostCreateUIViewModel
 import kotlinx.coroutines.CompletableDeferred
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.flow.StateFlow
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.HTMLElement
@@ -29,7 +31,8 @@ class PostCreateView(
     ): UIFSMState? {
         val result = CompletableDeferred<UIFSMState?>()
 
-        val contentProvidersList = mutableStateListOf<ContentClientProvider.ContentRenderer>()
+        val contentProvidersList = mutableStateListOf<ContentClientProvider>()
+        val statesList = mutableListOf<StateFlow<Content>>()
 
         renderComposableAndLinkToContext(htmlElement) {
             Flex(
@@ -38,7 +41,17 @@ class PostCreateView(
                 Div ({ include(UIKitWidth.Fixed.XLarge) }) {
                     contentProvidersList.forEachIndexed { i, renderer ->
                         Flex(UIKitWidth.Expand) {
-                            renderer.render()
+                            Div(
+                                {
+                                    ref {
+                                        val flow = renderer.drawNewContent(it)
+                                        statesList.add(i, flow)
+                                        DefaultDisposableEffectResult {
+                                            statesList.removeAt(i)
+                                        }
+                                    }
+                                }
+                            )
 
                             DefaultButton("Remove") {
                                 contentProvidersList.removeAt(i)
@@ -52,7 +65,7 @@ class PostCreateView(
                                 NavItemElement(
                                     attributesCustomizer = {
                                         onClick { _ ->
-                                            contentProvidersList.add(it.createNewContentRenderer())
+                                            contentProvidersList.add(it)
                                         }
                                     }
                                 ) {
@@ -68,7 +81,7 @@ class PostCreateView(
                         it.preventDefault()
                         uiScope.launchSafelyWithoutExceptions {
                             createPostCreateUIModel.create(
-                                contentProvidersList.mapNotNull { it.state.value }
+                                statesList.map { it.value }
                             )
                         }
                     }

features/content/client/src/jsMain/kotlin/dev/inmo/postssystem/features/content/client/ContentClientProvider.kt

@@ -1,39 +1,11 @@
 package dev.inmo.postssystem.features.content.client
 
-import androidx.compose.runtime.*
 import dev.inmo.postssystem.features.content.common.Content
+import kotlinx.coroutines.flow.StateFlow
+import org.w3c.dom.HTMLElement
 
 interface ContentClientProvider {
     fun contentTypeNameForUser(): String
 
-    interface ContentRenderer {
+    fun drawNewContent(root: HTMLElement): StateFlow<Content>
-        val state: State<Content?>
-        val render: @Composable () -> Unit
-
-        class Default<T : Content?>(
-            initValue: T,
-            private val onRender: @Composable (MutableState<T>) -> Unit
-        ) : ContentRenderer {
-            private val mutableState = mutableStateOf(initValue)
-            override val state: State<Content?>
-                get() = mutableState
-
-            override val render: @Composable () -> Unit = @Composable {
-                onRender(mutableState)
-            }
-        }
-
-        companion object {
-            fun <T: Content> default(onRender: @Composable (MutableState<T?>) -> Unit) = Default(
-                null,
-                onRender
-            )
-            fun <T: Content?> default(initValue: T, onRender: @Composable (MutableState<T>) -> Unit) = Default(
-                initValue,
-                onRender
-            )
-        }
-    }
-
-    fun createNewContentRenderer(): ContentRenderer
 }

features/content/text/client/build.gradle

@@ -13,6 +13,7 @@ kotlin {
                 api project(":postssystem.features.content.text.common")
                 api project(":postssystem.features.common.client")
                 api project(":postssystem.features.content.client")
+                api libs.microutils.common.compose
             }
         }
     }

features/content/text/client/src/jsMain/kotlin/dev/inmo/postssystem/features/content/text/client/TextContentClientProvider.kt

@@ -3,11 +3,16 @@ package dev.inmo.postssystem.features.content.text.client
 import androidx.compose.runtime.*
 import dev.inmo.jsuikit.modifiers.UIKitWidth
 import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.micro_utils.common.compose.renderComposableAndLinkToRoot
 import dev.inmo.postssystem.features.common.common.*
 import dev.inmo.postssystem.features.content.client.ContentClientProvider
 import dev.inmo.postssystem.features.content.common.Content
 import dev.inmo.postssystem.features.content.text.common.TextContent
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
 import org.jetbrains.compose.web.dom.TextArea
+import org.jetbrains.compose.web.renderComposable
+import org.w3c.dom.HTMLElement
 
 val loadingClientModule = ModuleLoader {
     singleWithRandomQualifier<ContentClientProvider> {
@@ -20,12 +25,17 @@ val loadingClientModule = ModuleLoader {
 object TextContentClientProvider : ContentClientProvider {
     override fun contentTypeNameForUser(): String = "Text"
 
-    override fun createNewContentRenderer(): ContentClientProvider.ContentRenderer {
+    override fun drawNewContent(root: HTMLElement): StateFlow<Content> {
-        return ContentClientProvider.ContentRenderer.default<TextContent> @Composable { state ->
+        val flow = MutableStateFlow(TextContent(""))
-            TextArea(state.value ?. text ?: "") {
+
+        renderComposableAndLinkToRoot(root) {
+            val state = remember { flow.collectAsState() }
+            TextArea(state.value.text) {
                 include(UIKitWidth.Expand)
-                onInput { state.value = TextContent(it.value) }
+                onInput { flow.value = TextContent(it.value) }
             }
         }
+
+        return flow
     }
 }

gradle/libs.versions.toml

@@ -2,12 +2,12 @@
 
 kotlin = "1.6.10"
 kotlin-serialization = "1.3.2"
-jsuikit = "0.0.44"
+jsuikit = "0.0.45"
 compose = "1.1.1"
-microutils = "0.9.13"
+microutils = "0.9.16"
 tgbotapi = "0.38.7"
-ktor = "1.6.7"
+ktor = "1.6.8"
-klock = "2.6.2"
+klock = "2.6.3"
 exposed = "0.37.3"
 psql = "42.3.0"
 
@@ -32,6 +32,7 @@ ktor-server-netty = { module = "io.ktor:ktor-server-netty", version.ref = "ktor"
 ktor-websockets = { module = "io.ktor:ktor-websockets", version.ref = "ktor" }
 
 microutils-common = { module = "dev.inmo:micro_utils.common", version.ref = "microutils" }
+microutils-common-compose = { module = "dev.inmo:micro_utils.common.compose", version.ref = "microutils" }
 microutils-pagination-common = { module = "dev.inmo:micro_utils.pagination.common", version.ref = "microutils" }
 microutils-fsm-common = { module = "dev.inmo:micro_utils.fsm.common", version.ref = "microutils" }
 microutils-fsm-repos-common = { module = "dev.inmo:micro_utils.fsm.common", version.ref = "microutils" }

kotlin-js-store/yarn.lock

@@ -371,11 +371,6 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -1875,10 +1870,12 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-fetch@2.6.0:
+node-fetch@2.6.7:
-  version "2.6.0"
+  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
 
 node-forge@^0.10.0:
   version "0.10.0"
@@ -2626,6 +2623,11 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -2714,6 +2716,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
 webpack-cli@4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.0.tgz#dc43e6e0f80dd52e89cbf73d5294bcd7ad6eb343"
@@ -2839,6 +2846,14 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 which@2.0.2, which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -2877,12 +2892,10 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-ws@6.2.1:
+ws@8.5.0:
-  version "6.2.1"
+  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
-  dependencies:
-    async-limiter "~1.0.0"
 
 ws@^8.1.0:
   version "8.4.0"