How can i load a custom font?

Any ETAs around for 1.7.0 CfW support?

Hello! Quick question… I’m building a webapp using compose web and I wanted to know if there is a tool of command line argument to help diagnose why the website was completely reloaded? Why a component is redrawn? Thanks 🙂

Is the plan for compose 1.2 RC to have stable canvas based multiplatform (iOS, Android, Web, Desktop) components? Haven't pulled the 1.2 alphas in a couple months but last time i checked saw onWasmReady, etc. How close are we thinking we are to beta?

Is there a Compose Web version for Kotlin 1.6.20 or higher? I'm blocked on https://youtrack.jetbrains.com/issue/KT-52047

How would I being with implementing reordering by dragging and dropping items in some list/col/row/grid, or maybe a table, with compose for web?

How can I respond to the user pressing Enter/Return on a

TextInput

or

NumberInput

? I hoped that adding this would work:

addEventListener("submit") {
    onSubmit()
    it.preventDefault()
}

And I also tried the

"onkeyup"

event, but I can't seem to trigger a callback. Must I use a

Form

for this, or can it be done without one?

Hey, I just started using Compose Web yesterday, and I have some questions about routing. Is there any help or snippets on how to handle multiple routes ? How to have like something always present in every routes (header/footer) etc ? Or do I have to do all this by myself using Ktor ?

What's the recommended way of doing animations in Compose Web?

It seems like animateFloatAsState is not available

Hey, why does the

margin

and

padding

methods doesn't work in styling ?

Is there a way to: • wait for the window

onLoad

event • Resize the HTML5 canvas element compose for web renders on • Call

onWasmReady {}

Before rendering my Compose app? The examples declare a fixed window size in the samples. Using dom listeners just seem to stretch the canvas, I’m wondering if anyone has dealt with this already.

This message was deleted.

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)
	}
}

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.

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

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

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.

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?

Is CfW compatible with KJS plugin yet?

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?

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

:)

Hi, is it possible to trigger Intellij build action when saving ?

message has been deleted

I don't know why Compose for Web don't have for now DSL for creating transitions, but I created mine and I find it pretty cool :) Using the builder functions directly into the

transitions

lambda set the default values for each ^^ And

all

just apply the transition to the properties given, and has an optional lambda argument to have a specific transition for them, for the last part the name is good but just to apply the default values to these properties I didn't come up with a good name, if anyone has an idea I'll listen to it !

I'm using the

--continuous

option for the

jsBrowserRun

task but its not reloading in the browser. When I save, it shows the logs that its sending the data but the site is the same.

Can I add

kotlin-js-store

to my

.gitignore

file?

Nice! I would just create the PR 😄

Hi, is it possible to insert a

@import

CSS rule ?