start migration to compose in webapp

WebApp/build.gradle

@@ -11,6 +11,9 @@ buildscript {
 plugins {
     id "org.jetbrains.kotlin.multiplatform"
     id "org.jetbrains.kotlin.plugin.serialization"
+
+    id "org.jetbrains.kotlin.plugin.compose" version "$kotlin_version"
+    id "org.jetbrains.compose" version "$compose_version"
 }
 
 apply plugin: 'application'
@@ -27,12 +30,14 @@ kotlin {
             dependencies {
                 implementation kotlin('stdlib')
                 implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:$serialization_version"
+                implementation compose.runtime
             }
         }
 
         jsMain {
             dependencies {
                 implementation "dev.inmo:tgbotapi.webapps:$telegram_bot_api_version"
+                implementation compose.web.core
             }
         }
 
@@ -41,6 +46,7 @@ kotlin {
                 implementation "dev.inmo:tgbotapi:$telegram_bot_api_version"
                 implementation "dev.inmo:micro_utils.ktor.server:$micro_utils_version"
                 implementation "io.ktor:ktor-server-cio:$ktor_version"
+                implementation compose.desktop.currentOs
             }
         }
     }

WebApp/src/jsMain/kotlin/main.kt

@@ -1,3 +1,4 @@
+import androidx.compose.runtime.*
 import dev.inmo.micro_utils.coroutines.launchSafelyWithoutExceptions
 import dev.inmo.tgbotapi.types.webAppQueryIdField
 import dev.inmo.tgbotapi.webapps.*
@@ -18,6 +19,10 @@ import kotlinx.dom.appendElement
 import kotlinx.dom.appendText
 import kotlinx.dom.clear
 import kotlinx.serialization.json.Json
+import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.P
+import org.jetbrains.compose.web.dom.Text
+import org.jetbrains.compose.web.renderComposable
 import org.w3c.dom.*
 import kotlin.random.Random
 import kotlin.random.nextUBytes
@@ -33,11 +38,11 @@ fun main() {
     val client = HttpClient()
     val baseUrl = window.location.origin.removeSuffix("/")
 
-    window.onload = {
+    renderComposable("root") {
-        val scope = CoroutineScope(Dispatchers.Default)
+        val scope = rememberCoroutineScope()
-        runCatching {
+        val isSafeState = remember { mutableStateOf<Boolean?>(null) }
-
+        val logsState = remember { mutableStateListOf<String>() }
-            scope.launchSafelyWithoutExceptions {
+        LaunchedEffect(baseUrl) {
             val response = client.post("$baseUrl/check") {
                 setBody(
                     Json.encodeToString(
@@ -61,29 +66,38 @@ fun main() {
             )
         }
 
-            document.body ?.appendElement("button") {
+        Text(
-                addEventListener("click", {
+            when (isSafeState.value) {
+                null -> "Checking safe state..."
+                true -> "Data is safe"
+                false -> "Data is unsafe"
+            }
+        )
+        Text(webApp.initDataUnsafe.chat.toString())
+
+        Button({
+            onClick {
                 scope.launchSafelyWithoutExceptions {
                     handleResult({ "Clicked" }) {
                         client.post("${window.location.origin.removeSuffix("/")}/inline") {
                             parameter(webAppQueryIdField, it)
                             setBody(TextContent("Clicked", ContentType.Text.Plain))
-                                document.body ?.log(url.build().toString())
+                            logsState.add(url.build().toString())
                         }.coroutineContext.job.join()
                     }
                 }
-                })
+            }
-                appendText("Answer in chat button")
+        }) {
-            } ?: window.alert("Unable to load body")
+            Text("Answer in chat button")
+        }
 
-            document.body ?.appendElement("p", {})
+        P()
-            document.body ?.appendText("Allow to write in private messages: ${webApp.initDataUnsafe.user ?.allowsWriteToPM ?: "User unavailable"}")
+        Text("Allow to write in private messages: ${webApp.initDataUnsafe.user ?.allowsWriteToPM ?: "User unavailable"}")
 
-            document.body ?.appendElement("p", {})
+        P()
-            document.body ?.appendText("Alerts:")
+        Text("Alerts:")
-
+        Button({
-            document.body ?.appendElement("button") {
+            onClick {
-                addEventListener("click", {
                 webApp.showPopup(
                     PopupParams(
                         "It is sample title of default button",
@@ -93,7 +107,7 @@ fun main() {
                         DestructivePopupButton("destructive", "Destructive button")
                     )
                 ) {
-                        document.body ?.log(
+                    logsState.add(
                         when (it) {
                             "default" -> "You have clicked default button in popup"
                             "ok" -> "You have clicked ok button in popup"
@@ -102,48 +116,67 @@ fun main() {
                         }
                     )
                 }
-                })
+            }
-                appendText("Popup")
+        }) {
-            } ?: window.alert("Unable to load body")
+            Text("Popup")
-
+        }
-            document.body ?.appendElement("button") {
+        Button({
-                addEventListener("click", {
+            onClick {
                 webApp.showAlert(
                     "This is alert message"
                 ) {
-                        document.body ?.log(
+                    logsState.add(
                         "You have closed alert"
                     )
                 }
-                })
+            }
-                appendText("Alert")
+        }) {
-            } ?: window.alert("Unable to load body")
+            Text("Alert")
+        }
 
-            document.body ?.appendElement("p", {})
+        P()
+        Button({
+            onClick {
+                webApp.requestWriteAccess()
+            }
+        }) {
+            Text("Request write access without callback")
+        }
+        Button({
+            onClick {
+                webApp.requestWriteAccess {
+                    logsState.add("Write access request result: $it")
+                }
+            }
+        }) {
+            Text("Request write access with callback")
+        }
 
-            document.body ?.appendElement("button") {
+        P()
-                addEventListener("click", { webApp.requestWriteAccess() })
+        Button({
-                appendText("Request write access without callback")
+            onClick {
-            } ?: window.alert("Unable to load body")
+                webApp.requestContact()
+            }
+        }) {
+            Text("Request contact without callback")
+        }
+        Button({
+            onClick {
+                webApp.requestContact { logsState.add("Contact request result: $it") }
+            }
+        }) {
+            Text("Request contact with callback")
+        }
+        P()
 
-            document.body ?.appendElement("button") {
+        logsState.forEach {
-                addEventListener("click", { webApp.requestWriteAccess { document.body ?.log("Write access request result: $it") } })
+            P { Text(it) }
-                appendText("Request write access with callback")
+        }
-            } ?: window.alert("Unable to load body")
+    }
 
-            document.body ?.appendElement("p", {})
+    window.onload = {
-
+        val scope = CoroutineScope(Dispatchers.Default)
-            document.body ?.appendElement("button") {
+        runCatching {
-                addEventListener("click", { webApp.requestContact() })
-                appendText("Request contact without callback")
-            } ?: window.alert("Unable to load body")
-
-            document.body ?.appendElement("button") {
-                addEventListener("click", { webApp.requestContact { document.body ?.log("Contact request result: $it") } })
-                appendText("Request contact with callback")
-            } ?: window.alert("Unable to load body")
-
-            document.body ?.appendElement("p", {})
 
             document.body ?.appendElement("button") {
                 addEventListener("click", {

WebApp/src/jsMain/resources/index.html

@@ -10,6 +10,7 @@
         <title>Web App Example</title>
     </head>
     <body>
+        <div id="root"></div>
         <script type="application/javascript" src="https://telegram.org/js/telegram-web-app.js"></script>
         <script type="application/javascript" src="WebApp.js"></script>
     </body>

build.gradle

@@ -29,3 +29,8 @@ allprojects {
         maven { url "https://nexus.inmo.dev/repository/maven-releases/" }
     }
 }
+
+// Fix of https://youtrack.jetbrains.com/issue/KTOR-7912/Module-not-found-errors-when-executing-browserProductionWebpack-task-since-3.0.2
+rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.yarn.YarnPlugin.class) {
+    rootProject.kotlinYarn.resolution("ws", "8.18.0")
+}

gradle.properties

@@ -10,3 +10,4 @@ telegram_bot_api_version=22.0.0
 micro_utils_version=0.23.2
 serialization_version=1.7.3
 ktor_version=3.0.2
+compose_version=1.7.1