Using the experimental wasm version of kotlinx-dat...

# webassembly

[Oliver.O]

Using the experimental wasm version of kotlinx-datetime with Kotlin 1.9.0-RC compiles but fails at run time with

Cannot find module '@js-joda/core'

Details in 🧵.

[Oliver.O]

The simplest way to reproduce is https://github.com/Kotlin/kotlin-wasm-examples/tree/main/browser-example, modified as follows:

First `build.gradle.kts`:

repositories {
    mavenCentral()
    maven("<https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental>")
}

and in `sourceSets`:

val commonMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.0-wasm0")
            }
        }

Then `Simple.kt`:

import kotlinx.browser.document
import kotlinx.datetime.Clock
import kotlinx.dom.appendText
import org.w3c.dom.HTMLDivElement

fun main() {
    (document.getElementById("warning") as HTMLDivElement).style.display = "none"
    document.body?.appendText("Hello, ${greet()}!")
}

fun greet() = "world at ${Clock.System.now()}"

Any ideas?

[bashor]

You can put the attached file to webpack.config.d/ , so it should help to workaround the issue

hackImports.js

[bashor]

with 1.9.20 it will work out of the box with out any hacks

[Oliver.O]

Thank you! hackImport.js works well for kotlin-wasm-examples/browser-example.

With kotlin-wasm-examples/compose-jetsnack/web, it is not sufficient:

Uncaught TypeError: Failed to resolve module specifier '@js-joda/core'
    at instantiate (jetsnackwasmapp.uninstantiated.mjs:17:38)
    at load.mjs:7:11

The main difference seems to be that compose-jetsnack distributes artifacts across two build directories:
• kotlin-wasm-examples/compose-jetsnack/build
• kotlin-wasm-examples/compose-jetsnack/web/build
I could not find out how to instruct webpack where to look for the npm module. And there seems to be no Compose compiler plugin working with Kotlin 1.9.20 yet.

[darkmoon_uk]

Also currently stuck on this... workaround did not work for me.

[darkmoon_uk]

Trying to use K wasm 1.9.0 with K 1.4.0-dev-wasm08

[darkmoon_uk]

I did observe that the code in <projectRoot>/webpack.config.d/hackImport.js was aggregated into <projectRoot>/build/js/packages/jetsnackwasmapp/webpack.config.js but for some reason jodatime module still isn't loaded, in the browser: TypeError: Failed to resolve module specifier '@js-joda/core'

[darkmoon_uk]

Also that hack appears to break the loading of skia for Compose.

[darkmoon_uk]

Looking for another way to load js-joda - wondering how kotlinx.datetime Dev expected this wasm release to work 🤔

[Oliver.O]

Yes, the aggregation you have observed is how webpack.config.d is supposed to work. What I had in mind but not tried yet: One could copy node_modules from the root build directory to the subproject’s build directory. I don’t know what the import system expects but maybe t this could help.

[darkmoon_uk]

I found this, trying it out

[darkmoon_uk]

...no, that's not a wasm compiler, of course 🤦‍♂️

[darkmoon_uk]

Stuck; I can't find a way to get datetime to work with 1.9.0 WASM + Compose. Probably requires either a good understanding of webpack, which I don't have, or a 1.9.20 WASM compatible Compose compiler, which doesn't exist. Patience, then 😑

[Oliver.O]

Well, that kinda works if you
• replace kotlinCompilerPlugin.set(composeVersion) with kotlinCompilerPlugin.set("org.jetbrains.kotlin.experimental.compose:compiler:1.9.20-dev-5418") in all build.gradle.kts,
• use Kotlin version 1.9.20-dev-5418,
• add the repo maven("<https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev>").
With the above, I got

Module "com.example:web" has a reference to symbol androidx.compose.ui.window/CanvasBasedWindow|315412121457049229[0]. Neither the module itself nor its dependencies contain such declaration.

Have to leave now, going to the beach. 🏖️🙂

[darkmoon_uk]

I got that result too, but I think that compiler isn't supporting wasm?

[Oliver.O]

Seems like it does…

[darkmoon_uk]

I removed the window reference then it complained about 'remember'

[darkmoon_uk]

...not being able to resolve runtime classes was not the sign of a healthy setup so I stopped

[bashor]

Sorry, folks, for the inconvenience.

As a workaround, you can:
Set up copying @js-joda dir from build/js/node_modules/ to build/js/packages/jetsnackwasmapp/kotlin/
And add to index.html before <script type="application/javascript" src="skiko.js"></script> following:

<script type="importmap">
        {
            "imports": {
              "@js-joda/core": "./@js-joda/core/dist/js-joda.esm.js"
            }
        }
    </script>

[Oliver.O]

Hey, no worries, we're dealing with experimental stuff here! 😃 Thanks for the additional fix. Will try tomorrow.

[darkmoon_uk]

Thanks @bashor! And don't worry - always conscious that the privilege of early access can be double-edged 🙂

[Oliver.O]

@bashor Your workaround did the trick, and Wasm performs pretty well. 🎉 Excellent work! https://github.com/OliverO2/compose-counting-grid

applyBinaryen() does not yet work (see comment in build.gradle.kts), but I've tried to use it merely for completeness as the application is somewhat tiny.

[bashor]

You can make binaryen work with 1.9.0 by changing passed options:

applyBinaryen {
            binaryenArgs = mutableListOf(
                "--enable-nontrapping-float-to-int",
                "--enable-gc",
                "--enable-reference-types",
                "--enable-exception-handling",
                "--enable-bulk-memory",
                "--hybrid"
                "--inline-functions-with-loops",
                "--traps-never-happen",
                "--fast-math",
                "-O1",
                "-c", // Run passes while binary size decreases 
            )
        }

[darkmoon_uk]

Thanks @bashor! @Oliver.O Binaryen worked for me - Compose test App still runs with executable size reduced from 5.6MB to 2.5MB 🗜️