Revert 'Safe Args in Navigation Compose' for compose multiplatform

sample/android/src/main/java/soup/compose/material/motion/sample/ui/HomeScreen.kt

@@ -142,6 +142,7 @@ fun HomeScreen(onItemClick: (Destination) -> Unit) {
                 }
                 items(
                     items = category.items,
+                    key = { it.destination.route },
                     contentType = { "Demo" },
                 ) { demo ->
                     HomeDemoItem(demo, onItemClick = onItemClick)

sample/android/src/main/java/soup/compose/material/motion/sample/ui/NavGraph.kt

@@ -21,7 +21,6 @@ import androidx.compose.ui.Modifier
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import kotlinx.serialization.Serializable
 import soup.compose.material.motion.animation.materialSharedAxisZIn
 import soup.compose.material.motion.animation.materialSharedAxisZOut
 import soup.compose.material.motion.sample.ui.circularreveal.CircularRevealScreen
@@ -33,39 +32,21 @@ import soup.compose.material.motion.sample.ui.material.hold.HoldScreen
 import soup.compose.material.motion.sample.ui.material.sharedaxis.MaterialSharedAxisScreen
 import soup.compose.material.motion.sample.ui.navigation.AnimatedNavHostScreen
 
-sealed interface Destination {
-
-    @Serializable
-    data object Home : Destination
-
-    @Serializable
-    data object Demo : Destination
-
-    @Serializable
-    data object MaterialSharedAxis : Destination
-
-    @Serializable
-    data object MaterialFadeThrough : Destination
-
-    @Serializable
-    data object MaterialFade : Destination
-
-    @Serializable
-    data object MaterialElevationScale : Destination
-
-    @Serializable
-    data object Hold : Destination
-
-    @Serializable
-    data object CircularReveal : Destination
-
-    @Serializable
-    data object AnimatedNavHost : Destination
+enum class Destination(val route: String) {
+    Home("Home"),
+    Demo("Demo"),
+    MaterialSharedAxis("MaterialSharedAxis"),
+    MaterialFadeThrough("MaterialFadeThrough"),
+    MaterialFade("MaterialFade"),
+    MaterialElevationScale("MaterialElevationScale"),
+    Hold("Hold"),
+    CircularReveal("CircularReveal"),
+    AnimatedNavHost("AnimatedNavHost"),
 }
 
 @Composable
 fun NavGraph(
-    startDestination: Destination = Destination.Home,
+    startDestination: String = Destination.Home.route,
 ) {
     val navController = rememberNavController()
     val upPress: () -> Unit = {
@@ -80,39 +61,39 @@ fun NavGraph(
         popEnterTransition = { materialSharedAxisZIn(forward = false) },
         popExitTransition = { materialSharedAxisZOut(forward = false) },
     ) {
-        composable<Destination.Home> {
+        composable(Destination.Home.route) {
             HomeScreen(
                 onItemClick = {
-                    navController.navigate(route = it)
+                    navController.navigate(route = it.route)
                 },
             )
         }
-        composable<Destination.Demo> {
+        composable(Destination.Demo.route) {
             DemoScreen(upPress = upPress)
         }
 
         // Core
-        composable<Destination.MaterialSharedAxis> {
+        composable(Destination.MaterialSharedAxis.route) {
             MaterialSharedAxisScreen(upPress = upPress)
         }
-        composable<Destination.MaterialFadeThrough> {
+        composable(Destination.MaterialFadeThrough.route) {
             MaterialFadeThroughScreen(upPress = upPress)
         }
-        composable<Destination.MaterialFade> {
+        composable(Destination.MaterialFade.route) {
             MaterialFadeScreen(upPress = upPress)
         }
-        composable<Destination.MaterialElevationScale> {
+        composable(Destination.MaterialElevationScale.route) {
             MaterialElevationScaleScreen(upPress = upPress)
         }
-        composable<Destination.Hold> {
+        composable(Destination.Hold.route) {
             HoldScreen(upPress = upPress)
         }
-        composable<Destination.CircularReveal> {
+        composable(Destination.CircularReveal.route) {
             CircularRevealScreen(upPress = upPress)
         }
 
         // Navigation
-        composable<Destination.AnimatedNavHost> {
+        composable(Destination.AnimatedNavHost.route) {
             AnimatedNavHostScreen(upPress = upPress)
         }
     }

sample/android/src/main/java/soup/compose/material/motion/sample/ui/demo/DemoScreen.kt

@@ -19,30 +19,23 @@ import android.content.res.Configuration
 import androidx.activity.compose.BackHandler
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import androidx.navigation.toRoute
-import kotlinx.serialization.Serializable
+import androidx.navigation.navArgument
 import soup.compose.material.motion.animation.holdIn
 import soup.compose.material.motion.animation.holdOut
 import soup.compose.material.motion.animation.translateYIn
 import soup.compose.material.motion.animation.translateYOut
 import soup.compose.material.motion.sample.ui.theme.SampleTheme
 
-private sealed interface DemoDestination {
-    @Serializable
-    data object Library : DemoDestination
-
-    @Serializable
-    data class Album(val albumId: Long) : DemoDestination
-}
-
 @Composable
 fun DemoScreen(upPress: () -> Unit) {
     val navController = rememberNavController()
-    NavHost(navController, startDestination = DemoDestination.Library) {
-        composable<DemoDestination.Library>(
+    NavHost(navController, startDestination = "library") {
+        composable(
+            "library",
             enterTransition = { holdIn() },
             exitTransition = { holdOut() },
         ) {
@@ -51,15 +44,17 @@ fun DemoScreen(upPress: () -> Unit) {
             }
             LibraryScreen(
                 onItemClick = {
-                    navController.navigate(DemoDestination.Album(albumId = it.id))
+                    navController.navigate("album/${it.id}")
                 },
             )
         }
-        composable<DemoDestination.Album>(
+        composable(
+            "album/{albumId}",
+            arguments = listOf(navArgument("albumId") { type = NavType.LongType }),
             enterTransition = { translateYIn { it } },
             exitTransition = { translateYOut { it } },
         ) { backStackEntry ->
-            val currentId = backStackEntry.toRoute<DemoDestination.Album>().albumId
+            val currentId = backStackEntry.arguments?.getLong("albumId")
             val album = MusicData.albums.first { it.id == currentId }
             AlbumScreen(
                 album,

sample/android/src/main/java/soup/compose/material/motion/sample/ui/navigation/AnimatedNavHostScreen.kt

@@ -30,25 +30,21 @@ import androidx.compose.ui.graphics.Color
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import kotlinx.serialization.Serializable
 import soup.compose.material.motion.animation.materialSharedAxisXIn
 import soup.compose.material.motion.animation.materialSharedAxisXOut
 import soup.compose.material.motion.animation.rememberSlideDistance
 import soup.compose.material.motion.sample.ui.common.DefaultScaffold
 
-private sealed interface AnimatedNavDestination {
-
-    @Serializable
-    data object Fourth : AnimatedNavDestination
-
-    @Serializable
-    data object Third : AnimatedNavDestination
-
-    @Serializable
-    data object Second : AnimatedNavDestination
-
-    @Serializable
-    data object First : AnimatedNavDestination
+private enum class AnimatedNavDestination(
+    val route: String,
+    val color: Color,
+    val nextRoute: String? = null,
+    val root: Boolean = false,
+) {
+    Fourth("fourth", Color.Yellow),
+    Third("third", Color.Green, nextRoute = Fourth.route),
+    Second("second", Color.Red, nextRoute = Third.route),
+    First("first", Color.Cyan, nextRoute = Second.route, root = true),
 }
 
 @Composable
@@ -58,7 +54,7 @@ fun AnimatedNavHostScreen(upPress: () -> Unit) {
         val navController = rememberNavController()
         NavHost(
             navController = navController,
-            startDestination = AnimatedNavDestination.First,
+            startDestination = AnimatedNavDestination.First.route,
             modifier = Modifier.padding(innerPadding),
             enterTransition = {
                 materialSharedAxisXIn(forward = true, slideDistance = slideDistance)
@@ -73,74 +69,44 @@ fun AnimatedNavHostScreen(upPress: () -> Unit) {
                 materialSharedAxisXOut(forward = false, slideDistance = slideDistance)
             },
         ) {
-            composable<AnimatedNavDestination.First> {
-                BackHandler {
-                    upPress()
+            AnimatedNavDestination.values().forEach { destination ->
+                composable(route = destination.route) {
+                    if (destination.root) {
+                        BackHandler {
+                            upPress()
+                        }
+                    }
+                    AnimatedNavDestinationScreen(
+                        destination = destination,
+                        onNavigateClick = { route ->
+                            navController.navigate(route)
+                        },
+                    )
                 }
-                AnimatedNavDestinationScreen(
-                    name = "First",
-                    backgroundColor = Color.Cyan,
-                    nextRoute = AnimatedNavDestination.Second,
-                    onNavigateClick = { route ->
-                        navController.navigate(route)
-                    },
-                )
-            }
-            composable<AnimatedNavDestination.Second> {
-                AnimatedNavDestinationScreen(
-                    name = "Second",
-                    backgroundColor = Color.Red,
-                    nextRoute = AnimatedNavDestination.Third,
-                    onNavigateClick = { route ->
-                        navController.navigate(route)
-                    },
-                )
-            }
-            composable<AnimatedNavDestination.Third> {
-                AnimatedNavDestinationScreen(
-                    name = "Third",
-                    backgroundColor = Color.Green,
-                    nextRoute = AnimatedNavDestination.Fourth,
-                    onNavigateClick = { route ->
-                        navController.navigate(route)
-                    },
-                )
-            }
-            composable<AnimatedNavDestination.Fourth> {
-                AnimatedNavDestinationScreen(
-                    name = "Fourth",
-                    backgroundColor = Color.Yellow,
-                    nextRoute = null,
-                    onNavigateClick = { route ->
-                        navController.navigate(route)
-                    },
-                )
             }
         }
     }
 }
 
 @Composable
 private fun AnimatedNavDestinationScreen(
-    name: String,
-    backgroundColor: Color,
-    nextRoute: AnimatedNavDestination?,
-    onNavigateClick: (destination: AnimatedNavDestination) -> Unit = {},
+    destination: AnimatedNavDestination,
+    onNavigateClick: (route: String) -> Unit = {},
 ) {
     Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
             .fillMaxSize()
-            .background(color = backgroundColor),
+            .background(color = destination.color),
     ) {
         Text(
-            text = name,
+            text = destination.name,
             color = Color.Black,
         )
-        if (nextRoute != null) {
-            Button(onClick = { onNavigateClick(nextRoute) }) {
-                Text(text = "go to $nextRoute")
+        if (destination.nextRoute != null) {
+            Button(onClick = { onNavigateClick(destination.nextRoute) }) {
+                Text(text = "go to ${destination.nextRoute}")
             }
         }
     }