Add Jetpack Compose preview option

[BioRyajenka]

Whats the best way to preview components if you use tiamat?

Since the lib encourage users to create a components like that:

val SomeComp by navDestination {
    val args = navArgs()
    val viewModel = ...
    // ... further comps ...
} 

I tried to preview a component with the following code:

@Composable
fun <NavArgs> PreviewComponent(dest: NavDestination<NavArgs>, navArgs: NavArgs? = null) {
    // ... some setup ...
    val navController = rememberNavController(
        startDestination = dest,
        startDestinationNavArgs = navArgs,
        destinations = arrayOf(dest),
    )
    Navigation(navController)
}

But it fails with
java.lang.ClassCastException: class com.android.layoutlib.bridge.android.BridgeContext cannot be cast to class android.content.ContextWrapper (com.android.layoutlib.bridge.android.BridgeContext and android.content.ContextWrapper are in unnamed module of loader com.intellij.ide.plugins.cl.PluginClassLoader @7d9d7378)   at com.composegears.tiamat.RootDataStorageKt.rememberRootDataStore(RootDataStorage.kt:31)   at com.composegears.tiamat.Platform_androidKt.rootNavControllersStore(Platform.android.kt:12)
...

[egorikftp]

Hello, I prefer to separate navDestination logic and pure Compose UI. It allows to use Preview without any restrictions.

Please take a look some example:
https://github.com/ComposeGears/Valkyrie/blob/main/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/intro/IntroScreen.kt

[vkatz]

@BioRyajenka
It is better to use smth like

val SomeComp by navDestination {
    val args = navArgs()
    val viewModel = ...
    val nc = navController()
    ScreenContent(
                       param1 = args.param1,
                       param2 = args.param2, 
                       onClick = viewModel::onClick,
                       onBack = {nc.back()}
                             )
} 

@Composable
fun ScreenContent(
    val param1 : Int,
    val param2: String,
    val onClick : ()->Unit,
    val onBack : ()->Unit, 
    ...
){
  // screen logic without linkage to models, args and so
   ....
}

@Preview
fun ScreenPreview(){
    ScreenContent(stub params)
}

[BioRyajenka]

Yeah, I did it this way, but with complex logic/structure you also probably don't want to pass lambdas multiple levels down in many places.
Plus, some components are always expected to navigate to the same, and by using lamda you will duplicate code in all caller places.

So I ended up with a mix: extracted a function + passing demo data for the preview purposes, but also created custom dummy navController with reflection and pass it down instead of lambdas.

[vkatz]

We will add some options to perview a screen...

Proposed syntax:

val SomeScreen by navDestination<Input>{...}

@Preview
@Composable
fun SomeScreenPreview(){
        ScreenPreview(SomeScreen, args=Input(), freeArgs = Smth, navResult = Smth)
}

[BioRyajenka]

Hey @vkatz , thanks for reply!
I think the ideal syntax would be not to introduce any syntax and allow existing rememberNavController and Navigation to work in preview mode, wdyt? Idk if thats achievable though

[vkatz]

Taskt to do so already created, this conversation marked as enhancement and we have it on the road.

[vkatz]

@BioRyajenka

Coming next release