https://kotlinlang.org logo
#webassembly
Title
# webassembly
z

Zoff

03/01/2024, 3:04 PM
can i use my own ffi (compiled from C) in an compose for web app? can i call some ffi? put my own wasm file in the source tree and call functions from it
a

Artem Kobzar

03/04/2024, 9:18 AM
Hey, you can. So, to do it you need to make the next things: 1. Compile your C code into wasm binary (with emscripten, as an example) Note: that with emscripten you need to declare
EMSCRIPTEN_BINDINGS()
for the functions you want to be consumed in your Compose web App. An example is here.
2. Create an external function that describe the signature of the function inside your Compose web app. An example is here.
3. Add
@JsModule
annotation on top of the file with the
external
function and refer the name of artifact file produced by emscripten
I believe that it should work. I will try to make a repo with an example this week and share with you.
z

Zoff

03/04/2024, 12:00 PM
wow cool. i will try it. and also wait for your example repo
🫡 1
hm so i have a .wasm file and a .js file where do i need to put it for the multiplatform project to find it? also my library is C not C++ the examples do not seem to play nice with C code
any help on that?
a

Artem Kobzar

03/05/2024, 2:37 PM
Hmm, this is a nice question. You can try to put the result into resources and refer JS file inside the
@JsModule
Let me create an example repo until the end of the week. I believe it would be more helpful than just a high-level description.
z

Zoff

03/05/2024, 3:23 PM
ok thanks cool
a

Artem Kobzar

03/08/2024, 3:32 PM
Hey, I've just made a PR with the example that we discussed: https://github.com/Kotlin/kotlin-wasm-examples/pull/57
z

Zoff

03/08/2024, 6:38 PM
trying it now. its not working. how do you run it?
i am also trying to make my code work for web with compose multiplaform template. cant get that to work either. is there any good documentation how to use ffi/wasm
whatever i try i only get errors
a

Artem Kobzar

03/08/2024, 8:17 PM
What error do you have?
z

Zoff

03/08/2024, 8:50 PM
either this one:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }
or this one:
ERROR WebAssembly.instantiate(): Import #0 module="env": module is not an object or function TypeError: WebAssembly.instantiate(): Import #0 module="env": module is not an object or function
if i use the mjs file
if i am running your code unchanged i get:
gradlew wasmJsRun Starting a Gradle Daemon (subsequent builds will be faster)
Configure project :
New 'wasm' target is Work-in-Progress and is subject to change without notice. FAILURE: Build failed with an exception.
browser-c-interop-example/local.properties (No such file or directory)
this stuff is harder than i thought :)
a

Artem Kobzar

03/08/2024, 8:55 PM
Add local.properties file with path to clang
It should work after that
I definitely need to add this step to README file. Sorry, my fault
z

Zoff

03/08/2024, 9:03 PM
ah i need clang. i compile with emcc
emcc \ --target=wasm32 \ -Wl,--export-all \ -s ASSERTIONS=1 \ -Wl,--no-entry \ -o lib.js lib.c
what if i only have .wasm and .js (no .mjs) and i want to add this to kotlin? can i do that?
do i need to compile with: emcc -lembind \ --bind or no bind?
i think i really dont know how the "glue" between wasm and kotlin actually works under the hood
Calculated result from C for 2 + 2 = 4
cool ok with local properties the example works now
now if i can just figure out how to use my self compiled wasm and js file. that i compiled with emcc
a

Artem Kobzar

03/10/2024, 5:34 AM
To do it, you need to replace here path of my compiled binary and js with the paths that you have. And after that replace name of the file here with your
lib.js
z

Zoff

03/10/2024, 11:24 AM
i can't get it to work with my own wasm. how do i need to compile it with "emcc" ? what options
a

Artem Kobzar

03/10/2024, 8:39 PM
Could you share please the generated JS file?
Maybe you will need to write a small wrapper for it
z

Zoff

03/11/2024, 12:04 PM
i will put it on github. but i need a few days. super busy this week
thank you color 1
thanks for helping
./generate_wasm.sh ./gradlew clean ./gradlew wasmJsRun
ok, this first try does not work
a

Artem Kobzar

03/12/2024, 9:19 AM
The fix for your example is here: https://github.com/zoff99/wasm_test_1/pull/1
👍 1
z

Zoff

03/13/2024, 6:52 AM
it also works with my compose components. i almost cant believe it :) :)
9 Views