Hi, is there a simple way to insert an element into a Text() ? Like

${Br()}

into a raw string ? For now it just prints the result of the method which is

kotlin.Unit

Hi, I created a data class in kotlin :

data class Line(
    val lng: Double,
    val lat: Double,
)

I create an object of Line and parse this object to javascript, the field's name changed.

{"_lng_0":116.397461,"_lat_0":39.909186,"_$stable_57":0}

if I want to keep the field's name as it is in kotlin , what should I do?

Please, how to put the items inside the select for the user to choose an option? compose-web

Div(attrs = { style { id("seAdmRet"); display(DisplayStyle.Block) }; classes("form-group") }) {
            Span { Text("Opção AdmRet - 1") }
            Select(attrs = { classes("custom-select", "mr-sm-2", "dlg-100") }
            ) {                
//                TextInput("ola1","GD")
//                Text( "opa")
//                 Text("olá")
            }
        }

Hi, just a random thoughts I have, could we use Kotlin-Wrappers to better implement the CSS API and not reinvent the wheel ? It seems more complete that the API CfW have and as a lot is generated it is really easily up to date with CSS standards 👀

Hi what is the design pattern to have a list of classes containing data which is got from a Promise ? Like how do I set the variable and how do I say that if it's empty, try to get the value and wait until the list has data to put the composables using the data ?

Compose for Web on Canvas/Skia/Wasm: I have a simple function

BrowserViewportWindow

for the initial window. It is easy to use, supports resizing, fills the entire browser viewport, sets the window title correctly and does not require a stylesheet. Inspired by code in @Tlaster's PreCompose. If you want to try: Code in 🧵

Does latest version supports Kotlin 1.7.10 ?

hi all, i’m an android developer exploring compose for web. is it correct to say that compose for web at this time does not support compose ui (e.g. Box, Modifier, etc.), but compose for desktop does? also if this is the case, are there any plans for supporting compose ui for web in the near future? thank you kindly

Do you really want to hide it, but still have it in the dom? then just use

attrs("visibility", "hidden")

. Alternative use

if

.

Did you have a look at https://github.com/icerockdev/moko-resources

Hey guys, just one question. When are you planning to publish the official documentation about Compose for Web? 🤔

I keep hearing people are already trying out Compose 4 Web Canvas (C4WC). How or where do I look to get my self started?

Hi, I have a weird error where I can't set some style to a Div dynamically, I have this code

Div({
	classes(AboutMeStyle.timeline)
		
	window.addEventListener("scroll", {
		val footerOffset = document.querySelector(".${AppStyle.footer}")?.asDynamic()?.offsetTop as Double? ?: return@addEventListener
		val currentOffset by mutableStateOf(window.scrollY + 100)
		
		if (currentOffset < footerOffset) {
			style {
				top(currentOffset.px)
			}
		}
	})
})

If I put a

console.log

inside the condition it gets called so it should be fine, but no style is set, what am I doing wrong ?

Hi, I can't set a value for a CSS variable in an inline script ? I have this

object FooterStyle : StyleSheet() {
    val buttonColor by variable<CSSColorValue>()

    val button by style {
        backgroundColor(buttonColor.value())
        ...
    }
}

// somewhere in a @Composable
A(href = "/my-route", {
    target(ATarget.blank)
    classes(FooterStyle.button)

    style {
        FooterStye.buttonColor(Color.gray)
    }
}) {
    Text("Download")
}

But the variable isn't set in my resulting CSS and there's even no inline style at all 🤔

I'm sorry this question must have been asked many times, but I couldn't find answer: is there an easy to follow tutorial to learn how to deploy a Jetpack Compose frontend website on something like Heroku or AWS?

hey. I was wondering if there is an easy way to generate react components from composables? use case, we have a web based documentation site for our design system (with web versions) and want to bring our composables into the page (for Android references) in a way that enables web developers to call the composables from React easily.

Hey , anyone have a good image loading library like Coil that supports compose canvas for web?

In compose-jb 1.2.0-alpha01-dev755 with Web/Canvas/Skiko, I'm getting a symbol resolution error today

Module "androidx.compose.foundation:foundation" has a reference to symbol [...] EmptyLazyGridLayoutInfo

. It did work a couple of days ago. Re-downloaded the artifacts to no avail. Could it be that there's something wrong in the JB space repo? More Details in 🧵

Has anyone tried to publish a library targeting using just

compose.runtime

as a dependency? I’m trying to make a library with a “common Compose” module that’s compose-runtime only, and then additional modules that add on support for Material and JS DOM, but it seems like there’s a problem with compose runtime being used in the common sourceSet

i was not discouraged when I learned that scrolling within canvas is not supported yet. So i took it upon myself to fix it (hackily): 1. define a global channel

val scrollListener = Channel<Double>()

2. Consume it in your scrollable composable:

val scrollState = rememberLazyListState() 
  LaunchedEffect(Unit) {
        scrollListener.consumeAsFlow()
            .collect {
                scrollState.scrollBy(it.toFloat())
            }
    }

3. attach it to a window event:

fun main() {
    window.addEventListener("wheel", { event ->
        if (event is WheelEvent) {
            event.stopPropagation()
            GlobalScope.launch {
                scrollListener.trySend(event.deltaY)
            }
        }
    })
}

then you have scrolling support

I just released another version of Kotlin JSON Forms, which adds support for Compose Web using Bulma form styling! Still very much a POC, nowhere near production ready yet and the UI is terrible, but it’s neat to see it coming together and using the same form definition working for both Android and JS targets, making it significantly less annoying to build large, dynamic forms. Links to some examples in the 🧵

How could I host my compose website using github pages? Is there some example I could look at?

Now you can create your Compose Wasm web app from terminal 🎉 https://twitter.com/theapache64/status/1563862677063348224

I'm wondering if there are official plans for adding support for CSS functions into the Web Compose API, e.g. things like clamp, abs, min, max.

You can have webpack bundle font resources and then you can require them and load them as any other url into a font object

looks like

Modifier.onPreviewKeyEvent

and

Modifier.onKeyEvent

don't work in browsers. desktop and android are ok

Hello! 👋🏻 I’m wondering if it’s possible to detect if the compose web project is running in development or distribution mode? I’d like to change some settings based on local development or prod Thanks!