Hi. In regards to wasmJs support (<https://gitlab....

# opensavvy

[Robert Jaros]

Hi. In regards to wasmJs support (https://gitlab.com/opensavvy/automation/kotlin-vite/-/issues/46). I've played a bit with the sources and managed to modify the plugin to work with wasmJs target insted of js. The changes are really simple and wasm target works perfectly fine. I would be happy to contribute, but the problem is how to implement both js and wasmJs at the same time, considering that we can have only js, only wasmJs or both targets enabled in the same project. Do you have any suggestions how would you like this to work?

[CLOVIS]

In theory, with a few task renames the plugin could work with any number of JS and WASMJS targets, since it already has two different work dirs anyway (one for dev, one for prod) so all tasks can already appear multiple times without issues

[CLOVIS]

I think the answer needs to fit with the answer to the question of "what happens if you have multiple JS targets?"

For example, one user mentioned having a JS target for the app and another one for web workers, so they only need Vite enabled for the app itself

[CLOVIS]

I think the best approach would be:
• By default, keep the current behavior
• Add a configuration option for people to add additional targets
Something like

kotlin {
    js("worker")
    js("app")
    wasmJs("wasmApp")
} 

vite {
    enableFor(kotlin.js("app"), kotlin.wasmJs("wasmApp"))
}

which would create the tasks :viteRunApp , :viteRunWasmApp , :viteBuildApp , :viteBuildWasmApp , etc

[CLOVIS]

What do you think?

[Robert Jaros]

What if there is no js target and no manual configuration?

[Robert Jaros]

After some more tests I see there is a problem with production build for wamsJs. The uninstantiated.mjs file, generated by the Kotlin compiler contains different conditional for runtims (NodeJS, deno) and it uses node APIs like fs and url. Vite complains:

[plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/home/rjaros/git/kilua-dev/build/vite/prod/kotlin/kilua-dev.uninstantiated.mjs". See <https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility> for more details.

Also there is a problem with `await`:

assets/index-!~{001}~.js:14222:17: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
file: assets/index-!~{001}~.js:14222:17

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
14220|  }
14221|  
14222|  const exports = (await instantiate({

[Robert Jaros]

I'll try to use this plugin: https://github.com/Menci/vite-plugin-top-level-await

[Robert Jaros]

Why do you use build.target modules? There is no such target for Vite.

[Robert Jaros]

I think the correct target name is "es2015". With this target the plugin helps.

[Robert Jaros]

Unfortunately the production version doesn't work 😞 Something is broken with loading wasm file.

[Robert Jaros]

The application works with "es2020" target. Good enough for me, because K/wasmJs requirements are still matched.

[Robert Jaros]

I would call it a successful PoC 😉 I'll investigate how to implement wasmJs support correctly 🙂