https://kotlinlang.org logo
Join the conversationJoin Slack
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by Linen
compose-web
  • d

    darkmoon_uk

    06/15/2021, 6:04 AM
    Is there any compelling reason for web/common to use a different Color representation to Android/Desktop? (
    value class / ULong
    vs
    data class RGB Hex
    ); this only makes the two worlds harder to bridge, and there aren't any ready conversion functions that I can see. Couldn't all the color code standardize on
    ULong
    , and the common Color disclose an Android/Desktop color via
    .implementation
    ?
    👍 2
    • 1
    • 3
  • t

    theapache64

    06/15/2021, 8:47 AM
    ✅ RESOLVED:🔥 Do we have hot reload in compose-web?
    s
    c
    a
    • 4
    • 11
  • d

    darkmoon_uk

    06/15/2021, 12:13 PM
    Just looking for a little confirmation from the Compose Web Devs; I'm writing an App using Compose across 3 platforms which I know is far from production approved but as a personal project I can enjoy the struggle 🙂 To be able to write a common View layer between Web / (Android + Web) I am finding the need to write a substantial shim layer with
    expect/actual
    to gain access to
    Modifier
    s that aren't available yet from common code. I guess this is partly because they don't have a Web implementation yet. Even my current Web ones are
    TODO()
    - I'll fill them in ad-hoc as needed. Question: Does this seem a reasonable thing to do, or am I missing a better way to handle existing API's 'commonly'?
    Shim_sample.txt
    o
    s
    • 3
    • 5
  • u

    [JB] Shagen

    06/15/2021, 6:40 PM
    My friends, todays weekly release is about subtle changes in HTML API https://github.com/JetBrains/compose-jb/releases/tag/0.5.0-build225-web
    🎉 16
    :jetpack-compose: 4
    j
    h
    a
    • 4
    • 4
  • t

    theapache64

    06/15/2021, 7:41 PM
    🎉 Here's a game built using compose web and radio buttons 🎉 More info : https://twitter.com/theapache64/status/1404885743714004992
    compose-bird.mp4
    ❤️ 3
    🆒 7
    :kotlin-intensifies: 14
    🎉 7
    🐦 6
    s
    • 2
    • 2
  • l

    louiscad

    06/15/2021, 9:21 PM
    Why are composables with names like
    TextActual
    part of the public API when it seems they're designed to be called by
    Text
    and alike?
    u
    • 2
    • 2
  • d

    Daniele B

    06/15/2021, 10:54 PM
    Is there any plan to add
    rememberSaveableStateHolder
    to Compose Web?
    👀 5
    u
    • 2
    • 1
  • l

    louiscad

    06/17/2021, 2:10 AM
    Is there any reason
    Modifier.padding
    has no overload taking something other than a single value for all sides? I'd like to customize vertical, horizontal, or side specific padding like you can do on Android. Same question for
    StyleBuilder.padding
    . Also, I'm wondering why there's
    StyleBuilder.marginLeft
    and
    StyleBuilder.marginTop
    but none for right and bottom :blob-thinking-upside-down:
    d
    d
    • 3
    • 8
  • t

    Tomáš Hubálek

    06/17/2021, 9:33 AM
    I have a question related to edit texts in Safari. There is known bug/feature that causes that when you change input text value from JavaScript then cursor/carret jumps to the end. In JavaScript there is a workaround that saves cursor position before setting value then modify value and then restore cursor position (see eg. https://stackoverflow.com/a/29440988 for reference) I'm thinking how to do this in JetPack Compose for web. Storing cursor position using
    remember
    ?
    o
    • 2
    • 4
  • t

    Tomáš Hubálek

    06/17/2021, 11:43 AM
    One more questions: how to call javascript methods on elements after recomposition? Eg. request focus on the element?
    a
    • 2
    • 2
  • h

    Hugo Miguel Coutinho Dias

    06/17/2021, 3:00 PM
    Hello, i'm having some trouble using an external css stylesheet, how can i use classes from said stylesheet in my composables?
    b
    • 2
    • 2
  • h

    Hugo Miguel Coutinho Dias

    06/17/2021, 5:45 PM
    Is there anyway to implement routing with compose web in a similiar way to react router?
    b
    s
    r
    • 4
    • 4
  • d

    Daniele B

    06/17/2021, 10:23 PM
    On ComposeWeb
    BoxWithConstraints
    is not available. What is an alternative in order to get the width and height of the page?
    👀 1
    g
    • 2
    • 1
  • v

    Vinay Gaba

    06/18/2021, 4:49 AM
    I tried Compose web for the very first time and I'm curious about what I'd need to do to enable webpack like auto deploy as that my changes are reflected immediatel without needing another run of
    jsBrowserRun
    . I had expected this to work out of the box but maybe I'm missing a step?
    a
    k
    • 3
    • 3
  • t

    theapache64

    06/22/2021, 7:33 AM
    Previously I was using
    checked(false)
    to uncheck a radio/checkbox. now that
    checked(Boolean)
    has removed in
    0.5.0-build225
    , so what's the recommended method to uncheck a radio/checkbox?
    o
    • 2
    • 3
  • h

    hfhbd

    06/22/2021, 7:43 AM
    Where is the build226 release of compose-web? I don't find it on Space, https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/web/web-core/
    o
    u
    • 3
    • 3
  • d

    Daniele B

    06/22/2021, 3:00 PM
    How can I express “width: 100%” ? e.g.
    Table ( { style { width(100.percentage) } }) {
    }
    this doesn’t work
    a
    u
    • 3
    • 3
  • t

    Tomáš Hubálek

    06/23/2021, 8:57 AM
    Do you know whether Jet Pack Compose for Web is Internet Explorer compatible? When I try our app I get syntax error on line 19:
    a
    u
    +3
    • 6
    • 11
  • h

    Hugo Miguel Coutinho Dias

    06/23/2021, 4:19 PM
    Is there a way to access Session Storage using Compose-Web?
    b
    t
    o
    • 4
    • 4
  • o

    Oleksandr Karpovich [JB]

    06/24/2021, 2:33 PM
    Hey everyone! 0.5.0-build226 build of web-core and web-widgets is available. It brings some CSS API updates which we expect should simplify the code. Apart from that, this build might cause errors in runtime if you have composable functions with default values for lambda parameters (reported here: https://github.com/JetBrains/compose-jb/issues/811 , also check out a possible workaround in the link below). Despite that, we decided to not postpone the new build announcement. We're preparing the fix. Check out more details here: https://github.com/JetBrains/compose-jb/releases/tag/0.5.0-build226-web
    :jetpack-compose: 6
    🎉 13
    h
    t
    • 3
    • 10
  • a

    Akram Bensalem

    06/24/2021, 10:48 PM
    Hello 👋, I have a question 😀 Is compose web is an alternative to other Frontend frameworks that exists like React or Vue.js ?! 🤔 .... I have a background in mobile development and recently start learning Jetpack compose for Android, It's amazing and I love it ♥️ But because I'm student now, I have to start for the next years making web projects to submit it to my school. But in same time I don't want to learn a lot of frameworks especially out side Android development. So do compose for web here is enough for me, And I'm curious to know if this new framework for web will be special than other that exist like React
    :kotlin-intensifies: 1
    c
    c
    • 3
    • 4
  • t

    Tomáš Hubálek

    06/25/2021, 7:50 AM
    Hi, I have JPCW architecture question. We have app and it shows animated full screen loading indicator. It works well, but when it is turned on and off quite often then animation restarts and it causes annoying flickering. I'm thinking whether it is possible somehow just show and hide that indiciator without recomposing it. I can imagine that composable that is used for rendering of indicator will just call some external javascript that will change visibility of some HTML element that is not rendered by compose. Is that solution? Or do you have any other idea?
    o
    • 2
    • 5
  • n

    Nikola Milovic

    06/25/2021, 11:15 AM
    Compose for Web simplifies and accelerates UI development for web applications, and aims to enable UI code sharing between web, desktop, and Android applications in the future.
    I was wondering about this. As currently, it's possible to share practically all of the UI between android and desktop, are they hoping to achieve the same thing with web (or something similar)?
    🙏 1
    a
    h
    +5
    • 8
    • 9
  • h

    Hugo Miguel Coutinho Dias

    06/25/2021, 5:40 PM
    How can I do JSON serialization using Compose for web, I've tried Kotlinx serialization it results in a error, I've resorted to using
    js("JSON.stringify(s)")
    but this seems to have a few problems, namely the incorrect naming of properties.
    e
    r
    +2
    • 5
    • 5
  • u

    [JB] Shagen

    06/29/2021, 5:36 PM
    My fellow web composers, this week's release is dedicated to some improvements in using inputs and inputs events - hopefully this is a step in the right direction. Just as always - any feedback, requests, complaints or questions are welcome https://github.com/JetBrains/compose-jb/releases/tag/v0.5.0-build228-web
    :kotlin-intensifies: 12
    🎉 18
    h
    • 2
    • 3
  • s

    smallshen

    06/30/2021, 9:02 AM
    It would be great if we can use some react component direclly in jetpack compose web, or maybe some tools to generate some "internal" code. There are tons of react libraries, it can help the jetpack compose web ecosystem a lot. Jetpack compose and react have almost excally same design system for example Kotlin Js React Code:
    external interface MainHeader : RProps {
        var onRequestLogin: () -> Unit
    }
    
    val mainHeader = functionalComponent<MainHeader> { props ->
        var basicInfo: BasicInfo? by useState(null)
        useEffect(Unit) {
            WebMainScope.launch {
                basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
            }
        }
        ringHeader {
            attrs {
                spaced = true
            }
    
            img("Your Image") {}
    
            ringTray {
                if (LoginService.loggedIn) {
                    +"Hello"
                    ringDropdown(basicInfo?.username ?: "Fetching...") {
                        attrs {
                            clickMode = true
                        }
    
                    }
                } else {
                    ringButton {
                        attrs {
                            primary = true
                            onMouseDown = { props.onRequestLogin() }
                        }
    
                        +"Login"
                    }
                }
            }
        }
    }
    Jetpack Compose Code:
    @Composable
    fun MainHeader(onRequestLogin: () -> Unit) {
        var basicInfo by remember { mutableStateOf<BasicInfo?>(null) }
        LunchedEffect(Unit) {
            WebMainScope.launch {
                basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
            }
        }
    
        RingHeader(spaced = true) {
            Image("Your Image")
    
            RingTray {
                if (LoginService.loggedIn) {
                    Text("Hello")
                    RingDropDown(basicInfo?.username ?: "Fetching...", clickMode = true)
                } else {
                    RingButton(primary = true, onMouseDown = { onRequestLogin() }) {
                        Text("Login")
                    }
                }
            }
        }
    }
    99% similarity
    a
    u
    • 3
    • 6
  • a

    andbapps

    07/01/2021, 5:08 AM
    Hi everyone! I was wondering about the nesting of modifiers in Compose for Web. Example:
    @Composable
    fun ModiferTest() {
        Box(Modifier.background(Color.Blue).padding(16.dp).background(Color.Red).padding(8.dp).background(Color.Green)) {
            Text("Modifier Test")
        }
    }
    As you can see in the images, the function works correctly on Compose for Desktop, but on Compose for Web it discards all but the innermost modifiers (due to the way that modifiers currently work on web). This breaks the idea that each modifier doesn't need to have knowledge of the inner content/modifiers, which seems like an important aspect of the Compose UI system. Obviously multiplatform widgets are still experimental, but I wanted to know if something is planned to address this, since it seems like a somewhat core issue
    👀 2
    💯 1
    ➕ 2
    u
    s
    • 3
    • 3
  • n

    Norbi

    07/04/2021, 7:24 PM
    What do you think, would it be a mistake to start a new project using compose-web? Can we realistically expect a production-ready compose-web version eg. in 6 months?
    b
    j
    +7
    • 10
    • 17
  • d

    darkmoon_uk

    07/09/2021, 9:08 AM
    Refreshing the value in a
    TextInput
    appears to be broken 🤔 Even when I can debug-log inside the
    @Composable
    and see that it's recomposing, setting the
    value
    parameter with new values has no effect; the browser just keeps the same user-entered value in the box. Code in 🧵 👉
    :youtrack: 1
    👀 1
    o
    • 2
    • 6
  • g

    Greg Steckman

    07/18/2021, 8:23 PM
    Does anyone have suggestions for how to set the state (checked or not checked) of a CheckboxInput after it has been created?
    h
    o
    • 3
    • 9
Powered by Linen
Title
g

Greg Steckman

07/18/2021, 8:23 PM
Does anyone have suggestions for how to set the state (checked or not checked) of a CheckboxInput after it has been created?
On first look, you would think the checked parameter would do the trick. However, this applies the checked attribute, and according to the documentation
here
, that sets whether the checkbox is checked by default (when the page loads).
Here is a small example illustrating the problem:
fun main() {
    renderComposable(rootElementId = "root") {
        var original by remember { mutableStateOf(false) }

        Div {
            Label(forId = "original") {
                Text("Original")
            }
            CheckboxInput(checked = original) {
                id("original")
                onInput {
                    original = it.value
                }
            }
        }

        Div {
            Label(forId = "copy") {
                Text("Copy")
            }
            CheckboxInput(checked = original) {
                id("copy")
            }
        }
    }
}
Initially, if you check the Original checkbox, the Copy checkbox follows. However if you check the Copy checkbox, it will no longer check/uncheck itself according to the value set on the checked attribute.
The above example is contrived to keep it simple, but I've run into this when implementing a master-detail view. When the master record is changed, the CheckboxInput on the form does not reflect the correct value - it retains whatever state was last activated by the user.
The value attribute, unlike other inputs, also does not affect the state.
h

hfhbd

07/19/2021, 10:56 AM
Does it work in plain JS? 😄
g

Greg Steckman

07/19/2021, 2:37 PM
I try to avoid JS at all costs. I suppose I could do it in Kotlin, just not using compose-web. According to the documentation the HTMLInputElement has a checked property that returns/sets the state. But when using compose-web, I didn't see a way to get access to the underlying HTMLInputELement that is emitted. That doesn't mean it isn't there, I just couldn't find it.
o

Oleksandr Karpovich [JB]

07/19/2021, 4:29 PM
Hi Greg! Is there a reason why you don't want to add
onInput {
    original = it.value
}
to the Copy checkbox? Didn't it work as well?
g

Greg Steckman

07/20/2021, 1:34 AM
The objective is to change the checked state of a checkbox based on the value of a variable that can be changed in some way other than the checkbox itself. Here is a gist that has a more elaborate master-detail demonstration of the problem. If you click on a president on the top the "Detail" view at the bottom should update to reflect the state of the president you clicked on. Once you click on the checkbox itself, the checkbox will no longer follow the state if the selection at the top is changed. That is because the checked parameter cannot be used to set the checkbox state. Another mechanism needs to be provided to do that.
:thank-you: 1
Here is a version of the first example like what Philip was asking about, without using compose-web (but Kotlin instead of JS) that exhibits the desired behavior. Here it has to use the checked property of the underlying HTMLInputElement to set the checked state. NOT the checked attribute of the element:
fun HtmlCheckBoxTest(){
    var checked = false

    val checkBox1 = document.body?.appendElement("Input"){
        setAttribute("type", "checkbox")
    } as HTMLInputElement

    val checkBox2 = document.body?.appendElement("Input"){
        setAttribute("type", "checkbox")
    } as HTMLInputElement

    checkBox1.checked = checked
    checkBox2.checked = checked

    checkBox1.oninput = {
        checked = (it.target as HTMLInputElement).checked
        checkBox2.checked = checked
        true
    }
}
The variable checked is actually not even needed in this example. The point is to show how to programmatically change the checked state of the checkbox - using the checked property of the element, not the checked attribute.
View count: 4