https://kotlinlang.org logo
#compose
Title
# compose
f

Francis Mariano

03/02/2023, 12:27 PM
Is it possible to enable compose @Preview in common module ??
c

curioustechizen

03/02/2023, 12:33 PM
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

Zheng Hong

03/02/2023, 2:02 PM
@curioustechizen He may refer to the commonMain module in the Compose multiplatform project, because I am also troubled about it.
c

curioustechizen

03/02/2023, 2:04 PM
Ah okay sorry I misunderstood. I have no idea about this.
j

Joseph Hawkes-Cates

03/02/2023, 2:24 PM
If this is about KMM, then you may have better luck in the #multiplatform channel
f

Francis Mariano

03/02/2023, 2:45 PM
yeah, common refers to commonMain. I will try in the #multiplatform
l

Landry Norris

03/02/2023, 3:06 PM
You can create an expect annotation and mark it as OptionalExpectation, then actualize it on Android and Desktop.
f

Francis Mariano

03/02/2023, 5:57 PM
hummmm idk about it, let me search a little
c

Chris Sinco [G]

03/02/2023, 6:03 PM
Likely not since Preview uses layoutlib which is more Android specific
l

Landry Norris

03/02/2023, 6:05 PM
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

Chris Sinco [G]

03/02/2023, 6:08 PM
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

Landry Norris

03/02/2023, 6:09 PM
If you expect/actual an annotation, I wonder if either one would pick up on this, and show a preview.
c

Chris Sinco [G]

03/02/2023, 6:09 PM
Maybe. Not something we’ve tested and/or support so YMMV
a

Arkadii Ivanov

03/02/2023, 6:16 PM
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

Landry Norris

03/02/2023, 6:17 PM
I noticed there’s no actuals in the sample? Does this cause any errors?
a

Arkadii Ivanov

03/02/2023, 6:20 PM
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

Francis Mariano

03/02/2023, 6:26 PM
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

Arkadii Ivanov

03/02/2023, 6:29 PM
You do use Compose Multiplatform and have the plugin and dependencies added, right?
l

Landry Norris

03/02/2023, 6:29 PM
Did you place the annotation in a directory matching the androidx package?
f

Francis Mariano

03/02/2023, 6:30 PM
I do not have added
org.jetbrains.compose.ui:ui-tooling
and
org.jetbrains.compose.ui:ui-tooling-preview
l

Landry Norris

03/02/2023, 6:31 PM
You’ll need those.
f

Francis Mariano

03/02/2023, 6:35 PM
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

Landry Norris

03/02/2023, 6:36 PM
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

Francis Mariano

03/02/2023, 6:37 PM
just Android/iOS
a

Arkadii Ivanov

03/02/2023, 6:37 PM
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

Landry Norris

03/02/2023, 6:38 PM
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

Arkadii Ivanov

03/02/2023, 6:39 PM
Ah yes,
jvm
target is required in this case
l

Landry Norris

03/02/2023, 6:39 PM
Will the same ‘hack’ with the android preview annotation work?
a

Arkadii Ivanov

03/02/2023, 6:40 PM
I think Compose Multipaltform plugin builds
jvm
, and the Preview annotation it supports is in
androidx.compose.desktop.ui.tooling.preview
package
l

Landry Norris

03/02/2023, 6:41 PM
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

Francis Mariano

03/02/2023, 6:45 PM
image.png
image.png
image.png
no preview 😞
a

Arkadii Ivanov

03/02/2023, 6:52 PM
Maybe because the function has arguments?
l

Landry Norris

03/02/2023, 6:53 PM
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

Francis Mariano

03/02/2023, 6:58 PM
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

Landry Norris

03/02/2023, 7:00 PM
The actual android Preview annotation has a lot more to it. Try copying my previous message and see if that works.
f

Francis Mariano

03/02/2023, 7:02 PM
No work
l

Landry Norris

03/02/2023, 7:03 PM
😢
f

Francis Mariano

03/02/2023, 7:03 PM
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

Landry Norris

03/06/2023, 9:33 PM
Did adding that fix it?
f

Francis Mariano

03/06/2023, 9:35 PM
No fixed yet. The next step is add desktop module, but I have a multplatform library built with no desktop artefact
24 Views