The instructions at “Getting Started/Project Setup/Using wasm-pack” are extremely unclear

[yewstack]

The instructions at “Getting Started/Project Setup/Using wasm-pack” are extremely unclear

[jstarry]

Totally agree that the docs need to be much clearer. I think this might be more of an examples issue than a docs issue

---

Edited to remove incorrect statement about tooling

[jstarry]

No it's definitely a docs issue, it doesn't say where the main.js comes from

See here: https://github.com/yewstack/yew-wasm-pack-minimal/blob/master/main.js

[loewenheim]

Thank you, with that file, I eventually got it working.

1. Add main.js to the project root:

import init, { run_app } from './pkg/todomvc.js';
async function main() {
   await init('/pkg/todomvc_bg.wasm');
   run_app();
}
main()

2. Add the wasm-bindgen dependency to Cargo.toml and the following function to src/lib.rs:

use wasm_bindgen::prelude;

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

    Ok(())
}

3. Run rollup main.js --file pkg/bundle.js --format iife
4. In static/index.html, change the line

<script src="/todomvc.js"></script>

to

<script src="../pkg/bundle.js"></script>

5. Run python -m http.server 8000 --directory static

Is this how the examples are intended to be built and run? In that case, I can try fixing them up and expanding the documentation.

[jstarry]

Honestly, it's hard to answer that.

I'm not a big fan of the wasm-pack experience. It works well enough with webpack.. but on its own, not great. It would be nice if it supported binary crates, for one. Then you wouldn't need to add that lib stuff to the Cargo.toml and add an extra run_app method. Furthermore, it should bundle the JS for you without needing rollup. These shortcomings are part of the reason I think we should have a new CLI tool specifically for web apps. (wasm-pack was originally created for packaging up wasm into npm modules)

I think for the examples we can get by with a script that calls wasm-bindgen for you. Check out https://github.com/yewstack/yew/tree/master/examples/multi_thread for an idea of how that would work.

For the docs, we should add your steps that you've laid out since the "Using wasm-pack" section is totally broken. Do you mind fixing that?

[loewenheim]

No, I can do that. Should I refer to the wasm-pack-minimal template?

Also, what would you say is the best way to actually produce a frontend app? The wasm-bindgen method you posted above?

[jstarry]

Best is too subjective IMO. My personal app uses webpack + wasm-pack but that's just because I'm really familiar with webpack.

I don't think Yew needs to give a strong recommendation at this point. I think the ideal solution is basically laid out here: yewstack/yew#1086

[loewenheim]

I finally got around to trying one of the examples (the todomvc one, again) with the wasm-bindgen method from https://github.com/yewstack/yew/tree/master/examples/multi_thread. Dear lord, that was so easy. The docs for wasm-bindgen are currently nonexistent, would that multi_thread example be a good starting point for writing some?

[Stigjb]

I remember an issue I had getting started with wasm-pack/rollup where the problem turned out to be the Node version I was using. I had to tell NVM to use a much more recent version than the system version, but this was not at all clear from the error message I got. Maybe specifying a minimum Node version in the Getting Started section would be nice.