I've been trying to use preview annotation in compose-web, but whenever I add implementation(compose.preview) i got this error

Failed building KotlinMPPGradleModel

org.gradle.internal.resolve.ArtifactNotFoundException: Could not find ui-tooling-preview-1.0.1-samplessources.jar (org.jetbrains.compose.uiui tooling preview1.0.1).

Searched in the following locations:

https://repo.maven.apache.org/maven2/org/jetbrains/compose/ui/ui-tooling-preview/1.0.1/ui-tooling-preview-1.0.1-samplessources.jar

What am i doing wrong? I use built in compose-web template from intellij idea

I notice Compose for Web API uses

inline

quite a bit more than I'd expect. Is that to reduce the final javascript bundle size?

how to add hover to property using

org.jetbrains.compose.web.css.StyleScope

? ex:

Span({
  style { // this is org.jetbrains.compose.web.css.StyleScope, not org.jetbrains.compose.web.css.CSSBuilder
    property("color", "#fff") // <-- hover??
  }
})

compose

1.1.0-alpha05

The documentation shows that the CSS class part is written in StyleSheet, but how do I implement the CSS id part? https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Style_Dsl I would appreciate it if you could tell me how the CSS description compares to the Compose-web description.

https://github.com/JetBrains/compose-jb/releases/tag/v1.1.0 K K

I've been trying out ReactJS for the past few months but had some issues, one huge one was how large and deeply-nested the node-modules folder could get

Hi all! I am trying to use compose web with a normal kotlin-js project (e.g. non-multiplatform). Gradle, though, keeps failing telling me it "can't find the compose runtime reference"

"and we're working on fixing that" is right there

Are there any templates or components lib available for compose web?

I tried out the alpha version of Compose Web. Lots of fun! One thing that I wasn’t anticipating was how slow the frames are when compiling for development. The bad performance goes away completely when compiling for prouduction. I suppose most of my development work would be on the JVM anyways, so it’s not really a big deal. Excited for this to move to beta so I can port one of my compose products over to it!

Hello everybody. I want to create some

Composable

function inside of an interface and realize this function in realizations if that interface. I have tried to use some

@Composable

callback getters (

val renderer: @Composable () -> Unit

), common functions (

@Composable fun render()

) and several other ways, but I got errors in rendering fun (

IllegalStateException {message: 'Function TextArea should have been replaced by compiler.', cause: undefined, name: 'IllegalStateException', stack: 'IllegalStateException: Function TextArea should ha…://127.0.0.1:8080/postssystem.client.js:1:2202661'}

error,

TextArea

here is external

@Composable

top-level function) or event getting an error

java.lang.AssertionError: No such value argument slot in IrCallImpl: 0 (total=0).

. Could somebody help me with this?

Hello, I'm a bit confused on how to clear a Text Input.. let's say I have

var text by remember { mutableStateOf("") }
Input(type = InputType.Text, attrs = {
   defaultValue(text)
   onChange {  event ->
       text = event.target.value
   }
})

If I then set

text = ""

the input field is not cleared, as defaultValue is not reapplied... so how can I clear it? is the only way using a reference to the HTMLInputElement? Thanks

I am running into an issue with

routing-compose

where a flow that I am collecting as state does not trigger a recomposition if the page is loaded under a path that is being matched by the router (regardless of whether I'm using

HashRouter

or

BrowserRouter

This is the relevant line of code that is not triggering recomposition: https://github.com/dellisd/reroute/blob/master/web/src/jsMain/kotlin/io/github/dellisd/reroute/map/MapDemo.kt#L31 it is a child of a

HashRouter

https://github.com/dellisd/reroute/blob/master/web/src/jsMain/kotlin/io/github/dellisd/reroute/Main.kt#L22-L23 Here (https://dellisd.github.io/reroute/), the page is loaded and the data is loaded asynchronously before being emitted to a flow, collected as state, and then displayed on the map (as the set of red points) But here (https://dellisd.github.io/reroute/#/stops/7664) where a specific route is matched, the data is still loaded but now the flow does not trigger a recomposition in the

MapDemo

composable and the map is not updated to display the points Am I missing something, or is this potentially a bug somewhere? And if it is a bug, does anyone have any tips on how to narrow down where the bug is actually coming from?

Any good example projects for compose web? Other than the flappy bird thing.

But really Compose gets some things right that React doesn't IMO • state variables are single objects, not those annoying (value, setValue) tuples that have to be passed around everywhere, and where setValue doesn't actually change the immutable value variable until recomposition • kotlin-css is already integrated. If I try to use a CSS library with react, like emotion or JSS, things really blow up

Hey folks, I wanted to give a teaser of an MVI state management library I’ve been working on. It’s still fairly early and not yet officially released, but I was able to get some examples built and running in Compose Web in its documentation site! https://copper-leaf.github.io/ballast/wiki/examples/scorekeeper/

Hello, in compose web what would be an equivalent of

box-shadow

? Use case is building a card.

compose web draws into a canvas.. what javascript hooks would i need to adjust the canvas to the browser window size each time it gets resized ? i tried

function resize_canvas(){
    canvas = document.getElementById("ComposeTarget");
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
}

with

<body onresize="resize_canvas()">

and.. although that resizes the canvas.. it stops rendering

so i got compose web working when rendering on a canvas, but for some reason i cannot get my code to render to the dom, trying to follow https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started loosely but no matter what i do this gets thrown..

CompositionLocal LocalDensity not present

my main function is

fun main() {
    renderComposable(rootElementId = "root") {
        console.log("rendering root element")

        Text("Test")
    }
}

and the index.html looks like so

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pentagame</title>
<!--    <script src="skiko.js"> </script>-->
</head>
<body>
    <div id="root"></div>
<!--    <canvas id="ComposeTarget" width="1024" height="720"></canvas>-->
    <script src="app.js"></script>
</body>
</html>

Hello everybody 🙂 is there any news about compose with kotlin 1.6.20 compatibility?

Has anyone tried to use Kotlin 1.6.20 with the corresponding Compose pre-release compiler (

1.2.0-dev-k1.6.20-61e81dadb1c

)? Over here, building the IntelliJ wizard Compose Web demo fails in

compileProductionExecutableKotlinJs

with

Internal error in file lowering: java.util.NoSuchElementException: Collection contains no element matching the predicate.

Hello, maybe is there a ticket where I could track Compose/Web canvas-based rendering progress? Thanks.

Hi all, is there any alternative for http://google.github.io/accompanist/pager? I'm working on a front-end project using compose-web and the project is web-browser specific (it'll not be used in android or iOS), so I'm trying to avoid android dependencies.

Hey composers! Since the

Stylesheet.css

function was deleted (https://github.com/JetBrains/compose-jb/commit/cd7691a53fc73ed41abda6de604eb1f9a08af48b), I can find no way in Compose Web to have Css-In-JS, that is to have a component style classes defined within the component (I would usually use the syntax described in this issue: https://github.com/JetBrains/compose-jb/issues/1207). This type of syntax (aka CSS-In-JS) is supported in Kotlin React with https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-styled/README.md and is an important design decision in how we've been building our web apps with it. Is Jetbrains Compose Web going to support it back ? Is there a workaround we can use in the meantime ? Note that using

style

is insufficient as it does not allow full css selection (hover, children, etc.). Note that when we were using Kotlin-React, the difference between

css

and

style

was important: the former described "stable" style (in order to avoid class regeneration) while the second described "moving" style.

Hello, has anyone tried using

Google Sign In

with

compose web

? I will appreciate any ideas or suggestions😊 .

Hello friends. I posted these questions on #multiplatform channel but I am copying it here, hope we have the answer faster 🙂 From what I understood, for now compose web parses kotlin code to DOM. So: 1. We can not share the mobile/desktop code with web (because mobile/desktop render on Canvas), is this correct? 2. But if web use Canvas, it will have the problem with SEO and performance (big bundle for first load) - like Flutter?

well, so if we want to have a good (in terms of SEO and performance) web, we need to build web UI separately 😐

Hello! I want to add compose web to my existing KMP project but the problem is that I’m already using Kotlin 1.6.20. Currently, the compose setup set the Jetbrain’s compose plugin to 1.1.1 (

id("org.jetbrains.compose") version "1.1.1"

). I think I got this from a tutorial or wizard in IntelliJ. Now I know that compose 1.1.1 does not support Kotlin 1.6.20. But I saw last week that a new version of the compose compiler alpha version (

1.2.0-alpha08

) does now support Kotlin 1.6.20. But how do I get to force the compiler version ? Will it even work since the compiler is the one provided by Google and not the Jetbrain’s one which support compose web. Or are there any difference?!

build.gradle.kts

setup in thread. Thanks for clarifications 😅

How to serve webApp.js from a backend server ?

Hello! I want to convert an ISO date format into a given format. I'm doing it using JSJoda library as below:

val date = LocalDateTime.parse(isoValue)
val dateFormat = DateTimeFormatter.ofPattern(format)
return date.format(dateFormat)

This is giving me an error which says that

DateTimeFormatter.ofPattern(format)

needs a Locale but I'm not getting any option to set Locale by doing something like

DateTimeFormatter.ofPattern(format).withLocale(Locale.ENGLISH)

because

Locale

is just an interface without any implementation. Tried googling but didn't find anything. Is there any other way to do this? TIA