Are there any plans/ideas for Compose Web that works on top of a canvas? Bypassing the DOM and the usual HTML elements...

Hi, I just found a bit counterintuitive stuff in file

CSSSelectors.k

Is it intentional, that

fun sibling()

is mapped to `CSSSelector.Descendant()`instead of

CSSSelector.Sibling()

?

HI, Did the this tutorial: https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started but I get a weird output and the webpack server is not working. I had to use

kotlin.js.webpack.major.version=4

in

gradle.properties

cause it was erroring out without (https://stackoverflow.com/questions/69537840/kotlin-js-gradle-plugin-unable-to-load-webpack-cli-serve-command) Anybody got a hint 🙂 ?

> Task :jsBrowserDevelopmentRun
⚠ ｢wdm｣: Hash: 42d8be649aea20319bee
Version: webpack 4.46.0
Time: 2552ms
Built at: 11/10/2021 8:35:46 PM
              Asset      Size  Chunks             Chunk Names
web-compose-test.js  3.91 MiB    main  [emitted]  main
Entrypoint main = web-compose-test.js
[0] multi (webpack)-dev-server/client?<http://localhost:8080> ./kotlin/web-compose-test.js 40 bytes {main} [built]
[../../node_modules/ansi-html/index.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/ansi-html/index.js 4.16 KiB {main} [built]
[../../node_modules/html-entities/lib/index.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/html-entities/lib/index.js 449 bytes {main} [built]
[../../node_modules/loglevel/lib/loglevel.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/loglevel/lib/loglevel.js 8.65 KiB {main} [built]
[../../node_modules/process/browser.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/process/browser.js 5.29 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/index.js?<http://localhost:8080>] (webpack)-dev-server/client?<http://localhost:8080> 4.29 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[../../node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[../../node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[../../node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./kotlin/web-compose-test.js] 2.23 MiB {main} [built] [309 warnings]
    + 21 hidden modules

Live reload does not seem to work. I make changes, save, webpack runs and nothing happens. You have to restart the server for it to work... I running with

jsBrowserDevelopmentRun

The browser just states that no actual changes were detected...

Any chances we get a plugin to show compose colors/imgs/fonts/... as an IntelliJ gutter or something similar?

On another note, how to make a popup/dialog wiith compose web? Does anybody have an example of that?

Does compose have a specific way to deal with Input masking? I see that there is a different function for each InputType, so maybe there's something for masking?

What is the preferred

Input

usage style: controlled or uncontrolled? How can I decide?

I'm trying to find a long-term client-side architecture for my Compose/Web application. Currently I'm looking at: 1. https://arkivanov.github.io/Decompose/ 2. https://github.com/badoo/RIBs/blob/master/documentation/about/evolution-of-ribs.md Can someone please explain the main difference between them from an architectural viewpoint? (I see that RIBs is not multiplatform, so I'm just curious about the differences.) Besides, does anybody have experience with Decompose in a real application?

Hello, I am starting with Jetpack compose. I could find great articles for Android so far I am trying to have common Navigation Manager layer For android I could make it but I cannot find any thing for Navigation for Web Could some one point me out for Navigation in Compose Web ?

Hi, I just found weird behaviour in our JetPack Compose for Web. project Here is scenario: File

FileA.kt

package mypackage

import org.jetbrains.compose.web.css.px

val a = 96.px

File

MyTest.kt

package mypackage 

val b = a

class StyleSheetTest {

    @Test
    fun testA() {
        val result: CSSCalcValue<CSSUnitLength> = 100.vw - 2 * a
        assertEquals("calc(100vw - 192px)", result.toString())
    }

    @Test
    fun testB() {
        val result: CSSCalcValue<CSSUnitLength> = 100.vw - 2 * b
        assertEquals("calc(100vw - 192px)", result.toString())
    }
}

testB

fails with

TypeError: Cannot read properties of undefined (reading 'value')

@Akif Abasov [JB] any idea what is wrong? Is that compiler bug or some edge case optimalization in Kotlin JS IR compiler?

Does web compose work with Kotlin 1.6.0? I've upgraded Kotlin to 1.6.0 and jb compose to the latest version (1.0.0-beta6-dev464) and when trying to compile I'm seeing

e: This version (1.1.0-beta01) of the Compose Compiler requires Kotlin version 1.5.31 but
   you appear to be using Kotlin version 1.6.0 which is not known to be compatible.  Please 
   fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I
   didn't warn you!).

How can I change a child element CSS when the parent is hovered with Compose Web's Style DSL? In CSS, it is like this

.parent:hover .child { /* rules here */ }

However I'm not able to figure out how to represent that in the Style DSL 😞

Now another question that is also related to the Style DSL: How do you organize your Stylesheets? Having everything in a single stylesheet makes everything look/feel messy, in SASS what I like doing is using

@import

statements to split the stylesheets in different files (so I could split stuff in files like

layout.scss

,

animations.scss

, so on and so forth), but I'm not sure how I could do something similar in Compose Web. Inline Styles is maybe the proper way to keep everything organized (keep the style in the Composable component, yay!) but then you aren't able to use pseudo classes like

hover

, no keyframes, etc. Another alternative that I've found is having multiple stylesheets objects and using

Style(StylesheetObjectHere)

, but then multiple

<style>

tags are created (but maybe that isn't a huuuuge issue?). Using extension functions to split up isn't a solution because then you can't reference the style in the

classes

function.

@NoLiveLiterals
@Composable
fun DonationForm() {
  var selected by remember { mutableStateOf(values[1]) }
  val coroutineScope = rememberCoroutineScope()
  
  val clientSecret = coroutineScope.async { startDonation(selected.toLong().times(100)) }

Hey guys! How to make

clientSecret

render again everytime

selected

is changed?

selected

gets it's state correctly, but

clientSecret

is being calculated only once (and not recalculating on recomposition)

How to handle pathing? Like, I want to have a

domain/home

and a

domain/lobby

pages. Currently I hold a composable for each page and just replace the main composable, like an android Fragment. But doing it this way won't allow me to give the direct link to a specific fragment/page. How do you guys handle this?

I'm playing around with MDC on compose-web using @Big Chungus’s project ⬆️ and am experimenting with sass integration, as it seems certain things with MDC are only possible with sass mixins. I've got it working but

gradle build

doesn't actually pick up any changes to the sass files -- only a

clean

+

build

works. Any ideas?

Are SVGs supported in rc5? Also is there any ETA for kotlin 1.6 support?

What is the new way after the refactoring of cssselector api in rc10/12?

CSSSelector.CSSClass(classname) style {..}.

. Simple using

".$classname" style {...}

does not. Edit: it does work, I made another mistake...

Is there any possibility to add Compose Web for this multiplatform project template? https://github.com/JetBrains/compose-jb/tree/master/templates/multiplatform-template ... It's very difficult to setup Compose multiplatform Project that include Android, Desktop and Web

I took a look at compose web today but I’m not quite sure how the workflow is supposed to work. I took a look at the tutorials, which tell me to run my code using the gradle task jsBrowserRun. That works, but is kinda slow. Do I have to rebuild everything from scratch for every small change I do? Is there some kind of hot reload or preview functionality?

can compose-web export html that can be hosted directly?

Hello dear people! I wanted to have some fun with Compose for web 🙂 I was wondering, if I wanted to have an animation, for example an opacity animation from 0 to 1, should I use CSS or can I use compose animation methods? (like on jetpack compose)

Hi there! I was trying the tutorial at https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started but when running

./gradlew jsBrowserRun --continuous

, I get this error:

[webpack-cli] Unable to load '@webpack-cli/serve' command

[webpack-cli] TypeError: options.forEach is not a function

[webpack-cli] TypeError: options.forEach is not a function

I don't have much experience with frontend technologies, but I found an issue in webpack-cli that sounds like my problem: https://github.com/webpack/webpack-cli/issues/2990 The issue seems to be, that webpack-cli/serve 1.6.0 must only be used with webpack-cli 4.9.1 or higher. Looking at the generated yarn.lock file in the build directory, I find that it uses:

"@webpack-cli/serve@^1.5.0":

version "1.6.0"

[...]

webpack-cli@4.7.1:

version "4.7.1"

and from the limited stuff that I understand from the linked issue, these versions don't seem to be compatible. Now my question is: Can I somehow fix this? Maybe via some fancy config in the gradle DSL? Or is this a bug that needs to be fixed in compose? I am staring at this and have no clue what to do here 😅

Hi people! I wanted to show the fun I had over this weekend 🙂 virtual list, aka LazyColumn 🙂 Sometimes a bit jumpy after a big scroll jump, but otherwise functions as how it should (and it usually also recovers). Takes all sizes and composables as list items (as you can see there are 2 different list items, 1 of which has a varying height). It is a list of 100_000 elements, You can see on the right how many are rendered at a time. (also if I don't record my screen it is a lot smoother). For a beginner like me, compose is a very useful tool! I am hoping to use it in the future 🙂

Hello everyone. Are there any milestone about compose-web rendering directly on canvas (with no DOM)???

I'm kind of surprised #compose-desktop has more interest / traffic (non-scientifically judging by number of people in the channel, frequency of posts and number of reactions) than #compose-web does. Is #compose-desktop simply solving a more immediate gap in the JVM world, whereas #compose-web has many existing alternatives people are mostly happy with? Or maybe #compose-web just got a later start.

I’m curious - are we going to see anything around

compose-web canvas

in Q1 2022?

Is there an API that allows you to stick an HTML String into Compose for Web? I am attempting to generate HTML from Markdown

I've been looking for good options for a solid Material based UI. I notice that https://mui.com is React specific. https://materializecss.com/ is 2 years old since last update. How about some kotlin-wrappers for https://github.com/material-components/material-components-web It seems like to good candidate for base components without being tied to a specific framework and it seems that you can easily adjust color and shape themes and limit your css to only the components you actually use. Thoughts?