Move renderComposable to internal-web-core-runtime (#1789)

web/core/build.gradle.kts

@@ -23,14 +23,13 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation(compose.runtime)
-                implementation(kotlin("stdlib-common"))
             }
         }
 
         val jsMain by getting {
             dependencies {
-                implementation(project(":internal-web-core-runtime"))
                 implementation(kotlin("stdlib-js"))
+                implementation(project(":internal-web-core-runtime"))
             }
         }
 

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/ElementScope.kt

@@ -12,10 +12,6 @@ import androidx.compose.runtime.currentComposer
 import androidx.compose.runtime.remember
 import org.w3c.dom.Element
 
-interface DOMScope<out TElement : Element> {
-    val DisposableEffectScope.scopeElement: TElement
-}
-
 /**
  * ElementScope allows adding effects to the Composable representing html element.
  * Also see a tutorial: https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Using_Effects

web/core/src/jsTest/kotlin/elements/ElementsTests.kt

@@ -6,6 +6,9 @@
 package org.jetbrains.compose.web.core.tests.elements
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import kotlinx.browser.document
 import org.jetbrains.compose.web.ExperimentalComposeWebApi
 import org.jetbrains.compose.web.attributes.AttrsScope
@@ -136,7 +139,7 @@ class ElementsTests {
     @Test
     fun elementBuilderShouldBeCalledOnce() = runTest {
         var counter = 0
-        var flag = false
+        var flag by mutableStateOf(false)
 
         composition {
             TagElement({

web/internal-web-core-runtime/build.gradle.kts

@@ -21,12 +21,12 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation(compose.runtime)
-                implementation(kotlin("stdlib-common"))
             }
         }
-        val jsMain by getting {
+
+        val jsTest by getting {
             dependencies {
-                implementation(kotlin("stdlib-js"))
+                implementation(kotlin("test-js"))
             }
         }
     }

web/internal-web-core-runtime/src/jsMain/kotlin/org/jetbrains/compose/web/dom/DOMSCope.kt

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020-2022 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.dom
+
+import androidx.compose.runtime.DisposableEffectScope
+import org.w3c.dom.Element
+
+interface DOMScope<out TElement : Element> {
+    val DisposableEffectScope.scopeElement: TElement
+}

web/internal-web-core-runtime/src/jsMain/kotlin/org/jetbrains/compose/web/renderComposable.kt

@@ -1,21 +1,31 @@
+/*
+ * Copyright 2020-2022 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
 package org.jetbrains.compose.web
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Composition
 import androidx.compose.runtime.ControlledComposition
-import androidx.compose.runtime.MonotonicFrameClock
 import androidx.compose.runtime.DefaultMonotonicFrameClock
 import androidx.compose.runtime.DisposableEffectScope
+import androidx.compose.runtime.MonotonicFrameClock
 import androidx.compose.runtime.Recomposer
-import org.jetbrains.compose.web.dom.DOMScope
 import kotlinx.browser.document
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.CoroutineStart
 import kotlinx.coroutines.launch
-import org.jetbrains.compose.web.internal.runtime.*
+import org.jetbrains.compose.web.dom.DOMScope
+import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
+import org.jetbrains.compose.web.internal.runtime.DomApplier
+import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper
+import org.jetbrains.compose.web.internal.runtime.GlobalSnapshotManager
+import org.jetbrains.compose.web.internal.runtime.JsMicrotasksDispatcher
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLBodyElement
 import org.w3c.dom.get
+
 /**
  * Use this method to mount the composition at the certain [root]
  *
@@ -34,6 +44,11 @@ fun <TElement : Element> renderComposable(
 
     val context = monotonicFrameClock + JsMicrotasksDispatcher()
     val recomposer = Recomposer(context)
+
+    CoroutineScope(context).launch(start = CoroutineStart.UNDISPATCHED) {
+        recomposer.runRecomposeAndApplyChanges()
+    }
+
     val composition = ControlledComposition(
         applier = DomApplier(DomNodeWrapper(root)),
         parent = recomposer
@@ -45,10 +60,6 @@ fun <TElement : Element> renderComposable(
     composition.setContent @Composable {
         content(scope)
     }
-
-    CoroutineScope(context).launch(start = CoroutineStart.UNDISPATCHED) {
-        recomposer.runRecomposeAndApplyChanges()
-    }
     return composition
 }
 

web/internal-web-core-runtime/src/jsTest/kotlin/RenderComposableTests.kt

@@ -0,0 +1,24 @@
+import kotlinx.browser.document
+import kotlinx.coroutines.MainScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.promise
+import org.jetbrains.compose.web.renderComposable
+import kotlin.test.Test
+import kotlin.test.assertEquals
+
+/*
+ * Copyright 2020-2022 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+class RenderComposableTests {
+    @Test
+    fun compCount() = MainScope().promise {
+        var count = 0
+        renderComposable(document.createElement("div")) {
+            count++
+        }
+        delay(1000)
+        assertEquals(1, count)
+    }
+}

web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt

@@ -1,25 +1,14 @@
 package org.jetbrains.compose.web.testutils
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Composition
-import androidx.compose.runtime.ControlledComposition
 import androidx.compose.runtime.MonotonicFrameClock
-import androidx.compose.runtime.Recomposer
 import kotlinx.browser.document
 import kotlinx.browser.window
 import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.CoroutineStart
 import kotlinx.coroutines.MainScope
-import kotlinx.coroutines.launch
 import kotlinx.coroutines.promise
 import kotlinx.dom.clear
-import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
-import org.jetbrains.compose.web.internal.runtime.DomApplier
-import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper
-import org.jetbrains.compose.web.internal.runtime.GlobalSnapshotManager
-import org.jetbrains.compose.web.internal.runtime.JsMicrotasksDispatcher
 import org.jetbrains.compose.web.renderComposable
-import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.MutationObserver
 import org.w3c.dom.MutationObserverInit