Minimal wasm-bindgen example

[kellytk]

Description

I'm submitting a ...

• feature request

It would be helpful if a minimal example demonstrating the use of wasm-bindgen existed.

cargo build --target=wasm32-unknown-unknown combined with a set of reusable index.html and load.js artifacts should be all that's involved in the build process.

[extraymond]

I think you might be interested in this:

https://github.com/yewstack/yew-wasm-pack-template

[kellytk]

@extraymond Thanks, however I've seen that and it's what I'd like to avoid. I fail to see why the use of yarn should be required and how that's an improvement over cargo web. Being that my goal is to move to a completely Rust-based stack it's actually a step backward in that regard.

[extraymond]

While I agree yarn/npm in general doesn't gave us the best experience desired.

Currently it seems not viable to build projects that use wasm-bindgen under cargo-web, you can see the discussion here.

On the other hand, what the js ecosystem provides, is minimizing the cost for us to manage resources that are eventually going to be build into the web. Which I think it's not a bad thing just to use it to build the bundle.

If you find webpack to be too complex (which I do), you can use parcel, which rustwasm team has a nice template. Parcel requires almost zero configuration to get started.

It works like this:

parcel index.html

Which will use index.html as the entry point, and gather imports in it, in the case of the repo, it will load the index.js.
And what webpack/parcel or similar to what cargo-web does for us, is that in the index.js file, when resolving imports that contains something like this:

import { name } from "Cargo.toml"

It will trigger cargo to build the wasm blob, and generate the import code that makes our rust code preserve the namespace we defined with functions having #[wasm_bindgen] attached to it.

---

It would be awesome if cargo-web eventually start to support buliding wasm-bindgen projects, js bundlers are useful tools when you want to import css/external html files too, so consider giving it a try.

If you are interested in using parcel, you can see my repo. I leave most of the options the same as the rustwasm-parcel template, with the addition of add bulma(bootstrap alternative) into my package.json depedency.

Hope this helps.

[kellytk]

@extraymond cargo web works fine with stdweb. wasm-bindgen is not worth going back to the yarn/NPM dark ages and that's why I created this issue. Hopefully there's an alternative.

[extraymond]

I believe there are plans for stdweb and wasm-bindgen to cooperate.

As of now, the strongest reason for going closer with wasm-bindgen instead of stdweb would be their effort among webidl, which in theory will gave rust code direct access to web-api.
And with wasm-bindgen, users can use async-await with their updated wasm-bindgen-futures crate too. So sticking closer to wasm-bindgen will only benefit us in the long run.

I am interested in an all rust building pipeline too, just that it's not that handy viable right now. Some projects create their own build.sh to do so, which I think might be what you looking for. Check out percy's page, They use wasm-pack under the hood.

Edit: viable -> handy, sorry for wording.

[kellytk]

@extraymond An all-Rust build pipeline is viable already. As I said, cargo web and stdweb work fine without wasm-bindgen. If wasm-bindgen isn't mature enough to be useful in that scenario that's a separate issue.

[extraymond]

You are correct on cargo-web and stdweb. It's an viable option, which we can still use today. I'm more answering your question about how to build with wasm-bindgen. Which is possible with yarn(bundler) or not(wasm-pack).

What I want to say is that, I understand and totally agree the choice to go closer with wasm-bindgen. Unfortunately it wasn't that handy vs cargo-web/stdweb. But on the contrary cargo-web/stdweb wasn't aiming for the same stuff wasm-bindgen wants to tackle too. So saying wasm-bindgen isn't worth trying because they tend to use yarn/npm to help itself isn't that fair for the project in my opinion.

As of now, if you want to skip yarn, just use wasm-pack to get the compiled bundle. And import it into your entry.js would be straight forward enough.

[kellytk]

Thanks @extraymond for the pointers. I've created a project demonstrating the minimal use of Yew, wasm-bindgen, and wasm-pack together and clearly delineating the use of an unfortunately temporarily necessary JavaScript bundler.