https://kotlinlang.org logo
#compose-web
Title
# compose-web
c

CLOVIS

09/10/2021, 9:00 PM
Are
compose.foundation
and
compose.material
not available yet for JS? Gradle refuses to build if I put them in
commonMain
, saying the JS IR variants are missing.
2
b

Big Chungus

09/10/2021, 9:05 PM
Material is definitely not available, not too sure about foundation either
You can checkout this module I'm crafting internally if you want material feel on the web https://github.com/mpetuska/kamp/tree/feature/compose/app/client/kmdc
c

CLOVIS

09/10/2021, 9:16 PM
That looks amazing! Do you have an example of sharing Compose code between desktop and web? JetBrains doesn't have any examples that do that (or I'm blind...)
Also I've seen that the examples use a “multiplatform” module and then add a module per platform as well, is this recommended? If so, why?
b

Big Chungus

09/10/2021, 9:17 PM
That module shares compose-redux middleware between desktop and web in commonMain
Well its parent module "client"
Module per platform is only really needed if you target ios or Android as those are special snowflakes
For jvm and js I find single mpp module with multiple sourceSets more natural to work with
c

CLOVIS

09/10/2021, 9:27 PM
I didn't find compose-redux in that repo, is it somewhere else?
Currently my build.gradle.kts looks like (only copying the source sets, for brievety):
Copy code
val commonMain by getting {
   dependencies {
      api(project(":core")) // other module with my business model

      api(compose.runtime)
   }
}

val jvmMain by getting {
   dependencies {
      api(compose.desktop.currentOs)

      api(compose.foundation)
      api(compose.material)

      implementation(compose.preview)
   }
}

val jsMain by getting {
   dependencies {
      api(compose.web.core)
   }
}
This works fine, however since
commonMain
depends only on
compose.runtime
I can use
@Composable
in common code, but not
Text
or any other standard UI composables.
Or maybe there's no desktop-web multiplatform yet and I have to define all my components as expect?
What I was missing is
compose.web.widgets
.
s

Scott Kruse

09/11/2021, 9:08 AM
Did you get anywhere with this? I'm getting an error trying to reference a common compose module that leverages
compose.foundation
Copy code
Could not determine the dependencies of task ':web:jsPackageJson'.
> Could not resolve all dependencies for configuration ':web:jsNpm'.
   > Could not resolve org.jetbrains.compose.foundation:foundation:1.0.0-alpha3.
     Required by:
         project :web > project :common
      >
b

Big Chungus

09/11/2021, 9:12 AM
Is your js sourceSet using ir backend? Compose doesn't work with legacy
s

Scott Kruse

09/11/2021, 9:18 AM
was looking at this doc: https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started
Copy code
js(IR) {
        browser()
        binaries.executable()
    }
c

CLOVIS

09/11/2021, 10:08 AM
My conclusion yesterday was that Foundation and Material are not available for JS, but I could be wrong.
same 1
They are available for both Android and Desktop, however.
👍 1
b

Big Chungus

09/11/2021, 11:00 AM
Android and desktop uses skia to draw on canvas, so naturally a lot more is shared. Web focuses on dom tree rendering instead
c

CLOVIS

09/11/2021, 11:27 AM
Skiko just merged web canvas rendering, so that might change.
K 4
b

Big Chungus

09/11/2021, 12:00 PM
Even so, the preferred option will remain dom rendering simply due to size and accessibility concerns
s

Scott Kruse

09/11/2021, 2:33 PM
This makes sense, does this mean most likely there will be significant limitations to what can be shared between common / platform compose modules? E.g colors / theming.
They are available for both Android and Desktop, however.
Yeah I was able to reuse common module button composables on desktop, pretty awesome
b

Big Chungus

09/11/2021, 3:15 PM
I assume you'll be given an option. Reuse skiko widgets and sacrifice bundle size an accessability or don't reuse ui composables and use dom composables to get propper hrml layout
🙏 1
6 Views