Separate ES6 module build + WASM only build

[SimonBackx]

When using libsodium in your project in combination with a bundler like Webpack, you can use all sorts of optimization techniques such as tree shaking. This is only possible for ES6 modules (I believe this is also the case for other bundles such as Rollup). The problem is that the current build is not bundled as an ES6 module. You can do a seperate ES6 build by adding a seperate entry point for modules in package.json:

{
  "module": "./esm/dist/index.js"
}

In combination with this:

{
  "sideEffects": false
}

which is needed to indicate we don't do any special things on import.

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.

I would like to help to make the needed changes, as I believe this will make a BIG impact on the package size in most projects. Because the bundler will be able to remove lots of unused code. But for this to work we need 1. to build via emscriptend with ES6 modules and 2. change the wrapper.

Would you accept this kind of change to the project and do you have any additional remarks and tips where to start?

Other semi related question:
As I understand correctly, both the legacy asm.js and WASM build are combined in libsodium.js. Wouldn't it make sense to create separate builds? Some applications maybe won't require support for non-modern browsers. Plus, in combination with a bundler it might be possible to only load the needed build at runtime (and if we can make the libsodium-wrappers smaller, this will be a great combination for a lot of projects).

[jedisct1]

Sure, having smaller files can only be a good thing!

And having separate builds would be great as well. As you said, most browsers support WebAssembly these days (notable exceptions being IE and browser extensions), so it's about time to get rid of the JS version if applicable.

And your help would be more than welcome!

[RicardoSette]

I only use crypto_box_seal, I believe the reduction in JavaScript size will be significant.

Where can I help you with this?

[larry-xu]

Would appreciate having build options for WASM only, JS only, and WASM w/ JS fallback. The JS builds are still useful for browser extensions that can't readily support WASM without making some compromises.

[elsehow]

This is a great idea. Are there any updates on this?

[souljorje]

@jedisct1 would be glad to help but it's quite hard to understand how do you compile it right now. Maybe I could give you some basic explanation how i.e. rollup works? Modern bundlers (rollup/vite/pacel) have problems with libsodium, it's frustrating.
Related: airgap-it/beacon-sdk#138, ecadlabs/taquito#882

[jedisct1]

In order to compile it, emscripten needs to be installed.

Then, the make command compiles and bundles everything.

libsodium itself is compiled to wasm and Javascript by the libsodium/dist-build/emscripten.sh script.

It's compiled twice by that script:

  emccLibsodium "${PREFIX}/lib/libsodium.asm.tmp.js" -Oz -s WASM=0
  emccLibsodium "${PREFIX}/lib/libsodium.wasm.tmp.js" -O3 -s WASM=1

First to Javascript and then to WebAssembly.

In that file, you can also see how the libsodium.js file is built. It adds some initialization code that evaluates either the JS or the WebAssembly version according to the environment, and then inserts the Emscripten-generated code of both versions.

[souljorje]

@jedisct1 thanks, already playing around!

[reinos]

Any update for this issue?

[xt0rted]

Now that tweetsodium is pointing people to this library I tried to migrate one of my github actions but since I'm targeting esm as my output I end up with this error when I try to run it:

ReferenceError: __dirname is not defined

I'm bundling with ncc and the issue seems to go back to webpack (ref vercel/ncc#749), but there doesn't seem to be a workaround for this currently aside from this library publishing an esm version.

[maccman]

I would also love to see this in libsodium. It's our biggest dependency right now.

[pleerock]

No, seriously, we need ESM support.

[Mikescops]

Anyone up to make this happen? Would be huge leap forward for the community 👀

[masonicboom]

WIP #337