Support WASM as top-level import/resource?

[FredKSchott]

I'd like to support importing WASM directly as a resource inside of a Snowpack project.

import sample from './sample.wasm';

const instance = await sample({ ... });
console.log(instance.exports.main());

Is this something that people want? I'm conscious of the fact that no one has asked for this yet, but it feels like a good thing to support as a modern frontend build tool.

[jcschmidig]

Yes I'm definitely interested. We are currently developing a large base of microfrontend apps. There will be a demand for integrating WASM modules in the future.

[realdennis]

I sent the PR for this feature
#1680

[canadaduane]

I'm very interested in WASM, as it is completely blocking my use of snowpack at the moment (I had to switch to Webpack and stopped contributing to snowpack at this time, unfortunately).

I'm not sure if I would use WASM in quite this "direct" a way, however: in my case, I would like to load an NPM package that is bundled with JS and WASM, and treat it as an opaque import (or async import, if necessary). See #1356 (comment)

[canadaduane]

Yes, I believe rollup supports C++ wasm, but not wasm-bindgen from Rust. In addition, rollup currently adds 33% to the size of a wasm file due to its requiring it to be base64 encoded.

[FredKSchott]

oh interesting. If there's any better Rollup plugins for wasm out there, would love a link! Otherwise, you could try vendoring the WASM into your own deployed source code, in which case it wouldn't be bundled and could be loaded however you like.

I'm working on a WASM guide right now, but the tldr of current thinking is that it's on the user to load WASM themselves, and we won't officially support any import './foo.wasm' import sugar due to how differently every bundler treats this when you go to optimize your site.

[canadaduane]

I haven't been able to find a better rollup plugin, unfortunately. Only Webpack seems to get it right "out of the box". (There is a lot going on under the hood that I don't understand. For example, in rapier3d (a wasm-bindgen based project) there is a "raw.js" file that seems to be automagically loading itself in the npm package and I haven't been able to track down how this magic works. The "raw.js" file seems to be the bridge between how I import the npm package and how it loads wasm automatically.)

[canadaduane]

FWIW, there was a lot of discussion on improved WASM support in rollup last year (2019), but it seems to have died out.

[viridia]

Unfortunately, this doesn't help the case mentioned by @canadaduane - where you are importing an npm module that internally imports a wasm bundle. This case will likely be common, as many libraries hide the details of marshalling and unmarshalling the data being passed to the wasm environment, and instead give you a "friendly" wrapper API in JS.

In this case, there's no way for the application to load the wasm by some alternate method.

I ran into this case trying to use rapier3d with snowpack; I'm at a loss to figure out how to make the two work together.