I just updated to 1.2.2. Now, when using `Style(...)` in my root `renderComposable()` call, the resu...

# compose-web

[Didier Villevalois]

I just updated to 1.2.2. Now, when using Style(...) in my root renderComposable() call, the results of re-compositions are appended to my "root" dom node instead of replacing the old content. If I remove the Style(...) call, then it works fine. Is this a regression ?

Tested with both (Kotlin 1.7.20 + Compose Multiplatform 1.2.2) and (Kotlin 1.7.21 + Compose Multiplatform 1.2.2 + Compose Compiler 1.4.0-alpha02).

[CLOVIS]

Is this new? I'm not using Style , and renderComposable has always prepended rather than erased.

[CLOVIS]

I'm currently on Kotlin 1.7.20, Compose 1.2.1, but it was already the case before

[Didier Villevalois]

@CLOVIS Thanks for your answer. But I don't get it. Should I use something else rather than renderComposable ?

[Didier Villevalois]

I just tested that without the Style the content of the rootElementId is replaced at each composition. With the Style call, the content of the rootElementId is never reset and its html content only grows in size.

[CLOVIS]

Oh, you mean, between recompositions? Sorry, I thought you were comparing the contents before and after the first composition.

[CLOVIS]

If it really doesn't remove the contents from previous compositions, that's probably worth a bug report.

[Oleksandr Karpovich [JB]]

Please report the issue here https://github.com/JetBrains/compose-jb/issues
It’s indeed worth investigation.
Do you have anything else in the root? Does it append only Style?

[Didier Villevalois]

Here is a minimal reproduction code:

import androidx.compose.runtime.*
import org.jetbrains.compose.web.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*

fun startApp() {
    renderComposable(rootElementId = "root") {
        Style(AppStylesheet)
        Test()
    }
}

@Composable
fun Test() {
    var counter by remember { mutableStateOf(0) }

    if (counter % 2 == 0) {
        P({ classes(AppStylesheet.counter) }) {
            Text("$counter < Even")
        }
    } else {
        P({ classes(AppStylesheet.counter) }) {
            Text("$counter < Odd")
        }
    }

    Button({ onClick { counter++ } }) {
        Text("Increment")
    }
}

object AppStylesheet : StyleSheet() {
    val counter by style {
        fontWeight("bold")
    }
}

It seems the problem comes from the interaction between Style and the if statement.
Works without the Style call. Fails with the Style call.
Tested with Kotlin 1.7.21 + Compose Multiplatform 1.2.2 + Compose Compiler 1.4.0-alpha02.

@Oleksandr Karpovich [JB] Is this sufficient to open an issue?

[Oleksandr Karpovich [JB]]

Unfortunately, Compose Compiler builds published by Google are not guaranteed to support k/js immediately and properly (although we try to upstream all the necessary changes asap).

At the moment, there is no compose compiler published by JB supporting kotlin 1.7.21

Could you please try kotlin 1.7.20 + Compose 1.2.2? (with the default compiler plugin - 1.3.2.2, so no need to override)

[Didier Villevalois]

No problem. I just changed to Kotlin 1.7.20 + Compose Multiplatform 1.2.2 (with no compiler override).
And the behavior is the same:

Screencast from 2022-12-19 18-13-40.webm

[Oleksandr Karpovich [JB]]

Thank you! That’s helpful

[Didier Villevalois]

I can create a ticket if you dim it necessary.

[Oleksandr Karpovich [JB]]

Yes please. I’ll appreciate it

[Didier Villevalois]

https://github.com/JetBrains/compose-jb/issues/2568
I hope there is enough detail.