can i use my own ffi (compiled from C) in an compose for web app? can i call some ffi? put my own wa...

# webassembly

[Zoff]

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

[Artem Kobzar]

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.

[Artem Kobzar]

2. Create an external function that describe the signature of the function inside your Compose web app. An example is here.

[Artem Kobzar]

3. Add @JsModule annotation on top of the file with the external function and refer the name of artifact file produced by emscripten

[Artem Kobzar]

I believe that it should work. I will try to make a repo with an example this week and share with you.

[Zoff]

wow cool. i will try it. and also wait for your example repo

[Zoff]

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

[Zoff]

any help on that?

[Artem Kobzar]

Hmm, this is a nice question. You can try to put the result into resources and refer JS file inside the @JsModule

[Artem Kobzar]

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.

[Zoff]

ok thanks cool

[Artem Kobzar]

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

[Zoff]

trying it now. its not working. how do you run it?

[Zoff]

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

[Zoff]

whatever i try i only get errors

[Artem Kobzar]

What error do you have?

[Zoff]

either this one:

[Zoff]

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 }

[Zoff]

or this one:

[Zoff]

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

[Zoff]

if i use the mjs file

[Zoff]

if i am running your code unchanged i get:

[Zoff]

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.

[Zoff]

browser-c-interop-example/local.properties (No such file or directory)

[Zoff]

this stuff is harder than i thought :)

[Artem Kobzar]

Add local.properties file with path to clang

[Artem Kobzar]

It should work after that

[Artem Kobzar]

I definitely need to add this step to README file. Sorry, my fault

[Zoff]

ah i need clang. i compile with emcc

[Zoff]

emcc \
--target=wasm32 \
-Wl,--export-all \
-s ASSERTIONS=1 \
-Wl,--no-entry \
-o lib.js lib.c

[Zoff]

what if i only have .wasm and .js (no .mjs) and i want to add this to kotlin? can i do that?

[Zoff]

do i need to compile with:

emcc -lembind \
--bind

or no bind?

[Zoff]

i think i really dont know how the "glue" between wasm and kotlin actually works under the hood

[Zoff]

Calculated result from C for 2 + 2 = 4

[Zoff]

cool ok with local properties the example works now

[Zoff]

now if i can just figure out how to use my self compiled wasm and js file. that i compiled with emcc

[Artem Kobzar]

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

[Zoff]

i can't get it to work with my own wasm. how do i need to compile it with "emcc" ? what options

[Artem Kobzar]

Could you share please the generated JS file?

[Artem Kobzar]

Maybe you will need to write a small wrapper for it

[Zoff]

i will put it on github. but i need a few days. super busy this week

[Zoff]

thanks for helping

[Zoff]

https://github.com/zoff99/wasm_test_1

[Zoff]

./generate_wasm.sh
./gradlew clean
./gradlew wasmJsRun

[Zoff]

ok, this first try does not work

[Artem Kobzar]

The fix for your example is here: https://github.com/zoff99/wasm_test_1/pull/1

[Zoff]

it also works with my compose components. i almost cant believe it :) :)