airbnb / Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
https://medium.com/airbnb-engineering/introducing-showkase-a-library-to-organize-discover-and-visualize-your-jetpack-compose-elements-d5c34ef01095
Apache License 2.0
2.08k stars 106 forks source link

showkaseName for composable is unstable when referencing custom multipreview annotation from another module #376

Open vincent-paing opened 3 months ago

vincent-paing commented 3 months ago

When I was looking into why the paparazzi snapshot keep generating a new golden images for existing components whenever I add a new component, I found out that it may be because of the name generation although I'm not really quite sure exactly if it's related yet. When a composable has a custom multipreview annotation from another module ,every time you add a composable to that module, the name will be generated with different integer in it.

To demonstrate, follow these steps:

  1. Create a module, we call this rootModule, since this is where ShowKaseRoot will live. Setup ShowKase here
  2. In this Module, create a composable, ComposableB
    @Composable
    fun ComposableB() { /*...*/ }
  3. Create an Android library module, for future reference, we call this lib and setup ShowKase there
  4. Create a custom multipreview annotation in the lib module
    @Preview(group = "Large", fontScale = 2.0f, showBackground = true)
    @Preview(group = "XLarge", fontScale = 3.0f, showBackground = true)
    @Preview(group = "Small", fontScale = 0.1f, showBackground = true)
    annotation class PreviewGroupFromAnotherModule
  5. Add a preview for ComposableB back in rootModule with this annotation
    @PreviewGroupFromAnotherModule
    @Composable
    fun ComposableBPreview() {
    ComposableB()
    }
  6. Rebuild project and check the code generated and we see this for showkase metadata
    @ShowkaseCodegenMetadata(
    showkaseName = "ComposableBPreview -  - 0",
    ...
    )
  7. Create another Composable in rootModule and preview with same preview group
    
    @Composable
    fun ComposableA() { /*...*/ }

@PreviewGroupFromAnotherModule @Composable fun ComposableAPreview() { ComposableA() }


8. Rebuild the project and observe that the name for `ComposableBPreview` has now changed from previously 0 to now 1
```kotlin
@ShowkaseCodegenMetadata(
    showkaseName = "ComposableAPreview -  - 0",
    //...
)
//...
@ShowkaseCodegenMetadata(
    showkaseName = "ComposableBPreview -  - 1",
    //...
)

I don't observe this problem when using Preview or when the custom multipreview annotation is from same module. This only happens when referencing the one from another module. And this integer shift only affects previews that are lower in term of alphabetical order than the new one. In above example, B used to be 1. Then adding A shift B to 1. Adding ComposableC would not affect ComposableB

This impact us greatly because we have a common multipreview annotations in our core module referenced by different feature module. Every time we add a new composable, all of our snapshots are regenerated and we can't rely anything from snapshot test because of this bug. It also would not make sense to have the same preview groups across all features for us that would be a lot harder to maintain.

I have a made a repo here to test out easily

KatieBarnett commented 3 months ago

I believe this number is the elementIndex when generating ShowkaseMetadata.Component as: showkaseName = "${xElement.name} - ${customPreviewMetadata.previewName} - $elementIndex", Since in this example the customPreviewMetadata.previewName is null we get the - - #

You can just filter this out using regex if it is used as part of a snapshot filename (e.g. when using Paparazzi). For example: showkaseBrowserComponent.componentName.replace("""- - \d$""".toRegex(), "")