Support for @Preview and associated IDE plugin

[rossdanderson]

It would be nice to have support for the @Preview annotation and the IDE plugin https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support

Perhaps there is already something appropriate I have missed?

I have managed to bodge together something but it's very tempermental, relies on inner workings, and definitely has limitations (such as no reference to a window, and incorrect size) - I understand that may also be true that these simply can't be worked around.

@Composable
@Preview
fun PreviewRequestBookPanel() {
    PreviewSkin {
        Row {
            TextFieldStringProjection(
                contentModel = TextFieldStringContentModel(
                    value = "EUR",
                    placeholder = "Base product",
                    onValueChange = { },
                    enabled = true
                )
            ).project()
            TextFieldStringProjection(
                contentModel = TextFieldStringContentModel(
                    value = "GBP",
                    placeholder = "Quote product",
                    onValueChange = { },
                    enabled = true
                )
            ).project()
        }
    }
}

@Composable
private fun PreviewSkin(
    content: @Composable () -> Unit,
) {
    val skin = nightShadeSkin()
    CompositionLocalProvider(
//        LocalWindow provides window,
        LocalWindowSize provides DpSize(1.dp, 1.dp),
        LocalLayoutDirection provides LayoutDirection.Ltr,
        LocalDisplayName provides skin.displayName,
        LocalDecorationAreaType provides DecorationAreaType.None,
        LocalSkinColors provides skin.colors,
        LocalButtonShaper provides skin.buttonShaper,
        LocalPainters provides skin.painters,
        LocalAnimationConfig provides AuroraSkin.animationConfig
    ) {
        content()
    }
}

[kirill-grouchnikov]

I use LocalWindow in a few places (command buttons, comboboxes, context menus) for positioning the popup content. This used to be provided by JB's variant of Compose, but they removed it before version 1.0.

Right now the assumption is that Aurora is always running in a "valid" ComposeWindow. By valid I mean a window that is displayed on the screen. Taking the snippet above and adding LocalWindow provides ComposeWindow() doesn't work, as it crashes due to headless mode:

Caused by: java.awt.HeadlessException
	at java.desktop/java.awt.GraphicsEnvironment.checkHeadless(GraphicsEnvironment.java:208)
	at java.desktop/java.awt.Window.init(Window.java:496)
	at java.desktop/java.awt.Window.<init>(Window.java:448)
	at java.desktop/java.awt.Frame.<init>(Frame.java:449)
	at java.desktop/java.awt.Frame.<init>(Frame.java:407)
	at java.desktop/javax.swing.JFrame.<init>(JFrame.java:204)
	at androidx.compose.ui.awt.ComposeWindow.<init>(ComposeWindow.desktop.kt:48)
	at androidx.compose.ui.awt.ComposeWindow.<init>(ComposeWindow.desktop.kt:59)
	at androidx.compose.ui.awt.ComposeWindow.<init>(ComposeWindow.desktop.kt:57)

One option would be to not throw error in LocalWindow in Aurora, and handle this as a valid case for preview. However, that would have a domino effect on the usages of LocalWindow such as:

• Handling popup content
• Skin visuals that adapt themselves to the window size (such as some decoration painters, like ArcDecorationPainter)
• The work-in-progress ribbon layout logic that adapts the content presentation to the available window width

This would require adding a bunch of null checks, and probably marking some function parameters as nullable. My understanding is that desktop preview in IntelliJ is a low priority in general for the JB team at the moment, and it's definitely a low priority for me given how slow that whole cycle is inside IntelliJ, and how quickly you can bring up the real Aurora content.

[rossdanderson]

From a poke around I did think these sorts of limitations might apply, thank you for the detailed response