From what I understood, there are 2 types of Compo...

# compose-web

[Daniele B]

From what I understood, there are 2 types of Compose for Web: one based on DOM and one based on Skia/canvas.
I am expecting the Skia/canvas web version to have all the Compose components of the Desktop version? Can you confirm?

[Oleksandr Karpovich [JB]]

There some components available for desktop, but not available for other targets. For example in material/desktopMain https://github.com/JetBrains/androidx/tree/jb-main/compose/material/material/src/desktopMain/kotlin/androidx/compose/material

there’re AlertDialog and DropdownMenu, which can be used only for desktop.

It’s not so easy to know what is available and what is not. To know for sure, one can take a look at commonMain and skikoMain source sets. everything public in those will be available for desktop,js,native. For example:
https://github.com/JetBrains/androidx/tree/jb-main/compose/material/material/src/commonMain/kotlin/androidx/compose/material
https://github.com/JetBrains/androidx/tree/jb-main/compose/material3/material3/src/skikoMain/kotlin/androidx/compose/material3

Please note, the given the experimental status of compose-web-canvas-based and compose-for-k/native, there’re still some things not implemented properly or not supported at all.

[Daniele B]

what about components such as Column and Row? are they available in compose web canvas?
I can’t find them here: https://github.com/JetBrains/androidx/tree/jb-main/compose/material/material/src/commonMain/kotlin/androidx/compose/material

[Oleksandr Karpovich [JB]]

Column and Row are available (in compose.foundation if I'm not mistaken)

[Daniele B]

You are right, they are here:
https://github.com/JetBrains/androidx/tree/jb-main/compose/foundation/foundation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout
I guess only web canvas has access to them, but not web DOM.
How I can define a web project based on canvas and a web project based on DOM. Is such definition expressed on gradle? Or does it only depend on the components I am using.
Can you please point me out a web canvas sample ans and a web DOM sample, so I can understand?

[Oleksandr Karpovich [JB]]

This sample uses compose.web.core - https://github.com/JetBrains/compose-jb/blob/master/examples/web-landing/build.gradle.kts#L24
web.core is a lib that provides html-like Composables. As for now, web.core name doesn't seem so good when we have compose-web-canvas too, but it was named like this ~2 years ago.

https://github.com/JetBrains/compose-jb/blob/master/experimental/examples/falling-balls-mpp/shared/build.gradle.kts#L50 - this sample has JS target and its common source set declares the dependencies of compose multiplatform (canvas based in case of k/js)

The API to initialize the app for HTML and Canvas is different:
https://github.com/JetBrains/compose-jb/blob/master/experimental/examples/falling-balls-mpp/jsApp/src/jsMain/kotlin/main.js.kt#L9 - canvas based app

https://github.com/JetBrains/compose-jb/blob/master/tutorials/Web/Getting_Started/README.md#7-add-the-mainkt-file-to-the-kotlin - for html app

[Oleksandr Karpovich [JB]]

I guess only web canvas has access to them, but not web DOM.

yes, compose.web.core doesn't have them

but there're some 3rd party solutions to have such APIs. For example: https://github.com/varabyte/kobweb#silk

[Daniele B]

Many thanks!
I can see that the web canvas project mentions Wasm:
https://github.com/JetBrains/compose-jb/blob/master/experimental/examples/falling-balls-mpp/jsApp/src/jsMain/kotlin/main.js.kt#L9
Does it mean that the web canvas compose is actually based on Wasm?

[Oleksandr Karpovich [JB]]

compose-web-canvas uses skiko. Skiko provides kotlin mpp bindings to Skia. And we use emscripten to compile skia (c++) to Wasm. Then k/js can use skia functions (compiled to wasm) to draw/render the graphics on canvas.

So compose-runtime, compose.foundation, compose.material, etc are still compiled to JS. The only wasm part is skia