Yew: When using wasm-bindgen, build with js-sys and web-sys

[jstarry]

The rust / wasm community has adopted web-sys and js-sys as the foundational crates for building web applications. web-sys is generated from WebIDL specs which ensures it will be both complete and up-to-date. Furthermore, once interface types became a reality, Yew will be better suited to take advantage of the performance gains.

Since wasm-bindgen doesn't support asm.js and emscripten, the current plan is to continue support for those with stdweb

[ctaggart]

The host bindings link is no longer working. I think it is now called interface types and is at https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md . The announcement being https://hacks.mozilla.org/2019/08/webassembly-interface-types/ .

I've figured out how to call the APIs I want to interoperate with using wasm-bindgen. With some help, I was able to get it working with Rust's new async/await support. I'm now trying out yew and trying to figure out where it can be plugged in. This example from @extraymond looks like it may be possible.

I'm a little confused... ~Can I use yew without stdweb?~ Can the JavaScript interop be used from both stdweb and js-sys?

What is the easiest way to use async / await Rust support on top of js-sys web-sys in yew?

[ctaggart]

I figured out some answers to my earlier questions.

Can the JavaScript interop be used from both stdweb and js-sys?

Yes, stdweb is compatible with wasm-bindgen stuff like js-sys. I compile my yew project with:

wasm-pack build --target web

With this in my lib.rs:

#[wasm_bindgen]
pub fn run_app() -> Result<(), JsValue> {
    yew::start_app::<Model>();
    Ok(())
}

What is the easiest way to use async / await Rust support on top of js-sys web-sys in yew?

I mentioned last week that wasm-bindgen-futures 0.4.5 supports spawn_local.

    spawn_local(async move {
        let branch = get_branch().await.unwrap_throw(); // vs unwrap?
        branch_received.emit(branch);
    });

[daxpedda]

See the referenced PR's. Shouldn't be too far away now.

[derekdreery]

I have lots of experience with wasm-bindgen, and want to use yew for a web site, so I'd be happy to help if you've got any questions, or work that needs doing.

[daxpedda]

I have lots of experience with wasm-bindgen, and want to use yew for a web site, so I'd be happy to help if you've got any questions, or work that needs doing.

Thats amazing! My experience with both wasm-bindgen and yew was very limited until now 😄.
I'm already done with everything, I've a couple of tiny patches I will push now and the examples/tests locally that I will push tomorrow.

A code review would be very appreciated!

[daxpedda]

@derekdreery everythings done from my side, a code review would be very welcome!

[derekdreery]

I've been playing with yew with all the PRs merged and it all seems to work fine :). I'm planning to build a reasonably sized website with yew so I'll see how it works with the web-sys backend :). Code all looks good to me, only suggestion I might make is to consider cfg_if for making the different cfg stuff clearer.

[daxpedda]

Thanks! I tried it in #818.