https://kotlinlang.org logo
Docs
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
  • n

    Norbi

    10/02/2021, 7:27 AM
    Are there any Compose/Web integrations for existing component libraries?
    👍 1
    b
    h
    • 3
    • 2
  • n

    Norbi

    10/03/2021, 3:11 PM
    Should generic
    @Composable
    `fun`s work with Compose/Web? I get internal compiler error in case of this function:
    @Composable
    fun <T> MySelect(
        options: List<T>,
        onChange: (T?) -> Unit
    ) ...
    If I remove the generic type parameter (and replace
    T
    with
    Any
    in the parameters) then it compiles. Kotlin: 1.5.31 Compose/Web: 1.0.0-alpha4-build366 Error message:
    java.lang.IllegalStateException: FULL: FUN name:MySelect$composable visibility:public modality:FINAL <T> (options:kotlin.collections.List<T of ...component.MySelect$composable>, onChange:kotlin.Function1<T of ...component.MySelect$composable?, kotlin.Unit>, $composer:androidx.compose.runtime.Composer?, $changed:<http://kotlin.Int|kotlin.Int>) returnType:kotlin.Unit
     Ir: ...component#MySelect$composable(kotlin.collections.List<0:0>;kotlin.Function1<0:0?,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int){0�<kotlin.Any?>}
     Descriptor: ...component#MySelect$composable(kotlin.collections.List<0:0>;kotlin.Function1<0:0,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int){0�<kotlin.Any?>}
    o
    • 2
    • 7
  • n

    Norbi

    10/07/2021, 3:48 PM
    Is there an example how web components can be integrated? I successfully rendered web components but I'm curious about the best practices eg. for assigning content to slots. Thanks.
    a
    • 2
    • 5
  • j

    julien lengrand-lambert

    10/08/2021, 1:56 PM
    Hey there, I’m trying compose web for the first time today. It’s been a few times that I face this error
    > Task :jsBrowserDevelopmentRun FAILED
    [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
    d
    • 2
    • 3
  • j

    julien lengrand-lambert

    10/08/2021, 1:57 PM
    I’ve been failing to really find the reason so far. This happens for example when trying to run : https://github.com/JetBrains/compose-jb/tree/master/templates/web-template
    b
    t
    • 3
    • 15
  • j

    julien lengrand-lambert

    10/08/2021, 5:00 PM
    yeah you’re right. the flag works as expected, it just takes about 4 seconds to be picked up and I wasn’t patient enough 😄
    🧵 1
    b
    l
    • 3
    • 18
  • s

    salomonbrys

    10/11/2021, 9:00 AM
    Hey guys ! Just want to raise awareness about this issue, which I feel is quite critical : https://github.com/JetBrains/compose-jb/issues/1241
    :thank-you: 2
    👍 4
    l
    a
    c
    • 4
    • 23
  • l

    LeoColman

    10/11/2021, 12:23 PM
    I'm getting the error Function <init> should have been replaced by compiler when trying to open my
    index.html
    file.
    👀 1
    s
    o
    • 3
    • 11
  • d

    David Herman

    10/15/2021, 5:53 PM
    I'm creating a Kotlin/JS library which is Compose aware. By default (using the skeleton from the tutorials), I was defining it as a multiplatform module, but code only lives under the "jsMain" folder. This library generates two maven artifacts (the main one and the "-js" one), and it works. Now, I was hoping to clean this up by converting the module into a JS module and publishing just a single maven artifact instead, but I'm getting a dreaded Compose assertion when I try to compile my project using the new version of the artifact:
    java.lang.AssertionError: No such value argument slot in IrCallImpl: 4 (total=4).
    So my question: Am I just publishing my library wrong? (Because with multiplatform, maven-publish just worked, but with Kotlin/JS, I'm setting it up myself). Or is this a fundamental requirement of all Compose library artifacts that they need to be multiplatform modules, for technical reasons behind the scenes that require a common artifact AND a JS artifact be created?
    r
    s
    • 3
    • 23
  • l

    LeoColman

    10/17/2021, 2:24 PM
    How do you guys experiment on components design? Is there a preview window or something? for now I change my Main to execute my component and keep working on it until i'm done, then I revert the main change to the usual layout
    a
    • 2
    • 2
  • t

    Tomáš Hubálek

    10/18/2021, 1:04 PM
    Hello, I'm trying to add https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API into our JetPack Compose for Web app. Any idea how to do that will least pain? AFAIK IntersectionObserver is not available via
    kotlinx.browser
    classes. So should i use
    js()
    to all the stuff?
    o
    b
    • 3
    • 7
  • s

    Scott Kruse

    10/19/2021, 11:16 PM
    What's the best way to show packaged assets in compose for web? my Img is not rendering w/ this setup
    🧵 1
    n
    n
    • 3
    • 5
  • s

    Sean Proctor

    10/20/2021, 12:38 AM
    Hi, I'm wonder if I could ask for some opinions. I've been working on an Android app for a couple of years that I ported to Compose. We started a web version of the app in Vue.js. I'm not very competent in JS (and even less so in Vue.js), but I'm quite comfortable with Kotlin and Compose. I'm contemplating using Compose for Web instead. Would my lack of JS skills be a big hindrance? I've written a Compose for Desktop app, but Compose for Web has the appearance of being much more daunting.
    c
    d
    +3
    • 6
    • 7
  • g

    Greg Steckman

    10/23/2021, 2:11 AM
    Is there a way to insert &nbsp; in text? Using a leading or trailing space in the Text() function doesn't work, and if using
    Text("&nbsp;")
    it gets rendered as &nbsp; That's not an unreasonable thing to do - but how can I insert a non-breaking space?
    e
    a
    • 3
    • 3
  • d

    Draget

    10/23/2021, 7:55 AM
    I have been in the backend for most of my life. Reading about developments in the JS community, the struggles of Frameworks like Angular with following the 'lean trend' with treeshaking and minifying etc. to streamline the compliation and delivery of apps. As an enduser, I tend towards being one of those yelling old bearded people who immediatly nag around when a website loads a megabye of JS and does display NOTHING without JS enabled. I do appreciate the different developments for SSR (ServerSideRenderig) in the different frameworks. Recently started playing with Svelte and Snapper that basically gives me a nice, clean static website with mostly just the JS I want, while allowing declative and clean component description and logic. That all being said, I find it interesting to integrate the web frontends into my whole Kotlin ecosystem using compose-web. How does it compare if I am the kind of person that would like to use static-site-generators for everything? Could I declare components that have zero logic and end up with a lean, small website that is basically static when using compose-web?
    🇳🇴 2
    n
    d
    +3
    • 6
    • 6
  • m

    Marius Ailinca

    10/24/2021, 9:31 AM
    Hi! How can we use lazy columns/rows in compose-web?
    o
    • 2
    • 2
  • l

    LeoColman

    10/24/2021, 12:08 PM
    How to declare an
    @font-face
    ?
    a
    • 2
    • 4
  • d

    David Herman

    10/26/2021, 11:10 PM
    Hey everyone! I'd love to hear feedback about my project: https://github.com/varabyte/kobweb I'll go into a bit more detail in the 🧵 but quick take: it's an opinionated layer on top of Web Compose to make it fast and easy to set up full stack applications built around a live reloading experience (similar to Next.js if you're familiar with it).
    kobweb-demo.mp4
    :kotlin-intensifies: 11
    🎉 11
    👍 12
    🙌 8
    g
    c
    +3
    • 6
    • 33
  • s

    Sam Michael

    10/27/2021, 6:11 AM
    I see Button has a built in hover property, but when I change background color, the hover effect is no longer discernible. I tried to figure out css hover
    hover()
    and
    onMouseOver { println("moused over") }
    but neither seem to be working. Anyone have any experience with this?
    o
    y
    • 3
    • 10
  • p

    paoloconte

    10/30/2021, 12:20 PM
    Hi all, I'm using Compose Web for a small project and it's working well, except for the fact that it's extremely slow at rendering many elements; for example, a table with 300+ rows takes about 3 seconds, while the same with kotlinx.html takes a blink. Is this a limitation of the architecture or something that will be overcome? Or maybe I'm doing something wrong?! Thanks for any pointers
    o
    b
    +4
    • 7
    • 10
  • o

    Omar Miatello

    10/30/2021, 1:12 PM
    I tried to migrate a simple android application that uses Compose, to a web app that uses Compose Web, using the new SVG api (thanks for this). And wow .. after fixing the compilation errors it all worked on the first launch. Congratulations, this is an amazing job! I hated developing on the web, but thanks this project now there are endless possibilities! demo: https://omarmiatello.github.io/hexagon-web/ The migration was easy, but I would like to give my feedback on some pain points: • the template project is not up to date and it is necessary to change the configuration in several points to update. • the first time you open the project it is not very clear how to start. A comment above the main method that tells you to execute the gradle command might be enough:
    jsRun
    • the Offset class is missing in the SVG api, it would be useful in the Polyline • transformations cannot be applied (rotate, translate, ...) • positioning text correctly is always complicated, it’s different from Compose for Android, and even there, it’s not easy
    hex-web1.mp4hex4.mp4
    🙌🏼 1
    🙌🏻 2
    👍 6
    🙌 7
    a
    • 2
    • 1
  • a

    Alexander Suraphel

    11/02/2021, 3:23 PM
    I am planning to migrate an android app I am writing with compose to web. Will I be able to do it with compose-web while keeping the grid structure, buttons etc? Is that the target of this project?
    o
    b
    c
    • 4
    • 4
  • b

    Brian G

    11/04/2021, 10:37 AM
    I can't figure out why I'm getting this ClassCastException on await():
    external interface BwipJs {}
    external fun <Module : Any> import(path: String): Promise<Module>
    
    @Composable
    fun Barcode() {
      val bwip = remember { mutableStateOf<BwipJs?>(null) }
      LaunchedEffect(Unit) {
        bwip.value = import<BwipJs>("bwip-js").await() // ClassCastException
      }
    }
    Outside of Compose, in plain Kotlin/JS, the import works fine, and I'm successfully calling functions (rendering barcodes) using the BwipJs handle, e.g.
    val canvas = document.createElement("canvas") as HTMLCanvasElement
    import<BwipJs>("bwip-js").then { bwipjs ->
        bwipjs.toCanvas(canvas)
    }
    a
    • 2
    • 6
  • t

    Tomáš Hubálek

    11/04/2021, 2:33 PM
    Hi, I'm trying to convert our
    .css
    file into
    StyleSheet()
    . Most of the stuff works, but I don't know how to correctly convert rules like this
    .classA.classB {
    }
    which means element that has both
    .classA
    and
    .classB
    assigned. I looked into https://github.com/JetBrains/compose-jb/blob/master/tutorials/Web/Style_Dsl/README.md but it looks like it can only be achieved in
    init{}
    section using string names of the classes. Any clue? Thanks
    h
    a
    • 3
    • 6
  • b

    Brian G

    11/04/2021, 4:24 PM
    Is there any way to prevent compose web from overwriting classes added externally? E.g. Ionic framework automatically adds classes like "hydrated" to certain elements. But Compose web erases them when re-composing
    b
    a
    • 3
    • 5
  • t

    Tomáš Hubálek

    11/05/2021, 9:18 AM
    Hi, another question related to CSS. How can I debug what CSS rules
    AppStyleSheet
    produced? In Chrome developer I can see this, but when I click on
    <style>
    it shows empty element. When using
    .css
    files then it is clearly visible from where concrete rule comes.
    • 1
    • 1
  • t

    Tomáš Hubálek

    11/05/2021, 2:47 PM
    Hi, is there a way how to add
    @import
    into
    AppStyleSheet
    ?
    a
    • 2
    • 3
  • l

    LeoColman

    11/05/2021, 5:07 PM
    Is it possible to make something like this in compose-web? This is from Google's Material Design
    :yes: 3
    b
    a
    • 3
    • 6
  • a

    andylamax

    11/07/2021, 9:53 AM
    how does one handle navigation (specifically routing) in compose-web?
    b
    h
    +3
    • 6
    • 10
  • t

    Tomáš Hubálek

    11/08/2021, 10:00 AM
    Hello, I have a question: is https://developer.mozilla.org/en-US/docs/Web/CSS/calc() supported in
    StyleSheet
    class ? Or I have to use
    width("calc(" + AppStyleSheetVariables.myVar.value() + " ... )")
    ?
    :yes: 1
    b
    a
    • 3
    • 4
Powered by Linen
Title
t

Tomáš Hubálek

11/08/2021, 10:00 AM
Hello, I have a question: is https://developer.mozilla.org/en-US/docs/Web/CSS/calc() supported in
StyleSheet
class ? Or I have to use
width("calc(" + AppStyleSheetVariables.myVar.value() + " ... )")
?
:yes: 1
b

Brian G

11/08/2021, 2:56 PM
calc
will be used automatically if you add incompatible units together, like: `
width(100.percent + 10.px)
But I haven't tried it with CSS vars
a

Akif Abasov [JB]

11/08/2021, 3:23 PM
It should work in both ways. If it doesn’t work in some cases, please let me know.
👍 1
t

Tomáš Hubálek

11/08/2021, 3:50 PM
It seems to work well. Amazing. Thanks.
View count: 8