• s

    Slackbot

    2 months ago
    This message was deleted.
  • a

    Ayfri

    2 months ago
    Hey, what is the idiomatic way to add and remove a class to an element using a
    mutableState<Boolean>
    ? For now I have this but it's very ugly I guess 👀
    data class Tab(val name: String, val link: String, val selected: MutableState<Boolean> = mutableStateOf(false)) 
    
    @Composable
    fun Tab(tab: Tab) {
    	NavLink(tab.link, {
    		if (tab.selected.value) {
    			ref { htmlAnchorElement ->
    				htmlAnchorElement.classList.add("selected")
    				onDispose {}
    			}
    		} else {
    			ref { htmlAnchorElement ->
    				htmlAnchorElement.classList.remove("selected")
    				onDispose {}
    			}
    		}
    	}) {
    		Text(tab.name)
    	}
    }
    a
    Big Chungus
    +1
    8 replies
    Copy to Clipboard
  • Tunji Dahunsi

    Tunji Dahunsi

    2 months ago
    How does one load custom fonts on compose web targeting the canvas? The method has the following signature:
    fun Font(
        identity: String,
        data: ByteArray,
        weight: FontWeight = FontWeight.Normal,
        style: FontStyle = FontStyle.Normal
    ): Font = LoadedFont(identity, data, weight, style)
    However I’m unsure how to create the the
    ByteArray
    for the
    data
    argument. The required
    .tff
    file is in resources, but I’m not sure what API to use to actually read it in js for the browser.
  • a

    Ayfri

    2 months ago
    I have a question, how compose for web can be used for multiplaform ? As you create HTML components and CSS ? I don't quite get it
    a
    David Herman
    +6
    56 replies
    Copy to Clipboard
  • c

    Cedrick Cooke

    2 months ago
    Are pre-release builds hosted anywhere? On maven central the highest pre-release version I can find is 1.2.0-alpha1-dev620, but GitHub lists 1.2.0-alpha01-dev741
    c
    k
    2 replies
    Copy to Clipboard
  • Arjan van Wieringen

    Arjan van Wieringen

    2 months ago
    I have a DisposableEffect which registers an eventlistener, and disposes of it again. But it appears that I am not allowed to update MutableState variables inside this event listener? I get compiler errors:
    var editMode by remember { mutableStateOf(false) }
    
    DisposableEffect(Unit) {
            val handler : EventListener = object : EventListener {
                override fun handleEvent(event: Event) {
                    if (event.target != null) {
                        //editMode = false <- compiler error when I uncomment this
                    }
                }
            }
    
            document.body?.addEventListener("click", handler)
            onDispose {
                document.body?.removeEventListener("click", handler)
            }
        }
    And the last part of the stack-trace:
    java.lang.IllegalStateException: Validation failed in file Components.kt
    	at org.jetbrains.kotlin.backend.common.IrValidator.error(IrValidator.kt:83)
    	at org.jetbrains.kotlin.backend.common.IrValidator.access$error(IrValidator.kt:61)
    EDIT: It appears to work when using a lambda function as argument to the eventListener and not an object.
    Arjan van Wieringen
    shikasd
    2 replies
    Copy to Clipboard
  • Arjan van Wieringen

    Arjan van Wieringen

    2 months ago
    I have the issue that I have an
    Input
    which on recomposition doesn't update the UI with the latest value, but it is visible in the DOM tree. The code is a bit like this
    @Composable fun EditableTitle(value: String, onInputChange: (String) -> Unit = {}) {
        var editMode by remember { mutableStateOf(false) }
        val nativeElement = remember { mutableStateOf<HTMLInputElement?>(null) }
    
        // I need to use this as a hack to overwrite the value so that it works
        LaunchedEffect(value) {
            nativeElement.value?.value = value
        }
    
        LaunchedEffect(editMode, nativeElement.value) {
            when {
                editMode -> nativeElement.value?.select()
                !editMode && nativeElement.value != null -> {
                    nativeElement.value?.value?.also(onInputChange)
                    nativeElement.value?.blur()
                }
            }
        }
    
        Input(InputType.Text) {
            placeholder("Enter list name...")
            defaultValue(value) // when I use value(value) it blocks my UI
            refState(nativeElement) // this one uses DisposableEffect to fetch the nativeElement
    
            if (editMode && evt.key == "Enter") {
                editMode = false
            }
        }
    }
    I do some stuff with some other state variables to make it more UI friendly. The
    value
    parameter can be updated externally as well and when it has been modified at least once in the above Composable, the UI doesn't update if the input value into the composable is changed. When I use the
    LaunchedEffect(value)
    it works. Is this logical?
    Arjan van Wieringen
    o
    +1
    14 replies
    Copy to Clipboard
  • Big Chungus

    Big Chungus

    2 months ago
    Is CfW compatible with KJS plugin yet?
    Big Chungus
    hfhbd
    2 replies
    Copy to Clipboard
  • spierce7

    spierce7

    2 months ago
    I realize that it’s still very early, but does anyone know if Native DOM can be positioned inside the Canvas API for Compose Web in the alpha version?
    spierce7
    Lucas
    3 replies
    Copy to Clipboard
  • MrPowerGamerBR

    MrPowerGamerBR

    2 months ago
    For anyone trying to use Jetpack Compose Web on Kotlin 1.7.10: You can disable the version check with
    tasks.withType<org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile> {
        kotlinOptions {
            // Jetpack Compose doesn't support Kotlin 1.7.10 yet, but the latest version seems to compile just fine under Kotlin 1.7.10
            freeCompilerArgs += listOf("-P", "plugin:androidx.compose.compiler.plugins.kotlin:suppressKotlinVersionCompatibilityCheck=true")
        }
    }
    The project compiles and runs fine after disabling the check, using
    1.2.0-alpha01-dev750
    😃