Hello people, I want to create a common source fo...

# webassembly

[Tristan]

Hello people,

I want to create a common source for JS and WASM, I have something working, but I am not able to access functionalities that are present for both targets individually such as js(). It is available in both jsMain and wasmJsMain but not commonJsMain.

What am I missing?

applyDefaultHierarchyTemplate {
            common {
                group("commonJsMain") {
                    withJs()
                    withWasmJs()
                }
            }
        }

        val commonJsMain by creating {
            dependsOn(commonMain.get())

            dependencies {
                implementation(libs.ktor.js)
                implementation(kotlinWrappers.web)
                implementation(kotlinWrappers.browser)
                implementation(kotlinWrappers.js)
            }
        }

        val jsMain by getting {
            dependsOn(commonJsMain)
        }

        val wasmJsMain by getting {
            dependsOn(commonJsMain)
        }

[jw]

I think you need 2.2.20 (in RC) for commonization across those targets.

[Tristan]

Yes, I updated the Kotlin version, and I am now able to use the function.

Thanks for your help 😊

[turansky]

In Kotlin 2.2.0 it's possible to write common logic in commonMain if you have only 2 targets (js and wasmJs) - it's what we do in wrappers.

[Artem Kobzar]

@Tristan additionally, in the 2.2.20 you don't need to create such a source-set yourself, because there is a default one called webMain which works exactly like your custom commonJsMain

[Tristan]

Thanks y'all!

Currently I have to do this:

sourceSets {
        commonMain.dependencies {
            implementation(libs.kotlinx.coroutines.core)
            implementation(libs.ktor.core)
            implementation(libs.kotlinx.serialization.protobuf)
            implementation(libs.kotlinx.serialization.json)
            implementation(libs.serialization)
            implementation(libs.ktor.serialization.kotlinx.xml)
            implementation(libs.kermit)
            implementation(libs.wire.runtime)
            implementation(libs.androidx.lifecycle.viewmodel)
        }

        val commonMobileMain by creating {
            dependsOn(commonMain.get())
        }

        androidMain {
            dependsOn(commonMobileMain)

            dependencies {
                implementation(libs.androidx.annotation)
                implementation(libs.androidx.ads.identifier)
                implementation(libs.androidx.startup.runtime)
                implementation(libs.ktor.okhttp)
                implementation(libs.androidx.webkit)
                implementation(libs.androidx.core.ktx)
                implementation(libs.androidx.activity.ktx)
            }
        }

        val iosX64Main by getting
        val iosArm64Main by getting
        val iosSimulatorArm64Main by getting

        val iosMain by creating {
            dependsOn(commonMobileMain)

            iosX64Main.dependsOn(this)
            iosArm64Main.dependsOn(this)
            iosSimulatorArm64Main.dependsOn(this)

            dependencies {
                implementation(libs.ktor.darwin)
            }
        }

        applyDefaultHierarchyTemplate {
            common {
                group("commonJsMain") {
                    withJs()
                    withWasmJs()
                }
            }
        }

        val commonJsMain by creating {
            dependsOn(commonMain.get())

            dependencies {
                implementation(libs.ktor.js)
                implementation(kotlinWrappers.web)
                implementation(kotlinWrappers.browser)
                implementation(kotlinWrappers.js)
            }
        }

        val jsMain by getting {
            dependsOn(commonJsMain)
        }

        val wasmJsMain by getting {
            dependsOn(commonJsMain)
        }

Happy to read that I can do webMain soon.
I tried to use 2.2.20-RC but when I run the composeApp for wasm, instead of serving the app, it serves to the root of my project.

I was able to reproduce it on a different project. Intellij IDEA, new kmp project, share ui with web, go to libs toml, update the kotlin version, run wasmJsBrowserDevelopmentRun

[Oliver.O]

I had something like webMain for a while and called it jsHostedMain (target hosted in a JS environment with access to a JS API).

The problem with webMain is that it also covers JS/Node and Wasm/JS/Node, which are not exactly "web" targets.

[Tristan]

Tried to use webMain but the IDE is stuck on the gradle plugin 2.0.21 😕 Invalidate cache, clean project, clean gradle cache, etc did not give anything. i'll wait for the release