Switch from React to Compose

build.gradle.kts

@@ -41,6 +41,7 @@ subprojects {
     mavenCentral()
     maven("https://www.jetbrains.com/intellij-repository/releases")
     maven("https://cache-redirector.jetbrains.com/intellij-dependencies")
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
   }
 
   tasks.withType<JavaCompile> {

gradle.properties

@@ -22,6 +22,7 @@
 # SOFTWARE.
 #
 bootstrapVersion=5.1.3
+composeVersion=1.1.0-alpha05
 coroutinesVersion=1.6.0
 dnsjavaVersion=3.4.3
 electronVersion=^16.0.6
@@ -38,12 +39,8 @@ jsoupVersion=1.14.3
 karmaCoverageIstanbulReporter=3.0.3
 kotlinVersion=1.6.10
 kotlinExtensionsVersion=1.0.1-pre.284-kotlin-1.6.10
-kotlinReactVersion=17.0.2-pre.284-kotlin-1.6.10
-kotlinStyledComponentsVersion=5.3.3-pre.284-kotlin-1.6.10
 ktorVersion=1.6.7
 openVersion=^8.4.0
-radiumVersion=0.26.1
-reactLoadingIndicatorVersion=1.0.2
 selenideVersion=6.1.2
 serializationVersion=1.3.1
 slf4jVersion=1.7.32

projector-client-web/build.gradle.kts

@@ -25,19 +25,14 @@ import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDistributionDsl
 
 plugins {
   kotlin("js")
+  id("org.jetbrains.compose")
 }
 
 val coroutinesVersion: String by project
 val istanbulInstrumenterLoaderVersion: String by project
 val karmaCoverageIstanbulReporter: String by project
-val kotlinReactVersion: String by project
-val kotlinStyledComponentsVersion: String by project
 val kotlinVersion: String by project
-val radiumVersion: String by project
-val reactVersion: String by project
-val reactLoadingIndicatorVersion: String by project
 val serializationVersion: String by project
-val styledComponentsVersion: String by project
 
 dependencies {
   implementation(project(":projector-common"))
@@ -48,14 +43,12 @@ dependencies {
   implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:$serializationVersion")
   implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:$serializationVersion")
 
-  implementation("org.jetbrains.kotlin-wrappers:kotlin-react:$kotlinReactVersion")
-  implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:$kotlinReactVersion")
-  implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:$kotlinStyledComponentsVersion")
-  implementation(npm("radium", radiumVersion))
-  implementation(npm("react-loading-indicator", reactLoadingIndicatorVersion))
   implementation(npm("istanbul-instrumenter-loader", istanbulInstrumenterLoaderVersion))
   implementation(npm("karma-coverage-istanbul-reporter", karmaCoverageIstanbulReporter))
 
+  implementation(compose.web.core)
+  implementation(compose.runtime)
+
   testImplementation(kotlin("test", kotlinVersion))
 }
 

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/state/ClientState.kt

@@ -23,12 +23,15 @@
  */
 package org.jetbrains.projector.client.web.state
 
-import kotlinext.js.jso
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import kotlinx.browser.document
 import kotlinx.browser.window
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import org.jetbrains.compose.web.renderComposable
 import org.jetbrains.projector.client.common.RenderingQueue
 import org.jetbrains.projector.client.common.canvas.DomCanvasFactory
 import org.jetbrains.projector.client.common.misc.ImageCacher
@@ -66,9 +69,6 @@ import org.jetbrains.projector.util.logging.Logger
 import org.khronos.webgl.ArrayBuffer
 import org.w3c.dom.*
 import org.w3c.dom.events.Event
-import react.createElement
-import react.dom.render
-import react.react
 import kotlin.math.roundToInt
 
 sealed class ClientState {
@@ -112,14 +112,15 @@ sealed class ClientState {
         document.body!!.appendChild(this)
       }
 
-      val reconnectionMessageUpdater = { newMessage: String? ->
-        val reconnectionMessage = createElement(ReconnectionMessage::class.react, jso {
-          this.message = newMessage
-        })
-        render(reconnectionMessage, reloadingMessageLayer)
+      var reconnectionMessageText: String? by mutableStateOf(null)
+
+      renderComposable(reloadingMessageLayer) {
+        ReconnectionMessage(reconnectionMessageText)
       }
 
-      reconnectionMessageUpdater(null)
+      val reconnectionMessageUpdater = { newMessage: String? ->
+        reconnectionMessageText = newMessage
+      }
 
       OnScreenMessenger.showText("Starting connection", "Waiting for response from $url...", canReload = false)
 

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/ui/LoadingIndicator.kt

@@ -0,0 +1,91 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-2022 JetBrains s.r.o.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package org.jetbrains.projector.client.web.ui
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.css.selectors.Nth.Companion.Functional
+import org.jetbrains.compose.web.dom.Div
+
+private const val CHILDREN_COUNT = 12
+
+private object LoadingIndicatorStyleSheet : StyleSheet() {
+
+  private val ldsSpinnerFrames by keyframes {
+    0.percent {
+      opacity(1)
+    }
+
+    100.percent {
+      opacity(0)
+    }
+  }
+
+  val ldsSpinner by style {
+    color(Color.white)
+    display(DisplayStyle.InlineBlock)
+    position(Position.Relative)
+    width(80.px)
+    height(80.px)
+
+    type("div") style {
+      property("transform-origin", "40px 40px")
+      animation(ldsSpinnerFrames) {
+        duration(1.2.s)
+        timingFunction(AnimationTimingFunction.Linear)
+        iterationCount(null)  // null is infinite
+      }
+    }
+
+    type("div") + after style {
+      property("content", """" """")
+      display(DisplayStyle.Block)
+      position(Position.Absolute)
+      top(3.px)
+      left(37.px)
+      width(6.px)
+      height(18.px)
+      borderRadius(20.percent)
+      background("#fff")
+    }
+
+    (1..CHILDREN_COUNT).forEach { n ->
+      type("div") + nthChild(Functional(b = n)) style {
+        property("transform", "rotate(${(n - 1) * 30}deg)")
+        property("animation-delay", "${(-1.2 + n * 0.1)}s")
+      }
+    }
+  }
+}
+
+@Composable
+fun LoadingIndicator() {
+  Style(LoadingIndicatorStyleSheet)
+
+  Div({ classes(LoadingIndicatorStyleSheet.ldsSpinner) }) {
+    repeat(CHILDREN_COUNT) {
+      Div()
+    }
+  }
+}

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/ui/ReconnectionMessage.kt

@@ -23,58 +23,45 @@
  */
 package org.jetbrains.projector.client.web.ui
 
-import kotlinx.css.*
-import org.jetbrains.projector.client.web.externalDeclarartion.loadingIndicator
-import org.jetbrains.projector.client.web.externalDeclarartion.styleRoot
-import react.*
-import styled.css
-import styled.styledH1
-import styled.styledSpan
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.H1
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.Text
 
-external interface ReconnectionMessageProps : Props {
+@Composable
+fun ReconnectionMessage(text: String?) {
+  text?.let { message ->
+    Span(
+      attrs = {
+        style {
+          position(Position.Absolute)
+          width(100.percent)
+          height(100.percent)
+          top(0.px)
+          left(0.px)
+          property("pointer-events", "none")
 
-  var message: String?
-}
-
-class ReconnectionMessage : RComponent<ReconnectionMessageProps, State>() {
-
-  override fun RBuilder.render() {
-    props.message?.let { message ->
-      styledSpan {
-        css {
-          position = Position.absolute
-          width = 100.pct
-          height = 100.pct
-          top = 0.px
-          left = 0.px
-          pointerEvents = PointerEvents.none
+          background("rgba(127, 127, 127, 0.5)")
+          display(DisplayStyle.Block)
 
-          background = "rgba(127, 127, 127, 0.5)"
-          display = Display.block
-
-          textAlign = TextAlign.center
-
-          classes.add("connection-watcher-warning")
+          textAlign("center")
         }
 
-        styledH1 {
-          css {
-            put("text-shadow", "-1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc")  // border
-          }
-
-          +message
-        }
-
-        styleRoot {
-          loadingIndicator {
-            attrs {
-              segmentLength = 50.0
-              segmentWidth = 10.0
-              spacing = 20.0
-            }
+        classes("connection-watcher-warning")
+      }
+    ) {
+      H1(
+        attrs = {
+          style {
+            property("text-shadow", "-1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc")  // border
           }
         }
+      ) {
+        Text(message)
       }
+
+      LoadingIndicator()
     }
   }
 }