I built a desktop app and I am trying to compile i...

# compose-web

[Daniele B]

I built a desktop app and I am trying to compile it for compose JS/Canvas.
However, when I add the js target to shared module, PointerIcon doesn't get recognized anymore.
So, is it not available for Compose JS/Canvas?
UPDATE: It looks like also AlertDialog is missing, and also the onClick modifier.
Is it expected these to be included any soon in both JS/Canvas and Wasm/Canvas?

[Oleksandr Karpovich [JB]]

Alert Dialog is planned to be commonized. For now it’s desktop only iirc.

As for Pointer Icon and Modifier.onClick:
• PointerIcon is already in commonMain, so it should be available for all targets
• Modifier.onClick is in skikoMain, so it should be available in web, desktop, ios
I guess your code would compile. Updating IDEA could help to fix “red” symbols. I saw similar issues when added k/wasm target (it’s experimental)

Also, you can use kotlin 1.9.0 and compose 1.4.0-dev-wasm09.

[Oleksandr Karpovich [JB]]

If you’re interested in k/js target without k/wasm, then you can use stable compose 1.4.1.

[Daniele B]

@Oleksandr Karpovich [JB] I am using already stable compose 1.4.1, but it still doesn't compile. I am also using the latest IntellijIdea Community edition (2023.1.3).
The message in the console for the above issue is:
e: file:///.../MyButton.kt:25:46 Unresolved reference. None of the following candidates is applicable because of receiver type mismatch:
public operator fun <T, R> DeepRecursiveFunction<TypeVariable(T), TypeVariable(R)>.invoke(value: TypeVariable(T)): TypeVariable(R) defined in kotlin

[Oleksandr Karpovich [JB]]

Could you please copy-paste MyButton snippet here, so I could reproduce?

[Daniele B]

fun MyButton(text: String, clickFunction: () -> Unit, bgColor: Color = Purple700) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    Button(
        modifier = Modifier.pointerHoverIcon(PointerIcon(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))),
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = if (isHovered) Teal200 else bgColor
        ),
        onClick = { clickFunction() },
    ) {
        Text(text = text, style = MaterialTheme.typography.button)
    }
}

[Oleksandr Karpovich [JB]]

PointerIcon(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))

This thing is desktop only, because Cursor.getPredefinedCursor(...) is from java.awt

I changed your function a bit and was able to run it without issues:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon

@Composable
fun MyButton(text: String, clickFunction: () -> Unit, bgColor: Color = Color.Gray) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    Button(
        modifier = Modifier.pointerHoverIcon(
            PointerIcon.Hand
        ),
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = if (isHovered) Color.Black else bgColor
        ),
        onClick = { clickFunction() },
    ) {
        Text(text = text, style = MaterialTheme.typography.button)
    }
}

Let me know how it works for you

[Daniele B]

Thanks! it compiles now!

[Oleksandr Karpovich [JB]]

The "hand" cursor is probably not applied in web yet in 1.4.1. But it should work in the next dev build of compose multiplatform