Hello, I'm trying to use compose web with canvas b...

# compose-web

[Dragos Rachieru]

Hello, I'm trying to use compose web with canvas but I'm getting some errors when running the project:
onWasmReady is not defined

I searched the examples and they look like I need to use webpack 4.9.0
When I set that version, I get a new error:
cli.isMultipleCompiler is not a function

[dobe]

i also had similar issues with compose 1.2,i think you need to use webpack 5 try to add the following to your gradle.properties

kotlin.js.webpack.major.version=5

[Dragos Rachieru]

I get the same error:
onWasmReady is not defined

[zt]

I was running into a similar issue but I got it working
Make sure your build.gradle.kts has this

compose.experimental {
    web.application { }
}

[Dragos Rachieru]

It has that line as well

[Dragos Rachieru]

Is it a problem with running the project in a VM?

[Michael Paus]

Did you compare your project setup step by step with this example? https://github.com/JetBrains/compose-jb/tree/master/experimental/examples/falling-balls-mpp onWasmReady is used here https://github.com/JetBrains/compose-jb/blob/master/experimental/examples/falling-balls-mpp/src/jsMain/kotlin/main.js.kt and seems to be a part of Skiko. (org.jetbrains.skiko.wasm.onWasmReady)

[Michael Paus]

Following the example above I got my code working with this gradle.properties file.

compose.version=1.3.0-alpha01-dev831
kotlin.version=1.7.10
agp.version=7.3.1

kotlin.mpp.stability.nowarn=true
kotlin.js.webpack.major.version=4

org.gradle.jvmargs=-Xmx3g
kotlin.code.style=official
kotlin.native.cacheKind=none
kotlin.native.useEmbeddableCompilerJar=true
kotlin.native.enableDependencyPropagation=false
kotlin.mpp.enableGranularSourceSetsMetadata=true
kotlin.native.binary.memoryModel=experimental
compose.desktop.verbose=true
android.useAndroidX=true
org.jetbrains.compose.experimental.jscanvas.enabled=true
org.jetbrains.compose.experimental.macos.enabled=true
org.jetbrains.compose.experimental.uikit.enabled=true

The only crucial line I added was:

kotlin.js.webpack.major.version=4

Without this line it won’t work.

[Dragos Rachieru]

I had compose.web.core added as dependency, I have removed it and I get the same error :(

[Dragos Rachieru]

Looks like I forgot to include skiko.js, but now I get another error.

[Dragos Rachieru]

ClassCastException at new ComposeWindow

[Dragos Rachieru]

I managed to fix it, thanks!

[frankelot]

Sorry for hijacking your question but... How do you opt in into compose web canvas?

Is the long term plan to support both html and canvas?

[Dragos Rachieru]

You can check gradle.properties in the example, it has a line that enables JS canvas

[frankelot]

I'll try it out. I'm a bit confused by the docs

[Ryan Woodcock]

The canvas support is definitely experimental, quite a way to go, so its certainly not anywhere near as stable as the DOM based model that exists currently

[frankelot]

Thanks! Is the canvas API also css based? Or will it look more like compose in Android and desktop

[Ryan Woodcock]

Its identical, from my playing around with it. I've got shared code for the entire UI for Web (canvas), desktop and Android

[frankelot]

I don't understand. So when Canvas mode is enabled the APIs change from

Div() { Button(attrs = { onClick {  } }  ) {}}

To

Box() { Button(onClick = { }) { }}

[Ryan Woodcock]

Correct, check the experimental chat app example in the repo if you want to see how it all looks

[frankelot]

Oh really? Interesting! Thank you I'll take a look 🙂

[zt]

The canvas mode makes it so that its more like compose on android and desktop, rather than css. Once it gets more stable I will for sure use it over the current dom based compose