Is there any particular recommended way of having a Kotlin 1.7.20 project with Compose for Desktop and Web (but just Kotlin 1.7.10 for Web as is needed right now)?

For some time I often get this error during development:

e: java.lang.IllegalStateException: Provide file symbol
	at org.jetbrains.kotlin.backend.common.serialization.IdSignatureDeserializer.deserializeFileIdSignature(IdSignatureDeserializer.kt)
	at org.jetbrains.kotlin.backend.common.serialization.IdSignatureDeserializer.deserializeSignatureData(IdSignatureDeserializer.kt:90)

Have you seen something similar, or do you have an idea? (I use Kotlin 1.7.10 + Compose/Web 1.2.0 + Idea Kotlin plugin 1.7.20) My workaround is to do a clean build or to disable incremental JS compilation :(

I'm trying to update my project to Compose for Web 1.2.0 + Kotlin 1.7.10. When I run, I'm getting this error message in my console:

Uncaught Error: Error loading module 'site'. Its dependency 'androidx-runtime' was not found. Please, check whether 'androidx-runtime' is loaded prior to 'site'

Anyone else seeing this? I'll drop more details in a 🧵

Hello everyone, is there any way to apply dynamic resolution in canvas based implementation?

Also does anyone have any suggestions on how to represent TextField as input (mobile browser doesn't open keyboard when i click on it) in canvas based impl?

Is there a type-safe way to set CSS

margin: auto

? Currently I use this:

property("margin", "auto") // Somehow: margin(auto) ???

Thanks.

In my

StyleSheet

if I have defined a style class

val x by style {}

and I want to apply it to a raw selector, e.g. a

<button>

, is that possible? For example:

object MyStyleSheet : StyleSheet() {
    val x by style {}

    init {
        "button" by style {
            // Here apply class x from above
        }
    }
}

My use case: define 1 style class for round corners and apply that class to the various elements that I want to style like that. Maybe I need a different approach, I'm open to suggestions.

I have run into a limitation of the Kotlin language (not sure if really the case, but I feel limited) that others likely will run into as well. I've defined a composable like so

@Composable
fun MyComposable(vararg composables: @Composable () -> Unit) { /* impl */ }

Now I want to let the caller pass some styling also, so I refactor it to:

@Composable
fun MyComposable(
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
    vararg composables: @Composable () -> Unit
) { /* impl using a div that applies attrs */
}

Now all my code no longer compiles, because wherever I used to call e.g.

MyComposable(
    { /* Some composable */ },
    { /* Some composable */ },
)

now suddenly the first lambda is used as the

attrs

parameter! It doesn't compile, luckily, because it's not allowed to call a

@Composable

function from a non-composable context: the

AttrBuilderContext

happens to be a lambda that

@Composable () -> Unit

fits into... 🤦‍♂️ A coincidence, but one that will likely happen to more users. The workaround beats the purpose of using a lambda in the first place:

MyComposable(
    composables = arrayOf(
        { /* Some composable */ },
        { /* Some composable */ },
    )
)

This works, and is not nice. See also this thread.

Hello everyone! I have a simple edit page to update a user profile. My UserProfile is something like that:

data class UserProfile(var name: String, var email: String, var password: String)

Inside my view model, I have something like that:

class ViewModel {
  var userProfile by mutableStateOf(UserProfile())
}

And now I use it like that:

fun EditProfileScreen(viewModel: ViewModel) {
  TextInput(value = viewModel.userProfile.email, attrs = {
    onInput { viewModel.userProfile.email = it.value }
  }
}

Now, from what I experienced / understand, if I modify a field from my user profile, I can’t modify it directly like I did. I would have to do something like that:

viewModel.userProfile = viewModel.userProfile.copy(email = newEmail)

I need to copy the whole object because Compose won’t be able to detect a change and won’t trigger a recompose. And when copying, it’s a new object and this will recompose. Now is the copy way of doing thing would be the best way? Or should I do expand my UserProfile with multiple state like:

class ViewModel {
  private var userProfile = UserProfile()
  var email by mutableStateOf(userProfile.email)
  var name by mutableStateOf(userProfile.name)
}

And edit them directly and when I click save, I would get the current value from all states. Or have states as read only and then have setter function to update the main class:

val email by mutableStateOf(userProfile.email)
  private set

fun setEmail(newEmail) {
  userProfile.email = newEmail
  email = newEmail
}

Or is there any other way of doing this that I don’t think of? Thanks! 🙂

Is Gradle task

jsBrowserDistribution

(produces ./build/distributions/) still the way to publish a compose website? I think so, but it's not very well documented AFAI can find

How do you define validators for Input fields? I see that there is an onInvalid method, but I can't seem to figure out how to set validity

I've just seen a new compose-jb release: https://github.com/JetBrains/compose-jb/releases/tag/v1.3.0-alpha01-dev827 Does it already support Kotlin 1.7.20 in case of Compose/Web as well? Thanks.

Hello, I'm trying to use compose web with canvas but I'm getting some errors when running the project:

onWasmReady is not defined

I searched the examples and they look like I need to use webpack

4.9.0

When I set that version, I get a new error:

cli.isMultipleCompiler is not a function

The CSS variables example found here doesn't work. In my code I cannot set the variable, e.g.

MyVariables.contentBackgroundColor(Color("blue"))

seems impossible. Do I need to import anything? I can't find a setter/`invoke` operator in the source either. Was it removed?

How would you do color calculations? E.g. I have some RGB or hex color. How would you make it e.g. 15% darker or lighter?

I'm curious if there are any rumours about CfW canvas on the upcoming Kotlin/Wasm? Seems like a natural fit and a good way to reduce the number of wasm-to-js jumps

Good day. Does anyone have an idea when Compose Multiplatform (Web) will be compatible with Kotlin 1.7.20?

Does anyone know if it's possible to store image resources in another gradle module?

is there a way to setup a compose library (even with `expect`/`actual`) so that I can have different implementation for Compose4Web (Dom) and Compose4Web (Canvas) ?

Are there plans for compose web with canvas to support text selection?

Does Compose web by default use material design?

Is there any list to know what's currently supported by compose4web canvas?

hi

I’m just starting out with this, and I would like for example to use

Modifier

, the main goal is to use a Composable component that I made elsewhere, here on web

Is it possible to create preview for some widgets like @Preview function?

Hi! Is there a small navigation library available for Compose Web yet? I don't need anything big, just something basic that works well with Compose. Hopefully multiplatform. I've been trying to roll my own thing out but I'm not convinced by the results.

Another Compose Web App : https://twitter.com/theapache64/status/1592740231627018245 🚀

Let's say I have

images.forEach { Img(image.url, ...) }

Now, I change images, and get a recomposition. What's the recommended way to make the

Img

s slide into their new position instead of instantly popping? I tried adding some css transitions but no luck.

Just cross-posting this issue here for visibility. Maybe someone knows something about it: https://github.com/JetBrains/compose-jb/issues/2474