A question about your project structure

[am2222]

Hi,

I am working on creating a wasm library which user is able to load in node, vanila js and react! So far the build environment is working however I have a couple of issues which I came across your project here and it seems your project solved those issues. I have a few questions I appreciate your help about them!

Once we compile our project with emscripten it generates a wasm and js file. I was wondering how are you loading wasm files into different environments? I see there is a loader interface available but it is a bit unclear to me where and how wasm files are loaded. Can you please give me some ideas about structure of the loading process?

Thanks!

[GordonSmith]

Its a small bit convoluted - but some general comments:

• Depending on your wasm capabilities, you may need to compile twice:
  • Once for NodeJS
  • Once for Browser
• In my case my browser version will work with NodeJS, but the emscripten loader diffs were annoying me so I:
  • Compile the wasm
  • Compress it with zstd
  • Encode it to Base91
  • Embed it into a JavaScript wrapper which decodes and expands it into memory, which can then be referenced directly in the emscripten loader code (and is compatible with NodeJS and Browser)

hths

[am2222]

@GordonSmith Thanks for your help. So I managed to follow some of your practices. However, I have a couple of questions. I appreciate if you please help me with them
1- I noticed you are loading wasm file as binary. Is there any specific reason for that? My wasm file is around 400kb after zstd compression.
2- by emscripten loader code, do you mean the js file that emscripten creates?
3- for some reason when I am loading my wasm file from wasmBinery it loads in firefox but chrome does not allow me to load it and raises the webassembely.compile limitation (Uncaught RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread.). Have you faced such a problem during your project?

Thank you so much!

[GordonSmith]

1 - Since I am storing the wasm in JS and when decoded and decompressed I have the "binary" file in memory ready to go, so no need to let emscripten try and locate and load it for me (one of the pain points)
2 - Yes
3 - The error you are seeing is accurate - you are loading it on the main thread... To work around it you need to load it within a promist:

  const wasmPromise = new Promise((resolve, reject) =>{
    //  Your wasm load and init code here...
    return wasmWrapper;
  });
  wasmPromise.then(wasmWrapper => {
    wasmWrapper.doStuff();
  });

[am2222]

Thanks @GordonSmith

I am just curious about the web-worker file you created. Do we need to modify anything when compiling our code to wasm to be able to use it?

[GordonSmith]

No - but you will have to write different JS to communicate with your main web application.