Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vincent-paing opened this issue Apr 3, 2024 · 1 comment

Comments

@vincent-paing
Copy link

vincent-paing commented Apr 3, 2024

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() { /*...*/ }
  1. Create an Android library module, for future reference, we call this lib and setup ShowKase there
  2. 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
  1. Add a preview for ComposableB back in rootModule with this annotation
@PreviewGroupFromAnotherModule
@Composable
fun ComposableBPreview() {
 ComposableB()
}
  1. Rebuild project and check the code generated and we see this for showkase metadata
@ShowkaseCodegenMetadata(
    showkaseName = "ComposableBPreview -  - 0",
    ...
)
  1. Create another Composable in rootModule and preview with same preview group
@Composable
fun ComposableA() { /*...*/ }

@PreviewGroupFromAnotherModule
@Composable
fun ComposableAPreview() {
 ComposableA()
}
  1. Rebuild the project and observe that the name for ComposableBPreview has now changed from previously 0 to now 1
@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

@vincent-paing vincent-paing changed the title showkaseName for composable is unstable when referencing Preview group from another module showkaseName for composable is unstable when referencing multi preview annotation from another module Apr 3, 2024
@vincent-paing vincent-paing changed the title showkaseName for composable is unstable when referencing multi preview annotation from another module showkaseName for composable is unstable when referencing custom multipreview annotation from another module Apr 3, 2024
@KatieBarnett
Copy link

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(), "")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants