Introduce navigation support to wasm and web demos (#1697)

JetBrains · Nov 27, 2024 · 0e74f3d · 0e74f3d
1 parent 837c386
commit 0e74f3d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt
@@ -9,6 +9,7 @@ import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.dialog
@@ -19,8 +20,7 @@ class App(
     private val extraScreens: List<Screen> = listOf()
 ) {
     @Composable
-    fun Content() {
-        val navController = rememberNavController()
+    fun Content(navController: NavHostController = rememberNavController()) {
         val animationSpec = tween<IntOffset>(500)
         NavHost(
             navController = navController,

diff --git a/compose/mpp/demo/src/jsMain/kotlin/androidx/compose/mpp/demo/main.js.kt b/compose/mpp/demo/src/jsMain/kotlin/androidx/compose/mpp/demo/main.js.kt
@@ -1,16 +1,28 @@
 package androidx.compose.mpp.demo
 
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
+import androidx.navigation.ExperimentalBrowserHistoryApi
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.bindToNavigation
 import org.jetbrains.skiko.wasm.onWasmReady
+import kotlinx.browser.window
 
 @OptIn(ExperimentalComposeUiApi::class)
+@ExperimentalBrowserHistoryApi
 fun main() {
     onWasmReady {
         ComposeViewport(viewportContainerId = "composeApplication") {
+            val navController = rememberNavController()
+
             val app = remember { App() }
-            app.Content()
+            app.Content(navController)
+
+            LaunchedEffect(Unit) {
+                window.bindToNavigation(navController)
+            }
         }
     }
 }
diff --git a/...emo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/components/text/VariableFonts.wasm.kt b/...emo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/components/text/VariableFonts.wasm.kt
@@ -18,7 +18,6 @@ package androidx.compose.mpp.demo.components.text
 
 import androidx.compose.mpp.demo.loadRes
 import androidx.compose.mpp.demo.toByteArray
-import kotlin.js.js
 
 actual suspend fun loadResource(file: String): ByteArray? {
     return loadRes(file).toByteArray()

diff --git a/compose/mpp/demo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/main.js.kt b/compose/mpp/demo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/main.js.kt
@@ -25,6 +25,9 @@ import androidx.compose.ui.platform.LocalFontFamilyResolver
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.platform.Font
 import androidx.compose.ui.window.ComposeViewport
+import androidx.navigation.ExperimentalBrowserHistoryApi
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.bindToNavigation
 import kotlin.wasm.unsafe.UnsafeWasmMemoryApi
 import kotlin.wasm.unsafe.withScopedMemoryAllocator
 import kotlinx.browser.window
@@ -36,14 +39,21 @@ import org.w3c.fetch.Response
 private val notoColorEmoji = "./NotoColorEmoji.ttf"
 
 @OptIn(ExperimentalComposeUiApi::class)
+@ExperimentalBrowserHistoryApi
 fun main() {
     ComposeViewport(viewportContainerId = "composeApplication") {
+        val navController = rememberNavController()
         val fontFamilyResolver = LocalFontFamilyResolver.current
         val fontsLoaded = remember { mutableStateOf(false) }
         val app = remember { App() }
 
         if (fontsLoaded.value) {
-            app.Content()
+            app.Content(navController)
+
+            // TODO: possibly suboptimal workaround for https://youtrack.jetbrains.com/issue/CMP-7136/web-Its-non-trivial-to-bind-to-navigation-if-NavHost-is-called-asynchronously
+            LaunchedEffect(Unit) {
+                window.bindToNavigation(navController)
+            }
         }
 
         LaunchedEffect(Unit) {