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

I’ve been trying and failing for a while to apply the instructions to the web-sys examples in the yew repository. I’ll take todomvc as an example. Everything up to and including wasm-pack build is fine. The problems start at the next line:

rollup ./main.js --format iife --file ./pkg/bundle.js

Ok, there is no main.js, so maybe I should put pkg/todomvc.js? Well,

> rollup pkg/todomvc.js --file ./pkg/bundle.js

pkg/todomvc.js → ./pkg/bundle.js...
[!] Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
pkg/todomvc_bg.wasm (1:0)
1: asm
…

Ok, so I need to install a wasm plugin for rollup with npm install @rollup/plugin-wasm --save-dev and add a file rollup.config.js containing

import wasm from '@rollup/plugin-wasm';

export default {
  plugins: [wasm()]
};

Now I can run rollup -c rollup.config.js pkg/todomvc.js --file pkg/bundle.js. Cool. The next step is

python -m http.server 8000

(or any other server, as the tutorial notes). Running this and visiting localhost:8000 in my browser shows me the contents of the todomvc directory. Ok, not exactly what I wanted, so I run

python -m http.server 8000 --directory static

because index.html is in the static directory. This time I get a page with the title Yew • TodoMVC, which is good, but the page is entirely blank. The console shows the error message Loading failed for the <script> with source “http://localhost:8000/todomvc.js”., which makes sense to me because todomvc.js resides in pkg. Also, I am now unsure whether using rollup even accomplished anything because I haven’t interacted with bundle.js in any way.

Maybe I’m going about this very stupidly. After all, I am a complete beginner when it comes to any sort of web development.

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

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

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

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()

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(())
}

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

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

to

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

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.

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?

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?

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

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?

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

jstarry commented on Apr 24, 2020

jstarry commented on Apr 24, 2020

loewenheim commented on Apr 24, 2020

jstarry commented on Apr 24, 2020

loewenheim commented on Apr 24, 2020

jstarry commented on Apr 24, 2020

loewenheim commented on May 12, 2020

Stigjb commented on May 13, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions