https://kotlinlang.org logo
Join Slack
Powered by
Is it possible to enable compose @Preview in commo...
# compose
f
Is it possible to enable compose @Preview in common module ??
c
What do you mean by "common module"? You can add the 
@Preview
annotation in any Android Library module or in an Application module (this is using Android Studio/Android Gradle plugin's terminology)
z
@curioustechizen He may refer to the commonMain module in the Compose multiplatform project, because I am also troubled about it.
c
Ah okay sorry I misunderstood. I have no idea about this.
j
If this is about KMM, then you may have better luck in the #multiplatform channel
f
yeah, common refers to commonMain. I will try in the #multiplatform
l
You can create an expect annotation and mark it as OptionalExpectation, then actualize it on Android and Desktop.
f
hummmm idk about it, let me search a little
l
c
Likely not since Preview uses layoutlib which is more Android specific
l
Isn’t layoutlib just used by the AS renderer? In the code, the preview is just an annotation (the module also brings in some stuff for Live Edit if I remember correctly). In theory, the IJ renderer should see Preview annotations as CfD, while AS should see it as Jetpack Compose, right? Looks like the package is different for desktop vs Android, and that’s how it distinguishes. Wonder if it checks the IR?
c
One is built by Google, the other by JetBrains. We’d love to converge on a single implementation but it’s not the highest priority right now.
Our (Google) priority is to support Android development, so all our engineering efforts are being put into improving Preview for Android
l
If you expect/actual an annotation, I wonder if either one would pick up on this, and show a preview.
c
Maybe. Not something we’ve tested and/or support so YMMV
a
As mentioned above, it's possible to put 
@OptionalEpxectation expect annotation class Preview
annotation in the same androidx package in your module and use the Compose Multiplatform IDEA plugin for previews.
l
I noticed there’s no actuals in the sample? Does this cause any errors?
a
There is a bug in IDEA - https://youtrack.jetbrains.com/issue/KTIJ-24082/ When you use the annotation, it's flagged with an error. But it works. Maybe there is a way to suppress the error.
f
ok, added the annotation and installed the plugin for android studio electric eel , restarted the ide, rebuilt the project, but the preview is not displayed to me 😞
a
You do use Compose Multiplatform and have the plugin and dependencies added, right?
l
Did you place the annotation in a directory matching the androidx package?
f
I do not have added 
org.jetbrains.compose.ui:ui-tooling
and 
org.jetbrains.compose.ui:ui-tooling-preview
l
You’ll need those.
f
I tried add these dependencies to commonMain but I got some errors :
Copy code
No matching variant of org.jetbrains.compose.ui:ui-tooling:1.3.1-rc01 was found. The consumer was configured to find a library for use during 'kotlin-api', preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native', attribute 'org.jetbrains.kotlin.native.target' with value 'ios_arm64' but:
l
those artifacts don’t support iOS. You’ll need to add them to android and jvm.
Do you have a desktop jvm module, or is it just Android/iOS?
f
just Android/iOS
a
Actually I don't have 
tooling
deps added and it works. There is the gutter icon next to a Composable function, the preview shows when I click on it. I'm using IntelliJ IDEA 2022.3.1
l
In that case, you’ll have to change the preview package to match the android one (I think you’ll need to remove the desktop from the package). Without a JVM target, it’s probably not pulling down the actual Preview that matches.
a
Ah yes, 
jvm
target is required in this case
l
Will the same ‘hack’ with the android preview annotation work?
a
I think Compose Multipaltform plugin builds 
jvm
, and the Preview annotation it supports is in 
androidx.compose.desktop.ui.tooling.preview
package
l
Yeah. In this case, you’ll need the android plugin to catch it. The androidMain annotation has the same package as the official androidx Preview, so I’d imagine if you change the package to match, it would pick it up.
f
image.png
image.png
image.png
no preview 😞
a
Maybe because the function has arguments?
l
Copy code
@MustBeDocumented
@Retention(AnnotationRetention.BINARY)
@Target(
    AnnotationTarget.ANNOTATION_CLASS,
    AnnotationTarget.FUNCTION
)
@Repeatable
annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val widthDp: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT
)
There’s also a lot more meta-annotations on the android version
f
Maybe because the function has arguments?
No, i did another fun with no arguments
I added compose.preview and compose.uiTooling in androidMain of shared code
l
The actual android Preview annotation has a lot more to it. Try copying my previous message and see if that works.
f
No work
l
😢
f
I appreciate your help
I think that with 
androidx.compose.android.ui.tooling.preview
no work because with android it is necessary to add 
buildFeatures {compose = true}
in the module
l
Did adding that fix it?
f
No fixed yet. The next step is add desktop module, but I have a multplatform library built with no desktop artefact
25 Views
Open in Slack
PreviousNext
Powered by